CLS and LCP issues

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.

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

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

Glad to hear you got that resolved.