How to defer Parsing Of Javascript In Wordpress
How to Defer Parsing of JavaScript in WordPress (4 Methods)
0:00 / 0:00
Quality:
Sharing buttons:
- Hello, I'm Mike.
And today we're going to go over
how to defer parsing of JavaScript in WordPress.
(upbeat music)
Did your WordPress site through a performance testing tool
only to be met with an instruction
to defer parsing of JavaScript in WordPress?
Implementing this change can have a positive impact
on your sites page load times especially for mobile visitors
but the warning can be a bit difficult to understand
which is why we're going to explain exactly
what it means to defer a parsing of JavaScript
and how you can implement this change
on your WordPress website.
But before we get too far,
I wanna let you know that there'll be links
to more of resources in the videos description
and remember subscribe and ring that bell
to get notifications for future helpful content.
So let's dive in.
If you've ever run your WordPress site
through Google page speed insights, GTmetrix
or other page speed testing tools,
you've probably come across the suggestion
to defer parsing of JavaScript.
But what does that actually mean?
And why is it an important performance consideration?
Basically when someone visits your WordPress site,
your site server delivers the HTML contents of your website
to that visitor's browser,
the visitor's browser then starts at the top
and goes through the code to render your site.
If in moving from top to bottom, it finds any JavaScript,
it will stop rendering the rest of the page
until it can fetch and parse the JavaScript file.
It will do this for each script that it finds
which can have a negative effect
on your site's page load times
because the visitor needs to stare at a blank screen
while their browser downloads and parses off the JavaScript.
If a certain script isn't necessary
to the core functioning of your site
at least on the initial page load,
you don't want it to get in the way
of loading more important parts of your site
which is why those page speed testing tools
always tell you to defer parsing of JavaScript.
So what does it mean to defer parsing of JavaScript?
Essentially your site will tell visitors browsers
to wait to download and or parse JavaScript
until your site's main content has already finished loading.
At that point, visitors can already see
and interact with your page.
So the wait times to download and parse the JavaScript
no longer have such a negative effect.
By speeding up your contents above the fold low times,
you make Google happy and create a better,
speedier experience for your visitors.
To test whether your WordPress site needs
to differ parsing of JavaScript,
you can run your site through GTmetrix .
GTmetrix will give you a grade
and also list out specific scripts that need to be deferred.
There are a few different ways
to defer parsing of JavaScript.
First, there are two attributes
that you can add to your scripts, Async and defer,
both attributes let visitors browsers download JavaScript
without pausing HTML parsing.
However, the difference is that
while Async does not pause HTML parsing to fetch the script
as the default behavior would,
it does pause the HTML parser to execute the script
once it's been fetched.
With defer, visitors browsers
will still download the scripts while parsing the HTML,
but they will wait to parse the script
until after the HTML parsing has been completed.
This graphic from Growing with the Web
does a great job of explaining the difference.
Another option recommended by Patrick Sexton of Varvy
uses a script to call an external JavaScript file
only after the initial page load is finished.
This means that the visitor's browser will not download
or execute any JavaScript
until the initial page load is finished.
Finally, another approach that you'll see
is to simply move your JavaScript to the bottom of the page.
However, this method isn't a great solution
because even though your page will be visible sooner,
visitors browsers will still display the page
as loading until all the scripts finish.
This could stop some visitors
from interacting with your page
because they think the content isn't fully loaded.
To defer the parsing of JavaScript and WordPress,
there are three main routes you can take.
The first is plugins,
there are some great free and premium WordPress plugins
to defer JavaScript parsing.
We'll show you how to do so with two popular plugins.
Secondly, the Varvy method.
If you're tech savvy, you can edit your site's code directly
and use the code snippet from Varvy.
Thirdly, functions.php file.
You can add a code snippet from your child themes
functions.php file to automatically defer scripts.
Async is a free WordPress plugin from Frank Goossens,
the same guy behind this popular autoptimize plugin.
It gives you a simple way to defer parsing JavaScript
using either Async or defer.
To get started, you can install and activate the free plugin
from wordpress.org.
Then go to settings, then Async JavaScript
to configure the plugin.
At the top, you can enable the plugins functionality
and choose between Async and defer.
Remember Async downloads JavaScript while still parsing HTML
but then pauses the HTML parsing to execute the JavaScript,
defer downloads JavaScript while still parsing HTML
and waits to execute it
until after HTML parsing is finished.
Further down, you can also choose how to handle jQuery.
A lot of themes and plugins rely heavily on jQuery.
So if you try to defer parsing the jQuery scripts,
you might break some of your site's core functionality.
The safest approach is to exclude jQuery,
but you can experiment with deferring it.
Just make sure to test your site thoroughly.
Further down, you can also manually include
or exclude specific scripts from being deferred
including a nice user-friendly feature
to let you target specific themes
or plugins that are active on your site.
While we don't allow most caching plugins at Kinsta,
we do allow the WP rocket plugin
because it includes a built-in integration to play nice
with constant server level caching.
In addition to a bunch of other
performance optimization techniques,
WP Rocket can help you defer the parsing of JavaScript
in the file optimization tab of the WP Rocket dashboard.
Look for the load JavaScript deferred option
in the JavaScript file section,
like the Async JavaScript plugin, WP Rocket also
lets you exclude jQuery to avoid issues
with your site's content.
Earlier we'd mentioned that Patrick Sexton of Varvy
recommends using a code snippet that waits
to both download and execute JavaScript
until after your site completes the initial page load.
You can implement this method by tweaking the code snippet,
that Vavry supplies and then adding the script
to your theme immediately before the closing body tag.
We've provided the code from Varvy
in our resource section below.
Make sure to replace defer.js with the actual file name
and path of the JavaScript file that you want to defer.
Then you can use the WP Footer hook to inject the code
via your child's theme's functions.php file.
With this approach, you would wrap the Varvy's code
in something like this.
Finally, you can also add the defer attribute
to your JavaScript files without the need for a plugin
by adding the following code snippet
to your functions.php file,
which we've also included in the resource section below.
Essentially the snippet tells WordPress
to add the differ attribute to all of your JavaScript files
except jQuery, it's quick and easy,
but it doesn't give you the granular level of control
that something like the Async JavaScript plugin offers.
Deferring the parsing of JavaScript on your WordPress site
is an important performance consideration.
Once you've used one of the previously stated methods
to defer parsing of JavaScript and WordPress,
we recommend doing two things.
First, test your site to make sure
that deferring certain scripts hasn't broken
key above the fold content.
Again, this can commonly happen with jQuery
which is why a lot of tools let you exclude jQuery.js.
However it can happen with other scripts too.
Secondly, run your site through GTmetrix again
to make sure that your site is deferring
as many scripts as possible.
You might not get a perfect score if you exclude jQuery,
but your score should be better.
Do you have any questions
about how to defer parsing of JavaScript and WordPress?
Ask away in the comments below.
Kinsta's WordPress hosting can speed up your website
by up to 200% and you'll get 24/7 support
from our expert WordPress engineers.
Let us show you the Kinsta difference.
Try a free demo of our MyKinsta dashboard
at demo.kinsa.com.
Thank you for watching.
And don't forget to subscribe for more tutorials,
explainers and helpful content like this.
![How to defer parsing of javascript in 4 minutes [solved 100%]](https://i.ytimg.com/vi/JIRiMTmCfiE/mqdefault.jpg)
