Migrating to Headless WordPress and Next.js with Backlinko [Part 2]

2. Show, don't tell.

In future page experience updates, the main reason for migrating to Backlinkos' Jamstack is to address performance issues and improve UX without sacrificing functionality. The implemented stack has successfully improved performance without sacrificing functionality.
On the Bejamas website, you can check Core Web Vitals scores simply by entering the 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 even compare it directly with our 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

Compare the loading of a new Next.js and an old WordPress site directly.

 

 

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

 

Loading the new website is now three times faster. However, we should not be satisfied with just improving the homepage. Optimizing only one page will not allow us to pass the Core Web Vitals. In order to display the green badge of origin, all pages must be fast.

 

We have decided to collaborate with Bejamas to support the migration to Next.js. This migration has resulted in significant improvements in load time and Core Web Vitals scores.

 

Brian Dean
SEO expert and founder of Backlinko.com

3. Road to Improving User Experience

If the server response is slow, everything else will be slow as well. While the time to first byte has been improved, this will affect 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 huge advantage. All files (including HTML!) are directly served from the CDN. The seamless deployment of Next.js on Netlify is detailed in a blog post on Netlify's website.

 

It can be achieved with standard servers and appropriate caching strategies. However, as mentioned earlier, caching is difficult and becomes even more difficult when done on a large scale. Netlify guarantees cache invalidation, and all builds are globally accelerated by default, with no stale content. However, you will need to wait until the build is completed.

 

 

3-1 Maximum Content Full Paint

To improve LCP, it was necessary to optimize page rendering. Especially fonts and images. Backlinko uses various font weights. Instead of loading 8 files, it loads one variable font. Crucial also divided CSS into smaller parts. Initially, the WordPress theme required compressed and blockified 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 frustrating issue from the user's perspective. After the website is loaded and the first element is displayed, the content suddenly jumps out. This can be caused by poor font loading strategies or client-side conditional rendering (such as banners or ads). We have fixed all the causes of these jumps.

 

3-3 First Input Delay

React hydration incurs performance costs. It can greatly improve TTI (Time to Interactive) and FID. It makes the website appear to be finished before JS execution is complete. Interactions like client-side routing will not work without hydration. What specifically is the issue?

 

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

 

There is often debate among developers about whether the cost of JS is worth it. After all, we mostly provide static content. Why do we need to include JS to this extent? We rely on the ecosystem and the people and tools involved. Next.js enables a hybrid approach. You can easily set up an on-request preview environment.

 

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

 

3-4 Perceived Performance

Measuring recognized performance is not easy. It is highly subjective. In many cases, it is more important to understand how users perceive performance rather than conducting tests in a laboratory.

 

At Backlinko's site, page navigation can be done instantly. This is because assets and content are preloaded and client-side routing is used. All of these features are built into Next.js.

 

3-5 Final Thoughts

Finding the right balance between performance and functionality can be like walking a tightrope, especially for websites like Backlinko.

 

However, within technical solutions, there are also areas in which we excel.

 

The biggest surprise was that, with the power of Advanced Custom Fields and WPGraphQL plugins, there was no need to drastically change the data structure from WordPress. Thanks to these two, WordPress has become a solid and flexible headless CMS.

 

In addition, the fast Next.js frontend will breathe new life into CMS, which is beloved by many content editors.

 

The goal of significantly improving the UX and speed of the website has been achieved, but the most exciting result for us was the realization from the Backlinko team, who walked the path of Jamstack, that there is no trade-off between performance, functionality, and security.