Reduce CLS with custom template

Hi @coopero1 are you using JavaScript to render YARPP or one of our PHP templates? Non-JS templates should result in zero CLS as rendering is done server-side (i.e. client gets the complete page upfront and there is nothing to shift post-render). If you can point us to a sample page, we can take a look.

Thanks for your quick response.

That’s what I was thinking – there’s no JS in the template it’s just PHP.

Take a look here: https://www.epianos.co.uk/tv/yamaha-clp725-vs-clp735-piano-comparison-and-buying-advice/

Template is as follows:

<?php 
/*
YARPP Template: Simple
Author: Charlie Cooper
Description: Custom EPTV Template
*/

 if (have_posts()):?>
    
	 <h2 class="feattitle">Related Videos</h2>
	<?php while (have_posts()) : the_post(); ?>
	
<?php
$id = get_the_id();
$perm   = get_permalink($id);
$imgurl = get_the_post_thumbnail_url($id, 'full');
$title = get_the_title($id);

// if video link exists...
if (get_field('video_link',$id)){
    // grab it
    $x = get_field('video_link',$id);
    // remove everything before 'v=' so we just have the video ID
    $videoid = substr($x, strpos("$x", "v=") + 2);
    // Remove stuff after it
    $videoid = str_replace("&feature=emb_logo", '', $videoid);
    }

// if duration exists get it
if (get_field('duration',$id)){
    $duration = get_field('duration',$id);
    }

$starring = get_field('cast', $id);

if (stripos($starring, 'chris') !== false){
    $starringimg = 'https://www.epianos.co.uk/wp-content/uploads/2021/01/chris.png';
} else if (stripos($starring, 'david') !== false){
    $starringimg = 'https://www.epianos.co.uk/wp-content/uploads/2021/01/c09f3369-2aca-44df-bdce-e61e0565f2f5.png';
} else {
    $starringimg = 'https://www.epianos.co.uk/wp-content/uploads/2019/09/Favicon.png';
} ?>

<a class="posterlink" href="<?php echo $perm ?>/?referral=EPTVrelated">
    <div class="videoposter">
        <img class="posterimg" width="285" height="160" src="https://img.youtube.com/vi/<?php echo $videoid ?>/mqdefault.jpg">
        <span class="videoduration"><?php echo $duration ?></span>
    </div>
    <div class="video-info">
        <img class="video-starring" src="<?php echo $starringimg ?>">
        <div class="info-right">
            <span class="videotitle"><?php echo get_the_title() ?></span>
            <div class="video-creator" style="font-weight:500;">ePianos <i class="fas fa-check-circle"></i></div>
        </div>
    </div>
</a>

<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>

@coopero1 The report doesn’t appear to call out YARPP as a cause for CLS?

https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.epianos.co.uk%2Ftv%2Fyamaha-clp725-vs-clp735-piano-comparison-and-buying-advice%2F

One thing that you could try is to disable YARPP and see if it makes any difference to the CLS score. That would be a quick way to isolate and check.

Yes, this is what I did – sorry I should have been more clear. Try again now – the CLS issue seems to go when I remove YARPP.

I didn’t save the previous results… so can’t compare 1:1..

Couple of items that I noticed in the template code:

1. set height/width for all img tags; some are missing
2. it may be worth further optimizing some of the images – ex. chris.png They’re about 30kb – can you cut down the size?

CLS was 0.308 before and without it it’s 0.017

That’s a good shout – they’re rendering tiny so they may as well be. I’ll give that a go.

Thanks

@coopero1 How did it go? setting the height/width on the image tag will likely have a much bigger positive impact.

Hi @coopero1 We’re marking this support thread as “resolves” due to inactivity. Feel free to re-open it and let us know if you need further help!