Traffic Safety Corporation

Improving Core Web Vitals Across the Globe

Featuring Beaver Builder, WP Rocket, Cloudflare, and Core Web Vitals

Working with Sterner Stuff, the Flight Light team was able to cut development time when updating or adding features to two of the three sites in their suite of properties.

Additionally, we were able to move the content editing experience out of code and into the WordPress editor.

And most importantly, we were able to make huge strides in improving site speed and Core Web Vitals across all three sites, ensuring there’d be no love lost between Google and these websites.

Key Wins

• Improved Core Web Vitals scores
• Page Speed Insights score improvements
  • Desktop: 90 > 99
  • Mobile: 47 > 82
• Transition content from a bunch of custom page templates into the WordPress admin via Beaver Builder
• Rapid global delivery via Cloudflare

The Project

The Flight Light team manages a suite of 3 WordPress websites, two of which shared nearly identical code, but were maintained completely separately, essentially doubling development time when updating or adding features.

In addition to streamlining the development experience, the Flight Light team wanted to turn some serious attention to Google’s new Core Web Vitals measurements. With customers across the globe, site speed was a priority.

Improving Site Speed and Core Web Vitals

There is no one-size-fits-all solution for improving site speed, which is why working with a company like Sterner Stuff can help ensure you get everything set up correctly.

For this project in particular, there were some specific considerations.

Page Builders Can’t Be Fast

When Flight Light came to us, there was a lot of content hard coded into page templates, which meant content managers needed to edit HTML code across the site for a variety of updates.

This is never ideal for folks whose job is to write content, which makes tools like Beaver Builder and WordPress’s block editor so valuable. Content writers can write content in an engaging way without knowing how to write code.

Want to learn more about Core Web Vitals?

Google’s Core Web Vitals and Organic Search Ranking

A common misconception in the WordPress world is that page builders are inherently slow. And while, to some extent, this is true, it’s also true that in most cases, the things that make page builders slow can be mitigated.

For example, if you’re truly trying to make a WordPress website fast, you should be leveraging a full page cache, which allows your website to send pages to end users without loading up WordPress, and your page builder plugin of choice, every time. Instead, the final HTML is saved when the first user comes along, and then sent directly to subsequent users.

Another concern is that page builders may serve a lot more CSS and JavaScript than they actually need to for a given page, because they’re shipping content for every single module that could have been used on that page.

In reality, a quality page builder likely is creating trimmed down versions of their assets for each page on your site depending on the modules actually in use for that page.

Further Optimization with WP Rocket

In this case, we wanted to go even further in reducing the size of the site being delivered to end users. This is where tools like WP Rocket come in handy. WP Rocket can, on a page by page basis, evaluate the page’s CSS and load only critical CSS above the fold, allowing the page to load without loading all the CSS. Non-critical CSS gets moved below the fold, which satisfies Google’s page speed needs.

WP Rocket even has a beta feature that strips unused CSS entirely from your pages, reducing the overall size of assets that have to be loaded.

Getting these features to work right, however, can take some fine tuning. The Sterner Stuff team is able to dig into quirks that these optimizations may introduce and add exceptions to make sure everything works correctly.

Other teams may want to charge you a ton of money to get into the weeds of your theme, page builders, and other plugins to strip out assets and reduce file sizes, but the costs of a project like that far outweigh the simplicity of an automated solution like WP Rocket.

Image courtesy Cloudflare

Cloudflare’s Automatic Platform Optimization for WordPress

With the website origin about as fast as it was going to get, we turned to Cloudflare’s global CDN to deliver the site more quickly to Flight Light customers around the world.

It’s easy to start caching static assets with Cloudflare. Heck, many hosts have this feature built right in! But Cloudflare’s Automatic Platform Optimization service for WordPress is designed to work with WordPress sites and store not only static assets, but also that full page cache on Cloudflare’s edge cache. That means Cloudflare is intercepting nearly every average end-user request to your site and serving it as fast as possible to users, no matter where they are in the world.

Before Cloudflare APO, pages that were scoring 100% on GTMetrix from requests originating in Vancouver, Canada would score 35 points lower when being requested from Hong Kong. Cloudflare APO leveled the playing field. All for the insanely reasonable cost of $5/mo.

Nerdy Stuff: Composer for Common Custom Themes

This last part is pretty nerdy, so we won’t be offended if you don’t stick around. But here’s the big takeaway: using modern development practices, we were able to greatly reduce the time it takes to roll out fixes and new features to multiple Flight Light sites, cutting costs for the team.

What was the problem before?

Flight Light approached us with three sites, and two of them shared a nearly identical theme.

Despite this fact, the two code bases were completely independent. So if there was a common bug to fix, or common feature to implement, the work had to be copied, pasted, and slightly modified from one site to the other, which takes more costly development time.

Step 1: Parent Theme

The first step was to take every minor inconsistency across the sites and either remove the inconsistency, or put the offending code into a child theme. Then all the common code could be moved into a shared parent theme, which could be updated on both sites when changes were made without worrying about breaking stuff or overwriting customizations on either site.

Step 2: Better Code Delivery

But this still left one frustration: the WordPress admin, out of the box, will only pull plugin or theme updates for publicly available plugins and themes. We don’t want to publish this custom theme for the world to see, but that also means implementing some kind of tooling to let WordPress find our updates in addition to public updates.

There are various solutions out there for this, but here at Sterner Stuff, we manage our WordPress sites using Bedrock, a WordPress framework that turns your plugins and themes into modern PHP dependencies using Composer.

While getting WordPress itself to talk to private code sources for updates is kind of complicated, using Composer to get updates to private code is very simple.

So the Flight Light theme is now a private Composer dependency. We tag new releases when we make updates, and a simple composer update on either site will pull in the updated theme along with the rest of the month’s updates. It fits seamlessly in our regular monthly update workflow.

Have your own site speed project to tackle?

We’ve got you covered

Contact Sterner Stuff today to audit your current site for speed improvement opportunities.

Contact Sterner Stuff