How to Improve Website Speed by Optimizing Network Request Chains

Have you ever noticed how some websites seem to load instantly, while others take what feels like an eternity? The culprit behind sluggish loading times often lies in a hidden web of dependencies called network request chains, also known as critical request chains. Longer chains delay the rendering of the webpage, impacting performance metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP) in PageSpeed Insights and Google Search Console.

Imagine you’re building a house but need bricks from different factories. Each factory takes time to make a batch, and you can only start building with the next batch after the previous one arrives. This waiting slows down the overall construction process. It’s the same with websites: downloading resources one by one slows down the page load.

In this blog post, we’ll dive into what is a network request chain and explore how they work. We’ll also unveil practical strategies to identify these chains and minimize them to improve your website’s speed, ensure a smooth and delightful experience for your users and optimize conversion rate.

What is a network request chain?

Network request chains are a series of requests that a website makes to different servers in order to render the complete page for a user. Each request in the chain depends on the previous one, meaning that the browser cannot start downloading the next resource until the current one has finished downloading and processing.

Some websites, particularly those with complex layouts, inadvertently form long sequential request chains when loading important resources. This can significantly slow down the page’s initial render and negatively impact user experience. Ideally, critical resources should be loaded directly, without relying on chains of dependencies.

Can you explain network request chains with an everyday example?

For instance, imagine a SaaS website where the main navigation menu requires a specific font to be downloaded before it can be displayed. This creates a chain where the browser first downloads the CSS file referencing the font, then the font itself, and finally renders the navigation menu. We can break this chain by directly referencing the font in the HTML document, and both the font and navigation menu can be downloaded simultaneously, leading to a faster loading experience.

An example from a personal website audit

While conducting a website audit, I encountered a critical issue: a background image in the hero section was referenced within CSS stylesheets. This delayed the image loading until the stylesheet download was complete, significantly impacting both website speed and user experience. In fact, this very image was identified as the Largest Contentful Paint (LCP), further harming the client’s SEO. To address this, I directly referenced the background image within the HTML document, effectively breaking the network request chain. This resulted in improved website speed and core web vitals, ultimately, boosted search engine rankings for the client.

How to Optimize Network Request Chains with ‘Preloading’

Preloading important resources with hints is a powerful and most commonly used optimization technique for breaking network request chains in the realm of web design. Preloading tells the browser to start fetching specific resources before they would normally be discovered in the HTML document, effectively bypassing potentially lengthy chains.

Here’s an example:

HTML

<link rel="preload" href="background-image.png" as="image" />

This code instructs the browser to begin downloading the “background-image.png” image immediately, even before it reaches the HTML code referencing it. This ensures the image is ready for use as soon as the browser needs it, significantly improving the loading speed of the hero section.

Case Study

Let’s understand network request chains with an imaginary SaaS project management website called “Jira-ffe” (if you squint, the logo kind of looks like a giraffe)

Scenario

Imagine visiting Jira-ffe.com, a SaaS project management software for SMEs. As you land on the homepage, the browser starts parsing the code. It encounters a reference to a critical CSS file containing styles for the task list and project cards. This triggers a request for the CSS file.

However, the CSS file itself references several fonts and images. This creates a chain where the browser needs to download and process each resource sequentially, delaying the rendering of the crucial task list and project cards.

Diagnosis

1. Identify critical resources: Use developer tools like Chrome DevTools to analyze the website’s network requests. Identify the critical CSS file responsible for styling the task list and project cards using the waterfall chart. This file is likely referenced early in the HTML document.
2. Analyze dependent resources: Inspect the critical CSS file for references to fonts and images. These resources are likely loaded sequentially, impacting the rendering of the critical content.
3. Measure request times: Use developer tools to measure the time it takes for each resource to download. This will help identify bottlenecks and prioritize optimization efforts.
4. Use Filmstrips: This visualization shows how different resources are loaded over time. By analyzing the loading sequence and timing of specific CSS and JavaScript files, you can roughly estimate their individual transfer times. You can use WebPageTest or GTmetrix to get a filmstrip view of any website.

Solution

The following strategies can help us break the network request chains of Jira-ffe.com

1. Preload critical CSS: Leverage the rel=”preload” attribute in the HTML <link> element to prioritize the loading of the critical CSS file. This ensures its availability before other resources, enabling faster rendering of the task list and project cards.
2. Font optimization: Preload the essential fonts using the rel=”preload” or font-display properties. This reduces the impact of font loading on layout shifts and improves rendering speed.

How to optimize network request chains in WordPress?

Perfmatters

• Preload fonts, images, CSS, and JavaScript.
• Specify preload hints (“as”) for different types of resources.
• Preconnect to external domains used on your website.
• Lazy load images and iframes.

How to optimize network request chains in Drupal?

Fastly CDN

• Integrates with Fastly CDN for lightning-fast content delivery.
• Preloads images, CSS, and JavaScript files automatically.
• Purges cached content to ensure users see the latest version.
• Optimizes images for faster loading.

How Manmash Consulting can help?

Manzar Mashhood and his team of technical SEO experts are experienced in improving the website speed and overall performance that not just improves user experience, but help you in SEO as well because we are primarily focused on getting our clients a relevant and qualified traffic from search engines. Please contact Manzar Mashhhood on his Linkedin or on Whatsapp: +923331200550.