Core Web Vitals Inititiative

Beginning in 2020, when Google announced that their Core Web Vitals (CWV) would start becoming an important search algorithm factor in May 2021, I began advocating for making CWV optimization a major focus on our 2021 roadmap. Getting buy-in for this project was not initially easy. CWVs like Cumulative Layout Shift and Largest Contentful Paint were concepts that execs would need to be familiarized with, and while improving page speed is always beneficial to the user experience, the TurnKey site was already fast — or at least, “fast enough” — at least on desktop with a good internet connection, as most tech offices have.

The angle that was most effective was this: while the TurnKey site would never have the Domain Authority of name-brand competitors like VRBO, Airbnb, Expedia, and TripAdvisor, as a lean and scrappy tech team we could move fast on this new algorithm factor and beat the slower, larger sites to the punch. Using the Google Page Speed test, I created competitor benchmarks showing the opportunity we had to gain a leg up on our competition.

By May of 2021, just in time for the algorithm update’s rollout, we were able to get the vast majority of our pages to score Good in Google Search Console’s Core Web Vitals report. Here’s how we did it.

Tech Debt and Layer0

Performance optimization is often a good way to justify and explain tackling tech debt when a business might otherwise try to keep kicking the can down the road, and in this case, laying the groundwork for the infrastructure optimizations we’d be making meant finally killing some of the tech debt monsters we’d been wrestling with for years.

Following a large back-end refactor, we looked for ways to take advantage of the React framework we’d built the site on, in particular by using an Edge network. After vetting several third party services, the engineering lead and I landed on Layer0 (at the time branded Moovweb). Layer0 allowed us to keep a dynamically-updated cache of our pages to be served quickly across the web a la a CDN.

We saw phenomenal results as soon as we deployed the site on Layer0, not just increasing speed for CWVs but doing so in such a substantial way that conversion rates tripled in the next month. You can read more about our experience with Layer0 in the case study they conducted with us.

Initial results from implementing Layer0

Hitting the CWV ceiling

As Spring 2021 rolled around, we’d made huge strides in our CWV metrics but had yet to achieve “good” scores across the majority of our pages, particularly when it came to mobile. We’d also run through all the low-hanging fruit, and the developers were skeptical that the remaining items on our backlog would get us to our goal of all of our major pages scoring “good” scores by May. The goals, they told me, were too ambitious, and not feasible for our site.

So, I asked them, if our site as it exists today will never get good scores on CWVs, what would a site that hit our goals look like? They were happy to explain: a site that scored well on CWVs wouldn’t have as many big images, especially on mobile and especially above the fold. It wouldn’t make such heavy use of third-party libraries for UI elements that would block a page’s load, especially things like carousels and image galleries, where all of the images would load in the background.

In other words, our Core Web Vital initiative became a design program.

Designing for CWVs

Bringing engineering and design together, we looked for ways to design our way around the problem. To start, we focused on the above-the-fold area on our major landing page templates, shrinking the hero image and hiding it entirely on mobile:

Pre-CWV market page

CWV market page redesign

Mobile pre-CWV

Mobile CWV redesign

Next, we removed and redesigned the carousel used on market pages to display unit categories:

Old market category component design

New market category design

As a result of these redesigns on our market landing pages, we were finally able to break through the CWV ceiling and hit our goals by scoring “good” on Google CWV report in Search Console.

Unit Page CWV Redesigns

While unit pages didn’t drive nearly as much traffic as our market landing pages did, they were important for SEO and had CWV issues of their own. After a lot of work improving the way we cache the data necessary for this page, we again ran into a tech ceiling and had to design our way around. The biggest issue here was how we loaded the unit images, using a carousel component that allowed for an endless horizontal scroll. Instead of using the carousel library and loading all of those images, we implemented a tile redesign that only loaded four.