Google検索順位は表示速度にも影響するとのことです。このため、表示速度の高速化に挑み、PageSpeed Insights の評価を高めました。

概要

PageSpeed Insightsを利用して現状と課題を調査した結果、「レンダリングを妨げるリソースの除外」「テキスト圧縮の有効化」「ブラウザのキャッシュを活用する」「サーバー応答時間の短縮(TTFB)」が課題として指摘されました。

そこで、対応策として、レンダリングブロック解除(jsを最後に読み込み、css最適化、HTML最適化)、テキストのGzip圧縮、ブラウザキャッシュ利用、反応時間の改善(PHPバージョンアップ)を行ったものです。

万一のリスクを考え、まずは収益をあげていないサイトで試し、手順を確認後、他のサイトに横展開しました。

レンダリングを妨げるリソースの除外

javascript

javascriptを先に読み込んでしまうことによりページ表示が遅れているようでしたので、ヘッダーのスクリプトをフッターで読み込む形にしました。具体的には、使用中のテーマのfunctions.phpに以下のコードを貼り付ける形です。

CSS

javascriptと同様、CSSを先に読み込んでしまうことによりページ表示が遅れているようでした。CSSはドキュメントの各所に分散しており一括制御することが難しいようであり、KINSTAさんのアドバイスに従って、プラグインのAutoptimizeを利用して対応しました。

テキスト圧縮の有効化

Gzip圧縮を有効にする方法としては、プラグインを利用する方法と、.htaccessファイルを編集する方法とがあるとのことです。プラグインを導入しすぎるとそれにより動作が重くなると考え、.htaccessファイルの編集で対応しました。以下のコードを.htaccessの最後に挿入しました。

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

ブラウザのキャッシュを活用する

ApacheでExpiresヘッダーを追加するために、.htaccessファイルに次のコードを追加しました。

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

サーバー応答時間の短縮(TTFB)

PHPのバージョンアップ

PHPのバージョンが古いと応答時間が長くなってしまうようです。レンタルサーバーの設定から、PHPを最新のバージョンにしました。

キャッシュ活用

データ処理を高速化する為のキャッシングを実装する必要があるようです。このため、Cache Enablerというプラグインを導入しました。このプラグインの効果はかなり大きく出ました。

参考サイト

KINSTA
寝ログ