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, empowering non-technical staff to update the website.

And most importantly, we were able to make huge improvements to site speed and Core Web Vitals across all three sites, which Google loves to see.

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 improve their scores for 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.

Considerations for this particular project included:

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 good for folks whose job is to write content, which makes tools like Beaver Builder and WordPress’s block editor so valuable. They allow content writers can write content in an engaging way without knowing how to write code.

---

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 unavoidably slow. While page builders may often come out of the box slow, in most cases, they can be made faster.

For example, if you’re trying to make a WordPress website fast, you should be using a full page cache, which allows your website to send pages to end users faster. The contents of the page, normally regenerated for every visitor, are saved when the first user comes along and then sent directly to subsequent users.

Another worry is that page builders deliver 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 should be 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 the most important parts first, allowing the page to load without loading all the CSS. Less important CSS gets moved below the fold, which makes the page faster and Google happier.

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 was able to debug quirks that these optimizations introduced 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.

Cloudflare’s Automatic Platform Optimization for WordPress

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

It may not seem like it, but your website lives on an actual piece of hardware somewhere. Maybe in Oregon, maybe in Iowa, maybe in North Carolina. If you’re a global brand, users overseas will get your website slower than users close to your hardware.

Cloudflare solves this by putting copies of your website across the world. While many hosts are starting to build in Cloudflare’s services for some parts of your website, Cloudflare’s Automatic Platform Optimization service for WordPress is designed to work with WordPress sites to put more pieces of your website in more parts of the globe, 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 might 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.