手軽にサイトの速度改善！PageSpeed Insightsを使った対策方法まとめ
サイトの表示速度が遅いと、イライラしますよね。
できれば、一瞬で表示されて早く情報を見たいと誰しも思っています。
「サイトの表示速度が遅いせいで直帰ユーザーが多い」
「具体的に表示速度対策って何をしたらいいの？」
この記事は、表示速度を早くしたいけど具体的に何をしたらいいか分からないという様な人を対象に、
PageSpeed Insightsを用いた手軽に出来る対策方法をまとめました。
表示速度が遅いとどうなるの？
サイトの表示速度が遅くなればなるほど、ユーザーの直帰率は上がります。
とあるEコマースユーザーに対する調査によれば、「ユーザーの40%は表示に3秒以上かかるページは離脱する」というデータもあります。
表示速度が遅くなる原因は、主に以下の3つに分類できます。
- 【ユーザー側の問題】：回線速度などの影響で表示速度が遅くなる
- 【サイト側の問題】：HTML・CSS・javascrip・画像などが原因で表示速度が遅くなる
- 【サーバー側の問題】：サーバーの処理速度・処理の順番で表示速度が遅くなる
ユーザー側の問題は対処ができませんが、サイト側・サーバー側は最適化することで表示速度の改善が可能です。
表示速度の計測方法
サイトの表示速度の計測方法は色々ありますが、具体的な改善方法まで提示してくれる「PageSpeed Insights」が分かりやすいのでオススメです。
計測方法は、テストしたいサイトのURLを入力するだけなので非常に簡単です。
テスト結果の画面も非常にシンプルで、主に見るべき箇所は下の3点があります。
- ①デバイスの切り替え
- モバイルとパソコンそれぞれの結果を見ることができます。
- ②最適化スコア
- 最適化スコアはGoogleが独自に出しているスコアなので、表示速度に直接は関係ありません。
（最適化スコアを高めれば、結果的に表示速度も改善するという流れになります）
表示速度の影響はパソコンよりモバイルの方が顕著にでるため、
目安としてモバイルのスコアを80/100目指しましょう！ - ③最適化の提案
- 表示速度が遅くなっている原因に対する、具体的な対策を提示してくれます。
最適化の提案、対策方法
先ほどのテスト結果で提示された「最適化の提案」ごとの対策方法をご紹介していきます。
全てするのが理想ですが、まずはできる範囲の対策から行ってください。
ブラウザのキャッシュを活用する
キャッシュとは、一度表示したサイトの画像・HTML・CSS・javascriptなどのデータを保存しておいて、再度同じページを開くときに前回読み込んだデータは省略し、ページを早く表示してくれる仕組みのことです。
ブラウザのキャッシュを有効にすることで、不要な読み込みを省けるので2ページ目を見たり、再訪問時の速度が早くなります。
WordPressを使っている場合、.htaccessのファイルに以下コード記載して、キャッシュを有効化させてください。
#-----------------キャッシュ
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType application/javascript "access plus 10 days"
スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除する
レンダリングとは、HTMLなどの文字を読み込んで、ブラウザ上に画面イメージとして表示させる事です。
スクロールせずに見えるコンテンツのレンダリングとは、ページが真っ白な状態からファーストビューが表示されてコンテンツを認識できるまでの処理のことを表します。
このファーストビューの表示速度を早くするのは、表示速度対策において最も重要です！
javascript
javascriptはWEBブラウザのレンダリング処理において、特に影響を与えやすい要素です。
複数のjavascriptをページ内の適当な位置に書いていると、それだけで表示速度の遅延につながります。
javascriptの記載場所は基本的にbody直前にする
javascriptは記述場所によってレンダリング処理の順番が異なります。
- head内に記述：
- javascriptが優先的に処理され、読み込みが終わるまで他のレンダリング処理に影響を与える
- body直前に記述：
- HTMLやCSSなど、コンテンツを表示するためのレンダリングが終わった後にjavascriptが処理される
そのため「ページの描写に影響のないjavascriptは、head内に記述しない」ことが重要です。
逆にjavascriptを処理しないとページが表示できないなどの場合は、head内に記述して優先的に処理します。
小さいJavaScriptはインライン化する
javascriptの外部ファイルを内に数多く設置すると、遅延の影響になります。
javascriptの外部ファイルは極力まとめて読み込む数を減らすか、コードの少ないjavascriptはページ内に直接インラインで記述するようにしましょう。
JavaScriptの読み込みを遅らせる
javascriptの外部ファイルのscriptタグに「async」を記述すれば、非同期で読み込むことができます。
非同期にすることで、javascriptを優先的に処理されるという事がなくなります。
しかし処理の順番が不特定になるため、意図した順番でjavascriptを処理しないといけない場合は適していません。
CSS
ファーストビューに必要なCSSはhead内にインライン化する
ファーストビューを表示させるために必要なCSSをインライン化することで、CSSファイルよりも優先的に処理することができるので、ファーストビュー表示速度が速くなります。
style属性は意図がない場合極力使わない
style属性を直接書くと優先的に処理されますが、数が多すぎるとレンダリング遅延につながります。
ファーストビュー表示に関係のないCSSは基本的に、CSSファイルに記述しましょう。
ファーストビュー表示に関係のないCSSファイルの処理を後回しにする
body直下に以下のようなCSSファイルの書き出し処理をjavascriptですることで、CSSファイルの処理を後回しにすることができます。
圧縮を有効にする
HTML、CSS、JavaScriptなどのファイルを圧縮することでも表示速度の向上につながります。
.htaccess に以下のようなコードを記載することで、サーバー側で圧縮処理を行ってくれます。
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
画像を最適化する
サイズの大きい画像は、必ず圧縮しましょう。
圧縮サービスは数多くありますが、以下のサイトがおすすめです。
jpg、png、gifファイルをドラッグ＆ドロップするだけで、1回20ファイルまで圧縮できます。
CSS・HTML・Javascriptを縮小する
コードを書くときはインデント（段落）をつけると思いますが、インデントがないほうが処理が速くなります。
CSS、javascriptのコード収縮は、以下のようなワードプレスプラグインで自動化できます。
autoptimize
インデントを全てなくしてしまうとコードのメンテナンス性が極端に難しくなるため、こういった自動処理を利用してサーバー側でのみインデント収縮を有効にするのが効果的です。
サーバーの応答時間を短縮する
サーバーの応対速度遅延の原因は、数多くの要因があるので一丸には言えませんが、ここまで紹介しました対策+以下のような対策があります。
- サーバーの応対速度が遅くなるような、javascriptやPHP処理を見直す
- PHPのバージョンを上げる（サーバーの管理画面上で変更可能なレンタルサーバーが多い）
- 不要なプラグインを停止する
まとめ
今回ご紹介しました対策をすれば、「PageSpeed Insights」のスコアはかなり改善でき、表示速度も速くなります。
ただ、PageSpeed Insightsのスコアが高いからといって、速度対策は完璧ではありません。
実際に「ページが何秒で表示されているのか」「ファーストビューの表示に何秒かかっているのか」など詳細情報をもとに、更に改善していきましょう。
