# 絵文字の遅延読み込みを追加

**URL:** https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024
**Category:** Development
**Created:** [2022 年 2 月 3 日午後 10:18 UTC](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024 "2022-02-03T22:18:02Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![rrit](https://avatars.discourse-cdn.com/v4/letter/r/b5ac83/32.png) [@rrit](https://meta.discourse.org/u/rrit)
#### Post date: [2022 年 2 月 8 日午前 2:42 UTC](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024/4 "2022-02-08T02:42:47Z")

</div>

個人的には、`img`要素が生成される際に常に`width`と`height`属性を追加するのは良いマナーだと思います。それは、どの画像ファイルを正確に使用しているかを確実に知ることができる場所だからです。CSSは実際の画像ファイルからはかけ離れています。

さらに、ブラウザはこの画像サイズに関する追加情報を使用して、画像ファイルを読み込む前、およびCSSの解析前に`aspect-ratio`を計算します。

> **[Multimedia: Images - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia)**
>
> Media, namely images and video, account for over 70% of the bytes downloaded for the average website. In terms of download performance, eliminating media, and reducing file size is the low-hanging fruit. This article looks at optimizing images and...

この場合、絵文字は多くの異なる場所で使用されており、CSSでサイズを定義することが誤ってスキップされることがあります。  
例えば、[PageSpeedのこのトピックのクローラービュー](https://pagespeed.web.dev/report?url=https%3A%2F%2Fmeta.discourse.org%2Ft%2Fadd-lazy-loading-for-emojis%2F217024)を参照してください。

 ![grafik](https://global.discourse-cdn.com/meta/original/3X/1/0/108a83766e92a8a16c6d254324d83ec1bc3d68a0.png)

---

_[View the full topic](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024)._