How to identify and reduce blocking rendering resources

Author: Abby Hamilton (Abby Hamilton), SEO-Manager, Merkle.

In 2018 the average time to complete a mobile page load time was 15 seconds , which is significantly more than the recommended Google 3 seconds. Today, therefore, the total load time reduction remains a top priority.

However, the speed of the page - this is not only the total load time, it is also the experience of users in the 3 (or 15) seconds. In this regard, it is important to consider how to implement effective rendering of pages.

The efficiency of this process is achieved by optimizing the critical path for rendering as quickly as possible obtain a first content rendering.

In fact, you reduce the time it takes users to view a white screen to display visual content.

On the Google Developers site for details about how to optimize the critical path rendering (thanks to the author, Ilya Grigoriku). But we will focus on one of the highlights: reducing the number of blocking rendering resources.

What is the "critical path rendering"?

Critical Path Rendering refers to a series of steps that takes the browser to render the page by converting HTML, CSS and JavaScript to actual pixels on the screen.

In fact, the browser has to request, receive and analyze all files of HTML and CSS (plus do some extra work ) before it starts to display any visual content.

As long as the browser does not perform these steps, users will see a blank white page.

How to optimize it?

Improving rendering critical path includes the identification and analysis of critical resources (all resources, blocking the initial page rendering), as well as to seek opportunities to:

  • Reducing the number of critical resources through delaying loading of the resources that blocked rendering;
  • Reducing the critical path through the prioritization of content on the first screen and the fastest possible download of all important resources;
  • Reducing the number of critical bytes by reducing the file size of the remaining critical resources.

In this article we will focus on the first step - shelving download the resources that blocked rendering (in other words, we will focus on the reorganization of the elements to improve efficiency, to create a sense of a more rapid process without deleting content).

Why do it?

In the words depicted in hundred dollar banknote Benjamin Franklin: "Time is money -".

Google data about user behavior show that the majority of people are leaving the sites slow 3 seconds after the download begins.

At the same time, according to a study Unbounce, about 75% of users are willing to wait 4 seconds or more until the page is loaded.

What is benefit from it?

"Time - an illusion" - Albert Einstein.

A study published by The Journal of Consumer Research, found that two types of time can be identified as a whole:

  • Objective - the standard time that we see the clock.
  • Subjective - perception of time individual.

Too much focus on the objective of time may not be quite the right approach, because users have different opinions while.

The perception of time people based on a number of subjective factors. Including whether they are in a "passive waiting" or in "active". In terms of page rendering, it can be defined as:

  • Passive waiting - the user is looking at a blank white screen.
  • Active standby - visual content displayed on the page.

INFORMS study has found out that even with commensurate timeout people in a state of passive waiting overestimate waiting time by 36%.

The same concept formed the basis for widespread use in the software download visual indicator, since it has been found that the addition of this element reduces anxiety and creates a more positive experience for users.

"The web page is not loading indicators. Therefore, when the page is slow, the visitor does not know how many will be delayed - 500 milliseconds, or 15 seconds. Maybe she never loaded. A "Back" button is always at hand "- Andy Krestodina (Andy Crestodina), Orbit Media.

Due to the fact that many studies have linked reduced time loading the page with the improvement of KPI (conversions, bounce rate, time on site), work on this indicator has become a top priority for many organizations.

In this unique position SEO-specialists allows them to lead this initiative, as their role is often to bridge the gap between business objectives and programming priorities.

Returning to render blocking resources

The main objective of optimizing the critical path rendering - a prioritization of the resources that are required to display meaningful content.

To do this, we need to identify and block deprioritizirovat rendering resources - resources that are not necessary to download content on the first screen and slow down page rendering.

  • Lock rendering of CSS

CSS inherently blocks rendering. The browser starts to display the content of the page is not yet able to request, receive and process all CSS styles. This avoids the negative user experience, which can occur if the browser does not attempt to display the stylized content.

Page displayed without CSS, it will be practically unusable, and most of the content (if not all) need to be redrawn.

Looking back on the process of rendering pages, a gray rectangle in the image below displays the time it takes the browser to query and retrieve all CSS resources so that it can start to build CCSOM tree (DOM CSS).

In this final time can vary greatly depending on the number and size CSS-resources.

«CSS is a resource blocking the rendering. Give it to the customer as soon as possible in order to optimize the first rendering "- advises Ilya Grigorik from Google.

  • Shutdown due to JavaScript rendering

Wait, what about JavaScript?

In contrast to the CSS, to render the page the browser is not required to download and analyze all of the JavaScript resources, so technically * is not a required step (* most modern websites to implement content requires JavaScript on the first screen).

However, when the browser detects JavaScript before the initial page rendering, the process is suspended as long as will not be executed JavaScript (unless otherwise stated using attributes or defer async - more about this later).

For example, adding JS-notification in HTML-code blocks rendering the page until until after the execution of JavaScript code.

This is due to the fact that JavaScript has the ability to manipulate the elements of the page (HTML) and related styles (CSS).

Since JavaScript can theoretically change all the content on the page, the browser just in case suspend HTML analysis for loading and executing JavaScript.

The official recommendation the Google :

«JavaScript can also block the construction of the DOM and detain the page display. To ensure optimal performance ... Eliminate unnecessary JavaScript rendering of the critical path. "

How to determine the blocking rendering resources

To determine the critical path render and analyze critical resources, follow these steps:

  • Test the page by using webpagetest.org. The results of the test, click on the icon in the column «Waterfall».
  • Focus on all the resources requested and uploaded to the Green Line «Start Render».
  • Analyze the data, looking for CSS- and JS-files that are requested before the green line «Start Render», but are not critical to download content on the first screen.
  • After identifying potential blocking rendering the resource, test removing it to see if it will affect the content on the first screen.

For example, we noticed that some of the JS-requests to the Google Maps API does not seem to be critical. But it would be nice to test the removal of these scenarios to see how the displacement elements on the site will affect the user experience.

To check in a browser as the postponement of these resources will affect the content on the first screen, follow these steps:

  • Open the page in Chrome in incognito mode (this is the best practice to check the speed of the page, because the Chrome extension can distort the results, and many of us use them in their work);
  • Open Chrome Developer Tools (F12), on the panel «Network» , select the resource you want to lock, locate the shortcut menu «Block Request URL» an item and click on the tab «Request blocking».
  • Place a check mark next to the «Enable request blocking» and click the "+".
  • Enter a pattern to lock the resources you found using the * character as a wildcard.
  • Click «Add» and reload the page.

Methods for reducing lock rendering

When you find out that life is not critical for rendering content on the first screen, examine the various methods available for delay loading of resources and improve the page rendering.

Method effect Works with
Placing JS in the bottom of the HTML poor JS
Attribute asinc or defer The average JS
individual solutions high JS / CSS
CSS media queries Low / High CSS
  • JavaScript accommodation at the bottom of the HTML

If you ever took a course on the basics of web design, this method may be familiar to you: put a link to a CSS stylesheet to the top of the HTML-tag <head>, and external scripts - to the bottom of the tag <body> (before </ body>).

Returning to the example JS-notifications, the higher the function is located in the HTML, the faster it will be loaded and executed by the browser.

Example JavaScript, housed in the top of HTML. Rendering page immediately blocked the function of warning and no visual content is not shown.
JavaScript example, placed at the bottom of the HTML. Most of the content appears before rendering the page is blocked warning function.

Although the placement of JavaScript resources in the bottom of the HTML standard is still the best practice, this method is not sufficient to exclude the optimum blocking scripts from rendering a critical way.

Continue to use this method for critical scenarios, but explore other solutions to defer non-critical scenarios.

  • Using the attribute async or defer

Async attribute indicates the browser about asynchronous loading JavaScript and extracts a script when resources become available (as opposed to suspending HTML parsing).

Once the script is extracted and downloaded, HTML analysis is suspended, and the script is executed.

Defer attribute indicates the browser that it has made an asynchronous JavaScript load (similar to the attribute async), but did not perform to the JS parsing HTML is complete, resulting in further savings of time.

Both methods are relatively simple to implement and help reduce the time it takes the browser to the HTML parsing (the first step in the rendering of the page), with no significant changes in how the content is loaded on the page.

Async and defer - it is a good decision for additional elements on the site, such as social networking buttons, personalized sidebar, news feeds, and the like that are nice to have, but which do not constitute the basic user experience.

  • own decisions

Remember that annoying JS-notification that blocked rendering of the page? Adding JavaScript-function onload event has solved this problem once and for all.

The script below uses onload event to invoke an external resource «alert.js» only after completion of loading of all the original page content, removing it from the critical path.

But this is not a universal solution.

Although this method may be useful for resources with the lowest priority (event listeners, elements in the footer of the page, etc.), you will probably need another solution for important content, which is located below the first screen.

Together with the development team, try to find the most efficient solution to improve the rendering of pages, while maintaining optimal UX.

  • CSS media queries

CSS media queries allows you to unlock the rendering by a note of the resources that are used only for some time, and the installation conditions, the browser has to parse CSS (on the basis of the print, the page orientation, the size of the viewing area, etc.).

All CSS resources are still requested and downloaded, but with a lower priority for the non-blocking resources.

Example media queries CSS, which tells the browser not to analyze the style sheet until the page will not be printed.

If possible, use CSS media queries to tell the browser what CSS resources are (and are not) critical to display the page.

conclusion

In order to optimize the critical path is the fastest rendering to provide users with meaningful content.

Delaying rendering blocking CSS- and JS-resource allows you to display important content faster.

To determine the blocking rendering resources:

  • Find a non-critical resources are loaded before rendering (green line in the results on webpagetest.org checks);
  • Test the removal of these resources with the Chrome developer tools to see how they affect the content of the page;
  • After blocking rendering resources are identified, together with the developers find the most effective solution to delay their load.
Source: Search Engine Journal
subscribe

Subscribe to SearchEngines newsletter

preview How does Google local search algorithm

How does Google local search algorithm

Author: Joy Hawkins (Joy Hawkins) - an expert on the local SEO, head of SEO-agency Sterling Sky, one of the leading participants in Local Search Forum, Speakers of the...
preview Going to https in 2019 - now it's time to exactly?

Going to https in 2019 - now it's time to exactly?

Author: Artem Dorofeev, Head of SEO-card digital-agency Original Works Since 2016, Google strongly recommends the use of https-protocol...
preview Summer changes in Yandex search

Summer changes in Yandex search

Despite the fact that summer is traditionally a holiday period, it seems, in the search Yandex Department of vengeance was in full swing and are hard at work...
preview Digital-Fall 2019: A review of business activities, which should add to Calendar

Digital-Fall 2019: A review of business activities, which should add to Calendar

We have studied the autumn 2019 conference of the year and put together a list of 10 professional "digital is-togethers" for all those who in one way or another...
preview How to make beautiful writing without designer

How to make beautiful writing without designer

15 of the rules of UniSender We UniSender collected 15 basic rules that will help to create a beautiful newsletter, even if you have never engaged in the design and layout of...
preview 5 frequent objection to SEO

5 frequent objection to SEO

And how to answer them Author: Cameron Jenkins (Kameron Jenkins) - content manager Moz, co-founder of the agency content marketing Soapboxly...