Have you ever finished creating a website and loved everything about it? And then promptly began to hate it after attempting to actually view it online and it is painfully slow to load? Everyone is used to the common culprits, but there is one often overlooked perpetrator: render-blocking JavaScript.
So now you are asking, what is render-blocking JavaScript? If we breakdown the phrase "render-blocking" into its parts we get render (to load) and blocking (to prevent); so we can deduce that this refers to JavaScript that is preventing a page from loading. JavaScript is awesome; it helps to add visually appealing elements to improve on the user experience on your website but it can also be a huge time hog.
Time hogging is not only a nuisance for your visitors; it can also cost you significantly when it comes time for Google to show your site organically. Since 2010, Google algorithms account for loading speed in ranking decisions. And since most other culprits are already discussed extensively today we will be focusing on how to remove render-blocking JavaScript from your website.
1) Identify
The first step in the process is to identify the offending JavaScript. One of the simplest ways to do this is to use PageSpeed Insights; this Google tool quickly displays a list of the precise files that are currently render-blocking a particular page and which are located above-the-fold. Above the fold is everything that will show up first on a visitor’s screen. This means that if a JavaScript feature does not occur as soon as the visitor loads the page then it should not be included in the header of the webpage. (More details about this in Step 2.)
Clicking on the “Show how to fix” link will expand the view and show you the list of script resources that should be evaluated.
The most commonly used JavaScript is JQuery, so you will likely see this one show up most often.
2) Choose Best Method
Once you’ve identified which scripts need to be moved it is time to decide “how” to fix them. There are two main methods to choose from. The first is to make the scripts inlined; in this method the contents of the script are added directly into the HTML of the page and are only loaded once they are needed. This is the best option if the script is small and applies to a single page.
Another option is to defer the script. When you defer JavaScript you are delaying any non-essential scripts from loading until after the first render or until after the more essential portions have loaded. This method is best when the script is not crucial and can wait to load.
3) Decide Where to Move It
We are now ready to apply your newly chosen technique within the site. With either option we will be removing the JavaScript from the head and adding it into individual sections of the HTML. Finding your website's header will depend on which CMS you are using. Often you will be able to find it in the overall page settings, or in cases like WordPress you might have to look in the "Theme Options" page or a header.php file in the editor (see images below.) It is important note that you should NOT make changes in the header.php file unless you are an advanced user, otherwise you risk creating unnecessary errors to your site!
In HubSpot we can find the head HTML in both the template view and in the page editing “options” tab.
From the template view you can find the “Edit Head” option in the Edit dropdown:
We will go from something like the example below to moving the entire script into your body html, relevant php file (WordPress,) a Custom HTML module (HubSpot) or into the footer to delay the rendering.
Body HTML
The body HTML is where you have all of the content for your pages. The best way to find it is to find where you have all of the copy for your content. If you are using WordPress, the script can be added directly to the page by typing it alongside your content via the "Text" view.
Custom HTML Module
To add the script to a page in HubSpot, we need to use a Custom HTML module. The Custom HTML module is accessed via the template view.
Footer
Where you move the script will depend on if the script needs to occur at a certain point of the page or if it can wait until the end of the page rendering. The first should go in the body HTML or Custom HTML module while the latter can go into the Footer section.
4) Move the Script
This next step is pretty simple; add the script to your desired location.
5) Test
This is one of the most important steps in this process.
After making all the changes check the previews to make sure that the site still works. Does the page load correctly? Are all elements showing properly? If there is something broken, or not loading properly, then you should troubleshoot the problem. This can be done with the help of many differentdeveloper tools; try a few out and then choose your favorites. Once you find the errors, double check your code and verify that you are not missing any important components such as semicolons or curly braces.
6) Publish
Once you have confirmed there are no issues with the page after the changes are applied, you are then ready to publish.
Conclusion
Now that you have removed the render-blocking JavaScript you should continue to optimize your website’s speed by analyzing other features that are known to slowdown performance.
To take this premise even further, regularly testing the speed of client websites is something which should be a common occurrence in any web development schedule. With the ever evolving world of online marketing staying ahead of any potential issues is critical to success.
No comments:
Post a Comment