1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 簡単にサイトの表示速度を高速化する方法!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Chromeを簡単にカスタマイズ!14色の公式ブラウザテーマを公開!

Chromeを簡単にカスタマイズ!14色の公式ブラウザテーマを公開!

Googleの「Chrome」チームが初となるChromeの公式テーマを公開しました。今回公開された14色のカラーリングは色合いや濃淡も様々なものが用意されています。これらのテーマ...

PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!

PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!

一般的なWebサイトに用いられている画像はPNGやJPEGがほとんどですが、今回はWebサイトにおける次世代画像フォーマットのWebP(ウェッピー)の話をしたいと思います。WebPはG...

JPEG/PNG形式の画像をWebPへ一括変換できるソフト「WebPconv」が便利!

JPEG/PNG形式の画像をWebPへ一括変換できるソフト「WebPconv」が便利!

今回紹介するのはJPEG/PNG形式の画像を次世代画像フォーマットである「WebP」(ウェッピー)に一括変化することができるソフトである「WebPconv」を紹介したいと思います。We...

Googleが提供する画像をブラウザ上で最適化して圧縮できるサイト「Squoosh」!

Googleが提供する画像をブラウザ上で最適化して圧縮できるサイト「Squoosh」!

Webサイトで画像を掲載する際に、画像の画質やファイルサイズを最適化して圧縮するのはサイトの表示速度を高速化するためにも必須の項目です。そこで今回紹介するのはGoogl...

無料で使えるオンラインのポスター&チラシメーカー「DesignCap」が便利!

無料で使えるオンラインのポスター&チラシメーカー「DesignCap」が便利!

今回紹介するのは簡単にハイクオリティなポスターを作ることが可能な無料のオンラインのポスター&チラシメーカーである「DesignCap」です。このDesignCapを使えばソフトウ...

CORSAIR 簡易水冷CPUクーラーH60の新旧を比較してみました!

CORSAIR 簡易水冷CPUクーラーH60の新旧を比較してみました!

ちょっと前からCORSAIRの簡易水冷CPUクーラーからカラカラという異音が聞こえるようになってきたので、CPUクーラーを買い換えることにしました。そんなわけで今回はCORSAIR...

Xボーダーを使って日本に発送できない海外サイトの商品を購入する方法!

Xボーダーを使って日本に発送できない海外サイトの商品を購入する方法!

以前に、AmazonUSで日本に発送できない商品も日本語で簡単に買える「Xボーダー」がすごい便利!という記事で紹介した「Xボーダー」ですが、実はこのXボーダーは海外のAmazo...

送料込み28円!?スマホ三脚固定ホルダー(ブラケット)を買ってみた!

送料込み28円!?スマホ三脚固定ホルダー(ブラケット)を買ってみた!

今回はスマートフォンを三脚固定するためのホルダーの三脚ブラケットがAmazonで送料込み28円という超激安価格で販売されていたので一つ購入してみました。そこで今回はスマ...

Windows標準搭載の仮想デスクトップを便利に拡張できるソフト「Sylphyhorn」!

Windows標準搭載の仮想デスクトップを便利に拡張できるソフト「Sylphyhorn」!

今回紹介するのはWindows10の仮想デスクトップの機能を更に便利に拡張できるソフトの「Sylphyhorn」を紹介したいと思います。Windows10から標準で搭載されている仮想デスク...

NetaGear RSS News

Now Loading

Article

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

 html+CSS+javascript 
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

Popular Article

Access Ranking

Now Loading...

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