Most of your images load before anyone scrolls to them.
Pages fetch every image up front, including ones far below the fold that many visitors never see.
The Green Software Foundation suggests loading images only when they come into view. GreenCode's own website does this.
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.
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.
Share this