1.1 KiB
1.1 KiB
tip_number, date, category, status
| tip_number | date | category | status |
|---|---|---|---|
| 39 | 2026-07-20 | performance | pending |
Tip #39 — Native lazy-loading for item icons
Date: 2026-07-20
Category: performance
Source: MC-Survival Wiki Daily Tip (cron @ 18:00 MESZ)
Native lazy-loading for item icons
Add the native loading='lazy' and decoding='async' attributes to every item-icon so the browser only fetches images that are close to the viewport. It solves the wasted bandwidth problem on long item list and search-result pages that render 50+ thumbnails, most of which are below the fold on first paint. The signal is a mobile-first player base: on a 4G connection, 50 thumbnail fetches in parallel is a real perceived-performance cost, and lazy-loading is a free win with no JavaScript and no new dependencies. The complementary fetchpriority='high' on the LCP image is the only piece of nuance — that one image should not be lazy.
Implementation tips
- Add loading='lazy' decoding='async' to every
of item icons. Free win, no JS.
- If using a custom Image component, pass these props through.
- Use fetchpriority='high' only on the first visible item image (LCP).