Largest Contentful Paint (LCP) isn’t just about making Google happy. LCP optimization is key to providing better user experiences, as visitors are more quickly presented with useful content. This can give you quite a competitive advantage over sites where content displays little by little, tempting the frustrated visitor to bounce.
Most of the changes that you would need to make to improve your LCP standing involve your WordPress site’s theme, the scripts you are loading and the order they are loaded. Running a test at a site like web.dev is the best way to get an idea of what those facets are, as the report it generates is incredibly detailed and full of great advice.
The overall response time of the application and the environment it is hosted in also plays an important role. Your time-to-first-byte (TTFB) should be 350ms or less, which is rather easy to accomplish if you are using full page caching and well-placed servers close to your user base.
However, you are bound to miss the cache every now and then as content gets updated and as cache elements expire. To that end, here are some tips that will help ensure that your dynamic traffic capacity is not being squandered on unnecessary calls.
Keeping your PHP workers unburdened will lead to improved initial server response times and that translates to a better LCP.
9-step checklist for LCP optimization
Use this checklist as a best practice guide for optimizing your application for LCP, ensuring that both search engines and human visitors get a better experience.
1. Disable Cart Fragments plugin
This one is a must-have if you are using WooCommerce! This handy plugin stops excessive POST method AJAX calls to refresh cart fragments when the cart is empty. It re-queues the script when shoppers add an item to the cart, allowing the continued use of page caching and reducing dynamic requests while still allowing you to update cart totals when the cart is not empty.
2. Caching, caching, caching
Page caching, whether that’s with CloudFlare’s page rules, NGINX, Varnish, or other methods are crucial to handling large influxes of traffic as well as maintaining consistent response times. Even a modestly powered 2 vCPU instance can handle 300 requests per second if the cache hit rate is high. With every decision you make about your site, you should stop and check if it will negatively affect caching in any way and to what degree.
3. Enable cache locking
If high traffic pages get lots of cache purges while under load, cache locking helps keep the PHP worker pool from being stampeded by letting only one dynamic request through and building a cache element to serve the other visitors, instead of sending them all for dynamic processing. Depending on the caching system you are using, this feature may or may not be available. Plugin-based caching solutions typically do not have this capability, whereas the NGINX webserver does.
4. Enable object caching
Simply enabling an object cache (we like Object Cache Pro) will reduce the load against the MySQL database and can be extended further by leveraging WordPress Transients. Think of those long-running remote API calls or custom DB queries that don’t use WordPress’ own functions like get_post or wp_query. Caching the results of those in memory really helps with performance by allowing responses to return more quickly as well as keeping server capacity under control
5. Start load testing
You need a way to measure the impact of your optimizations. Load testing is crucial to the overall process. My favorite load testing tool is K6, as it’s open source with a JavaScript interface for writing test scenarios. It can also log stats to many different formats including InfluxDB and is backed by Grafana Labs, who provide professional services to create and run the load tests if that’s something you don’t have in-house talent for.
As most of the changes being covered here relate to optimizing application performance and not directly LCP or frontend performance, the load test analysis can simply focus on yielding improved response times and reduced error rates from the application.
6. Run APM
New Relic or Data Dog APM are the two big ones that make it easy to point an X-ray at your WordPress app and see what goes on under the hood. This is excellent for spotting server-side application-level optimizations, as it can spot bottlenecks in the code that do a lot of number crunching, slow database queries, or calls to remote APIs that can slow you down.
Both services offer a free tier and/or a trial period. Even a few days of data can be useful in spotting bottlenecks in your code, so don’t hesitate to try it out if you can’t fit the long-term cost of it into your budget.
7. Measure your compute
Despite all the above, you still need sufficient computing capacity, especially if you are taking online orders or if your website is membership/login based. Being on a flexible host that can provide a high degree of computing capacity is very important to ensuring the requests that truly must be dynamic have enough raw power to keep up.
For example, Pagely is an AWS shop, able to go up to 192 vCPU in a single EC2 instance and up to 64 vCPU for the database instance. Higher capacity on EC2 is of course possible with horizontal scaling and active/active configurations. Other hosts may not be clear on how many CPU cores you have access to, but often do disclose the number of PHP workers. While the two are related, it can lead to less-than-ideal costing models if you are not billed based on compute and instead billed on the basis of PHP workers. (See PHP Workers and WordPress: The Definitive Guide.)
The goal is to never be short on available PHP workers. That’s easier said than done, and in reality, a certain amount of brief “backlogging” here and there is always going to be a factor in running a site under high traffic conditions. Keeping response times low and compute/PHP worker capacity in line with the volume of dynamic traffic with respect to your response times is the way to get there.
8. Develop your team
Above all else, having a strong operational team presence during high-traffic events is a good idea. If people are already watching the system and standing by for unexpected issues, they can react much more quickly, rather than being notified about it after the fact.
Set up reminders for the event, if it is planned, and make sure you’ve got all the relevant graphs and metrics dialed in for observability ahead of time and have a clear line of communication with the site owner.
9. Frontend optimization
Frontend optimization is important as well. While it rarely helps server-side performance, it does still help pages render faster in web browsers if you are following best practices.
Closing thoughts on LCP optimization
All of this may seem daunting. After all, you’re learning that not only do you need to optimize your frontend to satisfy the different facets of Core Web Vitals, but also keep the application running lean, the servers healthy, and invest a significant amount of time in building tests specific to your website to be able to measure the impact of your changes.
It’s exceptionally rare to be able to solve all of these problems single-handedly. It calls for a few different areas of expertise to cover all your bases. But the end-result is worth every ounce of effort if you want to comply with the standards of the modern web and deliver the best experience possible for your user base.