seoexpert.ninja
  • Let's Get Down To Bizness
  • Mastering SEO - Blog
  • Writing Portfolio

Tech Journal & Solutions

How To Fix Mobile LCP Issue: Longer Than 4s (Fixes Desktop Too)

7/27/2020

 
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.
Picture
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
  • Longer page load times have a severe effect on bounce rates. For example:
    • If page load time increases from 1 second to 3 seconds, bounce rate increases 32%
    • If page load time increases from 1 second to 6 seconds, bounce rate increases by 106% 

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.

Async JavaScript Is Jetfuel

Picture
I've noticed even Autoptimize doesn't push the sore too high because it lacks more robust controls over JavaScript. When you have a JS heavy website, you will need to use either a CDN like Cloudflare, Ezoic Site Speed Accelerator +, or a handy additional plugin.

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.

Autoptimize's Async JavaScript: A free addon to the Autoptimize suite that adds more versatility and control to your JS. When you add this feature, you can mostly replicate the gains from Cloudflare & Ezoic.

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 ;)

Picture
Key Takeaways:
  • Use a CDN
  • Use Autoptimize + Defer JS
  • Remove excess plugins.
  • Comb through each post and remove extra videos & check the size of images.
  • Use a light theme, fewer videos & compressed images.

Picture

Mansa Brice - SEOExpert.Ninja

SEO 🚀, Hamon Master💪, Writer.


Comments are closed.

    Written By Mansa Brice

    Learn, Do, Hone.

    RSS Feed

Site powered by Weebly. Managed by SiteGround
  • Let's Get Down To Bizness
  • Mastering SEO - Blog
  • Writing Portfolio