GoogleのPageSpeed Insightsのスコア改善に「画像を最適化する」の修正方法

ブログをやっているとページの読み込み速度が段々と遅くなり、訪問していただいた方が『遅い』と感じてしまえば、せっかくのアクセスを得られません。ここではGoogleのPageSpeed Insightsで行える「画像を最適化する」の修正方法についてです。

GoogleのPageSpeed Insightsとは

GoogleのPageSpeed InsightsとはHPやブログのコンテンツを解析し、ページの読み込み速度を測定して速度の改善策を提案してくれるサービスです。85以上のスコアはそのページのパフォーマンスが高いとなっていますが、昔やっていたブログでは散々な点数でした。

以下はGoogleからの引用です。

Page Speed Insights では、携帯端末やデスクトップ端末向けのページのパフォーマンスを測定します。URL を 2 回(モバイル ユーザー エージェントと PC ユーザー エージェントで 1 回ずつ)取得します。

PageSpeed のスコアの範囲は 0~100 ポイントです。スコアが大きいほど良好で、85 以上のスコアはそのページのパフォーマンスが高いことを示します。なお、PageSpeed Insights は継続的に改良されているため、新しいルールの追加や分析の改良に伴ってスコアが変わることがあります。

PageSpeed Insights について

画像を最適化する

GoogleのPageSpeed Insightsで計測するとブログの改善策が示されます。その中で「画像を最適化する」という指摘を受ける事が多くあります。画像の最適化方法は色々あります。

画像を最適化とは

画像を最適化とはサイトで使用している画像を視覚的な品質に大幅な影響を与えずにサイズを削減し、ページの読み込み速度を改善することです。

ユーザーがリソースの読み込みを待機する時間を削減するには、画像のサイズを最小限にします。画像のフォーマットや圧縮を適切に行うと、データのバイト数を大幅に節約できます。接続速度の遅いユーザーにとっては時間の節約になり、データ プランに制限のあるユーザーにとっては費用の節約になります。

すべての画像に対して基本的な最適化と高度な最適化の両方を行ってください。基本的な最適化には、不要なスペースの削除、色深度の最小許容レベルへの低減、画像のコメントの削除、適切なフォーマットでの画像の保存などがあります。基本的な最適化には、GIMP などの任意の画像編集プログラムを使用できます。高度な最適化としては、JPEG や PNG ファイルの高度な(ロスレス)圧縮が挙げられます。
画像を最適化する

TinyPNGでPNG・JPEG画像を圧縮

画像を圧縮する事でブログの表示速度は改善します。画像を圧縮するツールは色々ありますが、一番簡単なツールは『Tiny PNG』です。使い方は、画像をドロップボックスに放り込むだけ。あとは自動的に画像が圧縮されますので「download」リンクから圧縮画像をダウンロードするだけです。

 

 

 

EWWW Image Optimizerをダウンロード

WordPressを使っていれば、プラグイン『EWWW Image Optimizer』をインストールすれば画像をアップロードした時に自動で圧縮処理を行ってくれます。

EWWW Image Optimizerインストール手順
1.左メニュー【プラグインの新規追加】をクリック
2.右上検索窓に【EWWW Image Optimizer】と入力
3.EWWW Image Optimizerをインストールして【有効化】をクリック

 

 

WordPressプラグインEWWW Image Optimizerで画像一括最適化

EWWW Image Optimizerをダウンロードした後で、今までにアップロードした画像も一括で最適化処理できます。

EWWW Image Optimizerで画像一括最適化
1.左メニュー【設定-EWWW Image Optimizer】をクリック
2.右上の【一括最適化リンク】をクリック
3.【最適化されていない画像をスキャン】をクリック

 

 

 

最終的な「画像を最適化する」の修正方法

上記のように普段から圧縮処理を行っていてもGoogleのPageSpeed Insightsで「画像を最適化する」という指摘が出る場合は、PageSpeed Insightsの画面下の

画像、JavaScript、CSS リソース

をクリックすると改善点の内容をダウンロード出来ます。

 

 

ダウンロードした圧縮フォルダ内にimageフォルダがあります。その中の画像を再度アップロードする

以上の手順をとれば「画像を最適化する」という指摘は無くなります。但し、1つの記事(リンク)に対して行えば、すでに多くの記事が存在するサイトでは、相当な手間になります。アクセス解析などを利用しているのであれば、アクセスの多いページの改善を優先的に行えば有効的です。

まとめ

ここでは、GoogleのPageSpeed Insightsのスコア改善に「画像を最適化する」の修正方法を書いていますが、絶対に行う必要があるわけではありません。但し、サイトを見る方としては表示の遅いサイトであることは運営側には致命的です。

普段から出来る範囲で画像を圧縮していれば、あとの手間は減りますし、ページの表示スピードの改善にも繋がり、結果、ユーザーは見やすくなり、表示の遅い事で減ってしまうアクセスの改善にもなります。

ブログ開始直後から意識して行えば、あとで修正する手間は格段に少なくなります。