Not a bug, blame your design team.
So you've decided to make some changes to your website to increase speed. By now you've shot in a few directions to trickle up that Google PageSpeed from the teen to the 50s but you're still falling short of a "good" score.
If you're reading this, you're stuck on LCP. It's not psychoactive, but it just may drive you psycho. As people tamper with a website's structure to improve page speed, many people get stuck with a low LCP score. It's probably the hardest score to adjust for a more extensive website. Let's dig into why LCP is challenging and how to improve on it.
What is the LCP/FCP?
The "First Contentful Paint," aka FCP, is a metric that estimates how much time it takes to load an initial page. This could mean that not all contents are loaded, but some aspects can be seen like main text content, advertisements, and small images.
This is all based on the first render, the metric that determines the complete load is the LCP.
If you're scoring low on FCP, it's because it has determined that, on average, your page takes longer than 3 seconds first to render. In that past, this was a primary ranking factor in speed; now it's secondary.
Quick Actionable Tip: Move heavy elements towards the bottom of your pages to increase the FCP score.
Google - Why page performance matters
Why is Google Search Console now using LCP as a reference instead of the FCP?
Google has noticed that albeit users can visit pages and read some content at first render, it does not provide the best user experience consistently. To avoid partially loaded pages from interrupting the user, Google decided to prioritize pages that score high on LCP instead.
What is LCP? The suspense is killing me (and my metrics)!
Essentially, LCP is the end of the road of content rendering. 'Largest Contentful Paint' is a speed metric that observes the amount of time to render the largest element.
Essentially, if you have a massive infographic or embedded video on a post, you're going to be penalized by Google for a low LCP. Does that mean you should toss all media from your posts? No way!
If you approach your website with speed in mind from the initial build, you should manage this metric with ease. If you're inheriting large content and bulky images, you will have to take a different approach to reduce this metric.
So the goal is to remove the Google Search Console LCP error: longer than 4s.
It would be best if you start by reducing image sizes. You don't need a 4k 50MB photo on your homepage. Most users are mobile users for many sites; they can't even see you're pixel-perfect image on their smartphone.
How can you solve the LCP issue longer than 4 s?
Compressing images, videos, and audio content is probably the easiest actionable step for improving PageSpeed metrics.
As I mentioned in my PageSpeed Guide, I use Autoptimize to compressive my images, JS code & HTML code. The plugin is very straightforward and will inform you if you're making risky changes that may affect your site's UI.
What are the key differences between the three options?
Cloudflare: it offers a robust set of firewalls and CDN optimization free options for users and plenty of paid extras. It also allows you to defer JS to increase page speed.
Ezoic's Site Speed Accelerator +: If you're qualified for Ezoics advertising platform, you can use this feature for free. If you aren't an advertiser, the service will cost 30 USD a month. They claim to guarantee a PageSpeed score of 80+, that's a bold and busted claim. It is nevertheless an excellent service.
Taking this approach can save you hundreds of dollars. Most developers who focus on speed improvements will charge between 60-150 USD an hour to make these changes. Give your budget a break and spend that money on our outreach instead ;)
Written By Mansa Brice
Learn, Do, Hone.