When you defer parsing of JavaScript – this allows browsers to load content first, then render scripts. This can be done multiple ways which we’ll cover in this tutorial.
When Should You Defer Parsing of JavaScript?
Your browser will load the website from top to bottom – if it finds JavaScript code, the loading process will be interrupted until it finishes downloading all JavaScript code.
One of the best ways to optimize a website’s loading time and content is by defer parsing of JavaScript. Doing this will allow the browser to load all content without waiting for scripts to load, which prevents disruption of JavaScript digestion on the front-end and its influence on loading time.
Is having a lot of Javascript bad? Not so much – it is one of the essential web components that allows you to extend the UI/UX functionality of your site.
You do want to optimize your website for speed however. Defer parsing of Javscript can:
- Better user experience – visitors won’t have to wait long to view your website content.
- Improved SEO ranking – Google bots can crawl your site faster.
How to Defer Parsing of JavaScript in WordPress?
To verify that the changes have worked, we will debug scripts loading by analyzing and testing it to see if the error messages are fixed.
1. Debug & analyze the site
Evaluating whether it is worth it to defer your site’s JavaScript, use a speed testing tool like GTMetrix. If your website has a performance score of more than 60 before the implementation of this method, then it is suggested to parse all of the JavaScript.
2. Defer Parsing of JavaScript in WordPress
Now let’s get onto the steps of Defer Parsing of our Javascript in WordPress. The most popular consist of two ways – installing a plugin or adding a code snippet manually. Plugins are recommended for most WordPress sites, however if you want a site driven with minimal plugins – checkout our functions.php snippet below.
Using WordPress plugins
Speed Boosterpack is a plugin that offers an easy way to defer Javascript on your WordPress site. With this plugin, do so by:
- Go to your WordPress Dashboard
- On the left sidebar, navigate to Speed Booster
- Click the Advanced tab, and activate Defer parsing of JS files
- Once done, tap Save Changes
Defer Parsing of JavaScript via functions.php
To manually create a new post, you can edit one of WordPress’s core files. When editing these files, make sure you back your website up before continuing. Here are the steps:
To manually create this function, you’ll have to edit your themes Functions.php file. (Note: uHost offers File and Database backup features, it’s never a bad idea to backup your files before you try this!)
- From your WordPress admin area, go to Appearance -> Theme Editor
- Select functions.php in the Theme Files
- Enter this code at the bottom of the file:
function defer_parsing_of_js ( $url ) { if ( FALSE === strpos( $url, ‘.js’ ) ) return $url; if ( strpos( $url, ‘jquery.js’ ) ) return $url; return “$url’ defer “; } add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 ); - Click Update File.
3. Test the Changes
After trying one of the steps above, re-run your GTMetrix test and check your results!
Conclusion
This tutorial highlights how easy it is to improve your site with a quick and easy plugin or function.php addition. By deferring Javascript parsing, you’re more inclined to have better conversion goals and incoming traffic. This also helps your SEO ranking by having a site that’s easy to load mobile connections.
united states