1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 簡単にサイトの表示速度を高速化する方法!

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

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

    パソコンやスマホなどのガジェットに興味があり、大学で情報工学の勉強してシステムエンジニアに。ブログ歴は15年以上。ITの専門的な知識はそこそこあり、国家資格の情報処理技術者試験のスキルレベル4「情報セキュリティスペシャリスト」や「ネットワークスペシャリスト」などを取得。

    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