Reduce CLS with custom template
-
I’ve just noticed YAARP is the source of bad CLS on the video pages on my site – How do I improve this?
-
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?
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!
The topic ‘Reduce CLS with custom template’ is closed to new replies.