WordPressを運営している方で「PageSpeed Insights」の診断結果を良くしたい方がいらっしゃると思います。
今回はその診断結果に影響する「レンダリングを妨げるリソースの除外」という点をフォーカスした改善方法の記事です。
結果的には「改善できる項目」から「レンダリングを妨げるリソースの除外」が消え、「合格した監査」の方へ無事移動してくれました。
とくにブログデザインの表示も問題ないので、私の場合はうまくいったと言えます。
はじめに
こちらで紹介した方法は独自でいろいろ調べながら行った結果で、簡単な方法で診断結果にしっかり影響があったものを紹介している形になります。
「レンダリングを妨げるリソースの除外」とは何なのかについてもあまりよくわからない方もいらっしゃると思いますが、私も同じです。
表示するためのデータをもとに内容を整形して表示するというのがレンダリングとのことなので、それを妨げるものを除外するといった話でしょうか。
正直このレベルでしかわかっておりません。
そして「レンダリングを妨げるリソースの除外」の改善方法についても何がどうなって改善されているのかもあまりわかっていないため、この記事から参考にする場合は、その点ご理解いただける方のみ自己責任で参考にしていただければ幸いです。
そんな私でも簡単に改善できたというものです。
改善方法を試す前にバックアップはあらかじめ取っておきましょう。
改善する前のブログの状態
モバイルで診断結果です。
「PageSpeed Insights」で改善する前の診断結果はパフォーマンスが43点となっており、「レンダリングを妨げるリソースの除外」の短縮できる時間(推定)が2.11sとなっていました。
この結果から改善を行った後、どのくらい変化したかを見ていきます。
「レンダリングを妨げるリソースの除外」の改善方法
AutoptimizeとAsync JavaScriptを入れる
WordPressで「Autoptimize」と「Async JavaScript」というプラグインを入れました。
あまりプラグインを入れたくなかったのですが、プラグインを入れない方法を試してもブログのデザインが崩れてしまったりとうまく反映させることができなかったためプラグインを使用しています。
「Autoptimize」と「Async JavaScript」は、同じ開発者が公開している2つの無料プラグインで、二つを組み合わせることで最適化できるとのこと。
それぞれ設定を行う必要もあるようなので、私が行った設定を簡単に説明しておきます。
「Autoptimize」の設定
WordPressのプラグイン設定から「Autoptimize」の設定をしていきます。
「JS、CSS & HTML」と「追加」で設定を行いますが、「JS、CSS & HTML」の項目では基本的に赤い□で囲んでいるところへチェックを入れたのみです。
「追加」の方では「PageSpeed Insights」から参照してコピペする必要があるので注意してください。
「JS、CSS & HTML」の設定
「追加」の設定
「追加」の方ではまず、Googleフォントを使用していない場合は「Googleフォントの削除」へチェックを入れます。
(そのままにするでもOK)
「サードパーティのドメインへ事前接続(上級者向け)」ではPageSpeed Insightsの診断結果にある「レンダリングを妨げるリソースの除外」からURLをコピーして貼り付けます。
URLは複数あると思うので、複数記載する場合は「,」で区切ります。
「Autoptimize」の設定は以上です。
「Async JavaScript」の設定
「Async JavaScript」の設定は「setting」の項目のみ行っています。
私が設定しているのは上に載せている項目のみです。
その他にも「Scripts to Async」、「Scripts to Defer」、「Script Exclusion」、「Plugin Exclusions」、「Theme Exclusions」という項目がありますが、そちらは空欄にしています。
以上が今回の「レンダリングを妨げるリソースの除外」に対する改善方法です。
改善方法を行った結果
何度か試しましたが、パフォーマンスは50以上維持されるようになったので、多少改善された模様。
そこまで大きな変化ではありませんが、デザインなどにも影響がないようなので私としてはOKでした。
「レンダリングを妨げるリソースの除外」という項目がもともとあった「改善できる項目」という一覧から「合格した監査」という項目へ移動しています。
今回はパフォーマンス向上というよりこの点が重要な部分だったので、しっかり改善されていたのは良かったです。
おわりに
全体的に見ながら進めるだけでOKなので簡単だったのではないでしょうか。
私が問題なく改善できたというところなので、人によってはブログのデザインに影響が出たりする可能性もあります。
デザインが崩れたりパフォーマンスに悪影響が起きてしまったりした場合は、プラグインを無効化するだけで元に戻ると思いますが、念のためバックアップを取っておくことをお勧めします。
改めてになりますが、参考にする場合は自己責任でお願い致します。