Life was simple.
HTML is currently the smallest part of any web page. When a browser requests a page, it gets the HTML but then has to break it down and download the resources.
CSS
JavaScript
Images
Sources
…and other external files necessary to provide the user experience
Not all resources are created equal. Some resources that need to be loaded can slow down the display of your website. These resources are called “Render-Blocking Resources” and this article will show you some tactics you can use to reduce the amount of render-blocking resources on your website and how to apply them manually or using the SiteGround Optimizer plugin.
What does it mean to remove render-blocking resources?
Rendering is the technical term for “display.” In this article, whenever we talk about rendering, we are referring to the process of displaying your website on a screen.
With that in mind, render blocking is anything that stops or slows down that process.
In the beginning, everything loaded in the order it was coded in HTML. If your header had 5 JavaScript tags that needed to be loaded, compiled, and executed before the header was complete, then they could slow down your site. That's why we started putting JavaScript tags in the footer, so they wouldn't prevent the page from being displayed.
Types of render blocking resources
Every resource that loads on your website has the potential to be a render-blocking resource.
If an image is large and takes a long time to load, it is potentially a render-blocking resource.
If JavaScript has to run in the <head> of your page, then it is potentially a render-blocking resource.
If the CSS is large and your page cannot be displayed until it is fully loaded, then it is potentially a render-blocking resource.
If you load any resource from another site and that site is slower than yours, then that resource is potentially a render-blocking resource.
If you have many plugins and each has its own CSS and JavaScript files, these are potentially render-blocking resources.
In short, anything you have in your HTML that is loading is potentially a render-blocking resource .
How can I test if my website has render-blocking resources?
There are many tools on the web to show how your website loads. My favorites are these two:
The browser's “Inspect Element” option:
I prefer a tool that shows me a “waterfall” display of how my page has loaded. All modern browsers will show you a basic version of a waterfall display. Just right-click on a web page, then click “Inspect” and then look for the “Network” tab.
Once you have that, reload the page. You should see something like this:
The browser's "Inspect Element" option
The right side of the image above shows the “Network” tab. The little bars on the far right are the “Waterfall” display. They tell me how long it takes to load any given resource. The thin blue line running down the page tells me when the page started displaying. So, a lot of my resources on this page load before the page loads, and that’s probably not a good thing. That means that on this particular page, I may have some room for improvement.
This view is great when you're just making small changes, but all it really laos whatsapp number data tells you is how fast things load on your computer. It may not be a real metric. For example, if I do all my development locally, how quickly things load in my browser from a server running on the same computer doesn't tell me much.
That's why when I'm serious about measuring things, I use online tools like https://www.webpagetest.org/
WebPage Test:
If you go to WebPageTest and enter your URL, you'll get a much better picture of reality. Plus, you can play around with the settings to get the exact test you want.
For the most part, I recommend you do the same as me:
Try the desktop first
Select a server that is not close to where your website is hosted
Select Chrome unless you specifically need another browser
You can adjust the settings in the “ Advanced Settings ” tab.
WebPage Test
Then, click “Start Test”.
