10分で改善！PageSpeed Insightsを80～90にする方法

ブログ運営をしていてそろそろコンテンツも充実してきたので、表示速度の改善に手を付けてみました。
指標として「PageSpeed Insights」の数値向上を目指したところ、ちょっとしたことで最大90くらいまで上がりました～!

.htaccessで「キャッシュの有効期限」と「コンテンツの圧縮」をしよう

.htaccessに以下のコードを書いてみます。
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/vnd.ms-fontobject "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 weeks"
ExpiresByType application/x-font-opentype "access plus 1 weeks"
ExpiresByType application/x-font-woff "access plus 1 weeks"
</IfModule>

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-woff
</IfModule>
<IfModule mod_expires.c>の部分で、cssやらjavascriptやらをどれくらいの間キャッシュするか決めています。
それから<IfModule mod_deflate.c>の部分で、転送するデータの圧縮を指示。
SetOutputFilter DEFLATEで全てのデータが圧縮されるからAddOutputFilterByTypeはいらないという意見も見かけましたが、まぁ一応…。
BrowserMatchで古いブラウザを対象から除外、SetEnvIfNoCaseで画像類も除外しています。（画像ってのは普通圧縮されていますから。）
更新が頻繁じゃないサイトなら、HTMLもキャッシュ指定しちゃってもいいかもしれませんね。

functions.phpで、Wordpressが読み込むjavascriptをフッターに移動

ヘッダーにjavascriptがあると、コンテンツの読み込み前に無駄に時間がかかります。レンダリングをブロックってやつですね。
function move_scripts_head_to_footer_ex(){
  remove_action('wp_head', 'wp_print_scripts');
  remove_action('wp_head', 'wp_print_head_scripts', 9);
  remove_action('wp_head', 'wp_enqueue_scripts', 1);
  add_action('wp_footer', 'wp_print_scripts', 5);
  add_action('wp_footer', 'wp_print_head_scripts', 5);
  add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'move_scripts_head_to_footer_ex' );
これで、Wordpressが自動的に読み込むあれこれが、コンテンツの後になります。

自分で追加したCSSとjavascriptも</body>直前に移動

自分でheader.phpにCSSとjavascriptを追加していたので、まるっと移動します。CSS⇒javascriptの順にしましょう。
ただし、ファーストビューで使われるCSSはレンダリング前に読み込ませるので、そのままにしておくこと。 あとCSSがレンダリングをブロックしないように非同期で読み込ませるには、下記のようにします。
<link rel="preload" as="style"  href="CSSファイルへのパス" type="text/css" media="all" onload="this.rel='stylesheet'">

Adsenseが重い!そんなときはDNSプリフェッチで先読み!

<head>の直下あたりに外部サイトのドメインを指定しておくと、そこのコンテンツにアクセスする前に名前解決しておいてくれるらしいです。
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='dns-prefetch'/>

HTML、CSS、JavaScriptをAutoptimizeで縮小

駄目押しでプラグイン「Autoptimize」も導入してみました。これはHTML、CSS、JavaScriptを圧縮してくれます。ソースコードなんかから改行なんかがごっそり消えるので、管理者としてはちょっと見辛い…w
設定画面で「高度な設定」を選んでこんな感じで設定します。 HTML コードを最適化、JavaScript コードの最適化、CSS コードを最適化の3つにチェックを入れて、あとはデフォルトの設定のままでOK。
自分はGoogleフォント使わないので「Google フォントの削除」にもチェックを入れました。

その他：重い広告はガンガン削除! srcset属性も無効化

これはやらなくてもいいなら、そのままでもOKです。一応自分はやっていますが。
まずサイトの表示を重くするような広告は削除しました。ページが重くなる広告を沢山貼るより、収益の多い広告を少数精鋭で配置した方がよさそうです。
また、どうやらモバイル表示に関してはimgタグのsrcset属性の画像が引っかかっていることがあったので、functions.phpに下記のコードを追加。
add_filter( 'wp_calculate_image_srcset', '__return_false' );

まとめ：これだけやればとりあえず85前後、上手くいけば90くらいイケる!

以上の設定をしたところ、最高で90くらいになりました。
ただし、Google Adsenseなどの広告でどんな内容が読み込まれるかで数値は結構変わります。これはもうしょうがないですね～。とりあえずサイト表示の体感速度が上がったのでよしとします。
ほとんどコピペするだけなんで、早ければ5分もあれば完了しちゃうんじゃないでしょうか!?

カテゴリ「Wordpress」の記事