Complete Guide to Optimize a WordPress Site

This guide is a work in progress detailing the steps used to optimize the Gutenberg sample content page. The theme used is understrap using bootstrap 4 and some preconfigured optimizations.

Pre optimization

The wordpress site before doing any optimization has a score from semrush and google lighthouse of:

Optimization Check List

  • Site Security
  • Analytic Tools
  • SSL
  • Theme Checker
  • Progressive Web App (PWA)
  • On Page SEO
  • Improve lighthouse performance
  • TODO CDN (In progress)
  • TODO AMP 

Site Security

We install the plugin all in one wp security and firewall on all our sites. Basically we go through all the tabs and follow all the recommendations. To install the plugin use wp cli and the follow command or via the standard wp dashboard method.  Note the lighthouse results did not change.

Analytic Tools

Google Analytics and Facebook Pixel are the two most popular analytic tools available and should be installed because

  • They are free
  • Automatically collect data
  • You can create custom reports
  • Improves adversing results
  • Understand bounce rates
  • Measure internal searches
  •  Learn audience demographical information including age, gender, interests, device and location
  • Check if you are achieving your goals

There are several ways to add these tools to your site. One easy way is to install two plugins that install the relevant code. I generally prefer to download facebook’s plugin.  

Verify that tools are working correctly with gachecker and facebook validator.  Note the Lighthouse results remained unchanged.

SSL

There are numerous reasons to add SSL and considering  Lets Encrypt is free there isn’t a good reason not to do this.  After the certificate is installed you will still get some ssl related errors on lighthouse and semrush.  

Step 1: Adjust the WordPress Settings to from http to https which removed the semrush website architecture issues.

Step 2: Fix the 9 links on HTTPS lead to HTTP Pages – this error occurred because the menu had custom links that lead to the http.  

In the progressive webapp section within lighthouse the audit fails because it does not redirect http traffic to https.  Semrush wants HTTPS to be HSTS (which is a little more secure than https).  To accomplish this we modify the htaccess file with the following code.  Also this eliminated the errors.

Theme checker 

Install and run the plugin theme-check, and verify that there are no errors or warnings that you don’t know about.

Progressive Web App (PWA)

Turning your wordpress website into a PWA is easy, google considers to be best practices.  Even if you don’t expect your users to “install” or want push notifications it is worth the effort. Some reasons to convert your wordpress website to PWA are:

  • Increased Google ranking
  • Secure user experience
  • More engaging user experience
  • Offline access
  • Increased reliability [especially in low wifi areas]

After the plugin it brought the PWA lighthouse score to 96 with the following issue.  The viewport size is 655px, whereas the window size is 412 px.  

To fix this issue we adjusted the viewport meta tag. After modifing the viewport PWA score is 100. 

On Page SEO

First install Yoast Premium.  Yoast free version works very well too, the difference is explained here.  First follow with Yoast’s configuration as depicted below.  Then update the webmaster tools, and update all posts and pages with Yoast’s suggestions.

Yoast Configuration
Webmaster Tools

After installing Yoast and updating the meta tags we ended up improving the semrush and google lighthouse scores.

Some of the warnings were related to category page.  There is a debate if this should be indexed or not, but in this case it is not required so after adjusting the Yoast settings the warning went down to 4 and the score went to 95.  

Yoast Removing Semrush

Improve lighthouse performance

There are a number of caching plugins available for wordpress.  We choice wp rocket after trying several.  Here are the results after activating it.  

Google Lighthouse score after activating wp rocket
Google Lighthouse score after activating wp rocket

Leave a Reply

Your email address will not be published. Required fields are marked *