これまで主要な表示速度改善施策をご紹介させていただきました。
それらの施策を実行することで表示速度は改善されるケースがほとんどですが、さらに表示速度を向上させる方法がいくつかありますのでご紹介させていただきます。

テキスト圧縮の有効化

PageSpeed Insightsのページでは「テキストベースのリソースは圧縮(gzip、deflate、または brotli)して配信し、ネットワークの全体的な通信量を最小限に抑えてください。」とあります。

簡単に言うとhtmlやcss、javascriptなどを圧縮して容量を抑えてくださいということです。
「gzip、deflate、または brotli」とありますが、この中でも通信の負担、ページの読み込み時間が軽減を考慮して「gzip」での対処がGoogleでは推奨されています。

対応するには. htaccessというWebサーバーの基本的な動作を制御するファイルに以下の記述を追加します。

<IfModule mod_deflate.c> SetOutputFilter DEFLATE SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary 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 AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-font-woff AddOutputFilterByType DEFLATE application/x-font-opentype </IfModule>

これだけで各ファイルが圧縮され、表示速度向上に繋がります。

効率的なキャッシュポリシーの使用

キャッシュという言葉を聞いたことはありますでしょうか。
webサイトを訪れるたびに毎回一から画像ファイルなどを読み込んでしまうと通信容量も膨大になってしまいます。そこで一度訪れたwebサイトなどはキャッシュという形でそのページのデータを仮保存する機能があります。

キャッシュの設定を正しくすることで、効率的な読み込みが可能になるためこちらも設定しておきましょう。

.htaccessに以下の記述を追加します。

<ifModule mod_expires.c> ExpiresActive On ExpiresByType image/gif “access plus 1 month” ExpiresByType image/jpeg “access plus 1 month” ExpiresByType image/png “access plus 1 month” ExpiresByType image/svg+xml “access plus 1 month” ExpiresByType image/webp “access plus 1 month” ExpiresByType image/x-icon “access plus 1 month” ExpiresByType text/css “access plus 1 month” ExpiresByType text/js “access plus 1 month” ExpiresByType text/javascript “access plus 1 month” ExpiresByType application/javascript “access plus 1 month” ExpiresByType application/x-javascript “access plus 1 month” ExpiresByType application/x-shockwave-flash “access plus 1 month” </ifModule>

これでそれぞれのファイルに対してキャッシュ設定がされます。
期間は自由に設定が可能ですが、Googleで推奨する期間の設定は少なくとも1週間以上、更新頻度の少ないものに関しては最大で1年が目安となっています。

webフォント読み込み中の全テキストの表示

実はwebサイトの文字はOSによって違いがあります。同じフォント名でもWindowsとMacでは全く同じ表示にならないこともあります。


そこでwebフォントという便利なものが登場します。
これは外部からフォントを読み込んだり、サーバーにアップしたフォントを読み込むことでどのOS、どの環境で見ても同じフォントが表示されるようにするものです。
とても便利なのですが、読み込んでいる間は文字が表示されないなどのデメリットもあります。

例えばwebフォントで有名なアイコンフォントのFont Awesomeを使う場合はこのような記述をすることで対応が可能です。

@font-face{   font-family: “Font Awesome 5 Free”;   font-display: swap;   src: url(“../webfonts/fa-solid-900.woff2”) format(“woff2”); }

過大な DOM サイズを回避する

PageSpeed Insightsのページでは以下のように説明されています。

「DOM サイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生します。」

これは簡単にいうとhtmlの入れ子要素が多すぎるとメモリの使用量が増えるのでやめましょうということです。
WordPressの既存テーマを使ってブログを書く程度であればさほど問題になりませんが、一から設計をする場合などは事前に考慮しておきましょう。
コードはなるべくシンプルに。これはページの読み込み速度の向上だけでなく、メンテナンス性の向上にも繋がります。

サーバーをスペックの高いものに変える

PageSpeed Insightsのページ内に「サーバーの応答時間が遅い(TTFB)」という項目があります。
プラグインを大量に使用していたり、サーバーに負荷をかけるようなコード(例えば外部から高頻度でデータを取得するなど)によって、サーバーが応答を返すまでに時間がかかってしまうケースがあります。

本来であればその原因を改善し、サーバー負荷を減らす方法が望ましいです。
ただ、それには技術的な問題が絡んできますので手っ取り早くサーバーの応答時間を早くするためにはサーバーをハイスペックのものに変更するという方法もあります。
一般的にハイスペックのサーバーになればなるほど月額費用なども高くなるので事前にシミュレーションは必ず行いましょう。

いかがでしたでしょうか。簡単にできるものから設計部分に関わるものまで表示速度を改善出来る施策は複数存在します。
これからwebサイトを作るという方は事前にどんな方法があるかを把握してから設計することをお勧めします。

またGoogleの評価基準も常に変わっていきます。定期的に情報をキャッチアップし、常にアップデートしていきましょう。