ブログ、楽しんでますか？^^
時にブロガーの皆さん、記事内に画像をたくさん貼って、読み込みスピードが落ちてはいませんか？
このゆーちゅーぶろぐも画像をたくさんつかってます。
それはいいことなのですが、そのために読み込み速度が遅くなるとかえって逆効果だったりします。
それに、ブログを普段運営していても、自分が書いた記事の読み込み速度なんていちいち確認しませんよね。
他のデバイスでたまたま検索してみたら、想像以上に重くてびっくり！なんてこともあります。
僕も今回、重い腰をあげてそれらの画像が多くて速度が遅い記事をなんとかしよう！と思い、備忘録も兼ねて対策前と後でどのくらい評価がかわったのかということも踏まえて書いていきたいと思います。
画像が多いせいで重い…
簡単にできる対策は主に2つ！！
今回は、中でも簡単にできてすぐに効果が望める方法を2つ試してみました。
・「Lazy load」というプラグインを有効化
・「ewww image optimizer」というプラグインを有効化・設定
特に上の「Lazy load」というプラグインを有効化に関してマジ10秒で終わるのでおすすめです！
見えない部分の画像を後から読み込んでくれるプラグイン「Lazy load」
例えば記事内に10枚画像があったとしましょう。
けどこん10枚、1度にスマホやパソコンの画面に収まってませんよね？
スクロールしてるうちに次の画像が見えてくるはずです。
で、本来ならこの10枚全ての画像やテキスト情報なんかを全て読み込んでから記事の読み込みが完了するのですが、
「Lazy load」を有効化しておくだけで、「とりあえず必要最低限の情報を読み取って記事の読み込みを完了させ、画像は画面内に表示される直前で読み込んでくれるのです。
そのため、結果的に最初の読み込み速度はかなり上がるってワケ！
どれだけ速度上昇による評価がかわるの？
言葉でだらだらと説明していてもピンとこないので、まずは「PageSpeed Insights」をつかって検証しましょう。
【トップページをPageSpeed Insightsで検証】
「Lazy loadを有効化する前」
「Lazy loadを有効化した後」
【画像の多い記事をPageSpeed Insightsで検証】
「Lazy loadを有効化する前」
まさかのゼロ点。僕すごくびっくり。
「Lazy loadを有効化した後」
次に、「GTmetrix」をつかって検証してみました。
【トップページをGTmetrixで検証】
「Lazy loadを有効化する前」
「Lazy loadを有効化した後」
【画像の多い記事をGTmetrixで検証】
「Lazy loadを有効化する前」
「Lazy loadを有効化した後」
※GTmetrixでトップページを検証した時だけなぜか評価が下がってしましましたがたぶんこれは一時的なもの。
画像がめちゃくちゃ多い漫画の紹介記事では、Lazy loadの有効化の前後で大きく読み込みスピードと評価が上がっています！
Lazy load有効化の方法
ワードプレスを使ってる皆様ならプラグインの有効化の方法はわかると思うので、どのプラグインかだけ貼っておきます！
これです！
これをインストールして有効化、細かい設定はいりません。
「EWWW Image Optimizer」を有効化して画像を一括圧縮しよう
で、こちらが画像ファイルを軽くする主な方法の2つ目。
上のLazy loadと比べると少しだけ面倒です。
結果からいってしまうと、Lazy load有効化の後とあまりスピードは変わらなかったのですが、画像が大量に保存されているブログだと当然サーバーに負荷がかかってくるので、これから先何年もブログを続けていく意志のある方には是非おすすめです。
モバイル表示ではほとんど変わらなかったものの、デスクトップ表示では初めて60点以上を出すことができました（笑）
実際、無料のWPテーマを使っていた時はなぜか80点とかでていたので、あまりこの点数がSEOに直結するとは思わないほうがいいですね。
0点が出た時は画像が多すぎて途中で読み込みがフリーズするなどのエラーが起こっている時なので、そこはちゃんとPageSpeed Insightsでこまめに確認したほうがいいでしょう。
以下、画像を一括で圧縮できるプラグイン「EWWW Image Optimizer」の設定方法の説明です。
EWWW Image Optimizerの使い方
基本的な設定は基本デフォルトのままで大丈夫だと思いますが、
こちらの記事がとても参考になりました。
https://nakaeshogo.com/ewww-image-optimize/
で、このプラグインを有効化すると、【メディア】に【一括最適化】という項目が追加されます。
これを選択しましょう。
【最適化されていない画像をスキャンする】を選択。
ここで、【最適化を開始】を押すのですが、対象画像枚数が多いとかなり時間がかかるので、余裕のある時にやったほうがいいかもしれません。
自分の場合は約7000枚で約2時間でした！
WP内の画像がどんどん圧縮されていって軽くなります♪
ということで今回は画像の多い記事の読み込み速度を上げるための主な方法2つを紹介しました！
どちらも簡単ですぐに効果が望めるので是非一度試してみてくださいね。