Story Based Question
You’ve been monitoring the performance of your website, and you notice that your mobile page load times are slower than expected. After checking Google PageSpeed Insights, you discover that render-blocking resources are delaying the page’s ability to load. You need to resolve this issue to improve your mobile site’s speed and user experience. How do you identify and resolve render-blocking resources?
Exact Answer
To identify render-blocking resources, use tools like Google PageSpeed Insights or Lighthouse. To resolve them, you can defer or asynchronously load JavaScript, inline critical CSS, and ensure that non-essential resources are loaded after the page renders.
Explanation
Render-blocking resources are elements like JavaScript or CSS that prevent a webpage from displaying content quickly on the screen. When a mobile page loads, the browser must load and process these resources before rendering the page. If these resources are blocking the page from rendering quickly, it can lead to slower load times and a poor user experience. Here’s how to identify and resolve these issues:
Identify Render-Blocking Resources
The first step in resolving render-blocking resources is identifying them. Google PageSpeed Insights and Lighthouse are great tools to help pinpoint these issues. They will analyze your site and provide a detailed report of any JavaScript or CSS files that are delaying the rendering process.
How to identify:
- Open Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/) and enter your mobile site URL.
- Under the Opportunities section, you’ll see suggestions like Eliminate render-blocking resources.
- The tool will list the specific JavaScript and CSS files that are blocking the rendering of your page.
Defer or Asynchronously Load JavaScript
JavaScript can be one of the biggest culprits for blocking page rendering. By default, JavaScript is loaded and executed before the page is rendered, which can delay the loading process.
How to fix it:
- Defer non-essential JavaScript: Use the
deferattribute in your<script>tags. This allows the script to be loaded after the HTML content is parsed, preventing it from blocking the page rendering. - Load JavaScript asynchronously: Use the
asyncattribute for JavaScript files that are not critical for page rendering. This allows the browser to load the script in parallel with other resources, without blocking the page’s visual rendering.
For example:
<script src=”script.js” defer></script>
or
<script src=”script.js” async></script>
Inline Critical CSS
CSS files can also block rendering if they’re large or if the browser has to download multiple external files. To resolve this, you can inline critical CSS — the CSS required to render the visible portion of the page.
How to fix it:
- Identify the critical CSS needed for above-the-fold content. You can use tools like Critical (https://github.com/addyosmani/critical) to extract this CSS.
- Inline the critical CSS directly in the
<head>of the HTML document to ensure it loads with the page. - Load the rest of the CSS asynchronously by adding a
media="print"attribute and swapping it back once the page has loaded.
Example of inlining critical CSS:
<style>
/* Critical CSS goes here */
body { font-size: 16px; }
</style>
Load Non-Essential Resources After Page Renders
Some resources, like third-party scripts or images, are not essential for the initial render. Loading these resources after the page has been rendered can significantly improve page load times.
How to fix it:
- Lazy load images and other non-critical assets. Images can be set to load only when they enter the viewport, reducing the initial load time.
- For external resources (like ads or social media widgets), consider loading them after the page has fully rendered.
Optimize Your Web Font Loading
Fonts can also block the rendering process if they’re not properly optimized. By default, web fonts are loaded synchronously, which means they can delay the rendering of the page.
How to fix it:
- Use the font-display: swap CSS property to ensure text is visible immediately with fallback fonts until the custom font has loaded.
- Ensure that the fonts used are properly subsetted to reduce file size.
Example:
@font-face {
font-family: ‘MyFont’;
src: url(‘myfont.woff2’)
format(‘woff2’); font-display: swap;
}
Example
Imagine you run an online clothing store, and you’ve noticed that customers are abandoning your site because it’s loading too slowly on mobile devices. After running a performance audit in Google PageSpeed Insights, you find that several JavaScript files are blocking the page from rendering.
To fix this, you begin by deferring the loading of non-essential JavaScript. For instance, you defer a script responsible for tracking user interactions until after the page has loaded:
<script src=”analytics.js” defer></script>
Next, you review your CSS and discover that large stylesheets are blocking the page rendering. You use a tool like Critical to extract the critical CSS, inlining it directly into the <head> of your HTML, while the rest of the CSS loads asynchronously:
<style>
/* Inlined critical CSS */
.header { background: #000; }
</style>
<link rel=”stylesheet” href=”styles.css” media=”print” onload=”this.media=’all'”>
You also notice that product images on your site aren’t loading until the entire page finishes loading, so you implement lazy loading to only load images as they come into view. This drastically reduces the initial load time and improves user experience on mobile.
Finally, you optimize the web fonts by adding font-display: swap, ensuring that users see fallback fonts immediately while the custom fonts load in the background.
After making these changes, your mobile site loads faster, and you see a noticeable increase in engagement and sales.
Identifying and resolving render-blocking resources is key to improving mobile site speed. By deferring JavaScript, inlining critical CSS, optimizing font loading, and loading non-essential resources after the page renders, you can significantly reduce load times and enhance the user experience.