1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 簡単にサイトの表示速度を高速化する方法!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

今回はWindows・Macどちらでも使える無料で使える3DキャラメイカーのVRoid Studioを紹介したいと思います。3D制作の知識がなくても誰でも簡単に自分だけのオリジナル3Dのキ...

360度角度調整可能なKeynice USB扇風機クリップ型を買ってみた!

360度角度調整可能なKeynice USB扇風機クリップ型を買ってみた!

今回紹介するのは縦横360°回転&細かな角度調節が可能なKeynice クリップ型USB扇風機です。USB電源で動作する小型な扇風機で、クリップを使うことでどこでも挟んで使えるほ...

WindowsにKerasとTensorFlow(GPU)をインストールして機械学習の環境を作ろう!

WindowsにKerasとTensorFlow(GPU)をインストールして機械学習の環境を作ろう!

ここ最近は機械学習にはまっていて、前々から気になっていたTensorFlowを試してみたいと思い、実際にWindowsにインストールしてみたので、その導入手順を紹介したいと思い...

スマホ用のBluetoothカメラリモコンが送料込み67円だったので買ってみた!

スマホ用のBluetoothカメラリモコンが送料込み67円だったので買ってみた!

今回紹介するのはスマートフォン用のBluetoothワイヤレスカメラリモコンです。Amazonで衝撃的な安さで販売されていたので試しに購入してみました。このBluetoothリモコンを...

Amazonのお急ぎ便で配送予定日に届かずカスタマーサービスに伝えたらクーポンがもらえた話!

Amazonのお急ぎ便で配送予定日に届かずカスタマーサービスに伝えたらクーポンがもらえた話!

先日アマゾンプライムデーセールが行われていた影響か、アマゾンでの荷物の出荷数が通常よりもかなり増えてクロネコヤマトの配送に遅延が発生しているようです。そんなわけ...

無料で使える軽量なコードエディタの「Visual Studio Code(VS Code)」を使ってみよう!

無料で使える軽量なコードエディタの「Visual Studio Code(VS Code)」を使ってみよう!

今回紹介するのはMicrosoftが無償で提供しているソースコードエディタであるVisual Studio Code(VS Code)です。VS CodeはWindows/Mac/Linuxの全てで動作します。私は個人的...

マイクロナノバブルシャワーヘッド「Bollina Ninfa」を買ったみた!

マイクロナノバブルシャワーヘッド「Bollina Ninfa」を買ったみた!

今回紹介するのは株式会社TKS 田中金属製作所が制作したマイクロナノバブルシャワーヘッド「Bollina Ninfa(ボリーナ ニンファ)」TK-7100-SLです。マイクロナノバブルと...

NetaGearで無限スクロール対応とカテゴリー追加などのアップデートを行いました!

NetaGearで無限スクロール対応とカテゴリー追加などのアップデートを行いました!

今年の2月にデザインや機能において大幅なアップデートを行ってから順調に利用者が増えているNetaGearですが、今回無限スクロールに対応して今までよりも見やすくなりまし...

adbコマンドを使ってPCからAndroidのスクリーンショットを取る方法!

adbコマンドを使ってPCからAndroidのスクリーンショットを取る方法!

今回はAndroidでadb接続からスクリーンショットを取る方法を紹介したいと思います。通常のAndroidのスマホやタブレットでは電源ボタンと音量ボタンの長押しで簡単にスクリ...

タブレットやスマホを自由に配置できるタブレットアームを買ってみた!

タブレットやスマホを自由に配置できるタブレットアームを買ってみた!

今回はタブレットをいろいろな場所に自由に配置することができるタブレットアームを購入したので紹介したいと思います。先日の記事のタブレットをPCのサブディスプレイ化で...

NetaGear RSS News

Now Loading

Article

簡単にサイトの表示速度を高速化する方法!

April_Fools_Day_2010_001.png

今回は運営者必見の簡単なタグを埋め込むだけでサイトの表示速度を高速化する方法を紹介したいと思います。サイトを運営している人にとっては、表示速度を少し早くするためにさまざまな努力をしていると思いますが、もうそんな努力は必要ありません。

たった数行のコードをソースコードの<head>~</head>内に入れるだけで表示高速化が実現できます。この方法は実践段階になりつつあるCSS3のtransformを用いることで表示処理を通常と変えて高速化を行っています。IE7,IE8,firefox3.6,Google Chome,Opera10.50などさまざまなブラウザで動作が確認されているので安心して導入できます。
April_Fools_Day_2010_002.png

このように表示速度は各ブラウザ軒並み高速化していることが分かる。これをみるだけでもこのタグを導入する意味の大きさを理解することできる。

高速化コード


<style type="text/css">
<!--
html {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
-o-transform: rotate(-180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
//-->
</style>


ただし、この高速化のタグを導入することでサイト表示にちょっとした弊害も生じますが、本当にそのサイトを心から愛し、どんな記事でも読みたいと思っている人は逆立ちしながらでも読んでくれるはずです。ここ最近では、ユーザビリティのないサイトはダメだとかいろいろと取りただされていますが、たった画面が上下反転したくらいで記事を読んでくれない人はサイトへの愛が足りないです。

なので、サイト閲覧者のユーザビリティよりもサイトの表示の高速化を一番に考えている人は、ぜひこの高速化コードを試してみてはいかがでしょうか?

April_Fools_Day_2010_005.png

もちろんこのサイトのトップページでも高速化を導入しています。なんといっても、このサイトの閲覧者は愛にあふれているので逆立ちしながらでもきっと見てくれると私は信じています。現在はテスト段階のためトップページのみ適応してあります。http://shopdd.blog51.fc2.com/からデモを閲覧できます。


閲覧者の姿勢について


このコードが入っているサイトは表示速度の向上のために閲覧者には苦労を強いる形となるため、閲覧者も特別な行動をしなければならない。管理人の考えられるパターンとしては2つ用意してみた。これ以外におススメの方法があればコメント欄に書いて欲しい。

モニタの上下反転


April_Fools_Day_2010_003.png

一つ目の閲覧方法としては、表示されている画面が上下反転しているならば、液晶自体を上下反転させてみるみればいつも通り閲覧できるという寸法だ。※天井から吊るすことを推奨。

逆立ち


April_Fools_Day_2010_004.png

天井からディスプレイをつるすことができなくても、腕力があれば問題ない。上下が反対ならば、逆立ちして逆向きから閲覧すれば事実上正しい向きになる。逆立ちができない人は今から一生懸命練習しよう!

その他


もちろんそのまま閲覧しても、ここ最近廃れてきた脳トレにも一役買うことは間違いだろう!脳の老化防止の一環として今さまざまなサイトで導入されています。まだ導入していない人は急いでタグを入れないと流行に乗り遅れるぞ。ちなみにあのタグは本当にサイトを反転させるので、サイトを持っている人は試してみるとおもしろいかもね。

この情報を幅広く知ってもらうために、ついったーなどで広めてもらえるとありがたいです!
Tag

Related article

COMMENT TO THIS ENTRY

今回も流石っすね

7942

いやいやwwwマジでビビったからw

7943

一瞬何が起こったのかわからなかったww

7944


もぉひとつ

画面の下に鏡を置く

7945

毎年クオリティがwwww流石っすwwww

7946

エイプリルになって最初に見たかったサイトでしたww
どうもありがとうございましたwww

7947

まぢすげぇw尊敬しますわ

7948

過去に、裏枝(2、3年前だったかな?)で気付かなかったけど今回は一発で気付いて笑ったw

7949

Ctrl+Alt+↓でも対応出来ると思います

7950

やられました!面白いっすw

7951

逆向きにサイトつくってこのスクリプトあてればいいのか!!1111

7952

くだんねェ~
良い意味で

7954

ctrl+alt+↓押したらマウスが扱いづらいw

7955

ぎゃはっ!
記事面白いです~(^^)
でも、ホント最初自分の目を疑いました!

7956

怖いコワイ・・・。

ホントにやったらどうなるの?

7957

逆に物凄く重かったけど…

7959

使わさしてもらいます!!

7960

あ、ありのまま(ry
面白いなぁw

7961

topだけとか規模が小さいよ
全て反対にしたらよかったのに

7962

気合い入りすぎwwww

7963

よwwwみwwwづwwwれwっうぇwww

7965

Most Popular

Now loading...

Social Links

Sponsored Link

MENU

NetaGear

Pure Css Design

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位50位が表示されます。今ならリンクするだけで簡単に上位に表示されます。

Amazon

Now Loading...