In 2018, the average time to fully load a mobile page was 15 seconds. That is substantially higher than Google’s recommended page load time of 3 seconds.

So, of course, reducing the total load time remains a top priority for allowing user interaction as quickly as possible.

But page speed isn’t only about total page load time; it’s also about what users experience in those 3 (or 15) seconds. It’s essential to consider how efficiently pages are rendering.

This is accomplished by optimizing the critical rendering path to get to your first paint as quickly as possible.

Basically, you’re reducing the amount of time users spend looking at a blank white screen to display visual content ASAP (see 0.0 below).

There’s a whole process on how to do this, outlined in Google’s developer guide documentation (thank you, Ilya Grigorik), but I’ll be focusing on one heavy hitter in particular: reducing render-blocking resources.

What Is the Critical Rendering Path?

The critical rendering path refers to the series of steps a browser takes on its journey to render a page, by converting the HTML, CSS, and JavaScript to actual pixels on the screen.

Essentially, the browser needs to request, receive, and parse all HTML and CSS files (plus some additional work) before it will start to render any visual content.

Until the browser completes these steps, users will see a blank white page. Read more..

Source By : Search Engine Journal