Javascript blocks display

Block render (render) means

Render means the site is rendered, visible to the user, so if something blocks the render (render-blocking), it means that it makes the page not render to the fastest user in ability.

A small note: this article is about JavaScript blocking the display, not the CSS blocking the display (they are very different, though both are annoying, making the site slow to show to web browsers).

Javascript blocks display

Google recommends removing or deferring javascript that interferes with loading the content of the page that is above the fold.

First screen means what the user sees first on the screen. This screen can be a phone, iPad, desktop or any device the user uses to view your website.

This practice has been used for a long time by people looking to speed up the site, but it is still new to the majority of webmasters, webmasters, and can be a bit confusing, maybe even do not know how.

Removing javascript from blocking display is not only possible, it is also required by users who want high speed. Even if you don't care about users with slow internet connections, you need to care about your rankings on Google. Your rankings on Google will not be good if you do not optimize this problem. Especially if Google finds your site doesn't load smoothly on certain devices (mobile phones, tablets, etc.) they won't include your site in search results, because Google doesn't want to send users to a sluggish page or page that users have to wait a long time to get content.

How to identify javascript blocking display

You need to know what your site is loading. There are several ways to do that. I suggest you take a deep look at what pages are loading with the pagespeed tool: to get an overview of the page or interface issues encountered. To know which specific files are blocking the display, you must use the Google pagespeed insight tool. This tool will tell you exactly which files are blocking a specific page.

How to remove javascript from blocking display

One of the most common culprits about javascript blocking display, and also a very good example of this problem is jQuery - a javascript file used by a large percentage of websites around the globe. It is very likely that you are using it (if so, learn more about Varvy's tools).

jQuery is a fairly heavy file, in fact it may be the largest file your site needs to load to render (render) the page.

jQuery is a popular javascript file, and is often used to do very simple things like fade in (fade out) or fade out (fade away) techniques for images. There is usually no reason to download jQuery before the page loads, but most websites are doing that.

If the web page using jQuery is below the fold, then you There is no reason to download it before it is used. If you download it first, you are not following the page acceleration guide and you are making users wait.

To fix this, you need to change the location where jQuery is called. This is done in the html of the website. The way most websites today use is to call jQuery in the head of the document as shown below:

title here

It calls jQuery (a fairly large file) and is downloaded by the browser before Anything else is displayed on the page. This is not a good thing. This is really bad if what you need jQuery is not necessary for the first screen content as shown in the image above.

Incomplete solutions are often used

Usually the call to jQuery will be removed from the top of the document and moved to some other place at the bottom of the page, because the header is not necessary. Unfortunately that is not enough.

Real / better solution

To completely remove javascript from the render route, it needs to be delayed loading until the page finishes loading. I have a tutorial to do this using Google's recommendations to defer javascript completely.

To do this well you need to know what your page loads and why it loads

Anything that your site calls is time-consuming for your users. If you don't know what your site is asking for, you need to change this. jQuery is a good example because it is very popular as well as a large file (about 100KB). A common scenario is that a small web page of about 10KB is calling a large file like jQuery (which takes ten times more time than the site itself) to do a fairly simple task like making text appear. up on the page. When you look at it, you might get this idea "zee, it looks great!", But is it good enough to make users spend ten times more time to see your site? The same effect can occur with CSS or smaller javascript files.

I use jQuery as an example, but I don't mean it is bad. The same can be said about even more popular javascript scripts such as Google Analytics, or third-party javascript for displaying widgets or simply social networking buttons like Facebook, Twitter that everyone loves.

Need to know what your site is using, and decide if it is worth the wait for web browsers.

  • The pagespeed tool is a great way to see what your site is using.

  • To exclude javascript from blocking display you have to delay loading it.