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"?
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.
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.
|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|
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.
Continue to use this method for critical scenarios, but explore other solutions to defer non-critical scenarios.
- Using the attribute async or defer
Once the script is extracted and downloaded, HTML analysis is suspended, and the script is executed.
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
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.
If possible, use CSS media queries to tell the browser what CSS resources are (and are not) critical to display the page.
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.