WEB帳
PageSpeed Insights 満点チャレンジ：初回は２４点。。。

PageSpeed Insights(ページスピードインサイト)とは、Webページの表示速度を計測するGoogle公式提供の無料SEOツールのようです。

たまたま見つけてしまったのですが、暇つぶしにコツコツ対策して１００点満点を狙おうと思います。
とりあえず、初回は２４点！まぁ、最近はサボって何もしてなかったので…しょうがない…

途中で気づいたのですが、モバイル版とパソコン版があるみたいで左上にあるタブで切り替え可能でした。パソコン版は87点と思いのほか高得点だったので、今回はこのままモバイルを中心に対策していきます。

対策１．オフスクリーン画像の遅延読み込み(+6点up)

画面に映っていない画像は映る位置までスクロールされたら読み込めということなので、Lazy Loader をインストールして対応し６点アップ！

結果：モバイル３０点(６点up) / パソコン８７点

対策２．レンダリングを妨げるリソースの除外

Autoptimize を使用してCSSやJSなどのリソースを軽量・最適化を試みる。

• JavaScript コードの最適化
• Aggregate JS-files?
• CSS コードを最適化
• Aggregate CSS-files?
• インラインの CSS を連結
• HTML コードを最適化
• 連結されたスクリプト / CSS を静的ファイルとして保存
• Minify excluded CSS and JS files?

上記の項目をチェックして更新

結果：モバイル３２点(２点up) / パソコン９４点(７点up)

対策３．オフスクリーン画像の遅延読み込み

EWWW Image Optimizer をインストールして対策を試みる
全ての画像をWebP形式に変換

※サーバーによってexec関数が使えない場合は設定変更が必要

結果：モバイル３２点 / パソコン９４点
ほぼ変化なし…

対策４．第三者コードの影響を抑えてください

読み込みで最も影響を与えているGoogle/Doubleclick AdsことGoogleAdSenseの対策を試みる

• GoogleAdSenseのスクリプトタグをhtmlから削除する
• GoogleAdSenseの読込みを遅延させるコードを記述する

結果：モバイル８２点(５０点up) / パソコン９８点(４点up)

【参考Webサイト】

• 【モバイルスコア93点】2019年のPageSpeed Insightsで実施した対策まとめ
• Autoptimizeの使い方・設定方法を解説【CSSやJSを最適化するWPプラグイン】
• 「次世代フォーマットでの画像の配信」対策！簡単WebP配信設定
• WPXサーバーでEWWW Image Optimizerが「システム管理者が exec() 関数を無効にしている場合は、有効にするよう依頼してください」とエラーが出ているときの改善・解決方法
• ☆100達成！PageSpeed Insightsのスコアアップ方法 その２：GoogleAdSenseの読込みを遅延させる（Youtubeも）

コメント（0件）

PageSpeed Insights 満点チャレンジ：初回は２４点。。。に対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

【ソーシャルボタン】

• 
• Tweet