1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 簡単にサイトの表示速度を高速化する方法!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

2012年から発売しているSONYのネットワークレコーダーの「nasne」がついに近日出荷が終了するとのアナウンスがされました。nasneとプレイステーション、スマートフォンをつ...

最大92%オフ!VEGAS全製品を安く入手できるスーパーチャンスキャンペーン!

最大92%オフ!VEGAS全製品を安く入手できるスーパーチャンスキャンペーン!

現在ソースネクストでは、VEGAS全製品を安く入手できるスーパーチャンスのキャンペーンを実施しており、最大で92%オフでVEGASシリーズの製品を販売しています!キャンペー...

24時間限定でEaseUS Todo PCTrans Proが無料で手に入るキャンペーン!

24時間限定でEaseUS Todo PCTrans Proが無料で手に入るキャンペーン!

EaseUS Softwareは、PC引っ越しソフト(データ移行ソフト)であるEaseUS Todo PCTrans Pro 10.5の最新版の公開にあたって、EaseUS Todo PCTrans Pro 10.5のライセンスコード...

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

先日の記事でNetaGearやDuelLinks.netでも「ホーム画面に追加」を実装して、WEBサイトをアプリのようにスマホのホーム画面に簡単に追加可能な「ホーム画面に追加」ボタンを...

NetaGearに「ホーム画面に追加」ボタンなど追加するアップデートを行いました!

NetaGearに「ホーム画面に追加」ボタンなど追加するアップデートを行いました!

久しぶりにNetaGearのアップデートを行いました。主な変更点は3つでNetaGearに何度かアクセスしている人に表示される「ホーム画面に追加する」ボタンが表示されて、スマホ...

Amazon EchoシリーズがMusic Unlimitedに新規登録すると半額に!無料体験でも可能!

Amazon EchoシリーズがMusic Unlimitedに新規登録すると半額に!無料体験でも可能!

Amazonでは、Amazon Music Unlimitedへの新規登録で対象のAmazon Echoシリーズが50%OFFになるキャンペーンを開催中です!キャンペーン期間は2019年6月11日(火) 00時00分~6...

通信できない時だけ表示されるChromeの恐竜ゲームで遊ぼう!

通信できない時だけ表示されるChromeの恐竜ゲームで遊ぼう!

今回は、Google Chromeで通信ができない(オフライン)時にだけ表示されるゲームについて紹介したいと思います。すでに知っている人もいるかも知れませんが、Google Chromeに...

遊戯王デュエルリンクスのカード検索サイト「DuelLinks.net」を作りました!

遊戯王デュエルリンクスのカード検索サイト「DuelLinks.net」を作りました!

本日2019年6月8日より遊戯王デュエルリンクスのカード検索サイトであるDuelLinks.net(デュエルリンクスどっとねっと)を公開しました!遊戯王デュエルリンクスのゲーム内で...

初心者でも簡単に動画編集が可能なMovavi Video Editorを使ってみた!

初心者でも簡単に動画編集が可能なMovavi Video Editorを使ってみた!

今回紹介するのは初心者でも誰でも簡単に動画編集が可能なソフトのMovavi Video Edittorを紹介したいと思います。動画編集ソフトもプロ用な多機能なものなど色々なものがあ...

NetaGear RSS News

Now Loading

Article

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

Webデザイン > 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位が表示されます。今ならリンクするだけで簡単に上位に表示されます。