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
@@ -31,3 +31,4 @@ Going forward, new tips are pushed automatically by the `mc_survival_tips.py` cr
 - [Tip #37](tips/2026-07-17-037-crafting-ux-missing-item-highlight-in-recipe.md) (2026-07-17) — **crafting-ux**: Missing-item highlight in recipe
 - [Tip #37](tips/2026-07-18-037-search-fuzzy-search-for-items-recipes.md) (2026-07-18) — **search**: Fuzzy-Search for items & recipes
 - [Tip #38](tips/2026-07-19-038-admin-audit-log-who-changed-what.md) (2026-07-19) — **admin**: Audit-Log: who changed what
+- [Tip #39](tips/2026-07-20-039-performance-native-lazy-loading-for-item-icons.md) (2026-07-20) — **performance**: Native lazy-loading for item icons
@@ -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).