WordPress個別サポート

Google PageSpeed Insightsでチェックした自分のサイトのスコアが20点台だったら、どうしますか?20点台だからダメだとか、何点以上が合格だとか、一概には言えませんが、せっかく作ったサイトのスコアが低すぎるのはガッカリですよね。

PageSpeed Insightsのスコアが20点台!

PageSpeed Insightsのスコアが20点台!

ここまで点数が低いと改善する気がなくなるかもしれませんが、あきらめるのはまだ早いです!単にスライドショーの画像サイズが原因ということもあるからです。

ここでは、スライドショーの作り方を間違えるだけでGoogle PageSpeed Insightsのスコアが20点台になるという事例を紹介します。

スポンサーリンク

PageSpeedで低スコアを再現

まずは、普通のスコアのサイトを用意します。スピードチェックすると89点(PC)です。まだスライドショーは表示していません。

スライドショーを入れる前(PageSpeed Insights)

スライドショーを入れる前のスコア(PageSpeed Insights)

スライドショーに使うサイズの大きい画像を準備します。準備した画像は単純にスマホで撮影した画像です。サイズは1枚につき2Mくらいあります。普通はこのサイズでスライドショーを作ることは推奨しませんが、テストなので大きいままのサイズで進めます。これを5枚使ってスライドショーを表示してみましょう。

スマホで撮影した画像をスライドショーに使う

スマホで撮影した画像をスライドショーに使う

サイズが大きくてもスライドショーの表示には問題なさそうに見えます。

表示されるスライドショー

表示されるスライドショー

ここでスピードチェックすると20点台(PC)に急落しました!

PageSpeedのスコアが20点台に急落!

PageSpeedのスコアが20点台に急落!

サイトの完成後にPageSpeed Insightsで20点台のスコアを見るとガッカリするかもしれませんが、このケースのように単にスライドショーだけが原因だとわかれば、修正も早いでしょう。

画像サイズを小さくしてPageSpeedで再チェック

スライドショーがスコア低下の原因だとわかっているので、画像のサイズを小さくしてみます。ここでは、幅を1200pxに縮小しました。サイズは2Mから200Kの10分の1になります。

画像を小さくする

スライドショーで使う画像を小さくする

PageSpeed Insightsでチェックしてみましょう。

画像を小さくしたらPageSpeedのスコアが80点台に戻る

画像を小さくしたらPageSpeedのスコアが80点台に戻る

スコアが80点台に戻りました!特別に大変な作業をしたわけではなく、スライドショーの画像サイズを小さくしただけです。スライドショーに限りません。ページにある画像のサイズや枚数を減らすだけでPageSpeed Insightsのスコアは改善できるということです。

20点台のスコアを見てガッカリしている方。原因は単純に画像のサイズが大きいとか、枚数が多すぎるのかもしれません。参考にして対処してみましょう。

「スライドショーに使う画像のサイズは小さく、枚数は少なく」
です。

メディアライブラリにアップロードした画像はWordPressの管理画面でトリミングしたりサイズを変更することができます。詳しくは、以下のページをご覧ください。

大きい画像はWordPress上でサイズの変更やトリミングもできます

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート