表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説

これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse

[kzms2]

要素読み込みや表示を簡単に制御して、表示高速化する「content-visibility」「Lazy loading」「contain」について簡単に解説しました☺️ 対応ブラウザに偏りはありますが簡単実装できるので試してみてください✍️

[diveintounlimit]

Googleが積極的に仕様策定に参加し始めてからというもの、「スタイル」に関係ないCSSや「意味」の無いHTML属性がどんどん追加されていくのをなんとも言えない気分で見ている。殆どの仕様にGoogleの名前が入ってるんだよな

[masasia0807]

なんかSafariがIE的なポジションになってるよな、最近。

[kvx]

別に採用したからって対応できないブラウザで崩れるわけじゃないから積極的に使っていいんじゃないかな。

[nida3001]

iOS Safariは前からIE化してますよ。むしろIEはできないことが明確である意味わかりやすかったが、iOSは古いバージョンがよく生存しているのでもっとつらい

[flirt774]

事実上のchrome独占が浮かび上がる。とはいっても採用するには他ブラウザの実装を待たないといけない

[raydive]

lazy loadingは次期Safariは実装される予定なので、この記事だけであれこれ言うのはさすがに情報追えてないのでは。

[abababababababa]

ヤフってくださいで吹いたw ヤフー関係の人？と思ったらYahoo!さんそのものだった。

[silossowski]

safariが第２のIE化しているというよりも、safariはより厳格にWeb標準に準拠しようとしているんだと思う。chromeはそのへんわりとおおらかなんだけど、safariはより頑固で、最新の便利独自実装には追従しないイメージ

[lifeisadog]

こんなところにも「近しい」誤用問題が／iPhoneのSafariで対応してないならlazy loadingとか他の方法で実装するしかないじゃん

[bleu-bleut]

loading, content-visibility, contain

[soralist164]

Lazy loading、試してみよ。

[hanabi_hibana]

画像やコンテンツの読み込み遅延関連の新仕様について

[efcl]

content-visibilityとloading=lazyについて

[nilab]

表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説 - Yahoo! JAPAN Tech Blog

[YaSuYuKi]

edgeはChromium移行前のLegacy edgeのことかな。今はChromiumの状況に依存するだろう。Safariは保守的で常にChromeより遅れる。実装しないわけではない(明らかに怪しいものは除く。WebUSBとか)。Braveも中身はChromium

[Keisuke69]

“content-visibility”はどっかで聞いたことあったけど理解が深まった。Lasy loadingもだけどどんどん仕様が追いついてきてる

[laptice]

WebフロントエンドにおけるパフォーマンスアップのTips集。

[eagleyama]

わかりやすい

[yomogi]

本題ではないですが、「ヤフってください」が新鮮。「ググる」の対抗表現。笑

[web_designer]

safari対応しないのかなー

[tettekete37564]

“W3C（ダブリュースリーシー” < だぶるさんしーと読んでたわ / プロプラで一般ユーザ様の利便性のためにはセキュリティーホールでも何でも全てを捧げますというスタイルの IE とその逆の Safari では文字通り逆だと思うが

[sqrt]

safariはweb標準からどんどん遅れてくよね…appleもWHATWGのメンバーなのに何故？

[ueken65]

‪htmlとcss、頑張って新しい技術を使わないと、いつまでも惰性で古い技術を使いがちになってしまうんだよな

[yamadar]

JSでやっていたものがどんどんCSSに取り込まれていくなぁ

[phoope]

これは嬉しいシェア

[zoidstown]

safari・・・・

[mistake3]

もう完全にIE11は終わりだな

[thesecret3]

肝心のiphoneで使えないのか。

[kuzumaji]

Chrome優秀　Edgeも結構対応できるんだなぁ

[blueboy]

　画像の数が多いページでは有益だが、私のサイトみたいに、画像の数が１ページに１点ぐらいしかないサイトでは、どっちにしてもたいして変わらない。　「飛躍的に向上」かどうかは、ページしだい。

[ducky19999]

一覧にbraveがない定期

[yoiIT]

けっこう有名なやつ。

[cl-gaku]

“Safari”