一度、◯◯を〇〇する◯つの方法って書いてみたかったんで、書いてみた。

まあ、それは置いといて、回線やサーバーの性能以外の部分でブログやホームページの表示をできるだけ速くしたいと思ったりしますよね？色々試してますが効果があった３かの方法を書いておきます。

---

HTMLをW3Cに準拠する。

W3C準拠というのは、要するにHTMLの文法をちゃんとしようということで、通常ブラウザさんはとっても頑張り屋さんで多少文法的におかしかったりタグが足りなかったりしても自分で何とかして表示しようとしてくれます。なので気づかないことも多いのですが、実際には文法的におかしなことをしていることがよく有ります。

それで文法を正しくすればどうして表示が早くなるのかというと、要するにブラウザさんが頑張って余計な仕事をしなくて済むので表示が早くなるわけです。内部ではここタグの対応がおかしいけどきっとこうだよなーとかやってくれているわけですが、それがなくなるわけです。それも数が１個や２個ならまだしも何百個もエラーがあるページもざらなのでこれを正しい文法に直してあげるだけで結構体感出来るくらい表示が早くなったりします。

通常HTMLの文法は大きく分けて下の様にドキュメントタイプを宣言してXHTML 1.0かHTML 4.01で書かれている場合がほとんどだと思います。

 

 

この二つのドキュメントタイプですが結構タグの記述が異なります。例えばBRタグ一つとってもXHTMLでは<br />と書くしHTMLだと単に<br>となります。imageタグもXHTMLでは<img src=https://blog.kumacchi.com/img/kumatype2.gif />となりHTMLでは<img src="https://blog.kumacchi.com/img/kumatype2.gif>となります。基本的にXHTMLの方は従来のHTMLと違って「/>」でタグを閉じる事になっています。

しかし、ブログなどにブログパーツをつける場合に発行されるタグはこれを考慮していない場合がおおく、大抵どちらか用かひどいと混在したようなタグを発行したりします。そのタグだけでエラーが増えたりします。規約的に問題が無ければブログパーツのタグもページに文法をあわせて修正した方が無難です。

では、文法が正しいかチェックする方法ですが、これにはいくつか方法があります。ページの文法をチェックしてくれるサイトを利用するか、文法をチェックするブラウザのプラグインを利用する方法などがあります。

Webサイトを利用する場合は下記のサイトが有名です。

The W3C Markup Validation Service

使い方は簡単で、Address欄にチェックしたいページのURLを入力して。[Check]のボタンをクリックするだけです。

こんな感じでエラー数を表示してくれて、その下に詳細を表示してくれます。

一番上のエラーはimageタグにalt属性が指定されていないのでエラーが指摘されています。画像が無いときに変わりに表示するテキストの事ですね。画像の表示自体には問題ないことですが、SEO的にも出来るだけ指定しておいた方がいい属性です。

二番目のエラーは多分pタグの中にhrタグが入っているのがエラーの原因だとおもわれます。

ブラウザのプラグインを使ったチェックの方法ですが、ここではFirefox様のHtml Validatorを紹介しておきます。いろいろ似たようなものがあるようなので好みのものをインストールすればいいかと思います。

三番目もalt属性の指定が無いので怒られています。

Html Validator :: Add-ons for Firefox

使い方は簡単で、プラグインを入力した後はページ上で右クリックしてメニューから「ページのソースを表示」を選択して通常使うページの表示を行うだけです。

するとソースの表示画面の下にエラーチェックの結果の表示が追加された状態になり、エラーの位置と内容を確認する事が出来ます。チェックの結果はほぼウェブ版と同じです。デフォルトの設定では多少HTML版より細かくチェックしているようです。

（クリックでもとのサイズで表示）

このブログのトップページは現在3件のエラーが検出されていますが直す前は300件ほどのエラーが検出されていました。修正した結果体感できるほど表示速度が変わりました。

ためしにYhaoo! Japanのページをチェックしてみたところ。70個のエラーと8個の警告が検出されています。

 

googleは119個のエラーと35個の警告

某痛いニュースは999個のエラーと10個の警告。

無料レンタルブログの場合は強制的に広告挿入などがされたりしますが、この強制的に挿入されるタグが文法を無視したり間違ってたりする事がよくあるので何とかしてもらいたいと思う事が良くあります。こちら側では対処できないですからね。

999個もエラーがあれば修正したらかなり体感できるくらい表示が速くなるのではないかと思います。

あー、各記事のページをチェックしてみたら3869個とかエラーが検出されてますねー最近2ちゃんまとめブログ系で痛いニュースだけ異様にスクロールがもたつくのはこのせいでしょうか？他にもいくつかチェックして見ましたが大体まとめ系ブログは500～3000位はエラーが検出されるようです。

 

大手ショッピングサイトの楽天やアマゾンでさえ数百個のエラーがある状態です。webデザイナーやプログラマが気を使ってなければこんな感じなんでしょうね。

そういうわけでブラウザに余計な仕事をさせないようにすればおのずとページの表示は速くなるでしょうというお話でした。

---

JavaScriptを最適化する

JavaScriptを多用しているページではJavaScriptをオプティマイザー最適化することで読み込み速度を早くして表示速度を上げることが出来ます。日本語文字などもJavaScriptが認識しやすいコードに変換されたりコード自体も最適化されるので実行速度の向上も期待できると思います。使い方も簡単で基本的名使い方は「Add a URL」にJavaScriptのURLを貼り付けて[Add]ボタンを押して[Compile]をクリックするか、左側のテキストエリアに直接JavaScriptを貼り付けて[Compile]をクリックすると、右側にコンパイル結果が表示されます。[success!]と表示されていれば最適化成功です。そのコードを今のJavaScriptの代わりに利用するようにすれば高速化が期待できます。JavaScriptの難読化にも利用できます。最適化後のソースは人間が読むのには不向きなのでちゃんと保存しておきましょう。というか、最適化後のソースは別名で保存して利用するといいでしょう。

closure-compiler – Project Hosting on Google Code

（クリックでもとのサイズで表示）

これも、JavaScriptを多用しているサイトではページ表示の高速化が体感できるかと思います。

---

スタイルシートの最適化

スタイルシートも最適化すると無駄が無くなってページの表示速度の向上に役立ちます。下のツールなどが有名です。利用方法も上記のJavaScriptのオプティマイザーと似たような感じです。インタフェースも日本語なのでわかりやすいと思います。設定は特に弄らなくてもデフォルトのままで十分最適化してくれます。他にも似たような最適化ツールが色々あるので好みのものを探してみるといいでしょう。

CSS Optimizer (CSS最適化ツール)-CSS TIPS

---

番外編

他にも、無駄なブログパーツをつけないとか、思いブログパーツははずすか代替の物に変えるなど割と手軽に出来る当たり前の対応があると思います。

FireFoxであればFirebug等を使えば以下の様に何の読み込みにどれくらいの時間が掛かっているかを調べる事が出来るのでボトルネックの原因を調べ出す事が出来ます。

Firebug :: Add-ons for Firefox

 
（クリックでもとのサイズで表示）

タグ : javascript, スタイルシート