Google PageSpeed Insights

Google Site Kitが、 「あなたのサイト、モバイルではかなり遅いですよ。」 と教えてくれた。

世の中はモバイル重視なので、ここが遅いのは致命的。

とゆーわけで、PageSpeed Insightsで調べてみる。

 

なぬ……モバイルのサイトパフォーマンスが17、デスクトップは56……。

pagespeed-insights-1

メインのサイトもモバイルは34、デスクトップは60と、かなり低い。

 

ラボデータをみると、

合計ブロック時間が1,500msを超えていて対応が必須のよう。

pagespeed-insights-2

pagespeed-insights-3  

 

とゆーわけで、診断結果に従って、改善を試みた。

  • 不要なプラグインの削除
  • テーマを変更し、不要なテーマを削除
  • 不要なCSSコードや使用していないJavascriptの削除
  • サーバーのPHPのVer.の更新(こちら
  • レンダリングを妨げるリソースの除外(こちら
  • 画像サイズの縮小と次世代フォーマットの適応(こちら
  • 溜まっていたゴミデータを削除(こちら
  • キャッシュの利用(こちら
  • 画像の遅延読み込み(こちら
  • アドセンスの自動広告を停止
  • ウェブフォント読込中のテキストの表示(CSSにfont-display: swapを追加)
  • Javascriptファイルをフッダー行に移動(こちら
  • (後日 )課題なROMサイズの回避(こちら
  • (後日 第三者コードの影響を抑える(こちら
  • テキスト圧縮の有効化
  • 必須のドメインへの事前接続

この時点で、

  • モバイル:51
  • PC:88

かなり改善したけど……  

 

「第三者コードの影響を抑える」 ために、まずはFacebook回避のためにシェアボタンのプラグインを無効化した。

Google Adsenseが一番大きそうだけど、これを削るのは痛いので、自動広告の解除で対応。

もう少しいい方法もありそうなので、調べたい。  

 

やっぱり一番にメスを入れる必要があるのは、JavaScriptの削除と課題なROMサイズの回避のよう。

ROMサイズは、850あたりが警告上限のようだが、 私の場合は 2,374も要素あり。。。

 

ウィジェット内のカテゴリー、アーカイブ、HTML内のテーブルetc.がまず手を付けるべきところのよう。

今回は時間がないので、次回までの検討課題とする。  

※12/12/2020追記:地道にHTMLとCSSを修正していったところ、警告上限以下にまで減らす事ができた。

 

あとは、低速化を招くプラグインも検討が必要か……

  • AllInOneSEO
  • Responsive Lightbox
  • Pz-LinkCard
  • WP-PageNavi
  • WordPress Related Posts
  • WordPress Popular Posts

自分のサイトでは、このうち4つのプラグインを使っている。 全部大事なんだけど……もうちょっと考えてみよう……  

References