What is Largest Contentful Paint and how can you improve it?
Improving LCP with Fastly
As anyone concerned with SEO and website performance knows, Google Core Web Vitals (CWVs) are a critical consideration when evaluating and improving your customers’ experience on your website. These CWVs include three key metrics:
Loading: Largest Contentful Paint or LCP
Interactivity: Interaction to Next Paint or INP
Visual stability: Cumulative Layout Shift or CLS
This piece addresses the first (and most impactful) of the metrics, LCP, and how to improve it.
What is LCP?
LCP measures the time elapsed between a page starting to load and when the largest element is rendered. Elements measured are usually images, videos, and block level elements containing text nodes. Put simply - it is the longest wait time a user on your website has during their time navigating your site.
A good measure is anything below 2.5 seconds.
Why does LCP matter/ why does it matter for website performance?
LCP is critical for both user experience and your business’ bottom line:
It directly impacts user satisfaction - Customers, visitors and consumers on your website are fickle. Even very brief delays in load times can result in a lost opportunity. Think of the last time you browsed a slow site… out bet is that you likely closed your window or were at least irritated by the experience.
It improves SEO - Google directly and openly states that CWVs impact how your page shows up in search results. Poor LCP translates to lower rankings (and less eyes on your page).
It reduces bounce rates - Poor customer satisfaction (#1) directly correlates to higher bounce rates. With faster load times, you can keep users happy, and on your site.
It increases conversion rates - Happy customers, and quickly loading sites result in higher conversion rates.
How can you improve LCP?
Use of a modern CDN is one of the fastest and most effective ways to improve your core web vitals, specifically largest contentful paint - the most important of the three CWVs.
Although your CDN configuration can help improve INP and CLS, they won’t be the main drivers.
Largest Contentful Paint can be directly impacted by your CDN configuration and API design. One way to optimize LCP is by focusing on time-to-first-byte (TTFB). By caching API responses and compressing images at the edge, you can improve your TTFB and thus your LCP.
Optimized API design can seriously impact how quickly dynamic content loads, not only offering a more personalized user experience but also a faster one.
Really, the best approach is to use a modern CDN that can help with all of these challenges:
How can Fastly help improve LCP?
A modern CDN like Fastly can help improve your LCP score by improving your time to first byte (TTFB), caching API responses, and compressing images at the edge.
An optimized API design and a network that actively maintains its open connections can significantly improve the load time for your cached content, your dynamic content, and even your uncached content, all while you offer a more personalized and faster user experience.
Stale content delivery
Fastly enables you to serve ‘stale’ content when your origin server is taking too long. If a customer is trying to load a page but your origin server is down or taking too long to respond, Fastly can continue to serve ‘stale’ (cached) content to that visitor until the issue is resolved - meaning no interruption in delivery of content to your audience. This not only maintains user experience and satisfaction, but keeps your SEO rankings up (Google never sees that your site is failing to load or loading slowly), and when your origin gets back up and running the content is refreshed.
Handling of high-volume requests
The ever-increasing demand of web crawlers can put undue burden on your servers, and drag you down. Fastly can be easily configured to serve ‘stale’ content to crawlers, thereby lessening the demand on your servers. The crawlers are still getting real and relevant content, it just might not be the absolute newest version. We effortlessly handle a large volume of requests (even DDoS attacks) without sacrificing performance - intelligently routing around internet ‘weather’.
Better security ranking
Inclusion of our DDoS, Bot Protection and Transport Layer Security mean a more secure website for your customers and prevention of various cyber attacks. Google’s algorithm updates repeatedly make it clear that the security of a website weighs heavily in the ranking factor of a website’s SEO. Websites with poor or lacking security measures face negative impacts in rankings and search results.
Faster load times for big files
If you serve larger video files to your customers, Fastly can quickly help improve page speed. Google typically does not index video files, unless they live on platforms like Youtube; therefore, if your website hosts various embedded video files on the same web server, you are at risk of a slow-loading page. Fastly can serve cached versions of the video files - a great way to avoid this challenge.
Caching of Dynamic Content
APIs
Fastly helps protect your origin server from excessive API requests. Orgs often mistake API traffic as too dynamic to benefit from being served by their CDN. Fastly has long advocated for best practices in API design that allow API responses to be cached at the edge. Unfortunately, API responses are too often written off as being ‘uncacheable’, meaning you lose out on some of the easiest performance and reliability wins you could get, if you only cached your API responses on an edge network. The availability of APIs can impact the availability of partners’ websites and services, so it is critically important that you make efforts to ensure the highest level of availability for your APIs. You can do this by caching more of your API content at the edge with the right CDN.
Dynamic Content
Fastly can also cache ‘dynamic’ or frequently changing content (think account info, location-specific products, changing inventory, new headlines). Traditional CDN customers suffer, as their traffic has to return all the way back to the origin, which results in slower response times, increased infrastructure expenses, and more associated costs for egress data for those numerous (unnecessary) responses. Instead, modern CDNs make it possible for your company to serve truly dynamic content that changes with every request from the edge, rather than from origin. This gives you the ability to run your code closer to the end user, eliminating costly and time consuming performance degradations.
Image Optimization
Fastly helps to dramatically optimize images - by storing copies of an image across distributed servers, the end user is served an image from the location closest to them. This reduces load time, and allows you to dynamically resize, compress or convert images according to the end-user’s device and screen size. By serving the most optimized version of an image, we not only give the end user the best possible experience, but also minimize the common ‘hit’ that image load times cause to a website. If you can optimize image handling and serving on your site or application to make every image smaller, with faster load times (and fewer calls to origin) it will translate into a huge benefit to your overall performance.
If you’re interested in learning more about how Fastly can help improve your LCP, get in touch .