PageSpeed を参考に Web ページの表示速度向上のためにやってみたことのまとめ

  • SEO
  • 現在地

ここしばらく、Yslow と PageSpeed の指示に従って、ウェブページの表示速度を向上させるために改善してきたわけですが、そろそろできることもなくなってきたので、一つまとめページを作っておくことにします。

PageSpeed の項目一覧

この項目一覧は Firefox 版 PageSpeed 1.11.2.1 を参考に作成していますので、Minimize DNS lookups とか載っていなかったりします。

また、あくまで自分なりの解釈で記述しているので、間違っている部分もあると思いますが、ご了承ください。

コンテンツ関連 : HTML

リダイレクトの回数を減らす / Minimize redirects
リダイレクトをすること自体が HTTP リクエストを増やしてしまうので、必要最小限にとどめましょうというもの。
誤りのあるリクエストを送信しない / Avoid bad requests
404/410 エラーコードが返ってくるような、リンク切れや間違った URL へのリクエストなどの無駄な要求は、避けましょうというものです。

Firebug のネットパネルで確認できます。

文字セットを指定する / Specify a character set
文字コードを HTTP レスポンスヘッダで指定しておくことで、ブラウザによる HTML の解析の手間を省けるというもの。

サイト内ページ : .htaccess でMIMEタイプと文字コードを指定する

重複するリソースは一つの URL から提供する / Serve resources from a consistent URL
同一のリソースを別々の URL を指定して要求しないように、固有の URL で要求しましょうというもの。

コンテンツ関連 : CSS/JavaScript

CSS Sprites に画像をまとめる / Combine images using CSS sprites
複数の画像は結合して CSS Sprites を利用しようというものです。画像を結合した場合、部分的に表示するように CSS で調整することになります。
CSS をドキュメントヘッドに含める / Put CSS in the document head
レンダリングのパフォーマンスを向上させるために、<body> 内に記述するインラインスタイルシートは、<head> 内に記述する外部スタイルシートか埋め込みスタイルシートに置き換えましょう。
スタイルシートとスクリプトの順序を最適化する / Optimize the order of styles and scripts
スタイルシートとスクリプトの <head> 内での順序は、まずスタイルシートで、次に他の link 要素で、最後にスクリプトの順に記述しましょう。また、スクリプト同士でも外部スクリプトを優先で。
CSS @import を使用しない / Avoid CSS @import
文字通り CSS 内で、別のスタイルシートを読み込む @import を使用しないようにというものです。並列に読み込むことができないうえ、レンダリングに支障をきたすのが理由のようです。
小さな CSS をインライン化する / Inline Small Resources
あまりにも小さい CSS は読込時間を短縮するためにも、外部ではなくインライン化しましょうというもの。
小さな JavaScript をインライン化する / InlineSmallResources
上の JavaScript 版。
JavaScript の解析を遅延させる / Defer parsing of JavaScript
ページを読込むために全ての JavaScript の解析が必要になるので、解析を延期してページの読み込みを優先しようというものです。

script 要素の defer 属性や async 属性で遅延が可能らしいです。(async については未検証)
また、defer 属性を使用した script では、document.write は使用できません。
サイト内ページ : JavaScript の解析を遅延させられる defer 属性について

非同期リソースを使用する / Prefer asynchronous resources
非同期リソースにすることで、ページの読み込みをブロックする恐れを防ぐことができるというものです。上記の JavaScript の解析を遅延させる項目と似ていますが、公式ページで DOM について記述されているので、詳しくはそちらをどうぞ。

外部サイト : Google Code : Minimize round-trip times

ファイルサイズ関連

CSS を縮小する / Minify CSS
CSS のソースから整形用の空白や改行を削除してファイル自体の容量を減らそうというものです。

サイト内ページ : CSS のファイルサイズを縮小する

JavaScript を縮小する / Minify JavaScript
上記の JavaScript 版です。

サイト内ページ : JavaScript のファイルサイズを縮小する

HTML を縮小する / Minify HTML
同じく html 版です。

サイト内ページ : HTML のファイルサイズを縮小する

画像関連の項目

画像を最適化する / Optimize images
転送量を削減するために画像は圧縮しましょうというもの。

サイト内ページ : 画像を最適化する

画像のサイズを指定する / Specify image dimensions
画像を設置する際は、幅(width)と高さ(height)を指定しましょうというものです。

画像の幅と高さは HTML 以外に CSS 内でも指定できます。

変更後のサイズで画像を最適化する / Serve scaled images
画像をサムネイルのようにサイズを変更して表示したい場合、そのサイズに縮小された画像を用意しましょうというものです。

サーバー関連の項目

圧縮を有効にする / Enable compression
転送する際に gzip で圧縮することで、転送サイズを減らしましょうというもの。

サイト内ページ : .htaccess で gzip 圧縮を行う

Vary: Accept-Encoding ヘッダーを指定する / Leverage proxy caching
圧縮できるリソースには、HTTP ヘッダーにその情報である vary を設定しようというもの。

gzip 圧縮の際に記述しているので、上記のリンクからどうぞ。

キャッシュバリデータを指定する / Leverage proxy caching
キャッシュを検証するために Last-Modified か ETag を設定しようというものです。

サイト内ページ : .htaccess で ETag を設定する

Keep-Alive を有効にする / Enable Keep Alive
HTTP の持続的な接続を有効にする Keep-Alive ですが、Apache を見る限り残念ながら .htaccess では扱えないようです。

外部サイト : core - Apache HTTP サーバ

ブラウザのキャッシュを活用する / Leverage browser caching
キャッシュを有効にし、有効期限を少なくとも1週間以上にしようというもの。

サイト内ページ : .htaccess でキャッシュを制御する方法

静的リソースからクエリ文字列を削除する / Leverage proxy caching
プロキシサーバーにキャッシュさせるためにも、URLに「?」を含まないように文字列を削除してパラメータをエンコードしようというもの。

検証する以前にページ上に「?」を含む URL があるにもかかわらず、それがチェックされなかったので、Cache-Control で何とかなったようです。なので、対策は上記のリンクと同様で。

リンク先のページのリダイレクトでキャッシュを利用できるようにする / Make landing page redirects cacheable
リダイレクト先のページでのキャッシュの設定についてでしょうが、ここはよくわかっていないので、コメントは控えます。

PageSpeed の項目は、バージョンの違いによって他にもまだあるんですが、この辺でやめておきます。

後書き

このサイトは FC2 ホームページ(無料版)のため広告が入ったりしますし、アドセンスや Amazon ウィジェットなどを貼り付けているのですが、これらのファイルは、あらかじめキャッシュの有効期限が短くなっていたり、いくつも HTTP リクエストが発生してしまったりするので、ここら辺が限界のようです。(外せば解決するんでしょうが、外す気ないので。)

当然ですが、外部サーバーから読み込むファイルは、こちらからはどうしようもないので諦めましょう。(特に改変不可なアドセンスなどは。)

スポンサードリンク

inserted by FC2 system