【スポンサーリンク】

PageSpeed Insightsのスコアを上げるためにしたこと(2023年7月)

とりあえずのメモホームページ運用
  • トップページの PageSpeed Insightsのスコアを上げるために、いろいろ試みました。
    結果、モバイルでも ほぼ100点のスコアにすることができました。
  • PageSpeed Insightsの項目を見て、手当り次第 対処法を探していきましたが、振り返ってみると優先順位があることに気づきます。
  • WordPressサイトの高速化では「幹」から「枝葉」の順番に検討していくとよいとわかりました。
WordPressサイト高速化の大きな考え方
  1. そのページに必要ない要素をなくす
  2. 見えない要素を後回しにする
  3. そのほかの効率化の工夫
  4. 内容をわかりやすくする

一番、明確に効果があったのは、Plugin Load Filter でページごとに必要なプラグインを切り分けたことです。

【スポンサーリンク】

ついに PageSpeed Insightsで合格した

ついに、PageSpeed Insightsで「携帯電話」の「ウェブに関する主な指標の評価」で「合格」しました。

https://pagespeed.web.dev/analysis/https-chiilabo-com/ev8o9syc36?form_factor=mobile

ギリギリ LCP が 2.5秒を下回ることができました。

正直、個人向けレンタルサーバでは難しいかな、と思ったのですが、なんとかクリアできました。

ちいラボでは mixhost を利用しています。

そのページに必要ない要素をなくす

サイト高速化で一番 効果があったのは、なるべく要素を減らすことでした。
特に、今回はトップページだけでも最適化したいと考えました。
ですので、トップページにいらない要素はどんどん省いていきました。

  • そのページに必要ないプラグインを無効化する
  • そのページに必要ないフォントを省略する
  • そのページに必要ないサイズの画像を読み込まない
  • そのページに必要ない機能をなくす
  • そのページに必要ないスタイルを無効化する
  • そのページに必要ないスクリプトを無効化する

ほかの「最適化」をする前に、まずはそのページに付加されている要素を吟味して、必要ないものを省きましょう。

[WordPress] サイト高速化のために不要なプラグイン処理を減らした(Plugin Load Filter, Site Kit by Google)
ページ表示速度を改善するため、Plugin Load Filterプラグインでトップページの Site Kit などを無効化した。 PageSpeed Insights のパフォーマンスが「54」から「70」に改善できた。(「使用していない...
サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon]
サイト表示の負荷を減らすために、FontAwesome 5 から 4 に変更しました。 CSSで一部で FontAwesome 5のアイコンフォントを利用していたので、FontAwesome 4 に変えました。 Largest Conten...
[PHP] 不要なCSS/JavaScriptを無効化する(wp_dequeue_style, wp_dequeue_script)
トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。 項目変更前CSS/JS減パフォーマンス7071使用していないJavaScriptの削減0.40s0.60s使用していないVSSの削減0.35s0.45s...
印刷用スタイルをメインCSSから分けた
@import print(CSS) かんたんな方法としては、CSS内で別CSSをインポートする方法があります。 @import url("print.css") print; しかし、この方法ではCSSがブラウザのキャッシュに入ってしまっ...
「最大コンテンツの描画」のRender Delayを減らす(Largest Contentful Paint)
LCP(Largest Contentful Paint)の数値を改善できないか、「Render Delay」に注目してみました。 使っていないアイコンフォントを軽量化したら、少し改善しました。 項目前後Largest Contentful...

プラグインや機能ごとに無効化の方法が違うので、そこの理解が大変です。

[PHP] jetpack.cssを無効化する
Jetpackプラグインを有効にすると、CSSとJavaScriptが読み込まれます。 /wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0 これを無効にします。 /** Jetpack...
フォームの要素にラベルが関連付けられていません(input#focus_retriever, iframeTracker)[PSI]
PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」として、「input#focus_retriever」が問題になっていました。 js-iframe-trackerを無効したら解決しました。 ifram...
【断念】Cocoonテーマの「カルーセル」の代替プラグインを探した
たびたび Cocoonテーマのカルーセルの処理が重い(slickプラグインのjQuery)のが気になります。 別のプラグインに切り替えてみることにしました。新規記事の「カルーセル」表示できるプラグインを探します。 しかし、結論、現状のカルー...
「カスタム検索(サイト内検索)」スクリプトを除外した(cse.google.com/cse.js)
カスタム検索のスクリプト(cse.google.com/cse.js)が重そうです。 asyncによる遅延読込みを試しましたが、あまり効果がありませんでした。 結局、カスタム検索ボックスをトップページに載せるのではなく、別ページに分けてリン...
[Cocoon]「pinit_main.js」を削除するには?(Pinterest)
Lighthouse Treemapで読み込まれている JavaScriptを見ていると、「」というコードが目に留まりました。 これは、Pinterestでシェアするため画像選択処理を記述したスクリプトです。 CocoonのSNSシェアの ...

見えない要素を後回しにする

次にすることは「後回し」です。
とにかく始めの画面を速く描画するために、それ以外の部分を後回しにします。

ただし、順序関係・依存関係があるものは注意しないと不具合になってしまいます。

  • スタイルの読込みをなるべく遅延させる
  • スクリプトの読込みをなるべく遅延させる
  • 画像の読込みをなるべく遅延させる
スクリプトとスタイルの遅延読込みのしかた[PSI](WordPress)
CSSは、とりあえずCocoonの「CSS縮小化」で除外できました。 jqueryは、wp_enqueue_script でフッター読込みに変更しました。 レンダリングを妨げるリソース 久々に PageSpeed Insights(PSI)...
【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress]
PageSpeed Insightsで「レンダリングを妨げるリソースの除外」を見てみると、jqueryに関する2つのスクリプトが目につきました。 (Google CDN)jquery.min.js?ver=3.6.1 (Cloudflare...
【未解決】ページのスクロール パフォーマンスを高めるには?[jquery.min.js, PSI]
PageSpeed Insightsに「イベントリスナーをpassiveにしなさい」という注意書きがありました。 どうも jQuery 関係に問題があるようですが、わかりません。 jQueryそのものを除くことも考えましたが、Cocoonテ...
画像遅延読込みやカルーセル削除でサイト軽量化を試してみた
【82】さらに(一時的に)画像遅延読込みを有効にしてみた トップページをどこまで軽くできるのか検証するために、無効にしていた 「画像遅延読込み」を一時的に有効にしてみました。 確かに「オフスクリーン画像の遅延読込み」が改善します。 これは、...
【未解決】印刷用に表示したときだけPHPの処理したいけど…(メディアクエリとPHP)
メディアクエリが「print」のときに、画像遅延読込みを無効にしたいです。しかし、functions.php からメディアクエリを取得する方法がわからないので、とりあえず、front_page だけで画像遅延読込みを有効にするようにしてみま...

そのほかの効率化の工夫

データ転送を高速化するためのいろんな技術的な工夫があります。
ただし、複雑な大規模サイトには有効でも、小規模サイトではあまり効果がないこともあります。

  • ファイルを効率的な形式にする(WebP)
  • サーバキャッシュやブラウザキャッシュを利用する
  • よく使う要素をCDNから読み込む

この中では一番 目に見えて効果があったのは、画像を WebP形式に変更したことです。

内容をわかりやすくする

あとは「仕上げ」の部分。
PageSpeed Insightsの「ユーザー補助」や「SEO」も評価しています。

  • 画面がズレないように動的な要素のコンテナの大きさを指定する
  • 画像やリンクに注釈をつける
  • 文字の色コントラストやサイズを調整する
  • 画像の大きさを細かく指定する

画面がズレたり、ボタンが押しにくかったり、文字が見えにくかったり、
といった要素は人や検索エンジンに「優しく」ありません。
そこを細かく修正していきます。

[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した(calc, vw)
PageSpeed Insightsで計測したときに、CLS(Cumulative Layout Shift)が「0.33(不良)」になるのが気になっていました。 主な原因は、トップページで表示しているカルーセルです。 CSSの calc(...

[CSS] AdSense広告のCLSを改善した
AdSense広告の読込み途中で画面ズレが生じるので、あらかじめ高さを設定するようにしました。 /** 広告のCLS 改善 * */ .ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:280p...
[Cocoon] サイトのキーカラーを変更した
濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。 サイトの配色を試行錯誤 元の配色です。 臙脂色を基調した配色。 焦げ茶色をメインにした配色。 それをさらに濃くした配色です。 「ユーザー補助」 「ユーザー補助」の面で...
[PSI] サイトロゴの画像サイズを最適化した 「画像要素で width と height が明示的に指定されていない」(片方だけでは暗黙)
PageSpeed Insights(PSI)の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。 これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけ...

それぞれのやったことの記事(時系列)

試行錯誤を時系列順にならべるとこうなります。

内容効果対象
Plugin Load Filterプラグイン・JavaScriptを減らす
wp_dequeue_style
wp_dequeue_script
不要なCSS・JSの無効化
カスタム検索の遅延script async, defer
シェアボタンの除外pinit_main.js
画像の遅延読込み
カルーセルの無効化slick.js
jetpackのスタイルの無効化jetpack.css
jqueryの遅延読込みレンダリングを妨げるリソース(jquery)
jquery-migrateの除外レンダリングを妨げるリソース(jquery-migrate)
ヘッダーロゴの修正・サイズ指定適切なサイズのロゴ
カルーセルの読込み前の高さを指定CLS
AdSense広告の読込み前の高さを指定CLS
iframeTrackerフォームの要素にラベルが関連付けられていない
サイトのキーカラーを変更ユーザー補助
LiteSpeed Cacheサーバキャッシュとゲストモード
DNSプリフェッチを減らした不要なCDNのDNSプリフェッチを削除
jQueryのCDNをjsDelivrに変更した
FontAwesome 5 → 4 に変更Render Delayを減らす

[WordPress] サイト高速化のために不要なプラグイン処理を減らした(Plugin Load Filter, Site Kit by Google)
ページ表示速度を改善するため、Plugin Load Filterプラグインでトップページの Site Kit などを無効化した。 PageSpeed Insights のパフォーマンスが「54」から「70」に改善できた。(「使用していない...
[PHP] 不要なCSS/JavaScriptを無効化する(wp_dequeue_style, wp_dequeue_script)
トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。 項目変更前CSS/JS減パフォーマンス7071使用していないJavaScriptの削減0.40s0.60s使用していないVSSの削減0.35s0.45s...
「カスタム検索(サイト内検索)」スクリプトを除外した(cse.google.com/cse.js)
カスタム検索のスクリプト(cse.google.com/cse.js)が重そうです。 asyncによる遅延読込みを試しましたが、あまり効果がありませんでした。 結局、カスタム検索ボックスをトップページに載せるのではなく、別ページに分けてリン...

[PHP] jetpack.cssを無効化する
Jetpackプラグインを有効にすると、CSSとJavaScriptが読み込まれます。 /wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0 これを無効にします。 /** Jetpack...
[Cocoon]「pinit_main.js」を削除するには?(Pinterest)
Lighthouse Treemapで読み込まれている JavaScriptを見ていると、「」というコードが目に留まりました。 これは、Pinterestでシェアするため画像選択処理を記述したスクリプトです。 CocoonのSNSシェアの ...

画像遅延読込みやカルーセル削除でサイト軽量化を試してみた
【82】さらに(一時的に)画像遅延読込みを有効にしてみた トップページをどこまで軽くできるのか検証するために、無効にしていた 「画像遅延読込み」を一時的に有効にしてみました。 確かに「オフスクリーン画像の遅延読込み」が改善します。 これは、...

スクリプトとスタイルの遅延読込みのしかた[PSI](WordPress)
CSSは、とりあえずCocoonの「CSS縮小化」で除外できました。 jqueryは、wp_enqueue_script でフッター読込みに変更しました。 レンダリングを妨げるリソース 久々に PageSpeed Insights(PSI)...

【未解決】印刷用に表示したときだけPHPの処理したいけど…(メディアクエリとPHP)
メディアクエリが「print」のときに、画像遅延読込みを無効にしたいです。しかし、functions.php からメディアクエリを取得する方法がわからないので、とりあえず、front_page だけで画像遅延読込みを有効にするようにしてみま...
印刷用スタイルをメインCSSから分けた
@import print(CSS) かんたんな方法としては、CSS内で別CSSをインポートする方法があります。 @import url("print.css") print; しかし、この方法ではCSSがブラウザのキャッシュに入ってしまっ...

【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress]
PageSpeed Insightsで「レンダリングを妨げるリソースの除外」を見てみると、jqueryに関する2つのスクリプトが目につきました。 (Google CDN)jquery.min.js?ver=3.6.1 (Cloudflare...

[PSI] サイトロゴの画像サイズを最適化した 「画像要素で width と height が明示的に指定されていない」(片方だけでは暗黙)
PageSpeed Insights(PSI)の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。 これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけ...
【未解決】ページのスクロール パフォーマンスを高めるには?[jquery.min.js, PSI]
PageSpeed Insightsに「イベントリスナーをpassiveにしなさい」という注意書きがありました。 どうも jQuery 関係に問題があるようですが、わかりません。 jQueryそのものを除くことも考えましたが、Cocoonテ...

[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した(calc, vw)
PageSpeed Insightsで計測したときに、CLS(Cumulative Layout Shift)が「0.33(不良)」になるのが気になっていました。 主な原因は、トップページで表示しているカルーセルです。 CSSの calc(...

[CSS] AdSense広告のCLSを改善した
AdSense広告の読込み途中で画面ズレが生じるので、あらかじめ高さを設定するようにしました。 /** 広告のCLS 改善 * */ .ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:280p...

【断念】Cocoonテーマの「カルーセル」の代替プラグインを探した
たびたび Cocoonテーマのカルーセルの処理が重い(slickプラグインのjQuery)のが気になります。 別のプラグインに切り替えてみることにしました。新規記事の「カルーセル」表示できるプラグインを探します。 しかし、結論、現状のカルー...

フォームの要素にラベルが関連付けられていません(input#focus_retriever, iframeTracker)[PSI]
PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」として、「input#focus_retriever」が問題になっていました。 js-iframe-trackerを無効したら解決しました。 ifram...

[Cocoon] サイトのキーカラーを変更した
濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。 サイトの配色を試行錯誤 元の配色です。 臙脂色を基調した配色。 焦げ茶色をメインにした配色。 それをさらに濃くした配色です。 「ユーザー補助」 「ユーザー補助」の面で...

[Cocoon] LiteSpeed Cacheを改めて使ってみる
PageSpeed Insightsをみると、あとは「サーバーの応答時間」を改善するぐらいです。 以前、サーバーキャッシュを設定したら、更新が反映されなかったり、ページ内のランダム要素が固定化したり、とかえって困ることがありました。 改めて...

Cocoonの「事前読込みドメイン」を減らした(DNSプリフェッチ)
ついでに、「LiteSpeed Cacheのは、Cocoonの機能と重複する」ということで、Cocoonの事前読込み設定も確認してみました。 DNSプリフェッチ 事前読込みは、「DNSプリフェッチ」と「preconnect」に関係しています...

「最大コンテンツの描画」のRender Delayを減らす(Largest Contentful Paint)
LCP(Largest Contentful Paint)の数値を改善できないか、「Render Delay」に注目してみました。 使っていないアイコンフォントを軽量化したら、少し改善しました。 項目前後Largest Contentful...

WordPressの jQuery を jsDelivr に変えてみたけれど(CDNとパフォーマンス)
WordPressのjQueryの読込みを高速化するために、CDNの jsDeliver に変更してみました。 しかし、結果としては ほとんど違いは出てきませんでした。 WordPressデフォルトのGoogle Cloud CDN 自体が...

サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon]
サイト表示の負荷を減らすために、FontAwesome 5 から 4 に変更しました。 CSSで一部で FontAwesome 5のアイコンフォントを利用していたので、FontAwesome 4 に変えました。 Largest Conten...

QRコードを読み込むと、関連記事を確認できます。
PageSpeed Insightsのスコアを上げるためにしたこと(2023年7月)
【スポンサーリンク】
タイトルとURLをコピーしました