[Resolved] CLS and LCP issues

Home Forums Support [Resolved] CLS and LCP issues

Home Forums Support CLS and LCP issues

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1963083
    rockyourblog

    Hey there,

    I have a problem with a client site not being able to meet the requirements for the Core Web Vitals.

    • The LCP of the main page is sometimes >2.5 sec going yellow, otherwise just below that. But I don’t understand what could be the reason for this. The culprit here is probably the first image from the WP Show Post list that loads above the fold. However, these images are already heavily optimized and the first one is just ~36kb in size. Does this really have that much of an impact? Maybe because it’s lazy loaded?
    • Google recommends to properly size the logo. Strangely, this message is sometimes displayed and sometimes not. How do I get rid of that?
    • On every site, be it homepage, category page or blogpost there are CLS values higher than the ones required by Google. The biggest chunk of this is usually caused by the whole page container (div#page), but I don’t understand what exactly is causing the shift.

    Any help is appreciated.

    Cheers
    Philipp

    #1963158
    David
    Staff
    Customer Support

    Hi there,

    it took a few tests and the main CLS issue i see is related to the Top bar elemnent, on some initial loads on a small mobile the Newsletter / Social Icons are wrapping to two lines, which is forcing the entire page down.

    Try adding this CSS to give the Top Bar more space to stop it from happening:

    .top-bar .inside-top-bar {
         padding-left: 0;
         padding-right: 0;
    }

    LCP – yes, lazy loading could be the problem. You would need to ask PerfMatters if there is way of excluding the first image in the WPSP list… not sure if thats possible.

    I would also recommend NOT lazy loading the logo – the logo has this CSS Class: is-logo-image that you can use to exclude it from lazy loading.

    #1965037
    rockyourblog

    Hey David,

    thanks for your quick reply and help!

    I did all of your suggestions and the issues are gone.

    In case you are interested or if someone else should have a similar problem:

    I contacted Brett from Perfmatters and we figured out a solution to exclude the first WPSP image. WPSP fetches the post title and uses it as alt attribute for the corresponding images. The following snippet takes advantage of this.

    function perfmatters_lazyload_exclude_attributes($attributes) {
    	if(is_front_page()) {
    		$args = array(
    			'posts_per_page' => 1,
    			'tax_query' => array(
    				'taxonomy' => 'category',
    				'field'    => 'slug',
    				'terms'    => 'rezepte'
    			)
    		);
    		$posts = get_posts($args);
    		if(!empty($posts[0])) {
    			$attributes[] = get_the_title($posts[0]);
    		}
    	}
    	
        return $attributes;
    }
    add_filter('perfmatters_lazyload_excluded_attributes', 'perfmatters_lazyload_exclude_attributes');

    It gets the last published post and extracts the post title which is then used as an attribute for the lazy load exclusion. Since the string is present as an alt attribute in the image element, this works great even if a new post is published and the lists are updated.

    Cheers
    Philipp

    #1965185
    David
    Staff
    Customer Support

    Thats a handy filter there, and real cool approach!!

    Glad to hear you got that resolved.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.