23 lines
1.1 KiB
Markdown
23 lines
1.1 KiB
Markdown
---
|
|
tip_number: 39
|
|
date: 2026-07-20
|
|
category: performance
|
|
status: 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 <img> 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
|
|
|
|
1. Add loading='lazy' decoding='async' to every <img> of item icons. Free win, no JS.
|
|
2. If using a custom Image component, pass these props through.
|
|
3. Use fetchpriority='high' only on the first visible item image (LCP).
|