webサイトの高速化・表示速度の最適化の取り組みとして私なりに実施している内容を書いてみたいと思います。
webサイトの高速化・表示速度とSEO
Webサイトを評価する指標として、検索結果で上位に表示されること、SEO（Search Engine Optimization）があり、提供しているコンテンツそのものの良し悪し以外に、ユーザーエクスペリエンス（UX）に大きく影響する点からサイトの表示速度も重要なポイントとして位置づけられます。
サイト表示速度の改善はUXを向上させて、ひいては検索結果の改善へとつながります。
Google PageSpeed Insightsでページスピードの確認
ブラウザがWebサイトを表示するために行う一連の描画処理をレンダリングと言います。
先ずHTMLソースが読み込まれた後、関連付けられたスタイルシートCSS、JavaScript、画像ファイルなどが読み込まれた後、記述が翻訳され画面として構築されたページが表示される構造を頭に入れておく必要があります。リンクされたファイルが大きいほどページの読み込みとパースに時間がかかり、表示されるまでの速度が低下します。
Google PageSpeed Insights
サイト表示速度の改善はこれらのデータの軽減のための工夫が主な作業になりす。
サイト表示速度の評価にはGoogleが提供するWebページのコンテンツを解析ツールGoogle PageSpeed Insightsでスコアを確認します。
指定したサイトの評価点の他に「改善できる項目」として詳細な改善方法を添えて指摘してくれるので、これに従いながらスコアの大きい項目を優先的に改善していきます。
画像に関連する項目
通常Webサイトを構成するデータの中で画像データは大きい容量を占めます。サイトの見栄えにも影響しますのできれいな画像を使用したいところですが必要以上に大きいデータの画像を使うと読み込み速度が体感的にも低下しますので、バランスよく最適化が必要です。
- 適切なサイズの画像
- 次世代フォーマットでの画像の配信
- オフスクリーン画像の遅延読み込み
- アニメーション コンテンツでの動画フォーマットの使用
と言った項目が指摘されます。
適切なサイズの画像については実際に表示するサイズに合わせて元の画像の画素数を合わせておくことと、データの圧縮率を調整してデータの軽減を図ります。
画像圧縮は画像編集ソフトでもできますが、私はtiny pingを利用しています。
tiny ping
画像を一括で変換ダウンロードでき、ほぼ適切なサイズまで圧縮してくれて便利です。
次世代フォーマットでの画像
次世代フォーマットでの画像についてですが、私は実施していません。
JPEG 2000、JPEG XR、WebP などの画像フォーマットが推奨されていますが、古いブラウザでのサポートがしていないため、それらのユーザーが閲覧できなくなります。ブラウザーのバージョンによって表示するフォーマットを切り替えるようにはできなくはないのですが、ソースの記述が煩雑なうえ、複数のデータフォーマットを用意することになりますので作業量・データともに増えます。
そのようなわけで、この項目の採用は見合わせています。
オフスクリーン画像の遅延読み込み
オフスクリーン画像の遅延読み込みについてですが、ページを開いた時に画面内に表示されない画像の読み込みを遅らせて、正味見える範囲の表示を優先させると言うことです。
そういった機能を提供するプラグインを導入するのが手っ取り早いでしょう。個人的にはjQueryに馴染みがありますのでjQuery Lazy Load。WordpressではBJ Lazy Loadといったところが一般的のようです。アニメーション コンテンツについては、一昔前であればGIFが定番でしたが、配信方法として効率的ではないとのことです。MPEG4/WebM動画の使用を勧められます。
記述について
CSSやJava Scriptに関して次のような項目が指摘されます。
- CSSの最小化
- Java Scriptの最小化
- レンダリングを妨げるリソースの除外
- 使用していない CSS を削除
CSS・Java Scriptの最小化
CSS・Java Scriptの最小化について、私はソースコード編集に使っているテキストエディタにそれ用のパッケージを入れて利用しています。使い慣れたエディタ上でショートカットで圧縮実行、プレビュー確認といった作業手順が都合良いのでそのようにしています。
WebサービスでもHTML Minifierなど、機能を提供しているサイトがありますので、利用するのも良いでしょう。
HTML Minifier
レンダリングを妨げるリソースの除外
レンダリングを妨げるリソースの除外については、画像と同様に画面内に表示されている部分に適用される記述を優先的にロードさせそれ以外は遅らせて読み込ませるということです。HTMLソースのheadタグ内に記述するインライン記述が推奨されています。CSSもJSもHTMLとは別ソースとした方が管理のうえでスマートで扱いやすいと考えるのですが、速度改善のためには致し方なしとしましょう。
ページの表示速度に影響を与えている部分のCSSをクリティカルCSSと言いますが、Critical Path CSS Generatorで抽出することができます。
Critical Path CSS Generator
使用していない CSS を削除
同様に使用していないCSSの記述を多く含んでいると指摘が入ります。他のHTMLソースと共用したりとリソースの運用の上では合理的と思うのですが、速度向上の点では背反となります。整理してデータの軽減に努めます。
サーバー設定
その他にサーバーでできる速度改善の設定として
- 圧縮を有効化
- ブラウザキャッシュの有効化
などがあります。
まとめ
主にPageSpeed Insightsを使ったページの最適化について説明してきました。
ページ速度の改善が即SEOにつながるわけではありませんし、評価基準も変遷して行きます。
古いサイトで紹介している内容は昨今の動向に合わず役に立たないことがあります。最新の動向に注視して自分なりに試行錯誤していくことも大切になります。
などと書きつつ、私の作成したページも時代遅れなどと言われぬよう、日々精進の毎日です。
