The network bandwidth that's available to a website visitor impacts how quickly the a web page loads for them.
In this article we'll look at how bandwidth impacts page performance and what you can do to use the available bandwidth more effectively.
What is network bandwidth?
Bandwidth measures how quickly data can be transferred between two devices. Download the same file will take less time on a high-bandwidth connection than on a low-bandwidth connection.
The request waterfall below shows a page loading a 2 megabyte image on a 3 megabit per second (Mbps) connection. The large image intakes over 6 seconds to download and appear on the page.
To get a transfer rate in megabyte we need to divide the Mbps value by 8. The maximum transfer rate in this case is 0.375 megabytes per second. The image is about 2 megabytes large, so we expect it to take this long to download:
2 MB / 0.375 MB/s = 5.33 s
We can see that the theoretical transfer time is about 1 second faster than the one we measured. This is due to various reasons, like network latency, a gradual ramp-up of bandwidth usage due to congestion control in TCP, and general efficiency losses across the network path.
You can also see that there are two fonts downloading at the same time, causing bandwidth competition – which is what we'll look at later.
Impact on page load time
Combined with time spent connecting loading the page HTML and connecting to the image server, it takes about 8 seconds to fully load this page.
The image is the biggest page element, so we can measure when it appears using the Largest Contentful Paint metric.
The image contents gradually appear as they arrive.
How bandwidth competition between requests impacts page speed
So far not much else was happening on our page. What if we add another image just below the image at the top?
We can see that the download time has now doubled, as the first image shares bandwidth with the second image. The small dark blue areas on the waterfall bar show when data chunks for that resource arrived on the test device. We can see that chunks for both images are received in parallel.
In the waterfall chart above the second image actually loads more quickly than the first image. However, sometimes it's also the other way round when testing the same page.
After adding the new image, visitors now wait a lot longer for the main image to appear.
Adding out-of-viewport images
Let's add two more images below the first two. At first they'll be outside the device viewport, until the user scrolls down the page.
We can see that these images don't use up much bandwidth until the first time images have loaded. That's because they are Medium priority, while Chrome assigns a High priority to the in-viewport images.
Chrome assigns a medium priority to the first 5 images on the page. Any images after that will be Low priority, unless the are visible to the user.
This waterfall chart shows that well. Minimal bandwidth is used by the two low-priority images at the bottom, in order to speed up loading the important images in the viewport and at the top of the page.
A real-world example of bandwidth competition
We've seen that images can take away bandwidth from other images. Not great if those images are less important!
But loading large images early can also delay other important requests, including render-blocking stylesheets and scripts.
The waterfall below shows a preloaded image that's been assigned a high priority. You can see it starts loading early, but the CSS files end up taking longer to load. Without the styles being ready the image can't be displayed anyway, so the image preload here is slowing down the page load process.
How to reduce resource competition
We've already seen that Chrome already takes some steps to identify which images are important, and which can be loaded later.
You can also take steps to reduce resource competition:
- Mark important resources as high-priority
- Lazy load out-of-viewport images
- Reduce image file size
Mark important resources as high-priority
Chrome can't reliably predict which images are the most important for the page. The first 5 images might not include the hero image that covers 80% of the UI.
To ensure that Chrome assigns a high priority to a request you can use the fetchpriority attribute:
<img src="image1.jpg" fetchpriority="high" />
Lazy load out-of-viewport images
If you know that an image is likely to appear outside of the viewport you can tell the browser to lazy load it. That means it will only be downloaded once it's close to the viewport, based on the visitors scroll position on the page.
To do that, you can use the loading attribute.
<img src="image1.jpg" loading="lazy" />
Now the two images that are outside the viewport no longer load and don't compete with our main image. The second image still loads even though it has the loading="lazy" attribute, because it's partially in the viewport.
When adding lazy loading to your website, be careful to not accidentally lazy load the LCP image! Make sure your website template has a way to differentiate big images at the top from less important images.
Reduce image file size
We've been using 2 megabyte image files throughout this article, to demonstrate the role of bandwidth and competing resources on loading speed.
But usually the images on your website shouldn't be that large. Use modern image formats like WebP and AVIF to achieve better compression at the same quality.
We also used images that are larger than necessary in these examples. Instead, rescale your images to the correct size and use responsive images to load images at the lowest necessary resolution.
Conclusion
Website speed is often impacted by less important resources taking bandwidth away from critical page elements like the primary image and render-blocking resources. Providing better prioritization hints to the browser can make your website load more quickly.
To see how resource competition impacts your own website, try our free website speed test. You'll get a detailed waterfall including request priorities and data chunk timings.
Run A Free Page Speed Test
Test Your Website:
- No Login Required
- Automated Recommendations
- Google SEO Assessment