From e3848384b2eb55e3c73816ad797d745c25cd7d70 Mon Sep 17 00:00:00 2001 From: Hermes AI Bot Date: Mon, 20 Jul 2026 16:00:36 +0000 Subject: [PATCH] tip #39: Native lazy-loading for item icons --- TIPS.md | 1 + ...ance-native-lazy-loading-for-item-icons.md | 22 +++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 tips/2026-07-20-039-performance-native-lazy-loading-for-item-icons.md diff --git a/TIPS.md b/TIPS.md index 1c9bd3e..9f00289 100644 --- a/TIPS.md +++ b/TIPS.md @@ -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 diff --git a/tips/2026-07-20-039-performance-native-lazy-loading-for-item-icons.md b/tips/2026-07-20-039-performance-native-lazy-loading-for-item-icons.md new file mode 100644 index 0000000..676bd4b --- /dev/null +++ b/tips/2026-07-20-039-performance-native-lazy-loading-for-item-icons.md @@ -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 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 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).