lazyload関連記事を非公開にします

ブラウザによるネイティブlazyloadの登場

私と取り入れていたlazyloadは JSプラグイン です。現在は至極簡単な記載をするだけでブラウザがlazyloadを実現してくれるので、今後恐らく第三プラグインによるlazyloadの利用は減っていくだろうと思います。

FC2ブログの選択はpreload

運営による速度改善について。大手ブログサービスのほとんどがlazyloadを選択しているようですが、FC2ではその真逆の preload です。これはもう確定でありそういう方針という判断で良いと思います。

lazyload というのは「リソースの取得を故意に送らせて、初期(初回)表示に無駄を生じさせない」という手法です。逆に preload というのは「重要なリソースを真っ先に読み込む(ローディングを最優先にする)」という手法。

少し前までは特定のFC2独自変数(画像関連)のみの適用だったんですが、現在ではみなさんが記事に掲載した画像も自動でpreloadが適用されるようになっています。他社の多くはlazyloadを選択しているがFC2はpreloadで確定ということではないかと。

個人的には正直言うとpreloadはやめてほしかった(笑)
というのは、above the fold(ファーストビュー)外、つまりbelow the fold(ファーストビューに収まらない範囲)は初回ロード時に情報を取得する必要はないわけで、最も良い形は above the foldの画像はpreload、below the foldの画像はlazyload です。けれどもFC2ブログ側でそこまでの切り分け・区分というのは難しいので「全画像をpreload」という形になっています。

そうは言っても、FC2ブログがlazyloadではなくpreloadを選択した、というのは賢明な判断だと思います。FC2ブログの場合は個人あるいはテンプレート製作者の意思によって既にlazyloadが導入されていることが明白で、そこへもってFC2の独自lazyloadが導入されてしまうと現場は大混乱 ^^;
それに今となってはlazyloadならブラウザがやってくれますしね。ユーザーが手出しできないバックエンド(サーバーサイド)で処理するpreloadを選んだのは正解だと思います。そして既にlazyloadが導入されているテンプレートでも視覚的あるいは動作的あるいはSEO的な問題は生じません。

今後どうするか

lazyloadをご紹介した際に 導入に際し最も注意しなければいけないのは、自主的な継続が可能かどうかの判断 ですよ、という点をお伝えしました。「仮にFC2運営側で何らかの改善があった場合にバッティングする可能性(今回のpreload導入にあたります)」や「新しいweb技術が出てくる可能性(今回のブラウザのネイティブlazyloadがそれにあたります)」など。

で、実際どちらも登場したわけです。けれどもlazyloadを既に導入した方、弊ブログの指南を実行された方の場合は lazysizes の導入、ということになりますが、テンプレートのみで利用されている場合は特に何の問題もありません。そのまま放置で大丈夫です。

注意すべきは 個別記事でもlazysizesを利用している方 ですね。この場合仮に「ネイティブlazyloadに切り替える」にしても「FC2によるpreloadだけで行く」にしても、過去記事の問題がありますのでlazysizesを取り除くわけにいきません。なので私の方では今後もテンプレートには継続してlazysizesを導入していくことになります。

既にlazysizes用のhtmlを記載しているがこれを切り捨てたい、という場合には 記事のhtml修正 をすることになります。そしてこの点については当初からお伝えしている通り自己責任でお願いします。

今後のおすすめ

ちょっと悩むところなんですけどねぇ (´・ｪ・｀)
FC2の方針が変更されたらどうするの？といった点も踏まえて、以下のような内容をおすすめします。画像の掲載の仕方です。

<img src="画像アドレス" width="横原寸" height="縦原寸" alt="代替テキスト" loading="lazy">

preloadされているのにlazyloadって意味なくね？と思われるかと思うんですが、FC2がpreloadを辞めてしまうことを考慮。preloadされた画像をlazyloadって、結局無駄なことをしているんですが、別にそれはそれで (´・ω・｀)

注意点は以下の通り

1. ブラウザのlazyloadはフワっと表示できない(実現するには別途JSが必要)
2. width 及び height 属性の記載を怠らない

このぐらいかな。たぶん。あと Safari がloading属性未実装です。パソコンだけでなくiOSのsafariも同様。ただこの loading 属性は既にGoogleChromeの独自実装ではなく正規属性に昇格していますので、Safariもいずれ実装してくるだろうとは思います。

なので現時点で「記事内でもlazysizesを利用している」という方で「画像フワっと」を継続したい場合はそのまま利用されると良いと思います。ソースはこんな感じになりますね。

<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="" width="" height="" alt="" loading="lazy">

念の為loading属性も入れてあります。ページ内スクロールの対策(移動先がずれる件)をされている方は、私の指南内容と同じでfigure要素であれば

<figure>
<div style="max-width: 横px;">
<div class="aspect-box spinner shadow-attachment" style="padding-top: calc(縦 / 横 * 100%);">
<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像アドレス" width="横実寸" height="縦実寸" alt="代替テキスト" loading="lazy">
</div>
</div>
</figure>

こうですね。この場合はほぼ確実にCLS(Cumulative Layout Shift, 表示位置などがずれること)を防げます。

まとめ

というわけで、現状FC2では 個人ユーザーは画像に対して特に対策する必要はない と言えるかと思います。ただし FC2新投稿画面の画像挿入ツールはwidth/ height属性が書き出されない という問題がありますので、自主的に書き入れないといけませんね。ここは改善して欲しいところですけどねぇ (´・ｪ・｀)