rrit
(Ayke)
1
投稿のプロフィール画像や画像要素は、loading="lazy"属性を設定することで遅延読み込みされます。
絵文字はこの機能から漏れています。
<img src="https://emoji.discourse-cdn.com/twitter/sloth.png?v=12" title=":sloth:" class="emoji" alt=":sloth:">
ソースコードのどこで絵文字タグが生成されているのか見つけられませんでした。
絵文字は投稿に「焼き込まれて」いるのでしょうか?
「いいね!」 1
sam
(Sam Saffron)
3
ハードコーディングされた幅と高さを追加した理由について詳しく教えていただけますか? なぜ私たちのCSSソリューションでは不十分なのでしょうか?
rrit
(Ayke)
4
個人的には、img要素が生成される際に常にwidthとheight属性を追加するのは良いマナーだと思います。それは、どの画像ファイルを正確に使用しているかを確実に知ることができる場所だからです。CSSは実際の画像ファイルからはかけ離れています。
さらに、ブラウザはこの画像サイズに関する追加情報を使用して、画像ファイルを読み込む前、およびCSSの解析前にaspect-ratioを計算します。
この場合、絵文字は多くの異なる場所で使用されており、CSSでサイズを定義することが誤ってスキップされることがあります。
例えば、PageSpeedのこのトピックのクローラービューを参照してください。
「いいね!」 2
sam
(Sam Saffron)
5
なるほど、ブラウザはこれを使ってアスペクト比を判断し、CSSの柔軟性を高め(CSSによるブロックを制限し)、より良いものになるということですね。HTMLは少し冗長になりますが。
「いいね!」 1
pmusaraj
(Penar Musaraj)
6
このPRはマージされました。ご協力ありがとうございます @rrit!
「いいね!」 2