The problem

Pages fetch every image up front, including ones far below the fold that many visitors never see.

The fix you can use today

• Add loading="lazy" to images and iframes below the fold.
• Give images width and height so the layout doesn't jump.
• Keep the first-screen hero image eager.

The Green Software Foundation suggests loading images only when they come into view. GreenCode's own website does this.

Tools that help

• Lighthouse: audits a page for total byte weight, unused JavaScript and CSS, image formats and offscreen images
• Green Software Patterns catalogue (Green Software Foundation): cloud, web and AI patterns for reducing carbon, each reviewed by practitioners

How GreenCode helps

GreenCode helps tackle this by practising it on greencode.ai: WebP images, scripts only where they are used, purged styles and one self-hosted font. That cut a first view of the home page from 6,766 KB over 80 requests to 1,719 KB over 33. More on this.

Tags

#web-performance#images#frontend

Sources

• GreenCode State of the Art Review, D2.1 (2025), PDF p. 21: GSF pattern Defer Offscreen Images saves bandwidth and computing power on server and client
• Green hosting: native lazy loading on greencode.ai
• Green Software Foundation, Green Software Patterns: Defer offscreen images
• W3C, Web Sustainability Guidelines: lazy and deferred loading of media

All GreenCode Tech Tips