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サイト ―ウェブ高速化のベストプラクティス」が出版されています。