{"id":125384,"date":"2022-01-25T06:30:00","date_gmt":"2022-01-25T12:30:00","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&#038;p=125384"},"modified":"2025-05-12T16:06:33","modified_gmt":"2025-05-12T21:06:33","slug":"achieving-better-core-web-vitals-with-headless-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/","title":{"rendered":"Achieving Better Core Web Vitals With Headless WordPress"},"content":{"rendered":"\n<p>Creating a great user experience (UX) has long been a key element of successful web strategy, but as users\u2019 expectations for digital experiences <a href=\"https:\/\/www.globenewswire.com\/en\/news-release\/2021\/02\/17\/2176967\/0\/en\/The-Digital-Consumer-Expectations-are-higher-than-ever-Can-your-brand-keep-up.html\" target=\"_blank\" rel=\"noreferrer noopener\">reach new heights,<\/a> UX has become more important than ever.<\/p>\n\n\n\n<p>Rapid digital acceleration has led to a growing demand for fast, seamless experiences that load quickly and respond well on any device, and <a href=\"https:\/\/wpengine.com\/resources\/generation-resilience-digital-trends-and-behaviors-study\/\" target=\"_blank\" rel=\"noreferrer noopener\">today\u2019s digital audiences<\/a> have little patience for anything that falls short.<\/p>\n\n\n\n<p>Against this backdrop, Google has launched <a href=\"https:\/\/wpengine.com\/blog\/core-web-vitals-prep-google-experience-update\/\" target=\"_blank\" rel=\"noreferrer noopener\">Core Web Vitals<\/a>, a set of user-centric performance metrics that allows site owners and builders to gain a better view into the digital experiences they\u2019re creating with a clear focus on the end-user.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2021\/05\/Google_CWV_Header-1024x538.jpg\" alt=\"\" class=\"wp-image-118241\" style=\"width:512px;height:269px\" srcset=\"https:\/\/wpengine.com\/wp-content\/uploads\/2021\/05\/Google_CWV_Header-1024x538.jpg 1024w, https:\/\/wpengine.com\/wp-content\/uploads\/2021\/05\/Google_CWV_Header-540x284.jpg 540w, https:\/\/wpengine.com\/wp-content\/uploads\/2021\/05\/Google_CWV_Header-768x403.jpg 768w, https:\/\/wpengine.com\/wp-content\/uploads\/2021\/05\/Google_CWV_Header.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><meta charset=\"utf-8\"><em> Core Web Vitals are user-centric performance metrics that provide a better view into the digital experiences you create with a clear focus on the end-user<\/em><\/figcaption><\/figure>\n\n\n\n<p>Core Web Vitals have also become a ranking factor in Google\u2019s search algorithm, which means faster sites with a better user experience not only benefit from <a href=\"https:\/\/blog.hubspot.com\/marketing\/user-engagement-seo\" target=\"_blank\" rel=\"noreferrer noopener\">higher user engagement<\/a>, they\u2019re also now favored in search results.&nbsp;<\/p>\n\n\n\n<p>This drives home just how important the end-user must be across all of the experiences you build, and it has real-world, bottom-line implications: sites with strong Core Web Vitals convert visitors into customers at a higher rate.<\/p>\n\n\n\n<p>While there are a number of ways to optimize for a better overall user experience, a headless or decoupled website architecture offers a clear path for building highly-performant websites and applications that align with Core Web Vitals and provide the seamless, omnichannel experiences today\u2019s digital consumers demand.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><strong><a href=\"https:\/\/wpengine.com\/headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Experience the power of headless, hands-on\u2014sign up for a free Headless WordPress sandbox account today!&nbsp;<\/a><\/strong><\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In this post, we\u2019ll explain why <a href=\"https:\/\/wpengine.com\/headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">headless WordPress<\/a> is the best technology stack for delivering a superior user experience with strong Core Web Vitals\u2014for you and your clients. Here\u2019s what we\u2019ll cover:\u00a0<\/p>\n\n\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What are Core Web Vitals?<\/strong><\/h2>\n\n\n\n<p>Core Web Vitals are a subset of the <a href=\"https:\/\/developers.google.com\/search\/docs\/guides\/page-experience\" target=\"_blank\" rel=\"noreferrer noopener\">page experience signals<\/a> included in Google\u2019s <a href=\"https:\/\/web.dev\/vitals\/\" target=\"_blank\" rel=\"noreferrer noopener\">Web Vitals initiative<\/a>, which provides unified guidance for quality signals that are \u201cessential to delivering a great user experience on the web.\u201d In essence, these metrics help ensure your website is delivering what visitors are looking for: predictable, responsive, and fast content.&nbsp;<\/p>\n\n\n\n<p>The list of Core Web Vitals is expected to <a href=\"https:\/\/web.dev\/vitals\/#evolving-web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\">evolve over time<\/a>, but the current set is focused on three major areas: page load speed, interactivity, and visual stability, through the lens of these three metrics:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"311\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-05-07-at-10.59.51-AM-1024x311.png\" alt=\"List of Google's Core Web Vitals\" class=\"wp-image-119670\" srcset=\"https:\/\/wpengine.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-05-07-at-10.59.51-AM-1024x311.png 1024w, https:\/\/wpengine.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-05-07-at-10.59.51-AM-540x164.png 540w, https:\/\/wpengine.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-05-07-at-10.59.51-AM-768x234.png 768w, https:\/\/wpengine.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-05-07-at-10.59.51-AM-1536x467.png 1536w, https:\/\/wpengine.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-05-07-at-10.59.51-AM-2048x623.png 2048w, https:\/\/wpengine.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-05-07-at-10.59.51-AM-1500x456.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/web.dev\/lcp\/\" target=\"_blank\" rel=\"noreferrer noopener\">Largest Contentful Paint (LCP)<\/a>: measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when a page first starts loading.<\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/fid\/\" target=\"_blank\" rel=\"noreferrer noopener\">First Input Delay (FID)<\/a>: measures interactivity\u2014how quickly site elements respond to a click or a touch. To provide a good user experience, pages should have a FID of less than 100 milliseconds.<\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/cls\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cumulative Layout Shift (CLS)<\/a>: measures visual stability\u2014if site elements shift without being clicked or touched. To provide a good user experience, pages should maintain a CLS of less than 0.1.<\/li>\n<\/ul>\n\n\n\n<p>As noted above, Core Web Vitals are now a ranking factor in Google\u2019s search algorithm, which means sites with faster speeds and a better user experience are favored in search results. This is not insignificant, as sites with strong Core Web Vitals convert visitors into customers at a higher rate than sites with a poor UX\u2014because they offer an engaging user experience <em>and<\/em> they are rewarded with more visibility for doing so!&nbsp;<\/p>\n\n\n\n<p>Site owners and builders should take note and can begin measuring Core Web Vitals (if they\u2019re not already) using many of <a href=\"https:\/\/web.dev\/vitals-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google\u2019s web developer tools<\/a>, including <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a>, <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"noreferrer noopener\">Lighthouse<\/a>, or the <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome User Experience Report<\/a>, which collects anonymized, real user measurement data for each of the Core Web Vitals metrics (and more).&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><strong><a href=\"https:\/\/wpengine.com\/resources\/measuring-and-improving-site-performance-core-web-vitals\/\" target=\"_blank\" rel=\"noreferrer noopener\">Find out more about measuring for Core Web Vitals with this free ebook!<\/a><\/strong><\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>While factors related to site performance aren\u2019t new to Google\u2019s algorithm\u2014mobile responsiveness and secure browsing (HTTPS) have been ranking factors for years\u2014the introduction of Core Web Vitals as a ranking factor expands Google\u2018s focus on performance with metrics that represent distinct aspects of the user experience.&nbsp;<\/p>\n\n\n\n<p>In short, user experience has taken center stage, and using Core Web Vitals as a benchmark for your websites is a great way to provide a consistently excellent experience to your site users. That said, measuring for Core Web Vitals is only part of the equation.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Rise of Headless WordPress<\/strong><\/h2>\n\n\n\n<p>As expectations for digital experiences continue to grow and the need for high-performing websites becomes increasingly critical, new frameworks and solutions are also being adopted to meet these challenges head-on.<\/p>\n\n\n\n<p><a href=\"https:\/\/wpengine.com\/headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Headless WordPress<\/a> is a prime example, as a growing number of site owners and builders look to marry their favorite front-end frameworks with the world\u2019s most popular CMS.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Headless architecture makes this possible by decoupling a website\u2019s front and back-end and feeding data between them using APIs.<\/p>\n\n\n\n<p>In the case of WordPress, this allows content creators to continue relying on their favorite open source CMS while developers can harness tools like <a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js <\/a>and their choice of modern front-end frameworks to build incredible websites and applications.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"182\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/HeadlessWP.png\" alt=\"\" class=\"wp-image-125385\" style=\"width:625px;height:222px\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><strong>Want to experiment with headless risk-free?&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><a href=\"https:\/\/wpengine.com\/headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Sign up for a free Headless WordPress evaluation account today!<\/strong><\/a><\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In today\u2019s fast-paced digital marketplace, the headless model is undoubtedly seeing widespread adoption, <a href=\"https:\/\/wpengine.com\/headless-cms-research\/\" target=\"_blank\" rel=\"noreferrer noopener\">especially at the enterprise leve<\/a>l, where larger businesses are rediscovering their agility by breaking down traditional silos that have long existed between content creators and web developers.&nbsp;<\/p>\n\n\n\n<p>The walled-off approach to content management is quickly becoming outdated, as it not only slows time to market and weakens ROI, but often results in a less-than-ideal user experience.<\/p>\n\n\n\n<p>As content creators face tighter deadlines and turn to all-in-one CMS solutions, they\u2019re not always building experiences optimized for the end-user. In fact, less than 30% of websites built on WordPress have optimal Core Web Vitals scores, a number that gets lower as other competitor platforms are evaluated.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"746\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.37.57-PM-1024x746.png\" alt=\"\" class=\"wp-image-125386\" style=\"width:768px;height:560px\" srcset=\"https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.37.57-PM-1024x746.png 1024w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.37.57-PM-540x393.png 540w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.37.57-PM-768x559.png 768w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.37.57-PM.png 1340w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Sites built on WP Engine\u2019s platform see an immediate boost\u2014more than 40% meet the healthy Core Web Vitals threshold\u2014but as site owners and builders look for new ways to build better user experiences, headless architecture continues to jump out as the best way to deliver highly performant sites using the tools that both content creators and developers prefer.&nbsp;<\/p>\n\n\n\n<p>In fact, headless websites often crush Core Web Vitals scores right out of the gates, with more than 50% of headless (front-end) frameworks regularly achieving healthy Core Web Vitals scores.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"755\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.40.02-PM-1024x755.png\" alt=\"\" class=\"wp-image-125387\" style=\"width:780px;height:569px\" srcset=\"https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.40.02-PM-1024x755.png 1024w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.40.02-PM-540x398.png 540w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.40.02-PM-768x566.png 768w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.40.02-PM.png 1300w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>At the same time, building digital experiences with front-end frameworks but without a CMS can be limiting to content creators\u2014a challenge that Headless WordPress solves for all.&nbsp;&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Headless WordPress: The Complete Headless WordPress Solution<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/wpengine.com\/headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Headless WordPress<\/a> is the complete headless solution for WordPress and was designed specifically to achieve peak headless performance while satisfying the requirements of both developers and content creators.&nbsp;<\/p>\n\n\n\n<p>Headless WordPress delivers support for everything the modern developer wants: multiple server-side environments, auto-deployments from GitHub branches, both static and dynamic headless architectures, your choice of JavaScript framework\u2014React, Angular, Vue.js, or any other\u2014and a command-line tool that is 100% scriptable.<\/p>\n\n\n\n<p>At the same time, Headless WordPress pairs that preferred developer experience with WordPress and WP Engine\u2019s technology leadership, making everyone happy\u2014from your developers and content creators to your end-users.&nbsp;<\/p>\n\n\n\n<p>From a performance standpoint, Headless WordPress is transformative. Because WP Engine is already one of the <a href=\"https:\/\/wpengine.com\/resources\/building-on-the-fastest-digital-experience-platform-for-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">fastest managed hosting platforms for WordPress<\/a>, adding Headless WordPress and Node.js to the stack increases speed exponentially, executing pages up to 10X faster than traditional WordPress.\u00a0<\/p>\n\n\n\n<p>The end result? Developers and content creators are able to combine forces and create personalized front-end experiences with Core Web Vitals that are consistently above benchmarks.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Demolishing Core Web Vitals Requirements with Headless WordPress&nbsp;<\/strong><\/h2>\n\n\n\n<p>The performance benefits of Headless WordPress are indeed transformative, and while users will immediately see a difference in the blazing-fast delivery of beautiful pages, that higher performance will also be reflected in better Core Web Vitals metrics across your sites.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/wpengine.com\/more\/achieving-peak-performance-headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Android Authority<\/a>, the largest independent publication dedicated to Android OS, came onboard with WP Engine in 2019. As their website continued to grow, Android Authority\u2019s digital teams began evaluating Headless WordPress as a way to ensure they were building for the future with options for scalability and performance that could meet their growing demands.&nbsp;<\/p>\n\n\n\n<p>After upgrading their site with Headless WordPress, Android Authority saw amazing results\u2014a 6X increase in Google Lighthouse metrics, including Core Web Vitals, and faster speeds on desktop and mobile than any of its competitors.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.42.54-PM-1024x588.png\" alt=\"\" class=\"wp-image-125388\" style=\"width:768px;height:441px\" srcset=\"https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.42.54-PM-1024x588.png 1024w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.42.54-PM-540x310.png 540w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.42.54-PM-768x441.png 768w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.42.54-PM-1536x881.png 1536w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.42.54-PM-1500x861.png 1500w, https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-14-at-1.42.54-PM.png 1952w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can take advantage of Headless WordPress too, hands-on, by signing up for a free Headless WordPress sandbox account at <a href=\"https:\/\/wpengine.com\/headless-wordpress\/\">wpengine.com\/headless-wordpress\/<\/a>.&nbsp;<\/p>\n\n\n\n<p>The sandbox account will allow your development team to dive in with Headless WordPress and it includes a sandbox WordPress site paired with our \u201cno-hosting,\u201d which allows you to build and serve the front-end of your site without opening a WP Engine account.<\/p>\n\n\n\n<p>You\u2019ll also find a wide range of <a href=\"https:\/\/developers.wpengine.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">tutorials and documentation<\/a> as well as additional open source tools including <a href=\"https:\/\/faustjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Faust.js<\/a> and <a href=\"https:\/\/developers.wpengine.com\/blog\/what-is-atlas-content-modeler\" target=\"_blank\" rel=\"noreferrer noopener\">Headless WordPress Content Modeler<\/a> (more on these below). As always, if you have any questions about accessing Headless WordPress, you can <a href=\"https:\/\/wpengine.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\">speak with one of our experts at any time<\/a>.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Setup, Build, and Deploy Your Sites with Faust.js and Headless WordPress<\/strong><\/h2>\n\n\n\n<p>One of the fastest ways you can get started with headless is with <a href=\"https:\/\/wpengine.com\/blog\/faust-js-the-framework-for-headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Faust.js<\/a>, an open source front-end framework that makes data fetching, page rendering, and user authentication simple for Headless WordPress.<\/p>\n\n\n\n<p>Faust.js focuses on delivering the best developer experience when building with Headless WordPress while preserving the familiarity of the WordPress publishing experience.&nbsp;<\/p>\n\n\n\n<p>Here are a few of the features Faust.js makes available:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Static Site Generators and Server Side Rendering<\/strong>: Faust is built on top of <a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js<\/a>, allowing you to take advantage of SSG and SSR that is already available with Next.js<\/li>\n\n\n\n<li><strong>GraphQL<\/strong>: Faust uses a bleeding-edge GraphQL client that lets you query the WordPress WPGraphQL API without having to know GraphQL queries ahead of time. The first time you see this in action it feels like magic, and Faust is the first framework to offer this kind of functionality. Never think about writing a GraphQL query again!<\/li>\n\n\n\n<li><strong>Content previews<\/strong>: Faust solves the nagging challenge of consistent previews for Headless WordPress.<\/li>\n\n\n\n<li><strong>Authentication<\/strong>: Faust has built-in mechanisms for authenticating with your WordPress back-end so you can easily build gated content, eCommerce experiences, or make other authenticated requests.<\/li>\n\n\n\n<li><strong>React<\/strong>: Faust enables you to build your entire front-end using the most popular front-end library.<\/li>\n\n\n\n<li><strong>React hooks<\/strong>: Faust is a natural extension to your WordPress API because it makes getting data from WordPress incredibly straightforward.<\/li>\n\n\n\n<li><strong>Custom Post Types<\/strong>: Because of the unique way Faust helps you fetch data, adding Custom Post Types to your WordPress site and then accessing them on the front-end is trivial.<\/li>\n\n\n\n<li><strong>Flexibility<\/strong>: While Faust works best when using Next.js and React, if you want to use other tools such as Gatsby, Nuxt, and SvelteKit you can do that!<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/faustjs.org\/docs\/next\/getting-started\" target=\"_blank\" rel=\"noreferrer noopener\">Click here<\/a> to get started with Faust now, or check out <a href=\"https:\/\/wpengine.com\/resources\/setup-build-and-deploy-your-site-with-faust-js-and-atlas\/\" target=\"_blank\" rel=\"noreferrer noopener\">this step-by-step webinar<\/a> for an in-depth look at the tools, languages, APIs, frameworks, and more you\u2019ll put to use as you build out a new front-end experience on top of Next.js and deploy it using <a href=\"https:\/\/wpengine.com\/headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Headless WordPress<\/a>.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Power Your Creativity With Headless WordPress&nbsp;<\/strong><\/h2>\n\n\n\n<p>As digital acceleration continues to fuel the demand for faster, more personalized, omnichannel experiences, Headless WordPress offers a wide and growing list of possibilities for site owners, site builders, and the digital experiences they create.&nbsp;&nbsp;<\/p>\n\n\n\n<p>And as Core Web Vitals continue to play a prominent role in Google\u2019s search algorithm, meeting those metrics head-on with Headless WordPress is a surefire way to not only satisfy the highest standards of page experience but to build better, more pleasant-to-use websites for your end-users.<\/p>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><strong><a href=\"https:\/\/wpengine.com\/headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free Headless WordPress sandbox account today and get a hands-on look at&nbsp;Headless WordPress!<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a great user experience (UX) has long been a key element of successful web strategy, but as users\u2019 expectations for digital experiences reach new heights, UX has become more important than ever. Rapid digital acceleration has led to a growing demand for fast, seamless experiences that load quickly and respond well on any device,<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":200,"featured_media":125408,"template":"","resource-topic":[913,912],"resource-role":[895,896,899],"resource-type":[916],"class_list":["post-125384","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Achieving Better Core Web Vitals With Headless WordPress<\/title>\n<meta name=\"description\" content=\"Headless web architecture offers a clear path for achieving peak Core Web Vitals and delivering seamless, omnichannel experiences today\u2019s consumers demand.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Achieving Better Core Web Vitals With Headless WordPress\" \/>\n<meta property=\"og:description\" content=\"Headless web architecture offers a clear path for achieving peak Core Web Vitals and delivering seamless, omnichannel experiences today\u2019s consumers demand.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-12T21:06:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Atlas-CWV_1200x627.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/\",\"url\":\"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/\",\"name\":\"Achieving Better Core Web Vitals With Headless WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/#website\"},\"datePublished\":\"2022-01-25T12:30:00+00:00\",\"dateModified\":\"2025-05-12T21:06:33+00:00\",\"description\":\"Headless web architecture offers a clear path for achieving peak Core Web Vitals and delivering seamless, omnichannel experiences today\u2019s consumers demand.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Achieving Better Core Web Vitals With Headless WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/#website\",\"url\":\"https:\/\/wpengine.com\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/#\/schema\/person\/7af5af2afeaf4a861319f5c18bcddcab\",\"name\":\"Abe Selig\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6deb04da8be57a16bed1b5ad7722572beaa7ed7292795763c9324d46b0ad9454?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6deb04da8be57a16bed1b5ad7722572beaa7ed7292795763c9324d46b0ad9454?s=96&d=mm&r=g\",\"caption\":\"Abe Selig\"},\"description\":\"Abe Selig is a writer, amateur musician and accomplished inshore fisherman. He began his career as a journalist and now tells stories about technology and the ways it\u2019s helping businesses thrive. He is an Austin, TX native who has lived in New York City and traveled all around the world. You can reach him at abe.selig@wpengine.com.\",\"url\":\"https:\/\/wpengine.com\/blog\/author\/abes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Achieving Better Core Web Vitals With Headless WordPress","description":"Headless web architecture offers a clear path for achieving peak Core Web Vitals and delivering seamless, omnichannel experiences today\u2019s consumers demand.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Achieving Better Core Web Vitals With Headless WordPress","og_description":"Headless web architecture offers a clear path for achieving peak Core Web Vitals and delivering seamless, omnichannel experiences today\u2019s consumers demand.","og_url":"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2025-05-12T21:06:33+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Atlas-CWV_1200x627.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/","url":"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/","name":"Achieving Better Core Web Vitals With Headless WordPress","isPartOf":{"@id":"https:\/\/wpengine.com\/#website"},"datePublished":"2022-01-25T12:30:00+00:00","dateModified":"2025-05-12T21:06:33+00:00","description":"Headless web architecture offers a clear path for achieving peak Core Web Vitals and delivering seamless, omnichannel experiences today\u2019s consumers demand.","breadcrumb":{"@id":"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/resources\/achieving-better-core-web-vitals-with-headless-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/resources\/"},{"@type":"ListItem","position":3,"name":"Achieving Better Core Web Vitals With Headless WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/#website","url":"https:\/\/wpengine.com\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/#\/schema\/person\/7af5af2afeaf4a861319f5c18bcddcab","name":"Abe Selig","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6deb04da8be57a16bed1b5ad7722572beaa7ed7292795763c9324d46b0ad9454?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6deb04da8be57a16bed1b5ad7722572beaa7ed7292795763c9324d46b0ad9454?s=96&d=mm&r=g","caption":"Abe Selig"},"description":"Abe Selig is a writer, amateur musician and accomplished inshore fisherman. He began his career as a journalist and now tells stories about technology and the ways it\u2019s helping businesses thrive. He is an Austin, TX native who has lived in New York City and traveled all around the world. You can reach him at abe.selig@wpengine.com.","url":"https:\/\/wpengine.com\/blog\/author\/abes\/"}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/wp-content\/uploads\/2022\/01\/Atlas-CWV_1200x627.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Developer, Site Owner","topic":"<strong>Topics:<\/strong> Analytics, Performance","_links":{"self":[{"href":"https:\/\/wpengine.com\/wp-json\/wp\/v2\/resource\/125384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/wp-json\/wp\/v2\/users\/200"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/wp-json\/wp\/v2\/media\/125408"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/wp-json\/wp\/v2\/media?parent=125384"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/wp-json\/wp\/v2\/resource-topic?post=125384"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/wp-json\/wp\/v2\/resource-role?post=125384"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/wp-json\/wp\/v2\/resource-type?post=125384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}