Migration to Headless WordPress and Next.js by Backlinko [Part 2]

2. Show, don't tell

The main reason for the upcoming page experience updates is to address performance degradation and transition the UX to Backlinkos' Jamstack. The implemented stack has successfully improved performance without sacrificing functionality.
On Bejamas' site, you can check the Core Web Vitals score simply by entering a URL.

 

Bejamas launched a new website in July 2020. Thanks to the Treo Site Speed tool, we can check data from the past 12 months and also compare it directly with competitors.

 

 

As you can see, LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), TFB (Time to First Byte), and FID (First Input Delay) have significantly decreased.

 

2-1 Loading Time

Directly compare the loading of the new Next.js and the old WordPress sites.

 

 

Both websites have been tested on a low-budget Moto G4 mobile device emulated with a 3G connection, Chrome browser, and WebPageTest.

 

The loading of the new website is three times faster. However, we should not be satisfied with just improving the homepage. Optimizing a single page is not enough to pass the Core Web Vitals. To display the green badge from Origin, all pages must be fast.

 

We have decided to collaborate with Bejamas to support the migration to Next.js. This migration has made a significant difference in load times and Core Web Vitals scores.

 

Brian Dean
SEO Expert, Founder of Backlinko.com

3. The Path to Enhanced User Experience

If the server response is slow, everything else will be slow as well. The time to the first byte has improved, but this affects all other metrics. At this point, the loading process is like a waterfall and needs to be optimized in every aspect.

 

By using Netlify Edge, we were able to gain a significant advantage. All files (including HTML!) are served directly from the CDN. Details on how we seamlessly deployed Next.js on Netlify are thoroughly explained in a blog post by Netlify.

 

It can be achieved with a standard server and an appropriate caching strategy. However, as mentioned earlier, caching is difficult, and doing it on a large scale becomes even more challenging. Netlify guarantees cache invalidation, and all builds are globally accelerated by default, with no stale content. However, you need to wait until the build is complete.

 

 

3-1 Maximum Content Full Paint

To improve LCP, it was necessary to optimize the rendering of the page, especially for fonts and images. Backlinko uses various font weights. Instead of loading eight files, it loads one variable font. Crucial also finely split the CSS. Initially, the WordPress theme required compressed, bloated CSS of over 100kb.

 

In the future, we plan to add support for the latest image formats such as WebP and AVIF to further optimize images.

 

3-2 Cumulative Layout Changes

CLS is a very troubling issue from the user's perspective. After the website loads and the first elements are displayed, content unexpectedly jumps in. Possible causes include poor font loading strategies and client-side conditional rendering (such as banners and ads). We have fixed all the factors that cause such jumps.

 

3-3 First Input Delay

React hydration comes with performance costs. It can significantly improve TTI (Time to Interactive) and FID. The website appears to be ready before the JS execution is complete. Interactions like client-side routing do not work without the hydration part. What exactly is the problem?

 

When there is a lot of JS, it can take time to execute, especially on low-end devices. There are several ways to solve this, but the simplest is to remove runtime JS. Andy Bell did this on his website and achieved great results.

 

It is often debated among developers whether the cost of JS is worth it. After all, most of us are providing static content. Why is there a need to incorporate so much JS? We bet on the ecosystem and the people and tools involved. Next.js enables a hybrid approach. You can easily set up a preview environment on request.

 

Hydration in React.js is part of the Next.js framework, but FID remains the same.

 

3-4 Perceived Performance

It is not easy to measure perceived performance. It is very subjective. In many cases, how users feel about performance is more important than tests conducted in a laboratory.

 

On the Backlinko site, navigation between pages is instantaneous. This is because it preloads assets and content, using client-side routing. All of these features are built into Next.js.

 

3-5 Final Thoughts

Achieving a balance between performance and functionality is like walking a tightrope, especially for websites like Backlinko.

 

However, there are some technical solutions that excel in this area.

 

The biggest surprise was that there was no need to significantly change the data structure from WordPress, thanks to the power of the Advanced Custom Fields and WPGraphQL plugins. These two have made WordPress a truly robust and flexible headless CMS.

 

In addition, the fast Next.js frontend breathes new life into the CMS loved by many content editors.

 

The goal of fundamentally improving the website's UX and speed has been achieved, but the most gratifying result for us was the surprise we received from the Backlinko team, understanding that there is no trade-off between performance, functionality, and security by following the Jamstack path.