乐竞电竞押注
Wix to WordPress Migration: How to Do It with No Errors
September 13, 2019
HTML vs. HTML5: What’s the Difference and What’s New?
September 23, 2019Although WordPress provides an out-of-the-box platform on which to build your website , there are many easy tweaks you can perform to make WordPress even better. One of these tweaks is to defer the parsing of JavaScript so that WordPress loads your various scripts (included in plugins, themes, etc.) right at the end of a page load.
There are several reasons why you should defer parsing of JavaScript in WordPress, but the main reasons are improved performance and better user experience.
If you run your website through Google’s PageSpeed Insights, for example, the tool will likely throw up a warning about render-blocking scripts. Most of the time, the warning means that you will need to defer the parsing of JavaScript and, once that’s done correctly, your PageSpeed score will be increased.
In this article, we will teach you how easy it is to fix render-blocking JavaScript in WordPress, thereby reducing the time visitors spend waiting for a page to show content(among other indirect benefits like better SEO).
What does defer parsing of JavaScript mean?
Before going to the actual solution, you need to understand some basic concepts.
When a browser loads a web page, it processes the code (whether HTML / JavaScript / CSS) behind the page from top to bottom. The JavaScript code in WordPress is located within the
tags, which comes before the main content of the page.Now, unlike HTML and normal text which appears in the browser almost instantly, JavaScript needs to be processed by the browser, and this takes some time. During the time that JavaScript is being processed, it is blocking the browser from displaying everything else.
What you want to do, in order to improve the perceived speed of your website, is to optimize the CSS and ensure that the JS code will be loaded after all the HTML, making it the last thing the browser needs to interpret.
Although programmers call it “defer parsing of JavaScript”, this is just another way of saying “delay the loading of JavaScript” or “postpone the processing of JavaScript”.
If this is done correctly, your website will not stay idle and wait for the JavaScript code to be loaded before it displays the primary content, and your visitors will thank you for it.
The Benefits of Deferring the Parsing of JS in WordPress
As you now know, one of the main benefits of deferring parsing of JS in WordPress is the increased website speed and happier visitors. But that is only the most direct benefit.
Another benefit is that the quicker your website loads, the higher it will rank in the search engines. It has long been known that Google uses your website’s loading speed as a ranking signal, and this is unlikely to change at any point in the future.
In fact, that’s why one of the major warnings you will receive in Google’s PageSpeed Insights tool has to do with render-blocking scripts, which can only be remedied by removing the scripts altogether or deferring the parsing of JavaScript somehow.
This takes us to the main subject of the article.
How to Correctly Defer Parsing of JavaScript in WordPress?
Just as with most things WordPress, to defer parsing of JavaScript is also quite easy to do.
What I will teach you here, is how to make it so that the important part of your website (the content) is loaded before the JavaScript code. This will just pass the render-blocking, "heavy" code to the bottom without deleting it.
A very simple way to do so would be to simply install a WordPress plugin to defer parsing of JavaScript. However, if you know a little bit more about 乐竞电竞 other than changing a theme, then there are also other more complex methods to do this.
Let's take a look at each method and discover what suits your needs and knowledge best.
The Defer JavaScript WordPress Plugin Method
The easiest, and also the most recommended, way to solve this issue is to install a WordPress plugin that will help you defer JS parsing. There are multiple plugins made for this purpose, but two of them are known to be more successful.
For starters, you will need to log into your WordPress account, access your dashboard, and then go to the plugins section. Once there, please click on the "Add New" button.
Async JavaScript
Probably the most popular plugin for this purpose is Async JavaScript. Essentially, this plugin automatically tweaks how the code is loaded. What makes it stand out compared to other plugins is that it allows you to eliminate some scripts from being deferred, which makes it great for scripts that absolutely need to be loaded up top for whatever reason.
All you need to do is to download and install it. However, you should be careful when using it because it can conflict with some other plugins and create strange issues. Once installed and activated, refresh your site and make sure everything is still working.
Asset CleanUp: Page Speed Booster
Asset CleanUp does many things to speed up your site, one of which is applying the defer attribute to script tags. Doing so will result in deferred JavaScript parsing — exactly what we want.
Give it a try by installing it and you’ll see your page load time improve dramatically.
Defer JavaScript in WordPress using the functions.php Method
The next alternativeis a bit more daring, but it is not as complicated as it sounds and with the correct guidance, everyone can do it.
This being said, for this method, you need to edit one of the core WordPress files. To add the defer attribute to your JavaScript files, you just need to copy the code below into the theme’s functions.php file:
functiondefer_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 );
You should know that this is not the only code that is suitable for this purpose. There are other code snippets available online that will help you defer parsing of JavaScript in WordPress via the functions.php file. If the above snippet doesn’t work, try search for another.
Also, make sure you have a backup on hand in case things go wrong!
Conclusion
As you can see, a very scary subject for a newbie —defer parsing of JavaScript—is actually not so difficult to resolve. Not only have you learned how to properly defer parsing of JavaScript in WordPress, but you also learned how important it is to do so.
By correctly deferring the parsing of JavaScript, the code will still be there to do its job, but it will only load when it needs to and not before the actual content.To ensure that your JavaScript is actually being deferred, make use of a tool like Google PageSpeed Insights or GTMetrix .
If you enjoyed reading this article on fixing the defer parsing of JavaScript, you should check out this one about how to fix the WordPress missing a temporary folder .
We also wrote about a few related subjects like cannot login to WordPress , WordPress publishing failed , jQuery is not defined , WordPress stuck in maintenance mode , WordPress sorry, you are not allowed to access this page and how to fix the http error when uploading images to WordPress .
