[Support request] How To Improve FCP & LCP Score

[Franklin]

Hi,

SC is showing errors in Core Web Vitals for most of my articles with an LCP score of more than 2.5 seconds on this site: https://spydrill.com/kidsguard-pro-vs-mspy/

while longer than 4 seconds on this one : https://wearholic.com/best-wearable-sleep-tracker-monitor/

Please let me know how to get it in the ‘Good’ section for both of these sites.

[David]

Hi there,

first address the FCP times, as any improvements made to FCP will flow down to LCP.
If you Page Speed Insight test both links you will see they both have a Diagnostic > Reduce the impact of third-party code

Expanding that diagnostic; you will see all the 3rd party code requests your site is making, and is the major bottleneck for your sites performance.

The Flying Scripts plugin ( or other Optimization plugins ) provide the option to Defer scripts. And i recommend you do this for all 3rd party scripts. This means they will load AFTER your site has finished the initial load.

On your second link you are also using a Lazy Loader, and that is being applied to the featured image. And you don’t want that. Most lazy loader plugins provide an option to Exclude Images from Lazy Loading with a specific CSS class.

First step is to add this PHP Snippet to your sites:

// Add first-featured-image ( or any class ) to featured image of latest post
function skip_lazy_class_first_featured_image($attr) {
  global $wp_query;
  if ( 0 == $wp_query->current_post ) {
      $attr['class'] .= ' first-featured-image';  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

Then in the lazyloader plugin exclude field you can add: first-featured-image

[Franklin]

Hi David,

Thank you for the detailed answer.

I installed the Flying Scripts plugin and made the settings as shown in the screenshot. Are the settings correct? Will it hamper my AdSense revenue as ads are loaded after a while?

https://prnt.sc/1jhbem8

Site in which I implemented this for now:

https://wearholic.com/best-wearable-sleep-tracker-monitor/

As for the featured image, I removed it completely from the page.

Still, the FCP and LCP are high in page speed insights.

Thanks!

[David]

Well at least its now 2.7s as opposed to 4s 🙂
Regarding AdSense revenues…. not sure what the impact will be.
Consider without deferring the Adverts the user ‘may’ ( on a poor network / slow device ) be waiting 4 seconds for the page to load – which may increase bounce rate.
Deferring the ads got it very close to that golden 2.5second load time, which should eliminate impatient user bounce rates. But the ads may take a little longer to appear.
Its which one you think is more detrimental….

One small opportunity:
You can change the Customizer > General > Icon Type to SVG. Won’t make much difference but will remove one of the opportunities on googles PSI report. Make sure to clear caches after changing that.

Then weirdly under Render Blocking resources i see:
DashIcons, Block Editor Styles and Component Styles. They shouldn’t be loading on the front end, they’re all backend styles. Thats not normal. Not sure why they would be there without their being a plugin or custom function requesting them…

Then all that leaves is the Improve Initital Server Response time… thats a hosting question.

[Franklin]

Hi David,

I have observed that the Bounce rate in Google Analytics has increased ever since I installed the Flying Scripts plugin.

The ratio of the number of users and number of pageviews is still the same.

Please check the screenshots from GA.

Before FS plugin: https://prnt.sc/1qa5p0u

After FS plugin: https://prnt.sc/1qa5o6z

FS Settings: https://prnt.sc/1jhbem8

What could be the issue and how to resolve it?

Thanks!

[Franklin]

and because of the same average session duration has also taken a hit. But surely the traffic behaviour is the same. It’s only that GA is not able to pick it up correctly.

[David]

Maybe don’t defer the analytics.js or gtag ?

[Franklin]

Hi David,

how to fix this:

Then weirdly under Render Blocking resources i see:
DashIcons, Block Editor Styles and Component Styles. They shouldn’t be loading on the front end, they’re all backend styles. Thats not normal. Not sure why they would be there without their being a plugin or custom function requesting them…

??

[Tom]

You’ll want to disable your plugins and/or custom functions one by one until those files are no longer enqueued. Something is adding them, so you need to find the culprit and stop using it/report the issue to them.

[Author]

Posts