CLS Issue Still Present

Hi there,

The first one is too broad.

<div id=page ...> is the container of ALL the contents of the page after header and before footer.

This could be anything. From unoptimized images (your images are too large. file sizes avg 250kb) to FOUT.

I'd start with the images first.

Then try toggling a few things.

1.) Try disabling the Optimized CSS Delivery (Critical CSS) option. It's one of the most common cause of CLS we see among users.

2.) Try disabling lazy load.

3.) Address "Reduce initial server response time" issue. Your server seems to be having this particular issue flagged. This affects how your site loads.

Hi Elvin,

Thank you for the suggestions. Per previous suggestions, I added the following code snippet for (FOUT):

add_filter( 'generate_google_font_display', function() {
return 'swap';
} );

Is this correct?

I'll try optimizing images next.

Regarding the following:

1.) I don't have the option to 'Disable Critical CSS' in WP Fastest Cache (See attached screenshot http://prntscr.com/1333fha) Anyway around this?

2.) I think I can resolve 'Lazy Load' by unchecking this option (See attached screenshot http://prntscr.com/1333gc5) Is this correct?

3. When you say 'server' are you referring to my hosting provider?

Thank you in advance

Thank you for the suggestions. Per previous suggestions, I added the following code snippet for (FOUT):

add_filter( ‘generate_google_font_display’, function() {
return ‘swap’;
} );

This could work. But mind the syntax. Curly/smart apostrophe ‘ and ’ won't work. Straight quotes ' are used on codes.

Aside from doing font-display: swap; preloading the font can also help.

Note: I see you're using elementor. Some of its font icons are being flagged as shown here - https://share.getcloudapp.com/2NuwnozG

You should ask elementor support for best practices on what to do w/ their fonts, performance-wise.

1.) I'm not exactly sure how that plugin works. It varies from plugin to plugin. It's best to ask the plugin developer about this.

2.) That's correct. But it would be better if we can selectively disable lazyloading to specific images only. We'd only want to disable lazyload on the images above the fold (the images immediately visible on the viewport when the site loads). Some plugins like WP Rocket allow that by adding image's CSS class selector. I'm not sure if there's lazyload exclusion on WP fastest cache.

3.) Yes that's correct. Good hosting shouldn't have initial response time of higher than 0.6s. All the other requests (like stylesheets) depend on it.
https://web.dev/time-to-first-byte/?utm_source=lighthouse&utm_medium=unknown