PR

PageSpeed Insights で WordPress サイトのパフォーマンスの改善〜画像のWebP化

AI
記事内に広告が含まれている事があります。

PageSpeed Insights このブログのパフォーマンスを測ってみた
PCはまあまあ
とは言うものの68点
スマホは32点。こりゃやばい・・・なんとかせねば・・・

PC

スマホ

PageSpeed Insights 低評価が出ちゃったので、どうしたら良いですか? Chat GPT 先生教えて〜

秋田
秋田

PageSpeed Insights 低評価が出ちゃったので、どうしたら良いですか?
サイトはWordPress で作ってます。

chatGPT先生
chatGPT先生

GoogleのPageSpeed Insightsで低評価が出た場合、サイトのパフォーマンスを改善するためにいくつかの対策を試みることができます。特にWordPressサイトでは、以下の方法が有効です:

  1. キャッシュの利用:
    • キャッシュプラグイン(例:W3 Total Cache、WP Super Cache)をインストールして設定します。
    • ブラウザキャッシュの設定を最適化します。
  2. 画像の最適化:
    • 画像を圧縮してサイズを小さくします(EWWW Image Optimizerなどのプラグインが有効)。
    • 必要に応じて遅延ロード(Lazy Load)を設定します。
  3. CSSとJavaScriptの最適化:
    • CSSとJavaScriptを圧縮し、不要なコードを削除します。
    • CSSとJavaScriptの読み込みを最適化し(例:非同期読み込み)、ページのレンダリングをブロックしないようにします。
  4. Webホスティングの改善:
    • より高速なホスティングサービスに移行することを検討します。
    • CDN(コンテンツ配信ネットワーク)の使用を検討します。
  5. WordPressテーマとプラグインの最適化:
    • 高速で軽量なテーマを選択します。
    • 必要のないプラグインを削除し、使用中のプラグインは最新の状態に保ちます。
  6. データベースの最適化:
    • 定期的にデータベースをクリーンアップし、不要なデータを削除します。
    • データベースの最適化プラグイン(例:WP-Optimize)を利用します。
  7. モバイル最適化:
    • モバイルフレンドリーなデザインを確保します。
    • レスポンシブデザインを採用しているか確認します。
  8. サーバー応答時間の短縮:
    • PHPのバージョンを最新にアップデートします。
    • サーバーの設定を調整し、必要に応じてリソースを増強します。

これらの対策を実施することで、PageSpeed Insightsのスコアを改善し、サイトのロード速度を向上させることができます。また、これらの改善策を定期的に見直し、継続的にサイトのパフォーマンスを最適化することが重要です。

秋田
秋田

ふむふむ・・・

「キャッシュの利用」「CSSとJavaScriptの最適化」

 使っているテーマはCocoon なので、Cocoon → サイト高速化

・ブラウザキャッシュ
・HTML縮小化
・CSS縮小化
・JavaScript縮小化

それぞれにチェックをして保存。

秋田
秋田

「画像の最適化」

EWWW Image Optimizer を入れているので、これはちょっと研究。

Lazy Load は Cocoon → サイト高速化 でチェック入っているので良し。

「Webホスティングの改善」

これはまあ、今はどうになるわけでもないのでスルー

「WordPressテーマとプラグインの最適化」

Cocoon だから大丈夫と信じよう。

「データベースの最適化」

これも研究。WP-Optimize ね。

「モバイル最適化」

Cocoon だから大丈夫と信じよう。

「サーバー応答時間の短縮」
PHPは最新のバージョンのはずなので、これもよし。

EWWW Image Optimizer で画像の圧縮と WP-Optimize で データベースの最適化 に着手

秋田
秋田

早速ググりますかね
「EWWW Image Optimizer で画像の圧縮」

Google 先生
Google 先生
秋田
秋田

ありがとうございます〜
今回参考にさせていただくサイトは
【2024年1月版】EWWW Image Optimizerの最新設定方法と正しい使い方についてわかりやすく解説

こちらを参考にさせていただきます!

秋田
秋田

このプラグインを使って、最適化されていない画像を一括で最適化しました。
サイト軽くなったかなぁ〜?

秋田
秋田

気が遠くなる時間なので一晩寝かすことにしました。

秋田
秋田

一晩かかって完成。全体の画像圧縮をしてくれました。待っている間に色々と調べっていたら Google 先生がWebPが良いぞ。って

秋田
秋田

早速こちらに習って画像を WebP化していこうと思います。
.htaccess とかもいじる必要があるんですね。
ちょっとハードル高めですが、ボタン一つで書き入れてくれました。
詳しくは上記サイト確認ください。

秋田
秋田

WebP にする画像が 23,050 もあるので、お昼ご飯を食べに行ってきます〜

秋田
秋田

お昼ご飯から帰ってきても終わってなかったけど、しばらく放置していたら終わってました。
WebPで画像が来てるか確認してみます〜

秋田
秋田

Chromの 開発/管理ツールで確認した所、見事webp になってました〜〜〜!
嬉しい!

これで少しはスコア良くなってるか?確認してみます!

PC

スマホ

秋田
秋田

なんだかちっとも良くなってないので、ちょっと凹んでます・・・😭

じゃあ、気を取り直して Google 先生に「WP-Optimize」の使い方で良いところを紹介してもらいましょう。

秋田
秋田

Google 先生ありがとうございます。
このサイトを参考にして、早速取り組んでみます〜

秋田
秋田

データベースの最適化をしたのでスコア確認〜〜〜

PC

スマホ

秋田
秋田

少しずつよくなってきた。

JavaScript の読み込みが良くないっぽい・・・

Google 先生に聞いたら以下のサイトを教えてくれたので、早速トライ。

Java Scriptsをプラグインを使ってサイトスピードをあげた方法|41→83

秋田
秋田

show_ads_impl_with_ama_fy2021.js
adsbygoogle.js
analytics.js
sharethis.js

jquery.min.js
jquery-migrate.min.js


これらを遅延設定してみた

PC

スマホ

秋田
秋田

おぉ〜〜〜なんとか63まで行った。
ちょっと大変過ぎたので、今回はここまで。
これをするより CDN を入れた方が早いかも。
近いうちにCDN導入してみたいと思います〜

最後までお付き合いありがとうございました。

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