Webページの読み込み速度を高める

先日、GoogleがWebページの読み込み速度をサイトの評価項目として採用したことを発表しました。

単に速ければ速いほど評価が高いというわけではなく、現在で1ページの平均読み込み速度が1.4秒以内に収まるかどうかが評価基準になるようです。

ページの読み込み速度については、Google ウェブマスターツールやGoogleが配布するFirefoxアドオン「Page Speed」で確認できます。

この発表を受けて、Webページの読み込み速度を高めるために自社サイトを以下のとおり更新しました。

読み込み頻度の高い画像を PNG に変更

ロゴや見出しの背景など、読み込み頻度の高い画像を、画質を落とすことなく GIF や JPEG よりもファイルサイズを小さくできる PNG に置き換えました。

これまでは互換性の問題から PNG の利用を控えていましたが、PNG が正しく表示できないブラウザを使っている人はほぼ皆無になったこと(携帯電話のブラウザはいまだに多いので注意)と、ページ読み込み速度がサイトの評価項目として採用されたことで、画像のファイルサイズの縮小を優先することにしました。

Adobe Spry のスクリプトを packed に変更

サイトで導入していたAdobe Spry のスクリプトを組み替えることも、コードを読むこともないので、可読性を無視してファイルサイズを小さくした packed に置き換えました。

ハイパフォーマンスWebサイト 高速サイトを実現する14のルール

今回は上記二点のみの対応となりましたが、これまでにも様々な高速化の取り組みを行ってきました。

その時に参考にしたのが、ウェブサイトの高速化についてフロントエンドの処理を中心にまとめた「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」という書籍です。

インターネット上でも様々な情報を探せますが、どうでもいいような小技の羅列が多いので、本質的なウェブサイトの高速化を学び、実践するまでにはかなりの時間がかかるため、この書籍で勉強することをお勧めします。

フロントエンドエンジニアの方はもちろん、ウェブデザイナーの方にも、是非読んでほしい一冊です。

また、続編として、「続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス」が出版されています。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
  • HTTPリクエストを減らす
  • CDNを使う
  • Expiresヘッダを設定する
  • コンポーネントをgzipする
  • スタイルシートは先頭に置く
  • スクリプトは最後に置く
  • CSS expressionの使用を控える
  • JavaScriptとCSSは外部ファイル化する
  • DNSルックアップを減らす
  • JavaScriptを縮小化する
  • リダイレクトを避ける
  • スクリプトを重複させない
  • ETagの設定を変更する
  • Ajaxをキャッシュ可能にする



続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス
  • Ajaxアプリケーションとパフォーマンス
  • 応答性の高いウェブアプリケーション
  • 初期ロードの分割
  • 実行をブロックしないスクリプトのロード
  • 非同期スクリプトの組み合わせ
  • インラインスクリプトの適切な位置
  • 効率的なJavaScriptコード
  • Comet
  • gzip圧縮再考
  • 画像の最適化
  • 主ドメインの細分化
  • ドキュメントのフラッシュ
  • iframeの取り扱い
  • CSSセレクタの単純化



このブログの人気の投稿

oh-my-zshの導入とか、zshとvimの環境をナウでヤングでシンプルな感じにした

Kindleでの自炊管理に思わぬ落とし穴があったのと、実用書の相対価値が変わったという話