---
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).