Testing and learning: How we optimized our website performance

Our goal at Indiegraf is to build reliable, flexible and scalable websites. To achieve this, we are constantly updating our technologies and developing new solutions. This quarter, we decided to take an in-depth look at our website performance.

We know that efficient performance makes a good user experience for your readers. That’s why our core template is fit for mobile and we are continuously running accessibility tests and monitoring our websites' loading speed. 

Loading speed is one of the key factors Google uses for ranking search results. Google states that chances of your reader bouncing increases 32 percent as page load time goes from one to three seconds. Poor performance means poor reader engagement and, consequently, less reader revenue. 

We decided to test different plugins and services to determine which combination provided the highest performance rating on both mobile and desktop. Our method was fairly straightforward: 

1. Clone one of our current websites to a test environment
2. Deactivate all performance plugins and services
3. Clear all caches
4. Run Google Lighthouse
5. Clear all caches
6. Activate one performance plugin or service
7. Run Google Lighthouse
8. Clear all caches

We cleared the caches and ran Google Lighthouse three times to calculate a benchmark performance average for both desktop and mobile. We did the same for each tested plugin/service. 

After determining the average performance score for each individual plugin/service, we began testing combinations. Many cleared caches and Lighthouse runs later, we accumulated enough data for comparison:  

Here, we were focused on improving website performance through image optimization and caching functionality. It's important to highlight that different elements impact performance: if you are running ads or have a paywall, likely these numbers will be lower. Also, this snapshot is specific to our current tech setup. Some plugins work best on a specific host, so any future changes will require further review.

Based on these results, we updated all the sites in our network to use the combination of plugins and services that provided the highest overall boost in performance and image optimization.

There's still a lot of work to be done, like minifying and combining our Javascript and CSS stylesheets. We will continue to test and improve Indie Tech each quarter.