しっかり表示速度を確認・改善しよう！
- ブログの表示速度なんて気にしたことない（初心者）
- ブログの表示速度が遅いことはわかってるけど対策できていない（初中級者）
- Googleに最適な画像圧縮方法があるなんて・・・知らなかった（中級者以上）
ホームページの表示速度の計測はGoogle公式のPageSpeed Insights
まず確認したことない人は今すぐにブログの表示速度を確認しましょう。
表示速度の確認は、Google公式のPageSpeed Insightsを使うのが確実です。
自分のブログのページのURLを入力し、分析をクリックしましょう。
各ページごとに行うことができるので、次の３つをチェックしましょう。
- トップページ
- プロフィールページ
- 代表的な記事１つ
わたしの結果はパソコンで76点、モバイルは47点という非常に残念なものでした。
主に結果に影響を与えるのは、サーバー、テーマ、そして画像です。
下にスクロールして見てみると詳しく何が原因でスコアが下がっているかを確認することができます。
私の場合は、「次世代フォーマットでの画像の配信」が2.61秒と表示速度を大きく下げている要因でした。
改善できる項目をクリックすると、さらに詳しく説明が出てきます。
フォーマット(format)がPNGになっているのが問題で、JPEG2000やWebPの画像フォーマットにするべきことがわかります。
これまではプラグインを使ってファイルサイズは最適化するようにしていたのですが、それではGoogleとしては不十分なようです。
- PNGやJPEGなどの通常の画像形式ではサイズを小さくしただけでは不十分
- 次世代フォーマットに変換することがGoogleに求められている
サイトの表示速度を改善するために次世代フォーマットに画像形式を変換
やるべきことは１つ！画像を次世代フォーマットに変えるだけ。
ただ、すでにアップロードしている画像を１つ１つ変えるのはかなりの修行です。
そこで、時間をかけずにEWWW Image Optimizerを使って次世代フォーマットに変換しましょう。
- PNGファイルをJPEGファイルにする
- JPEGファイルをGoogle推奨の次世代フォーマットのWebPにする（Google Chromeのみ対応）
本当は全てWebPフォーマットで表示するのが最速です。
しかし、それではGoogle Chrome以外からは見れなくなってしまうため、まずはPNGよりも早いJPEGファイルに変換します。
表示速度改善のためのステップ❶PNGファイルをJPEG形式にする
まず最低限やりたい表示速度改善策がPNGファイルを、JPEGファイルに変換することです。
JPEGファイルは次世代フォーマットほどは小さくありませんが、PNGファイルよりはサイズが小さい場合がほとんどです。
pngをJPEGファイルに変換することは、実は「EWWW Image Optimizer」の機能を使ってすべての画像に適用させることができます。
EWWW Image Optimizerを使ったことがない人は、プラグインから検索するか、こちらをクリックしてインストールしてください。
インストールが終わったら、設定からEWWW Image Optimizerを選びます。
設定の画面にタブがありますので、Convertを選びましょう。
Convertの画面のなかで、PNG to JPG Conversionを選びましょう。
これで設定はOKです。
これまでにアップロードしたPNG画像を全てまとめてJPEGに変えてしまいましょう！
メディアのなかの一括最適化を選びます。
「最適化されていない画像をスキャンする」をクリックし、スキャンが完了したら「最適化を開始」をクリックしましょう。
30-40%ほど、PNGとして小さくしていたよりもさらにサイズを小さくしてくれます。
注意点：たまに変換の過程で画像が消えてしまうので注意
この画像のグレーの箇所は、もともとPNGの画像があった場所です。
JPEGに変換する際にうまくできずに消えてしまったようです。
このようなこともあるので、画像のバックアップを取っておきましょう。
一括最適化できなかったファイルを手動で変換する方法
消えてしまったファイルなど、一括最適化でできなかった画像は、Google公認のSquooshというオンラインソフトを用いて変換しましょう。
Squooshを開いたら、ドラッグ&ドロップするか、Select an imageをクリックして変換したい画像を選択します。
上記のような画像になったら、まずはCompressがMozJPEGになっていることを確認しましょう。
そして、Qualityのバーをずらすことで、圧縮率を変えることができます。
確認して右下のボタンをクリックすると、次世代フォーマットのMozJPEGになった画像がダウンロードできます。
Squooshに関しては、にゃもさんのブログを参考にさせていただきました。
表示速度改善のためのステップ❷JPEGをGoogleの求める次世代フォーマットWebPに変換
すべての画像をPNGからJPEGにしたら、最終ステップとしてWebPフォーマットで表示できる場合は表示するようにしましょう。
再び、設定からEWWW Image Optimizerを選択肢、WebPのタブを選びましょう。
一番上にある、JPG、PNGからWebP をクリックして、設定を保存します。
設定を保存すると、同じ画面の下の方に、上の画像のような内容が出てきます。
「リライトルールを挿入する」をクリックしましょう。
これにより、WebPで表示できる場合はWebP、それ以外んの場合は元のフォーマット（JPEG）で表示されます。
横に「導入成功」と出てきたら設定完了です。
PNGからJPEGに変換した時と同様に、メディアから一括最適化を選択して、最適化しましょう。
WebPになっているかの確認方法
デベロッパーツールで確認しましょう。
networkのタブで、イメージの箇所にwebpと表示されていれば成功です。
まとめ：ワードプレスでPNGやJPEGを変換してブログの表示速度を改善
以上、この記事では画像を変換することで表示速度を改善する方法をご紹介しました。
画像を変換することで、パソコンのスコアは92点、モバイルは71点まであがりました。
サイトの表示速度を改善し、維持することは中長期的にSEOで良いスコアを取っていくことにつながります。
そして今後、画像をアップロードする前に、毎回Squooshでサイズを縮小し、Googleの求める次世代フォーマットとすることで、表示速度を早く維持できます。
２０１９年５月の半ばくらいから、アドセンスで「要注意 - ads.txt ファイルが含まれていないサイトがあります。収益に重大な影響が出ないよう、この問題を今すぐ修正してください。」という注意が出る人が続出しています。直し方を確認し[…]
このブログは、ワードプレスでCocoonという無料テーマをもとに立ち上げました。無料でありながらかなり優秀といわれるCocoonのテーマをもとに、「他のブログとは差別化したデザイン」にしたいという思いから、様々なツールや[…]
グリット先月末にアドセンス合格から、かなりの時間ブログネタばっかり考えているグリット@GlobalLifetips1です。 ぐら令和の最初はブログばっかりやってたから、いま[…]
