ハミングバードを使っているかつメディア設定の中サイズを「0」にしている方は、ショートコードで関連記事を表示させた時、無駄に大きなフルサイズの画像を呼び出している可能性があります。
WordPressの初期設定から変更していない方は特に問題ありませんが、メディア設定でサムネイル生成を無効化している方、数値を変更している方は、一度設定を見直してみて下さい。
メディア設定の確認
サムネイルの設定は、ダッシュボードの設定「メディア」から確認できます。
メディア設定の確認
| 初期値 | |
|---|---|
| サムネイル | 150 |
| 中サイズ | 300 |
| 大サイズ | 1024 |
メディアをアップロードすると、ここで設定したサムネイルが自動生成されます。また、ここには表示されていませんが、ハミングバードでは専用の「home-thum」画像が生成されます。
今回の問題は、中サイズの数値を「0」にして無効化しているケースです。
関連記事で呼び出されるサムネイル画像
僕も今までずっと気づいていなかったのですが、ハミングバードのショートコードで下記の様に関連記事を表示させた時、画像は「中サイズ（medium）」が呼び出されています。
ですが、先ほどのメディア設定で中サイズの数値を「0」にしている場合は、中サイズの画像がないため、代わりにフルサイズの画像が呼び出されます。横幅150px前後の小さな画像を表示させるのに、無駄に大きなフルサイズの画像を読み込んでいる訳です。
関連記事を複数表示させている場合は、ページの読み込みが遅くなります。
調べ方が分からない方は、関連記事に表示されている画像を右クリックして、「新しいタブで画像を開く」及び「検証」から呼び出している画像の大きさを確認して下さい。
関連記事に表示されているアイキャッチ画像の確認
明確な基準はありませんが、横幅500px以上の画像が呼び出されている場合は修正するべきです。
サムネイルを再生成する
今回のケースに当てはまる方は、サムネイルを再生成することで問題が解決されます。
まずは、ダッシュボードの設定「メディア」から中サイズの数値を初期値に戻します。
中サイズの設定を初期値に戻す
次に、プラグインRegenerate Thumbnailsをダウンロード＆有効化します。
ダッシュボードのツール「Regenerate Thumbnails」から、「Skip regenerating existing correctly sized thumbnails (faster).」にチェックが入っていることを確認して（正しいサイズのサムネイル再生成をスキップ）、「Regenerate Thumbnails For All 〇 Attachments」をクリックします。
サムネイルの再生成
後はサムネイルの再生成を待つだけです（画像が多いと完了までに少し時間がかかります）。
サムネイルの再生成が完了すれば、ショートコードの関連記事で表示される画像には、横幅300pxの中サイズの画像が呼び出されます。
最後に
今回のケースとは異なりますが、ハミングバードに限らず、途中でテーマを変更した際も同様、プラグイン「Regenerate Thumbnails」を使ってサムネイルを再生成することをおすすめします。テーマ独自のサムネイルは、テーマを有効化した後にアップロードした画像でしか生成されないからです。
つまり、テーマを有効化する前にアップロードした画像は、外見上問題なく表示されていても、実は無駄に大きなフルサイズや中サイズの画像を呼び出している可能性がある訳です。
ちなみに、ストークの関連記事の画像には、テーマ専用のサムネイル「home-thum」が呼び出されているので、今回の様な問題は起きません。
ダッシュボードの外観「テーマエディター」から、「hummingbird: shortcode.php」を編集する方法もあります。この場合は、中サイズを呼び出している値「medium」をハミングバード専用のサムネイル「home-thum」に書き換えると、横幅360pxの画像が呼び出されます。但し、テーマをアップデートすると初期化されるので、その時は再編集する必要があります。