Tech Tip #25: Load images only when they're needed

Most of your images load before anyone scrolls to them.

Video created by explainapaper.com

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

Transcript

Most of your images load before anyone scrolls to them. Pages often fetch every image up front. That includes images far down the page. Many visitors never scroll that far. Their phone still downloads every one, and the server still sends them. Here is the fix you can use today. Add the lazy loading attribute to images below the first screen. Now each image loads only when it comes into view. Give every image a width and height, so the page does not jump. Keep the big picture at the top loading straight away. The Green Software Foundation suggests loading images only when they come into view. GreenCode's own website does this. Check your pages using tools like Lighthouse and the Green Software Patterns catalogue. GreenCode helps tackle this by practising it on greencode.ai, with light images and fewer scripts. Its home page's first view fell from six point eight to one point seven megabytes. That was GreenCode Tech Tip number twenty-five. Follow for the next tip, and find more on greencode.ai/tech-tips.

All GreenCode Tech Tips · All GreenCode videos

  • Tip #25
  • For Developers
  • Length 1:07
  • Category Web and front-end
GreenCode

Want this checked on your own system? Talk to the GreenCode team.

Get in touch