Motta Industries Blog

The homepage is usually the first thing a visitor sees, and on most small business sites it is also the heaviest page. A full-width hero photo, a slider with five more, a row of product shots and a team picture can easily add up to several megabytes. On a fast office connection that may feel fine. On a phone in a parking lot, it can mean a blank screen for long enough that people give up.

Images are not the only reason a page feels slow, but they are one of the easiest places to start. This fix list explains what recent performance research says about images, what usually goes wrong and how to work through the problems in a sensible order.

What the data says about images and speed

Google measures how quickly the main content of a page appears with a metric called Largest Contentful Paint, or LCP. A good LCP is 2.5 seconds or less. On most pages, the largest element is an image, often the hero photo at the top of the homepage.

In an August 2024 post, Common misconceptions about how to optimize LCP, the Chrome team looked at field data from real page loads. The headline finding surprised many developers: the time spent actually downloading the main image is almost never the biggest problem. For most sites with poor LCP, downloading the image took less than 10 percent of the total time. The larger delays came from a slow server response and, especially, from the time between the first byte of the page arriving and the browser even starting to request the image. The median site with poor LCP waited about 1.3 seconds before beginning that download.

That does not mean file size is irrelevant. The same post says sending fewer bytes is almost always a win, and that many sites still serve needlessly large images that basic compression would fix. It means a complete fix list has to cover both how big your images are and how quickly the browser is told to load them.

Fix 1: Find out which image matters most

Before changing anything, identify the image that becomes the page’s largest element. Free tools such as PageSpeed Insights and the Lighthouse panel in Chrome’s developer tools name the LCP element directly. On most homepages it is the hero image or the first slide of a carousel.

Write down its file name, dimensions and file size. Everything in this list should be checked against that image first, then applied to the rest of the page.

Fix 2: Resize images to the size they are shown

The most common problem on small business sites is a photo straight from a camera or phone, uploaded at 4,000 pixels wide and displayed in a box 1,200 pixels wide. The browser still downloads every pixel.

Resize images before uploading, or use your content management system’s built-in image sizes. A full-width hero rarely needs to be wider than about 2,000 pixels, and a product thumbnail may need only a few hundred. If your site offers several sizes of the same image, make sure the theme actually uses the smaller ones on mobile screens.

Fix 3: Compress and choose a modern format

After resizing, compress. Most photos can lose a large share of their file size with no difference visible to a normal visitor. Modern formats such as WebP and AVIF usually produce smaller files than older JPEG and PNG files at similar quality, and current browsers support them widely.

Keep PNG for graphics that need sharp edges or transparency, such as a logo, and consider SVG for simple icons. Avoid using large PNG files for photographs.

While you are handling each file, give it a descriptive file name and write short alt text that describes what the image shows. Neither changes load time, but both help visitors using screen readers and give search engines useful context about the photo. It is far easier to do this during a cleanup than to return to hundreds of images later.

Fix 4: Stop lazy loading the image people see first

Lazy loading tells the browser to wait before downloading an image until it is close to the visible screen. It is a useful technique for images further down the page. Applied to the hero image, it backfires.

A web.dev analysis, The performance effects of too much lazy loading, tested this on WordPress pages. Lazy loading clearly reduced the number of image bytes downloaded, but when it was applied to images within the initial viewport, LCP got slower. On sample archive pages, turning lazy loading off improved LCP by around 13 to 15 percent. A fix that skipped lazy loading only for images likely to appear at the top of the page reversed the slowdown while keeping the byte savings.

In practice: images below the first screen should be lazy loaded. The hero image, the first product photo and anything else visible without scrolling should not. Many themes and plugins apply lazy loading to every image by default, so check the HTML of your homepage for a loading=”lazy” attribute on the hero.

Fix 5: Tell the browser which image is most important

Browsers make educated guesses about which files to download first, and images normally start at a low priority. In-viewport images are only boosted later, once the browser has worked out the layout.

The Fetch Priority API gives developers a way to help. Adding fetchpriority=”high” to the hero image tells the browser to request it early. The web.dev article on the feature describes a Google Flights test in which LCP improved from 2.6 seconds to 1.9 seconds. Results on your own site will differ, but the change is a single attribute and rarely causes harm when used on one or two images.

Use it sparingly. Marking every image as high priority defeats the purpose.

Fix 6: Make the hero image easy to find

The 2024 misconceptions post explains that long delays often come from dependency chains. A common example is a hero image set as a CSS background. The browser must download and process the style sheet before it learns the image exists. Sliders built with JavaScript have a similar problem, because the script has to run before the first slide is requested.

Where possible, place the hero as a standard image element in the HTML, where the browser’s preload scanner can find it right away. If it must stay a background image, a preload hint in the page head can help. Consider replacing an autoplaying slider with a single strong image. It is usually faster and often clearer.

Fix 7: Reserve space to prevent jumping

Images without width and height attributes cause the page to shift as they load, pushing text and buttons down the screen. That movement is measured as Cumulative Layout Shift and is frustrating for visitors who try to tap a button just as it moves.

Set width and height on every image, or use CSS aspect ratios. Most modern themes handle this automatically for images inserted through the editor, but custom sections and older templates often do not.

Fix 8: Check the server, not just the images

Because so much of the delay in the research came before the image download even started, improving images alone may not be enough. A slow server response delays everything that follows.

If your homepage takes more than a second to begin loading, look at hosting, caching and the number of plugins running on each request. A content delivery network can serve images from locations closer to visitors. Our web hosting team regularly finds that a combination of page caching and better image delivery does more than either change alone.

Fix 9: Watch mobile closely

Most small business sites see a large share of visits from phones. A layout that looks balanced on a desktop monitor can load a desktop-sized image on a small screen if the theme is not set up correctly.

Test the homepage on a real phone over a cellular connection, not only on office Wi-Fi. Check that responsive image sizes are working and that hidden desktop elements are not still downloading images on mobile. Our responsive design work includes reviewing exactly these details.

Fix 10: Keep new uploads from undoing the work

Many sites get fast after a cleanup and then slow down again within months, because the next batch of photos goes up at full camera size. The fix is a simple routine for whoever adds content.

Agree on maximum dimensions for each type of image: hero, blog feature, product photo and thumbnail. Ask staff to export photos at those sizes before uploading, or install a tool that resizes and compresses images automatically on upload. Review the media library every quarter and replace anything over a size you set, such as 500 KB for a photo.

Measure before and after

Record a baseline before you start. Run your homepage through PageSpeed Insights on mobile and note the LCP time, the total page weight and the LCP element it reports. Save a screenshot so you can compare later.

After each fix, test again. Lab tools give quick feedback, but remember that they simulate a single device and connection. The field data in Google’s Core Web Vitals reports reflects real visitors and is collected over time, so expect improvements there to appear gradually rather than overnight.

A fictional example

Imagine a florist’s homepage with a five-slide carousel of 3,500-pixel photos, each about 2 MB, all lazy loaded by the theme. The first slide is set as a CSS background.

The fix takes an afternoon. The carousel becomes a single hero image placed in the HTML, resized to 2,000 pixels and saved as WebP at about 250 KB. Lazy loading is removed from that image and fetchpriority=”high” is added. Product photos lower on the page stay lazy loaded. Width and height are set throughout.

The page feels noticeably faster, and the florist’s Core Web Vitals report starts to improve over the following weeks as field data updates. This example is fictional and only illustrates the process.

A short checklist

• Identify the LCP image on your homepage.
• Resize images to the largest size actually displayed.
• Compress photos and use WebP or AVIF where supported.
• Do not lazy load the hero or other images visible without scrolling.
• Add fetchpriority=”high” to the one most important image.
• Place the hero in HTML rather than CSS or a JavaScript slider.
• Set width and height on every image.
• Check server response time and caching.
• Test on a real phone.

Heavy images are one of the most fixable causes of a slow homepage. If you want help working through this list, our web development team can audit your homepage, fix image handling in your theme and keep new uploads from undoing the work.