tip #39: Native lazy-loading for item icons

2026-07-20 16:00:36 +00:00
parent 05bf8788b3
commit e3848384b2
2 changed files with 23 additions and 0 deletions
@@ -0,0 +1,22 @@
+---
+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).