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

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

割と重要なお知らせ
2021/09/08 3
vanillaice (Akira)
vanillaice (Akira)
管理人からのお知らせ

これまで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属性が書き出されない という問題がありますので、自主的に書き入れないといけませんね。ここは改善して欲しいところですけどねぇ (´・ェ・`)

 3

There are no comments yet.
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/09/09 (Thu) 08:20
vanillaice (Akira)
vanillaice (Akira)
To カラーネームの件 内緒さん

こんにちは ('0')/
えっマジですか。なんか間違えて非表示にしたんだと思います ( ̄∀ ̄;)
再度公開しますのでお待ち下さいね。

-----
そうなんですよ。フワっができない。でもネイティブlazyの場合はthreshold値(しきい値?)がlazysizesより大分大きいというか、結構下の方まで読み込むので、出てくる様を見ることはあまり無いかも。

画像掲載メインで掲載数が多いブロガーさんで、さらに画像の容量を圧縮していない、といった場合にpreloadはちょっとどうかなぁ、と思ってるんですけどね (´・ェ・`)
preloadかー。うーん ( ̄∀ ̄;)
まぁ仕方ないね。運営さんの方針だから ^^;

内緒さんも夏バテ気をつけてくださいね。日本の夏って厳しい (;ωq`)

2021/09/09 (Thu) 15:49
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/09/09 (Thu) 16:39

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みくださいテンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリテンプレート一覧

割と重要なお知らせ