Have you ever finished creating a WordPress website and loved everything about it? Then, promptly began to hate it after realizing it takes forever to load?
Not only are slow loading speeds a nuisance for you and your visitors, but they can also cost you significantly when it comes to SEO. Since 2010, Google algorithms have accounted for loading speed in ranking decisions, so slow pages appear lower on results pages.
In this post, we’ll show you how to remove this pesky code from your WordPress website and give your performance a boost.
When the scan is complete, Google assigns your website an aggregate speed score, from 0 (slowest) to 100 (fastest). A score in the 50 to 80 range is average, so you’ll want to land in the upper part of this range or above it.
You’ll see a list of files slowing the “first paint” of your page. In other words, these files affect the loading time of all content that appears in the browser on the initial page load. This is also called “above-the-fold” content.
Take note of any files ending with the .js extension, as these are the ones you’ll want to focus on.
Now that you’ve identified the issue, there are two ways to go about fixing it in WordPress: manually, or with a plugin. We’ll cover the plugin solution first.
1. Install and activate the Autoptimize plugin.
2. From your WordPress dashboard, select, Settings > Autoptimize.
4. If the box next to Aggregate JS-files? is checked, uncheck it.
5. At the bottom of the page, click Save Changes and Empty Cache.
6. Scan your website again with PageSpeed Insights and check for an improvement.
8. Click Save Changes and Empty Cache.
1. Install and activate the W3 Total Cache plugin.
2. A new Performance option will be added to your WordPress dashboard menu. Select Performance > General Settings.
3. In the Minify section, check the box next to Minify, then set Minify mode to Manual.
4. Click Save all settings at the bottom of this section.
5. In the dashboard menu, select Performance > Minify.
6. In the JS section next to JS minify settings, make sure the Enable box is checked. Then, under Operations in areas, open the first Embed type dropdown and choose Non-blocking using “defer”.
7. Under JS file management, choose your active theme from the Theme dropdown.
10. Scan your website again with PageSpeed Insights and check for an improvement.
Plugins can handle the backend work for you. Then again, plugins themselves are just more files added to your web server. If you want to limit these extra files, or if you’d just rather handle the programming yourself, you can address the render-blocking code manually.
To do this, locate the <script> tags in your website files for the resources identified in your PageSpeed Insights scan. They will look something like this:
<script> tags tell the browser to load and execute the script identified by the src (source) attribute. The problem with this process is that this loading and executing delays the browser’s parsing of the web page, which impacts the overall load time:
To resolve this, you can add either the async (asynchronous) or the defer attribute to the script tags for render-blocking resources. async and defer are placed like so:
<script src="resource.js" async>
<script src="resource.js" defer>
While they have similar effects on load times, these attributes tell the browser to do different things.
Scripts with the defer attribute are also loaded while the page is parsed, but these scripts are delayed from loading until after the first render or until after the more essential portions have loaded:
The defer and async attributes should not be used together on the same resource, but one may be better suited for a particular resource than the other. Generally, if a non-essential script relies on a script to run before it, use defer. The defer attribute ensures that the script will run after the preceding necessary script. Otherwise, use async.
After making your changes, conduct one final scan of your website through PageSpeed Insights and see what impact your changes had on your score.
Hopefully, there’s a noticeable improvement, but don’t worry if not. Many factors can inhibit page performance, and finding and eliminating them is worth the effort.
In addition to a rescan, check your pages to make sure your site works. Does the page load correctly? Are all elements showing up? If something has broken or fails to load properly, revert your changes and troubleshoot the issue.
If you’ve reached a point where you’ve repeatedly tried various measures with minimal speed gains, it might be best to consider other ways to speed up your pages, rather than risk breaking your site.
Many factors contribute to your users’ experience on your website, but few are more important than load time. Whenever you make big changes to content or appearance on your WordPress site, you should always consider how such changes affect performance.