PageSpeed Insights「レンタリングを妨げるリソースの除外」はプラグインで解決

Interface 3614766 1280 Wordpress

自分のサイトのパフォーマンスはSEOにもつながるので気になりますよね。

Googleが提供している”PageSpeed Insights”でページ速度の計測を行っている人も多いと思います。

無料で的確な分析を行ってくれるのでありがたいツールですが、的確なため、難しい用語がどんどん出てきます。

今回の「レンタリングを妨げるリソースの除外」の項目の改善は、

ページに影響しない要素をインライン要素化することで解決できるとのアドバイスが表示されましたが、

影響しない要素を探し出すことを面倒に感じてしまったので、プラグインに頼ることにしました。

今回使用するプラグインは、“Autoptimize”です。

プラグインの導入は自己責任となりますので、バックアップを推奨します。

Autoptimizeの設定

以下の画像とキャプションをご参考にどうぞ。

管理画面のプラグインにカーソルを合わせ、新規追加をクリックします。
検索欄に”Autoptimize”と入力すると写真のようなものが表示されると思います。「今すぐインストール」をクリックし完了後、有効化をクリックします。
有効化後、設定にカーソルを合わせると”Autoptimize”の項目が追加されていると思います。それをクリックしてください。
このサイトでは上記の設定を使用しています。ご参考までに。
ページの訪問者数がまだ多くない場合は「すべてのCSSをインライン化」をチェックにするといいそうです。注意点として、「インラインのCSSを連結」にすると見出しの装飾が外れることがあります。(Cocoon環境)除外リストは特にさわっていません。
ページのソースを表示した際にコメントを残しておきたい場合は”HTMLコメントを残す”にチェックを不要な人はチェックを外します。

Pagespeed Insightsの結果比較

早速、Autoptimizeの有無でのスコア比較を行いました。

まずはモバイル。設定前は…

“61”と改善の余地が在りそうなスコアでした。

Autoptimize設定後…

“84”!スコアが”21“も上昇しました。

パソコンでのスコアも確認しました。

設定前…

設定後…

スコアのゲージが緑になりました。

これで一安心。

また、編集画面での「下書きとして保存」が完了までに8秒近く掛かっていたのが

2秒弱まで早まりました。これはうれしい誤算です。

まとめ

無事、導入できましたでしょうか。

難しい設定もほとんどないのに簡単にスコアを改善できて、本当に便利だと実感しました。

上記の通り、SEO目的以外にも動作が軽くなった箇所もあり、ありがたかったです。

最後までお読みくださりありがとうございました。

ご不明点などあればコメント欄までお寄せください。

コメント

タイトルとURLをコピーしました