【備忘録】PageSpeed Insightsの改善で効果があった方法

こんにちは、ワタナベです。

もうそろそろ髪色を変えようかな～と考え中です(‘ω’)

今回は「PageSpeed Insights」の改善でこれをやったら効果が出た！というものを備忘録として書いていきます。

使用していないJavaScriptの削除

特定のページからプラグインの不要なcss、jsを無効化（読み込まないように）する

Contactform7などは特定のページでしか使う機会がないと思いますが、全ページで読み込まれてしまっています。
そこで、このフォームを特定のページでしか読み込めないようにしてしまいます。

function.phpに下記のように記載すると、指定されたページ以外では読み込まれなくなります。

function dc_dq_style_script() {
if( !is_page(‘contact’) ){ // ‘contact’というスラッグの固定ページではない場合
wp_dequeue_style( ‘contact-form-7’ ); // Contact Form7のcss
wp_dequeue_script( ‘contact-form-7’ ); // Contact Form7のjs
}
}
add_action( ‘wp_enqueue_scripts’, ‘dc_dq_style_script’ );

詳しいやり方はコチラ↓↓

DEVELOPMENT

WordPressで使用していないJavaScriptの削除

https://deve-cat.com/not-useing-check/

PageSpeed Insightsに出る改善項目のJavaScriptやCSSの削除について、調べ方と実際に無効にする方法の関数解説を行います。

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

プラグイン「Autoptimize」を使う

「JS,CSS & HTML」でそれぞれの項目の「コードの最適化」にチェックを入れるだけでOK。
ほかの設定へのチェックはサイトによっては表示が崩れてしまうかもしれないのでそれぞれのサイトにあった設定をしましょう。

さらに最適化を図る場合は、「Images」やWebfontなどの設定もするとよいでしょう。

WordPress.org 日本語

Autoptimize

https://ja.wordpress.org/plugins/autoptimize/

Autoptimize は、以下を最適化することでサイトの反応を高速にします。JavaScript、CSS、画像 (遅延読み込みを含む)、HTML、Google フォント、非同期 JavaScript、また邪魔な Emoji の除去など。

CSSの非同期読み込み

<link rel=”stylesheet” href=”style.css” media=”print” onload=”this.media=’all'”>

たったこれだけでcssの非同期読み込みができるのは驚きでした…！
すべてのcssにこの記述をするとファーストビューでスタイルが当たっていない状態で表示してしまうので、common.cssなどは通常通り読み込むのがよいでしょう。

Qiita

CSSを非同期ロードする最も簡単な方法 - Qiita

https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657

CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。これに対策する...

テキスト圧縮の有効化

.htaccessへ下記を追記。

<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>