{"id":597,"date":"2023-08-03T10:00:00","date_gmt":"2023-08-03T10:00:00","guid":{"rendered":"http:\/\/www.diveintoaccessibility.com\/?p=597"},"modified":"2024-10-14T18:02:38","modified_gmt":"2024-10-14T18:02:38","slug":"how-we-optimized-performance-to-serve-a-global-audience","status":"publish","type":"post","link":"http:\/\/www.diveintoaccessibility.com\/index.php\/2023\/08\/03\/how-we-optimized-performance-to-serve-a-global-audience\/","title":{"rendered":"How We Optimized Performance To Serve A Global Audience"},"content":{"rendered":"<p>              <title>How We Optimized Performance To Serve A Global Audience<\/title><\/p>\n<article>\n<header>\n<h1>How We Optimized Performance To Serve A Global Audience<\/h1>\n<address>Liran Cohen<\/address>\n<p>                  2023-08-03T10:00:00+00:00<br \/>\n                  2024-10-14T17:35:03+00:00<br \/>\n                <\/header>\n<p>I work for <a href=\"https:\/\/www.bookaway.com\/\">Bookaway<\/a>, a digital travel brand. As an online booking platform, we connect travelers with transport providers worldwide, offering bus, ferry, train, and car transfers in over 30 countries. We aim to eliminate the complexity and hassle associated with travel planning by providing a one-stop solution for all transportation needs.<\/p>\n<p>A cornerstone of our business model lies in the development of effective landing pages. These pages serve as a pivotal tool in our digital marketing strategy, not only providing valuable information about our services but also designed to be easily discoverable through search engines. Although landing pages are a common practice in online marketing, we were trying to make the most of it.<\/p>\n<p>SEO is key to our success. It increases our visibility and enables us to draw a steady stream of organic (or \u201cfree\u201d) traffic to our site. While paid marketing strategies like Google Ads play a part in our approach as well, enhancing our organic traffic remains a major priority. The higher our organic traffic, the more profitable we become as a company.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-bookaway.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"284\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-bookaway.png\" alt=\"Bookaway site search\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Bookaway site search. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-bookaway.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We\u2019ve known for a long time that fast page performance influences search engine rankings. It was only in 2020, though, that <a href=\"https:\/\/web.dev\/vitals\/\">Google shared its concept of Core Web Vitals<\/a> and how it impacts SEO efforts. Our team at Bookaway recently underwent a project to improve Web Vitals, and I want to give you a look at the work it took to get our existing site in full compliance with Google\u2019s standards and how it impacted our search presence.<\/p>\n<h2 id=\"seo-and-web-vitals\">SEO And Web Vitals<\/h2>\n<p>In the realm of search engine optimization, <strong>performance plays a critical role<\/strong>. As the world\u2019s leading search engine, Google is committed to delivering the best possible search results to its users. This commitment involves prioritizing websites that offer not only relevant content but also an excellent user experience.<\/p>\n<p>Google\u2019s <strong>Core Web Vitals<\/strong> is a set of performance metrics that site owners can use to evaluate performance and diagnose performance issues. These metrics provide a different perspective on user experience:<\/p>\n<ul>\n<li><strong>Largest Contentful Paint (LCP)<\/strong><br \/>\nMeasures the time it takes for the main content on a webpage to load.<\/li>\n<li><strong>First Input Delay (FID)<\/strong><br \/>\nAssesses the time it takes for a page to become interactive.<br \/>\n<strong>Note<\/strong>: <em>Google plans to <a href=\"https:\/\/web.dev\/inp-cwv\/\">replace this metric with another one<\/a> called Interaction to Next Paint (INP) beginning in 2024.<\/em><\/li>\n<li><strong>Cumulative Layout Shift (CLS)<\/strong><br \/>\nCalculates the visual stability of a page.<\/li>\n<\/ul>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-defs.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"232\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-defs.png\" alt=\"Core Web Vital metrics definitions\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Core Web Vital metrics definitions. (Image source: <a href=\"https:\/\/web.dev\/vitals\/\">web.dev<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-defs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>While optimizing for FID and CLS was relatively straightforward, LCP posed a greater challenge due to the multiple factors involved. <strong>LCP is particularly vital for landing pages<\/strong>, which are predominantly content and often the first touch-point a visitor has with a website. A low LCP ensures that visitors can view the main content of your page sooner, which is critical for maintaining user engagement and reducing bounce rates.<\/p>\n<h2 id=\"largest-contentful-paint-lcp\">Largest Contentful Paint (LCP)<\/h2>\n<p>LCP measures the perceived load speed of a webpage from a user\u2019s perspective. It pinpoints the moment during a page\u2019s loading phase when the primary &mdash; or \u201clargest\u201d &mdash; content has been fully rendered on the screen. This could be an image, a block of text, or even an embedded video. LCP is an essential metric because it gives a real-world indication of the user experience, especially for content-heavy sites.<\/p>\n<p>However, achieving a good LCP score is often a multi-faceted process that involves optimizing several stages of loading and rendering. Each stage has its unique challenges and potential pitfalls, as <a href=\"https:\/\/www.liranify.com\/posts\/case-study-stimatckey\">other case studies<\/a> show.<\/p>\n<p>Here\u2019s a breakdown of the moving pieces.<\/p>\n<h3 id=\"time-to-first-byte-ttfb\">Time To First Byte (TTFB)<\/h3>\n<p>This is the time it takes for the first piece of information from the server to reach the user\u2019s browser. You need to beware that slow server response times can significantly increase TTFB, often due to server overload, network issues, or un-optimized logic on the server side.<\/p>\n<h3 id=\"download-time-of-html\">Download Time of HTML<\/h3>\n<p>This is the time it takes to download the page\u2019s HTML file. You need to beware of large HTML files or slow network connections because they can lead to longer download times.<\/p>\n<h3 id=\"html-processing\">HTML Processing<\/h3>\n<p>Once a web page\u2019s HTML file has been downloaded, the browser begins to process the contents line by line, translating code into the visual website that users interact with. If, during this process, the browser encounters a <code>&lt;script&gt;<\/code> or <code>&lt;style&gt;<\/code> tag that lacks either an <code>async<\/code> or <code>deferred<\/code> attribute, the rendering of the webpage comes to a halt.<\/p>\n<p>The browser must then pause to fetch and parse the corresponding files. These files can be complex and potentially take a significant amount of time to download and interpret, leading to a noticeable delay in the loading and rendering of the webpage. This is why the <code>async<\/code> and <code>deferred<\/code> attributes are crucial, as they ensure an efficient, seamless web browsing experience.<\/p>\n<h3 id=\"fetching-and-decoding-images\">Fetching And Decoding Images<\/h3>\n<p>This is the time taken to fetch, download, and decode images, particularly the largest contentful image. You need to look out for large image file sizes or improperly optimized images that can delay the fetching and decoding process.<\/p>\n<h3 id=\"first-contentful-paint-fcp\">First Contentful Paint (FCP)<\/h3>\n<p>This is the time it takes for the browser to render the first bit of content from the DOM. You need to beware of slow server response times, particularly render-blocking JavaScript or CSS, or slow network connections, all of which can negatively affect FCP.<\/p>\n<h3 id=\"rendering-the-largest-contentful-element\">Rendering the Largest Contentful Element<\/h3>\n<p>This is the time taken until the largest contentful element (like a hero image or heading text) is fully rendered on the page. You need to watch out for complex design elements, large media files, or slow browser rendering can delay the time it takes for the largest contentful element to render.<\/p>\n<p>Understanding and optimizing each of these stages can significantly improve a website\u2019s LCP, thereby enhancing the user experience and SEO rankings.<\/p>\n<p>I know that is a lot of information to unpack in a single sitting, and it definitely took our team time to wrap our minds around what it takes to achieve a low LCP score. But once we had a good understanding, we knew exactly what to look for and began analyzing the analytics of our user data to identify areas that could be improved.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p><strong>Web forms<\/strong> are at the center of every meaningful interaction. Meet Adam Silver&rsquo;s <strong><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/form-design-patterns\/\">Form Design Patterns<\/a><\/strong>, a practical guide to <strong>designing and building forms<\/strong> for the web.<\/p>\n<p><a data-instant href=\"https:\/\/www.smashingmagazine.com\/printed-books\/form-design-patterns\/\" class=\"btn btn--green btn--large\">Jump to table of contents&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"https:\/\/www.smashingmagazine.com\/printed-books\/form-design-patterns\/\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img\" src=\"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51e0f837-d85d-4b28-bfab-1c9a47f0ce33\/form-design-patterns-shop-image.png\" alt=\"Feature Panel\" width=\"481\" height=\"698\" \/><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"analyzing-user-data\">Analyzing User Data<\/h2>\n<p>To effectively monitor and respond to our website\u2019s performance, we need a robust process for collecting and analyzing this data.<\/p>\n<p>Here\u2019s how we do it at Bookaway.<\/p>\n<h3 id=\"next-js-for-performance-monitoring\">Next.js For Performance Monitoring<\/h3>\n<p>Many of you reading this may already be familiar with Next.js, but it is a popular open-source JavaScript framework that allows us to <strong>monitor our website\u2019s performance in real-time<\/strong>.<\/p>\n<p>One of the key Next.js features we leverage is the <code>reportWebVitals<\/code> function, a hook that allows us to capture the Web Vitals metrics for each page load. We can then forward this data to a custom analytics service. Most importantly, the function provides us with in-depth insights into our user experiences in real-time, helping us identify any performance issues as soon as they arise.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-function.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"198\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-function.png\" alt=\"The reportWebVitals function\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The <code>reportWebVitals<\/code> function. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-function.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"storing-data-in-bigquery-for-comprehensive-analysis\">Storing Data In BigQuery For Comprehensive Analysis<\/h3>\n<p>Once we capture the Web Vitals metrics, we store this data in <a href=\"https:\/\/cloud.google.com\/bigquery\/\">BigQuery<\/a>, Google Cloud\u2019s fully-managed, serverless data warehouse. Alongside the Web Vitals data, we also record a variety of other important details, such as the date of the page load, the route, whether the user was on a mobile or desktop device, and the language settings. This comprehensive dataset allows us to examine our website\u2019s performance from multiple angles and gain deeper insights into the user experience.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-query.jpg\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"421\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-query.jpg\" alt=\"SQL query results\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      SQL query results. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-query.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The screenshot features an SQL query from a data table, focusing on the LCP web vital. It shows the retrieval of LCP values (in milliseconds) for specific visits across three unique page URLs that, in turn, represent three different landing pages we serve:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.bookaway.com\/routes\/thailand\/bangkok-to-chiang-mai\">Bangkok to Chiang Mai<\/a> in Thailand,<\/li>\n<li><a href=\"https:\/\/www.bookaway.com\/routes\/croatia\/hvar-to-split\">Hvar to Split<\/a> in Croatia,<\/li>\n<li><a href=\"https:\/\/www.bookaway.com\/routes\/croatia\/bol-brac-island-to-split\">Bol, Brac Island to Split<\/a> in Croatia.<\/li>\n<\/ul>\n<p>These values indicate how quickly major content items on these pages become fully visible to users.<\/p>\n<h3 id=\"visualizing-data-with-looker-studio\">Visualizing Data with Looker Studio<\/h3>\n<p>We visualize performance data using <a href=\"https:\/\/cloud.google.com\/looker-studio\">Google\u2019s Looker Studio<\/a> (formerly called Data Studio). By <strong>transforming our raw data into interactive dashboards and reports<\/strong>, we can easily identify trends, pinpoint issues, and monitor improvements over time. These visualizations empower us to make data-driven decisions that enhance our website\u2019s performance and, ultimately, improve our users\u2019 experience.<\/p>\n<p>Looker Studio offers a few key advantages:<\/p>\n<ul>\n<li><strong>Easy-to-use interface<\/strong><br \/>\nLooker Studio is intuitive and user-friendly, making it easy for anyone on our team to create and customize reports.<\/li>\n<li><strong>Real-time data<\/strong><br \/>\nLooker Studio can connect directly to BigQuery, enabling us to create reports using real-time data.<\/li>\n<li><strong>Flexible and customizable<\/strong><br \/>\nLooker Studio enables us to create customized reports and dashboards that perfectly suit our needs.<\/li>\n<\/ul>\n<p>Here are some examples:<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-record.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"640\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-record.png\" alt=\"Looker Studio filter\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Looker Studio filter. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-record.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>This screenshot shows a crucial functionality we\u2019ve designed within Looker Studio: the capability to <strong>filter data by specific groups of pages<\/strong>. This custom feature proves to be invaluable in our context, where we need granular insights about different sections of our website. As the image shows, we\u2019re honing in on our \u201cRoute Landing Page\u201d group. This subset of pages has experienced over one million visits in the last week alone, highlighting the significant traffic these pages attract. This demonstration exemplifies how our customizations in Looker Studio help us dissect and understand our site\u2019s performance at a granular level.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-time.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"434\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-time.png\" alt=\"LCP seconds over time\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      LCP seconds over time. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-time.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The graph presents the LCP values for the 75th percentile of our users visiting the Route Landing Page group. This percentile represents the user experience of the \u201caverage\u201d user, excluding outliers who may have exceptionally good or poor conditions.<\/p>\n<p>A key advantage of using Looker Studio is its ability to segment data based on different variables. In the following screenshot, you can see that we have differentiated between mobile and desktop traffic.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-device.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"375\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-device.png\" alt=\"LCP by device type\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      LCP by device type. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-device.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"understanding-the-challenges\">Understanding The Challenges<\/h2>\n<p>In our journey, the key performance data we gathered acted as a compass, pointing us toward specific challenges that lay ahead. Influenced by factors such as <strong>global audience diversity, seasonality<\/strong>, and the intricate <strong>balance between static and dynamic content<\/strong>, these challenges surfaced as crucial areas of focus. It is within these complexities that we found our opportunity to refine and optimize web performance on a global scale.<\/p>\n<h3 id=\"seasonality-and-a-worldwide-audience\">Seasonality And A Worldwide Audience<\/h3>\n<p>As an international platform, Bookaway serves a diverse audience from various geographic locations. One of the key challenges that come with serving a worldwide audience is the variation in <strong>network conditions<\/strong> and <strong>device capabilities<\/strong> across different regions.<\/p>\n<p>Adding to this complexity is the effect of <strong>seasonality<\/strong>. Much like physical tourism businesses, our digital platform also experiences seasonal trends. For instance, during winter months, our traffic increases from countries in warmer climates, such as Thailand and Vietnam, where it\u2019s peak travel season. Conversely, in the summer, we see more traffic from European countries where it\u2019s the high season for tourism.<\/p>\n<p>The variation in our performance metrics, correlated with geographic shifts in our user base, points to a clear area of opportunity. We realized that we needed to consider a more global and scalable solution to better serve our global audience.<\/p>\n<p>This understanding prompted us to revisit our approach to content delivery, which we\u2019ll get to in a moment.<\/p>\n<h3 id=\"layout-shifts-from-dynamic-and-static-content\">Layout Shifts From Dynamic And Static Content<\/h3>\n<p>We have been using dynamic content serving, where each request reaches our back-end server and triggers processes like database retrievals and page renderings. This server interaction is reflected in the TTFB metric, which measures the duration from the client making an HTTP request to the first byte being received by the client\u2019s browser. The shorter the TTFB, the better the perceived speed of the site from the user\u2019s perspective.<\/p>\n<p>While dynamic serving provides simplicity in implementation, it imposes significant time costs due to the <strong>computational resources<\/strong> required to generate the pages and the latency involved in <strong>serving these pages to users at distant locations<\/strong>.<\/p>\n<p>We recognize the potential benefits of serving static content, which involves delivering pre-generated HTML files like you would see in a <a href=\"https:\/\/www.smashingmagazine.com\/2021\/05\/evolution-jamstack\/\">Jamstack architecture<\/a>. This could significantly improve the speed of our content delivery as it eliminates the need for on-the-fly page generation, thereby reducing TTFB. It also opens up the possibility for more effective use of caching strategies, potentially enhancing load times further.<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aAs%20we%20envisage%20a%20shift%20from%20dynamic%20to%20static%20content%20serving,%20we%20anticipate%20it%20to%20be%20a%20crucial%20step%20toward%20improving%20our%20LCP%20metrics%20and%20providing%20a%20more%20consistent%20user%20experience%20across%20all%20regions%20and%20seasons.%0a&amp;url=https:\/\/smashingmagazine.com%2f2023%2f08%2foptimize-performance-serve-global-audience%2f\"><\/p>\n<p>As we envisage a shift from dynamic to static content serving, we anticipate it to be a crucial step toward improving our LCP metrics and providing a more consistent user experience across all regions and seasons.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>In the following sections, we\u2019ll explore the potential challenges and solutions we could encounter as we consider this shift. We\u2019ll also discuss our thoughts on implementing a <strong>Content Delivery Network (CDN)<\/strong>, which could <a href=\"https:\/\/www.smashingmagazine.com\/2018\/02\/dynamic-website-static-content-cdn\/\">allow us to fully leverage the advantages of static content serving<\/a>.<\/p>\n<h2 id=\"leveraging-a-cdn-for-content-delivery\">Leveraging A CDN For Content Delivery<\/h2>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-cdn-map.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"454\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-cdn-map.png\" alt=\"Global map with CDN markers\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Global map with CDN markers. (Image source: <a href=\"http:\/\/aws.amazon.com\/cloudfront\">Amazon CloudFront<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-cdn-map.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>I imagine many of you already understand what a CDN is, but it is essentially a network of servers, often referred to as \u201cedges.\u201d These edge servers are distributed in data centers across the globe. Their primary role is to store (or \u201ccache\u201d) copies of web content &mdash; like HTML pages, JavaScript files, and multimedia content &mdash; and deliver it to users based on their geographic location.<\/p>\n<p>When a user makes a request to access a website, the DNS routes the request to the edge server that\u2019s geographically closest to the user. This proximity significantly reduces the time it takes for the data to travel from the server to the user, thus reducing latency and improving load times.<\/p>\n<p>A key benefit of this mechanism is that it effectively transforms dynamic content delivery into static content delivery. When the CDN caches a pre-rendered HTML page, no additional server-side computations are required to serve that page to the user. This not only reduces load times but also reduces the load on our origin servers, enhancing our capacity to serve high volumes of traffic.<\/p>\n<p>If the requested content is cached on the edge server and the cache is still fresh, the CDN can immediately deliver it to the user. If the cache has expired or the content isn\u2019t cached, the CDN will retrieve the content from the origin server, deliver it to the user, and update its cache for future requests.<\/p>\n<p>This caching mechanism also improves the website\u2019s resilience to distributed denial-of-service (DDoS) attacks. By serving content from edge servers and reducing the load on the origin server, the CDN provides an additional layer of security. This protection helps ensure the website remains accessible even under high-traffic conditions.<\/p>\n<h3 id=\"cdn-implementation\">CDN Implementation<\/h3>\n<p>Recognizing the potential benefits of a CDN, we decided to implement one for our landing pages. As our entire infrastructure is already hosted by <strong>Amazon Web Services (AWS)<\/strong>, choosing <a href=\"https:\/\/aws.amazon.com\/cloudfront\/\">Amazon AWS CloudFront<\/a> as our CDN solution was an immediate and obvious choice. Its robust infrastructure, scalability, and a wide network of edge locations around the world made it a strong candidate.<\/p>\n<p>During the implementation process, we configured a key setting known as <a href=\"https:\/\/docs.aws.amazon.com\/AmazonCloudFront\/latest\/DeveloperGuide\/Expiration.html\">max-age<\/a>. This determines <strong>how long a page remains \u201cfresh.\u201d<\/strong> We set this property to three days, and for those three days, any visitor who requests a page is quickly served with the cached version from the nearest edge location. After the three-day period, the page would no longer be considered \u201cfresh.\u201d The next visitor requesting that page wouldn\u2019t receive the cached version from the edge location but would have to wait for the CDN to reach our origin servers and generate a fresh page.<\/p>\n<p>This approach offered an exciting opportunity for us to enhance our web performance. However, transitioning to a CDN system also posed new challenges, particularly with the multitude of pages that were rarely visited. The following sections will discuss how we navigated these hurdles.<\/p>\n<h3 id=\"addressing-many-pages-with-rare-visits\">Addressing Many Pages With Rare Visits<\/h3>\n<p>Adopting the AWS CloudFront CDN significantly improved our website\u2019s performance. However, it also introduced a unique problem: our \u201clong tail\u201d of rarely visited pages. With over 100,000 landing pages, each available in seven different languages, we managed a total of around 700,000 individual pages.<\/p>\n<p>Many of these pages were rarely visited. Individually, each accounted for a small percentage of our total traffic. Collectively, however, they made up a substantial portion of our web content.<\/p>\n<p>The infrequency of visits meant that our CDN\u2019s max-age setting of three days would often expire without a page being accessed in that timeframe. This resulted in these pages falling out of the CDN\u2019s cache. Consequently, the next visitor requesting that page would not receive the cached version. Instead, they would have to wait for the CDN to reach our origin server and fetch a fresh page.<\/p>\n<p>To address this, we adopted a strategy known as <a href=\"https:\/\/docs.aws.amazon.com\/AmazonCloudFront\/latest\/DeveloperGuide\/Expiration.html%23stale-content\">stale-while-revalidate<\/a>. This approach allows the CDN to serve a stale (or expired) page to the visitor, while simultaneously validating the freshness of the page with the origin server. If the server\u2019s page is newer, it is updated in the cache.<\/p>\n<p>This strategy had an immediate impact. We observed a marked and continuous enhancement in the performance of our long-tail pages. It allowed us to ensure a consistently speedy experience across our extensive range of landing pages, regardless of their frequency of visits. This was a significant achievement in maintaining our website\u2019s performance while serving a global audience.<\/p>\n<p>I am sure you are interested in the results. We will examine them in the next section.<\/p>\n<h2 id=\"performance-optimization-results\">Performance Optimization Results<\/h2>\n<p>Our primary objective in these optimization efforts was to reduce the LCP metric, a crucial aspect of our landing pages. The implementation of our CDN solution had an immediate positive impact, <strong>reducing LCP from 3.5 seconds to 2 seconds<\/strong>. Further applying the stale-while-revalidate strategy resulted in an <strong>additional decrease in LCP<\/strong>, bringing it down to 1.7 seconds.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-target.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"357\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-target.png\" alt=\"LCP seconds over time\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      LCP seconds over time. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-target.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>A key component in the sequence of events leading to LCP is the TTFB, which measures the time from the user\u2019s request to the receipt of the first byte of data by the user\u2019s browser. The introduction of our CDN solution prompted a dramatic decrease in TTFB, from <strong>2 seconds to 1.24 seconds<\/strong>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-ttfb-time.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"344\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-ttfb-time.png\" alt=\"Time to First Byte over time\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Time to First Byte over time. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-ttfb-time.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3 id=\"stale-while-revalidate-improvement\">Stale-While-Revalidate Improvement<\/h3>\n<p>This substantial reduction in TTFB was primarily achieved by transitioning to static content delivery, eliminating the need for back-end server processing for each request, and by capitalizing on CloudFront\u2019s global network of edge locations to minimize network latency. This allowed users to fetch assets from a geographically closer source, substantially reducing processing time.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-seconds.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"353\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-seconds.png\" alt=\"LCP in seconds\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      LCP in seconds. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-seconds.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Therefore, it\u2019s crucial to highlight that<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aThe%20significant%20improvement%20in%20TTFB%20was%20one%20of%20the%20key%20factors%20that%20contributed%20to%20the%20reduction%20in%20our%20LCP%20time.%20This%20demonstrates%20the%20interdependent%20nature%20of%20web%20performance%20metrics%20and%20how%20enhancements%20in%20one%20area%20can%20positively%20impact%20others.%0a&amp;url=https:\/\/smashingmagazine.com%2f2023%2f08%2foptimize-performance-serve-global-audience%2f\"><\/p>\n<p>The significant improvement in TTFB was one of the key factors that contributed to the reduction in our LCP time. This demonstrates the interdependent nature of web performance metrics and how enhancements in one area can positively impact others.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>The overall LCP improvement &mdash; thanks to stale-while-revalidate &mdash; was around <strong>15% for the 75th percentile<\/strong>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-15.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"350\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-15.png\" alt=\"LCP seconds over time\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      LCP seconds over time. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-lcp-15.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"user-experience-results\">User Experience Results<\/h2>\n<p>The \u201cPage Experience\u201d section in Google Search Console evaluates your website\u2019s user experience through metrics like load times, interactivity, and content stability. It also reports on mobile usability, security, and best practices such as HTTPS. The screenshot below illustrates the substantial improvement in our site\u2019s performance due to our implementation of the stale-while-revalidate strategy.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-console-mobile.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"517\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-console-mobile.png\" alt=\"79% good page experience report\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      79% good page experience report. (<a href=\"https:\/\/files.smashing.media\/articles\/optimize-performance-serve-global-audience\/cwv-console-mobile.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>I hope that documenting the work we did at Bookaway gives you a good idea of the effort that it takes to tackle improvements for Core Web Vitals. Even though there is plenty of documentation and tutorials about them, I know it helps to know what it looks like in a real-life project.<\/p>\n<p>And since everything I have covered in this article is based on a real-life project, it\u2019s entirely possible that the insights we discovered at Bookaway will differ from yours. Where LCP was the primary focus for us, you may very well find that another Web Vital metric is more pertinent to your scenario.<\/p>\n<p>That said, here are the key lessons I took away from my experience:<\/p>\n<ul>\n<li><strong>Optimize Website Loading and Rendering.<\/strong><br \/>\nPay close attention to the stages of your website\u2019s loading and rendering process. Each stage &mdash; from TTFB, download time of HTML, and FCP, to fetching and decoding of images, parsing of JavaScript and CSS, and rendering of the largest contentful element &mdash; needs to be optimized. Understand potential pitfalls at each stage and make necessary adjustments to improve your site\u2019s overall user experience.<\/li>\n<li><strong>Implement Performance Monitoring Tools.<\/strong><br \/>\nUtilize tools such as Next.js for real-time performance monitoring and BigQuery for storing and analyzing data. Visualizing your performance data with tools like Looker Studio can help provide valuable insights into your website\u2019s performance, enabling you to make informed, data-driven decisions.<\/li>\n<li><strong>Consider Static Content Delivery and CDN.<\/strong><br \/>\nTransitioning from dynamic to static content delivery can greatly reduce the TTFB and improve site loading speed. Implementing a CDN can further optimize performance by serving pre-rendered HTML pages from edge servers close to the user\u2019s location, reducing latency and improving load times.<\/li>\n<\/ul>\n<h3 id=\"further-reading-on-smashingmag\">Further Reading On SmashingMag<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/01\/optimizing-image-element-lcp\/\">Optimizing The Image Element LCP<\/a>,\u201d Elo\u00efse Martin<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2022\/09\/data-loading-patterns-improve-frontend-performance\/\">Five Data-Loading Patterns To Boost Web Performance<\/a>,\u201d Agustinus Theodorus<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/04\/potential-web-workers-multithreading-web\/\">Exploring The Potential Of Web Workers For Multithreading On The Web<\/a>,\u201d Sarah Oke Okolo<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2022\/04\/boost-resource-loading-new-priority-hint-fetchpriority\/\">Boost Resource Loading With fetchpriority, A New Priority Hint<\/a>,\u201d Adrian Bece<\/li>\n<\/ul>\n<div class=\"signature\">\n  <img src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>How We Optimized Performance To Serve A Global Audience How We Optimized Performance To Serve A Global Audience Liran Cohen 2023-08-03T10:00:00+00:00 2024-10-14T17:35:03+00:00 I work for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/597"}],"collection":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/comments?post=597"}],"version-history":[{"count":1,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/597\/revisions"}],"predecessor-version":[{"id":598,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/597\/revisions\/598"}],"wp:attachment":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media?parent=597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/categories?post=597"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/tags?post=597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}