- Hello, I'm Mike.
And today we're going to go over
Did your WordPress site through a performance testing tool
only to be met with an instruction
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
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
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.
it will stop rendering the rest of the page
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
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
Essentially your site will tell visitors browsers
until your site's main content has already finished loading.
At that point, visitors can already see
and interact with your page.
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
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
First, there are two attributes
that you can add to your scripts, Async and defer,
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
only after the initial page load is finished.
This means that the visitor's browser will not download
until the initial page load is finished.
Finally, another approach that you'll see
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.
there are three main routes you can take.
The first is plugins,
there are some great free and premium WordPress plugins
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.
using either Async or defer.
To get started, you can install and activate the free plugin
to configure the plugin.
At the top, you can enable the plugins functionality
and choose between Async and defer.
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,
in the file optimization tab of the WP Rocket dashboard.
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
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
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
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
except jQuery, it's quick and easy,
but it doesn't give you the granular level of control
is an important performance consideration.
Once you've used one of the previously stated methods
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
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
Thank you for watching.
And don't forget to subscribe for more tutorials,
explainers and helpful content like this.