Table of Contents
About LCP
Let’s begin with the fundamentals: What is LCP? How does LCP relate to Slider Revolution? And how does LCP effect page speed?
What is LCP?
LCP is a site performance metric that can be measured using either the Lighthouse tab in the Developer Tools of most Chromium based browser, or Google’s PageSpeed Insights tool.
In Google’s article, “What is LCP?“, it describes LCP as follows:
“LCP reports the render time of the largest image or text block visible in the viewport, relative to when the user first navigated to the page.”
In other words: LCP evaluates how long it takes to show the biggest chunk of initial page content.
LCP assesses the render time of the largest initially visible:
- Image
- Video
- Background image (as opposed to CSS background)
- Block level element containing text (such as paragraphs or divs)
LCP Score Colors
Google categorizes LCP scores into three categories, depending on the time taken to fully render the largest “contentful” block.
Up to 2.5 seconds is considered “good” and is colored green. Between 2.5 seconds and 4 seconds is described as “needs improvement” and is colored orange. And over 4 seconds is labeled “poor” and colored red.
How Does LCP Relate to Slider Revolution?
Because Slider Revolution modules [?]
A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.
A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.
A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.
Multiple modules can be combined to form rich content such as complete sites and landing pages. are frequently placed at the top of pages, they are often the largest initially visible piece of content for that page.
This in turn means their level of optimization can, to a degree, be measured by the LCP metric.
How Does LCP Effect Speed?
If an LCP score is particularly low, it might reflect the inclusion of excessively large images, videos or text elements within the viewport.
If this is the case, load speed might also be decreased.
However a low LCP score does not always reflect slow load speed. It can sometimes be caused by a harmless animation that has not actually slowed down rendering or visibility at all.
Such a case can be considered a false positive that does not correlate with poor performance.
We will discuss how to differentiate between these cases, and how to handle them, below.
LCP vs Load Speed
The main focus of optimization should always be your load speed. Your over-arching goal is to have your page load time under 3 seconds.
The best possible speed a site can typically hope to achieve is less than 1 second, but content must be extremely minimal for this to occur. Any speed between 1 and 3 seconds is a great result.
For example, we of course believe in our own software and use Slider Revolution on our own site. With its rich content and animations front and center, our site loads in around 1.3 to 1.5 seconds.
For comparison, Google’s article explaining LCP at web.dev also loads in around 1.3 seconds:
Interestingly, the article designated to explain LCP does not itself achieve a green LCP score:
We can probably interpret that as a strong indication LCP should be seen as a potentially helpful pointer which may aid in optimization, but that it is not necessarily a high priority in and of itself.
LCP Evaluation Tips: Run Multiple Tests
Performance tests can give significantly varying scores across multiple evaluations, shifting by 30 or more points each time.
Always run tests more than once, ideally 3 – 5 times (or more), to get a good read on your evaluation scores. Ideally, run tests via multiple tools if possible as well.
When Should I Worry About LCP?
In short:
- You should work to improve LCP score if it helps you find untapped methods to further optimize your site’s performance.
- If your site is already maximally optimized, you may be fine to consider LCP a low priority concern.
After running a performance test, check the resulting score, but then also check the Developer Tools, Network tab to see the load time.
It’s not uncommon to get imperfect Lighthouse scores even when load times are optimal, so the reason to check load speed is to help determine if a poor LCP is actually a sign of poor performance.
For example, Google’s YouTube Trending page is given a red LCP score with a time more than 6x the recommended target, which would seem to indicate poor performance:
However its load speed is only 1.5 seconds, indicating that in practice it performs well within targets:
First and foremost, if your load speed is fast (under 3 seconds), you have achieved your primary optimization goal. From there, perfecting LCP is certainly preferable, but is still a secondary goal.
If your LCP is lower than you would like, i.e. colored orange or red, the next step is to evaluate why, and whether or not it’s a problem.
Even if your load speed is under 3 seconds, a low LCP score might still be a sign there are steps you can take to make it even faster, such as performing image optimization for example.
However sometimes you will find your optimization is already on point, and achieving a perfect LCP score would require sacrificing or simplifying animations that haven’t actually harmed performance at all.
Conversely, rich animations can help you engage and communicate with site visitors, so you may decide keeping your animations unchanged is of more benefit to you than perfecting LCP score.
Optimizing LCP
Establish a Baseline
It’s important to first figure out what the base load speed is for your site with its current server configuration and general optimization. We need to establish this so we know what to compare module performance evaluations to.
Create a new WordPress page on your site and add nothing to it except around 5 paragraphs of dummy text. You can generate some copy & paste placeholder text at https://cupcakeipsum.com/
Then, set the page to use the Slider Revolution blank page template:
This will isolate the page from any performance issues that may be theme related.
Publish your page, view it in the browser, then run a performance test on it, and check the load speed. This will give you a baseline of site performance to compare to.
Note: At this point you can optionally toggle the blank template off and do another performance evaluation. If the performance metrics get worse you may have some theme based optimization opportunities. Toggle the blank template back on before proceeding.
Next, add the module you wish to optimize to the top of the page. Update the page, then run your performance evaluation and check load speed again.
If there is a considerable difference between the results with and without the module, there may be optimization opportunities within the module.
If not, the cause of any performance issues might not be the module, but rather some other element of site or server configuration.
Let’s step through some of the most common ways to optimize module content now.
Crop, Resize and Compress Images
One of the most commonly encountered ways to optimize modules for LCP score is to ensure every image used is fully optimized.
For example, these two screenshots are of the same module, the first with image optimization and the second without:
They look identical on face value, but their LCP scores and performance scores differ considerably.
When we look closer, we see that the main image is in the first case a 462kb WebP image, and in the second a 26.3kb JPG image.
The image in the first module takes 538ms to load, contributing to the total load time of 1.86s:
The image in the second module loads in 269ms, and the total load time is reduced to 1.46s:
This file size difference is the only change between modules, and hence drives the LCP score difference and corresponding load time difference.
This is a case where LCP evaluation has indeed helped point out an opportunity for optimization. Let’s now see what the steps are to achieve this same form of optimization.
Get Required Image Dimensions
The first step is to assess the size the dimensions the image should be, then crop and scale to those dimensions.
For example, this image is used inside a shape layer with a maximum size of 360px wide by 360px high:
Crop and Scale Down Image
NOTE: Cropping and scaling can be done with WordPress’ in built media editing tools, or with a free application such as Photopea or Krita.
The unoptimized version of the image was in portrait orientation, with a significant portion of the image hidden:
But because this image is displayed in a square aspect ratio, it can have the unused top area cropped out:
It can also be shrunk from its existing dimensions down to 360px square:
If the image is re-exported with its existing WebP format we can see the file size progressively reduces at each optimization step, from 450kb to 169kb:
This is less than half the original size, however it can still be further compressed.
Compress Image
Lighthouse and PageSpeed Insights will routinely suggest images be switched to WebP format, however every image is different and WebP is not always the most efficient format.
Rather than always exporting as WebP, test different formats and see which one gives best results.
With this image, exporting as a JPEG at 85% compression further reduces the file size down to 25kb:
That’s an end result 18 times smaller than the original.
Additionally, there is an in built File Size Optimizer tool directly within Slider Revolution that helps you to select the most optimal version of every image used in your module:
Shrink and Compress Video
In the same way images can have their dimensions shrunk and file size compressed, so too can videos be shrunk and compressed.
Try to reduce the dimensions of the video as much as possible while retaining sufficient visual quality, for example down-scaling from 4k to 1080p or 720p.
And as with images, try multiple file formats such as WebM or MP4 to see which produces the smallest file size.
Check for Left Over, Unused Layers
Sometimes when working from a template base for a module, unused layers [?]
Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.
Layers are added to slides via the module editor. might get overlooked and left in place.
Before publishing, check through the layers listed in the timeline section of the module editor [?]
The "Module Editor" is the tool used to create & modify modules.
Through this visual, drag & drop, no-code interface you can add various types of layers, animation and special FX to your modules, as well as managing slides and configuring options. and delete any that are no longer needed.
If Strongly Preferred, Shorten Animations
If you have checked your module’s images and videos and confirmed they are fully optimized, check to see what happens to your LCP score if you shorten the duration of any IN animations that run on first load:
In some cases, IN animations can trigger what appears to be a false positive, causing LCP to misinterpret the presence of animations as a rendering delay.
If this proves to be the only cause of an imperfect LCP score, you can safely conclude your site’s performance is not being adversely effected. From there, it’s up to you to determine what you wish to do with your animation duration settings, based on what you assess to be of greatest benefit to you.
We are in the process of actively appealing the misinterpretation of well crafted animation as a performance delay, and will update this article with news as we receive it.
