Topic: Page Speed Optimization LCP& FCP

cocosgalant
April 13, 2024 at 8:42 am

Hi there,
i am not able to fix the score for mobile, especially not the LCP and FCP.
I am working with Autoptimize and set the settings like mentioned in this article (https://docs.generatepress.com/article/configuring-autoptimize/ and was wondering if they’re still relevant. There are still some issues as well with the logos in the slider, even they’re all in .webp-format there are still issues with it.
Link for the website is https://staging.u59520p152324.web0156.zxcs-klant.nl/
Appreciate the help!
cocosgalant
April 13, 2024 at 8:43 am

Forgot to mention: i also installed already a persistent cache (Redis Cache), don’t know if that’s relevant.
David
April 15, 2024 at 1:40 am

Hi there,

using Googles Pagespeed insights to review the home page.

Largest Contentful Paint element
This is the hero background image, and looking at the details the report provides:

TTFB – 19%
Load Delay – 57%
Load Time – 7%
Render Delay – 17%

These stats give pointers to the related opportunities and where to focus.

Reduce initial server response time
Thos will impact the LCP times for TTFB and potentially the Load Delay and Load Time.
This time is related to how long it takes the server to process the request.
NOTE: it maybe the Host is throttling the staging sites performance, its quite common to see, so a big improvement may be seen when the site is pushed to production. You may want to confirm this with the host.

A general method of improving this metric is to add Page Caching to the site.

Eliminate render-blocking resources
speak to autoptimize about the best method to reduce render blocking using their plugin. As currently its there optimized files that are blocking the render.

Reduce unused CSS
I am not sure if autoptimize provides a critical CSS option ? Again check with the plugin support.

Note the last 2 items, other plugins like PerfMatters and WP Rocket provide options for unused CSS removal and deferring resources.

I would look at those options first as they should make site wide improvements, then if need be we can look at the actual image loading times.
cocosgalant
April 15, 2024 at 2:13 am

Hi David,

thank you, i will check all of this.
I installed already the Redis cache as persistent cache on the server and have also object caching in place with WP Fastest Cache.
Will get back here if I could make some progress.
David
April 15, 2024 at 2:50 am

Keep us posted 🙂
cocosgalant
April 17, 2024 at 9:37 am

Hi David,
here’s an update: i installed gzipping and gained some performance points.

LCP
For some reason thats the first container with the header-image alignfull which is causing the slow load (size: 244kb, 1600x1200px, format: .webp)
Lazyload with Autoptimize is active and it’s lazyloading all images on the site.

Reduce initial server response time
The host confirmed that they’re not throttling the sites performance.
Page caching is already in place.

Eliminate render-blocking resources
i found this: “The unused CSS is being reported as being Autoptimize’s, but AO merely aggregates and minifies all the CSS provided by your theme & plugins and does not know which CSS is used or not used and hance cannot remove anything.”
With the default Autoptimize configuration the CSS is linked in the head, which is a safe default but has Google PageSpeed Insights complaining. You can look into “inline all CSS” (easy) or “inline and defer CSS” (better) which are explained in this FAQ as well. – I tried to manage that but can’t find the link to my stylesheet in the view-source:https://staging.u59520p152324.web0156.zxcs-klant.nl/ (Video i found: Eliminate render-blocking CSS which i have to edit to just use the Critical CSS. In the head is a weird repetition to find (twitter-labels, even if we don’t have that and never added anything regarding Twitter) and also this content content="Elke klant is voor ons uniek en voor elke klant vinden wij een passende oplossing. Hier wordt maatwerk voor alle modellen geleverd."

Reduce unused CSS
They provide a Critical CSS-option but since i am so confused with the header in the code i am not able to determine it.

Best,
Lysann
David
April 18, 2024 at 3:41 am
The LCP element is the LARGEST element visible on load, which will be that hero
The issue with it rendering is the time taken to a) load the background image and b) render that image.
Loading the image takes time because first it is loaded via CSS, which means the browser has to first load the CSS, parse the CSS before it can make the request.
And Autoptimize having comnbined a lot of CSS, the browser now has to download a larger amount of CSS before it can parse it to make the image request.
In addition, the browser cannot render the page until all that CSS is loaded. So its a compounding issue.

Further to this you site is Preloading a Image that does not exist, and is returning a 404 error. Can you remove the preload ?

This is the file:
https://staging.u59520p152324.web0156.zxcs-klant.nl/wp-content/uploads/2024/03/vanderer-camperbouw-vlanderenv.webp

OK, so what to do. My view is there are 2 things to address:

1. improve how the LCP element image loads
2. improve how the site loads its resources

Lets deal with #1

i) Add this PHP Snippet to your site:
```
add_action( 'wp_head', function() {
    if( is_front_page() ) {
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        echo '<link rel="preload" media="(max-width: 768px)" as="image" href="'.$featured_img_url.'"/>';
        echo '<link rel="preload" media="(min-width: 769px)" as="image" href="'.$featured_img_url_full.'"/>';
        echo '<style>
        @media(max-width: 768px) {
            .page-hero:before { background-image: url('.$featured_img_url .') !important;}
        }
        @media(min-width: 769px) {
            .page-hero:before { background-image: url('.$featured_img_url_full .') !important;}
        }
        </style>';
    }		
},1000);
```
ii) edit your Hero container ( the one that has the background image attached ), and in Advanced > Additional CSS Classes add: page-hero

iii) set the pages Featured Image to the same image as the background image.

iv) In the editors disable element meta box , check to disable the Featured Image. This will stop the theme from outputting the image at the top of the page.

What this will do is, in the <head> of your site, it will preload the featured image that is appropriately sized for the device ( eg. mobile or desktop ) and inline the CSS to apply that image to your page-hero.

This way the browser has all it requires to render that hero from the very start.

2, improve how the site loads its resources
For this i would personally look at an alternative to Autoptimize.
Other plugins like those i mentioned above have more granular control on what gets loaded and where it gets laoded. For example your site is running woocommerce, and it will load ALL of its CSS and JS across the entire site whether is required or not. Those plugins allow you to change that.
Also your site loads the core block library styles, which is around 100kb ( uncompressed ) CSS that your site uses less then 2% of. Those plugins will be able to reduced that requirement with their Critical CSS tools.
cocosgalant
April 29, 2024 at 6:05 am

Hi David,

thanks a lot for your extended answer and the time for this topic. I went a bit deeper into the Autoptimize-research and twerked some settings. Eventually i could make it to a score of 88 which is okay for now because the website has to go online. Since the other two plugins are not free I decided not to go for the moment.

Best,
Lysann
David
April 29, 2024 at 6:21 am

Glad to be of help

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Page Speed Optimization LCP& FCP