WordPressで画像を貼り付けたり、the_post_thumbnailとかで画像を取得したりすると、自動設定されているsrcset属性。WordPress4.4からレスポンシブイメージとして実装されたもので、表示されるサイズに合わせて画像を調整してくれるとても便利なものです。（300px以上の場合）
記事中に貼り付ける画像については、とても便利なのでそのままsrcset属性をありがたく使用させていただいているのですが、サムネイル画像を使う部分（当サイトのサムネイルは幅400px）には、srcset属性を使わなくてもいいんじゃないかと思いました。なぜ、そんなことを思ったかというと、スマートフォンで当サイトを表示した時、記事のヘッダー部分にアイキャッチを丸い部分とその背景で表示させており、この部分をテンプレートタグthe_post_thumbnailで取得するとsrcset属性も出力しているのですが、表示までに下図のように若干タイムラグが発生していました。
画像とはいえ、ファーストビューなので、できるだけ早く表示したいと考え、この部分はサイズを抑えたthumbnailサイズの画像のみを読み込ませたら、少しでも表示が早くなるかなと妄想し、srcset属性を使わない読み込み方法を試してみました。
画像を取得するコード
これまで、the_post_thumbnailを利用して画像を取得していましたが、下記のコードを使い画像を取得するように変更しました。また、最後の行の<img>タグ内をカスタムすれば自分の思い通りの<img>タグが出力できます。
上記コードで画像を取得すると、以下のような<img>タグが出力されるかと思います。
まとめ
もしかすると、自分の環境（iPhone）だけかもしれませんが、上記のコードで画像を取得する方法に変更すると、画像表示までのタイムラグが少なくなりました。今回当サイトでこの変更を行った箇所は、Homeの記事一覧のサムネイル、各アーカイブ一覧のサムネイル、記事と固定ページヘッダー部分の画像です。自分的には今のところこの変更を行った結果表示が早くなったのでしばらく様子を見ていきたいなと思います。