PageSpeed InsightsでLCP（最大コンテンツの描画時間）が改善しない場合、原因になっているのがファーストビューの画像であることは珍しくありません。
表示速度改善をご依頼いただくサイトでも、「画像は圧縮しているのに遅い」というケースはよくあります。
実際には圧縮よりも、画像サイズそのものを見直した方が効果が大きいことも少なくありません。
記事を書いた人は信じられる？
最初に簡単に自己紹介をさせてください。
私は独学でサイト表示速度の改善方法を学びました。
高速化作業はPageSpeed Insightsの分析結果で図ることができ、施策効果が目に見えるもので、体感的に改善を感じることもできます。
当時はAIも今ほど普及していなかったので試行錯誤でスキルを身に付けました。
そのスキルを活かして、2019年ころからサイト高速化業務に携わってきましたが、2026年現在、1,000サイトは軽く超えた作業実績があります。
自己申告なので証拠はと言われるとなかなか示しづらいところはありますが、ココナラでのWordPress高速化作業実績がNo.1なのは確固たる証拠と言えると思います。
もちろんココナラ以外にランサーズでも作業実績があり、このサイトから直接依頼されるケースも多いです。
同業者さんから難しい改善を依頼されることも多々あります。
ネット検索でのWordPressの表示速度改善方法やAIの提案はまだまだあまく、効果がないものまで紹介、提案されることすらあります。
WordPressの表示速度改善方法を紹介している記事を、PageSpeed Insightsで分析したことはありますか？
立派なことを書いているのに残念なスコアになっていたりしませんか？
もちろん、運営するこのサイトのPageSpeed Insightsのスコアはほぼ100点です。
私は日本一サイト高速化をしてきているプロ、それも証明できる実績のあるプロだと自己評価しています。
1,000サイト以上を改善してきた本当のプロが、実践で結果を出せる本当の改善方法をご紹介します。
▽coconalaでの評価
https://coconala.com/users/2093261/reviews
表示サイズと画像サイズは別です
よくあるのが、画面では小さく表示されているのに、大きな画像をそのまま読み込んでいるケースです。
例えば、
- 画面では横400px程度で表示している
- 実際には横4,000px・2MBの画像を読み込んでいる
という状態です。
このような画像は、表示速度だけでなく通信量にも影響します。
PageSpeed Insightsで「適切なサイズの画像を配信してください」と指摘されている場合は、このケースを疑ってみてください。
私が目安にしている画像サイズ
画像の内容によって変わりますが、私が表示速度改善を行うときは、スマホのファーストビュー画像は次くらいのサイズを一つの目安にしています。
- 100KBを超える画像 … 一度見直したいサイズ
- 300KBを超える画像 … 優先的に改善したいサイズ
100KB程度であれば許容できるかなというイメージですが、ページの初回読み込みで100KBクラスの画像が何枚も読み込まれる場合はさらに注意です。
CSSやJavaScriptファイルを圧縮したり削ったりしてもせいぜい30KBとか50KBです。
それが画像1枚の見直しで300KBから100KBになるのは作業効率が良いです。
ページの初回読み込みで100KB前後の画像が何枚もあるケースでも”100KB”という数字だけにこだわらず、この画像ならもっとサイズを小さくできないか、しっかり精査する必要があります。
具体的にどうやってサイズを小さくするか
私は以下のパターンで小さくしています。
- 画像サイズ違い差し替え
- フォトショップで画像サイズ変更
- 拡張子是正
- webp配信
画像最適化はさまざまな情報やプラグインがあるおかげで、全く対策をされていないケースよりも何らかの対策をされているケースの方が多いです。
しかし不十分なことが多く、実際にはまだまだ改善の余地がありました。
あなたは上記4つのポイントを意識できていますか？
次から順番に解説をします。
画像サイズ違い差し替え
スマホ表示でPC用の画像を使用しているのであれば、スマホ時はスマホに適したサイズを表示させることで改善が期待できます。
WordPressの機能としてsrcset属性で自動的にウィンドウ幅に応じてサイズ違いを出し分けてくれる機能があるのですが、中にはこの機能をあえて潰しているテーマや、この機能自体使わずにハードコードしているケースもあります。
恐らくですが面倒なのでしょう。
私も思います。
「見た目同じなんだったら同じ画像で良いじゃん」
「スマホ用にいちいち画像サイズ変えるのめんどくせっ」
共感はできるのですが、ここを乗り越えるとワンランク高いデザイナー、コーダーになれます。
私の実務ではメディアライブラリにアップロードされた画像であれば自動的にサイズ違いは生成されていますので、その自動生成画像と置換しています。
でもやり方は何でも良いです。
自分のやりやすいやり方で、スマホ時にはスマホ表示に適した画像が表示されるようにしましょう。
フォトショップで画像サイズ変更
メディアライブラリではなく、テーマフォルダであったり、WordPressフォルダ外の画像が使われていた場合、これはもう自分で加工するしかありません。
レティナディスプレイを考慮すると実際の表示幅の2倍くらいが目安になります。
あくまで目安です。
横幅2000pxの画像をスマホ用にリサイズする時、スマホのウィンドウ幅が大体400px前後なことを踏まえると、基本的には800pxで良いと思います。
写真が売りのサイトで、画質はかなりこだわっている！という場合は1000pxとか大きめに。
画像にそこまでのこだわりが無く、少しでもスコア改善したい！という場合は700px、600pxでもいいと思います。
拡張子是正
写真を.png形式で使用しているケースが結構あります。
pngはロスレスなので、画質を優先してpngでダウンロードさせたり、デフォルトの保存形式がpngであったりするためでしょう。
しかし、写真はjpg形式で使用するのが適しています。
写真とは言っていますが、もうちょっと踏み込んで言うと、グラデーションが効いたたくさんの色素が使われた画像です。
何言ってんだ？と思ったら写真で良いです。
では.pngはどのような画像に適しているのか、それは背景透過や使用色素の少ないアイコンチックな画像です。
とにかく、写真を.pngで使用しているなら、一旦ダウンロードしてjpgに変換したものに差し替えるだけでも改善が期待できます。
変換はオンラインツールでもできますが、
https://www.google.com/search?q=png+jpg&oq=png
「EWWW Image Optimizer」プラグインなどでも行えます。
webp配信
たくさんの情報があるおかげで、最近はWebP配信を導入しているサイトも増えてきました。
もしまだだったらぜひやってください。
「EWWW Image Optimizer」「Converter for Media」などのプラグインで手軽にできますので。
ただしひとつ注意で、お名前.comのSDサーバーはPHPのGDライブラリがないためにWordPressからwebp変換できませんでした。
今でもできないかは未確認ですが、過去出来なかったのは事実なので、お名前.comのSDサーバーの場合は必要に応じてご自身で変換してください。
もう１つ、これ大事なのですが、png写真をwebp変換したのと、jpg写真をwebp変換したのではサイズが異なります。
もちろんjpg写真をwebp変換した方がサイズは小さくなりますので、前項の「拡張子是正」の大事さはここでも効いてきます。
「webp？すればいいんでしょ？」ではなく、適した画像形式からwebp変換されているかがポイントになります。
まとめ
画像サイズは表示速度改善というテーマの中では結構雑に扱われがちですが、案外奥が深いです。
しかも、PageSpeed Insightsのパフォーマンススコアに与える影響も大きいので、この基本をしっかりと把握できているかどうかで施策にも差が出ます。
私の実務ではとにかく画像サイズですね、しっかり確認しているのは。
細かい要素はありますが、ページの初回読み込みで読み込まれる画像は何枚か、それぞれサイズはどれくらいか。
200KBとか300KBとか、たまにメガクラスの画像が出てくることもありますが、そういうサイズの画像が多い時はちょっと大変だな、と思ったりします。
でも比較的簡単に取り組める高速化施策なので、「あとはやるだけ」です。
コメントを残す