We do a lot at Strattic to automatically improve the performance of a WordPress site when we convert it into a static site.  For this reason, many of the things you would normally do to optimize your WordPress site, you do not have to do at Strattic.  

There are however a few optimization steps that may speed up your site, even when it’s being converted to a static site.  

In this article we look at some tips and tools you can use to improve various aspects of sites performance before the conversion to static takes place.  In some cases you’ll find that Strattic itself serves as a great tool for optimization.

Benchmark Speed with Google Lighthouse

Several tools exist that measure and report on a site’s performance based on a variety of metrics.  We will use the popular Google Lighthouse tool which is part of the Chrome browser.

To access the Lighthouse testing tool:

  1. Open your static site in Chrome and right click to select “Inspect.”  
  2. Click on the “Audit” tab.
  1. Next, under the “Categories” heading, uncheck all of the options except for “Performance.”  You can play with the other options, but the “Performance” metrics are the important ones to start with for optimization.
  2. Finally, click on the “Generate report” button and wait for your report to be generated.
  1. It is a good idea to track the effect of the different performance optimizations you make.  You can Print and Save to PDF any reports once you run it.  When you save these files, use names that reflect the changes you have made.
  1. This will let you get a clear before and after report after each step you take.

 

In the Performance report you will see a variety of metrics.  The tips and tools we look at in this article will cover many of these common metrics sites likely need to improve.

For technical details on all of the various metrics, you can consult the documentation here then go to Audit References > Performance in the side navigation.

Optimize Images

Even an optimized static site will slow down with unnecessarily large images.  We highly suggest installing an image optimization plugin on your WordPress site that will automatically get you smaller file sizes for your images.

A great plugin for doing this is EWWW Image Optimizer.  Once installed and activated it will work without need for configuration.  New images that you upload will be optimized.

You will also find a Bulk Optimize tool under Media in the admin area.  This will let you optimize images that you uploaded before installing the plugin.

Enable Lazy Loading Images

There is a way of adding images to your site so they only load when they scroll into view.  This allows the initial part of the page you see to load first and faster.  Several plugins can handle this process, including EWWW Image Optimizer.

To enable this feature, go to Settings >EWWW Image Optimizer, click on the “Easy Mode” tab and check the box for “Lazy Load.”

How much this speeds up a page depends on how many images were previously loading out of view.  In our case, with a large gallery below the initial view, it helped a bit.

NOTE: WordPress is working to add the HTML loading attribute to images with a default value of “lazy.”  This will allow for automatic lazy loading even on the static site, in browsers that support the feature, however, plugins may still be helpful for full browser support. Project and overview on Github.

What About Using a CDN? No Need to Add One Since Strattic Comes with a Built-In CDN

It is a great idea to serve images and other static content via Content Delivery Networks as they provide a network for serving your content more quickly around the world.

That is why we already do it for you at Strattic.  Not only do we serve your images via a CDN, we serve your entire static site via CDN.

For this reason you can disable or opt out of any CDN options in plugins you find.

Will File Minification and Combination Speed Up Your Site?

Now we move on from images to the code itself.

Minifying your CSS and/or JavaScript and HTML converts it into a shorter, machine readable format.  This is something that we already do for your files when converting them to static.

Combining files means your site requires less connections to the server.  If you had, for instance, 13 different JS and CSS scripts on the page, you would require 13 different requests to the server.  Combining these files into one file or just a few files would result in less requests to the server and a potentially faster loading site.

At Strattic, however, our servers use HTTP/2, which allows for multiple files to download at the same time.  So, combining files is not necessary.  

Because of what we do during the static site generation process, you may or may not find that these steps speed up your final static site.

It should be noted that minifying and combining files can break the styling or functionality of your site, so make sure to test!

If you would like to try minifying your files, you can navigate to Strattic > Settings in the admin menu and click on the Advanced tab.

Here you will see HTML, JavaScript and CSS Optimization options.  Once enabled, the next time you publish to your live or preview site the relative files will be optimized.

We suggest testing these one at a time to see what performance gains you get and to make sure no single step is causing issues on your site.

There are also third party plugins like Autoptimize (free) and WP Rocket (premium) that offer file optimization options.  If you use an optimization plugin like these, please see the section below on disabling cache settings.

“Eliminate Render-Blocking Resources”

There is a performance metric in Lighthouse that says “Eliminate render-blocking resources.”  This refers to files that are set to load before the content on the page can load.

Sometimes it is necessary to render blocking resources.  However, there are often some files that can be loaded after the content.

This is not something we do as part of the static site generation process at Strattic because there are some situations when automated solutions will work for your site, and some when it will break your site.

If you would like to prevent the number of scripts that fall into this category, tools like Autoptimize or WP Rocket may prove helpful.  

When you check the option to combine or “aggregate” files, it will load them in the footer of the site, after the main content has loaded.

As noted before, test to make sure selecting these options for your CSS and JavaScript does not break the styling or functionality of your site.

With Autoptimize, there is a setting all the way at the bottom under Misc Options called “Save aggregated script/css as static files?” that should be enabled.

No Need to Enable Caching

With traditional WordPress hosting platforms you want to cache your content whenever you can.  That is because the site is dynamic and requires database calls and code processing by default. This is slower than a cached version of your site, which is HTML, no database calls and less code running.

A static site is already HTML with no database calls, so no need e to cache it.  It is a cache.

Read more about why you don’t need caching plugins at Strattic.

Some optimization plugins, like WP Rocket, offer caching as one of several features that you can disable (see WP Rocket Disable Page Caching Plugin).  The Divi theme also has a cache option that you can read how to clear and disable in our docs.

If a plugin on your site is caching WordPress, you may potentially experience the problem of updates on your WordPress site not being reflected on your static site or static files getting 404 errors and not loading.

Too Many External Requests?

The last type of optimization deals with features of your site that make external requests to tools like analytics software, social sharing tools, third party form and comment services or Google Fonts which all require connections to third party servers.

The example above is an audit that started at 100 ranking and was brought down to 44 just from adding too many plugins that called on external services!  This is an extreme example where we added social network integrations, live chat, external embedded forms, 3rd party comment service, and more analytics tracking than we needed.

To address a situation like this, start with an audit of all of the external urls and services your site makes. 

Some external connections you might not be able to avoid.  Some you might be able to find a comparable tool that loads faster.  Some you might decide you do not need.

Also, rather than copy and pasting JavaScript embeds directly into your pages or templates as some tools suggest, look for a plugin or write some custom code to properly enqueue the JavaScript from third party services into WordPress.  

This will allow you to load the JavaScript for the tool in the footer of the page after the content loads, rather than in the middle of the page and block everything else from loading.  You can also optionally conditionally load your JavaScript only on pages where it is needed, speeding up the rest of the site.

Here is a plugin we developed for Commento that takes the JavaScript from a comment service embed and properly enqueues it into WordPress.  You can reference the code used and swap out the links to Commento with your own JavaScript links.

Reach Out With Your Tips!

If you are developing your site on Strattic and come across other tips that help you speed up your site share in the comments below!

We also have a Directory of Tools for Static WordPress you can browse for new tools or suggest tools you have found.

Did this answer your question?