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!
