How to Boost WordPress Page Speed and SEO with Autoptimize Plugin

Intro

In today’s blog we’ll take a small dive into boosting our WordPress page speed and SEO performance – primarily in page speed. I’ll explain a beginner-friendly way how we can use a free plugin called Autoptimize that can optimize CSS, JS, images and more. We’ll also get a jump in SEO performance due to our faster load times.

Estimated Times

Read time: 5 minutes
Implementation time: 15 minutes or less

TL;DR

Autoptimize plugin can increase your mobile & desktop Google PageSpeed Insight score by over 30 points.

Why Do I Need a Faster Website?

Decreasing your website’s load time can make a significant improvement on your overall conversion and bounce rates. According to a HubSpot blog, you could lose up to half your visitors if your website takes longer than 3 seconds to load! That is a significant amount of potential revenue that could be going towards your business instead of your competitors.

These factors play an even bigger role when it comes to mobile visitors. The average mobile page takes 87.84% longer to load than desktops. Google has made it known that the mobile experience and page speed is an important piece of criteria when ranking in search results.

Let us dive into how to boost your page speed and increase your SEO!

How Do I Boost My WordPress Page Speed and SEO?

3 easy steps:

1

Get a Baseline

2

Install & Configure Autoptimize Plugin

3

Compare Results

First: Get Baseline Metrics

Head over to https://developers.google.com/speed/pagespeed/insights/, Google’s page speed tester. Select a page you want to test. I’ll use https://dozacreative.com/, our homepage
Copy and paste the page URL you want to test into the text box and click Analyze
After a few seconds you will be directed to the results page. At the top are two tabs: Mobile & Desktop
The first thing you will see under each tab’s content is the page score, 0-100 with 0 being worst and 100 being the best. These are the scores we will be benchmarking
Run this test about 3-5 times and record the mobile and desktop scores
Compute the average for both the mobile and desktop scores
Below the score are several sections with metrics about your web page. First meaningful paint and speed index are worth noting

https://developers.google.com/speed/pagespeed/insights/

Second: Install Autoptimize Plugin

Sign into your WordPress website. The URL by default is http://www.yourwebsite.com/wp-admin as an example
Click Plugins on the left side bar menu. If you do not see this option it means you do not have the correct user privileges to add/modify/delete plugins. Please contact your webmaster for permissions
Here is a list of all of your plugins – active or inactive
Click Add New at the top
Then search for Autoptimize
To verify the correct plugin before installing, be sure that the author (By) is Frank Goossens (futtta)
Click Install Now

Plugins menu & Add New

Install Plugin

After installing go back to the plugins page by clicking the Plugins button on the left side bar menu
Scroll down until you see the Autoptimize plugin. Be sure that is activated. If not, click activate
Click Settings
You should see 5 tabs. We will only concern ourselves with 2 tabs: JS,CSS & HTML and the Images tabs
Under the JS, CSS & HTML tab we are going to check 6 total boxes. The rest will be left blank
Check the following boxes: Optimize JavaScript Code, Aggregate JS-files, Optimize CSS Code, Aggregate CSS-files, Save aggregated script/css as static files, Minify excluded CSS and JS files
Uncheck the following box: Also optimize for logged in editors/ administrators
Click Save Changes at the bottom of the screen.

Activation & Settings

Optimize JavaScript Code & Aggregate JS-files

Optimize CSS Code & Aggregate CSS-files

Save aggregated script/css as static files & Minify excluded CSS and JS files

Scroll up to the top and click the Images tab
Check the option: Lazy-load images
Click Save Changes

This will delay the loading of images until the user has scrolled far enough on your webpage for the images to be in view. This is helpful with mobile since it won’t load every image until they are needed.

Lazy load images & save

Potential ‘Gotcha!’

Part of the reason why your pages will load much faster is due to caching. If you are ever working on your site and you do not see your changes after making them, it could be due to cache. No need to panic. There is a neat little ‘delete cache’ options located on the WordPress top toolbar labeled Autoptimize. Click the button then click delete cache. Deleting cache will not delete any of your website. It will only delete temporary files much like clearing your browser history.

It is possible to get some JavaScript / JQuery errors that come from your header or footer. This is because those two elements run on hooks that might load out of order with the Autoptimize plugin. We personally ran into an issue with a Gravity Forms form in the footer of our website.

It is also a good idea to go through some of your website in incognito mode (hold Ctrl + shift + n) to make sure everything is loading correctly. Ensure design has remained the same and images are not doing anything funky. If your website was really slow prior to your changes, you might notice that your pages are loading much faster.

Finally: Check the Results

If you are curious (like me) to see the new performance metrics, head back over to the Google PageSpeed Insights page and run the test on the same page. Give it a couple of goes and you should see an average improvement. We saw an average increase score of 27 for mobile and 35.3 for desktop. That is a good yield for the amount of effort put into today’s exercise.

That’s it! You have just boosted the performance of your website! Time for some well-earned tea.

Extra Tips for Increasing Page Speed:

On the Google PageSpeed Insights results page there are a ton of metrics to look at. A lot of these metrics suggest ways to improve. This is a good starting point.
Remove any unused plugins. Every plugin that is active or installed will add to your page load time. So be sure to uninstall / delete any plugins that are not in use. It’s possible that some of your ‘dead’ plugins are hurting your page score.
Images can be heavy and take a lot of time to load. Be sure you are optimizing your images before uploading them to your website. One way to do this is to use the ‘save for web’ option (if available) when saving your images.
Remove unused javascript and css. This one may be a bit more involved and require an experienced developer. Be sure to contact your webmaster before deleting code.

Conclusion

By spending 15 minutes optimizing your website you can improve your performance and your SEO. These efforts translate directly into your users’ experience and ultimately to your bottom line.

Want to know more about performance and SEO? Check out our SEO page here or chat with us below!