Learn with this tutorial how to improve the loading speed in previous versions of Genesis Sample (< 3.4.1) thanks to reducing the Cumulative Layout Shift (CLS) with code.
You may find this tutorial especially interesting if you have used a version of Genesis Sample previous to the 3.4.1 to customize it to your liking. I know that more than one OsomCode subscriber has done it, so if you are one of them, I invite you to read on. 😉
If you have version 3.4.1 or higher you don’t need to implement this tutorial, as the performance improvements are already built in.
In previous versions (< 3.4.1) Genesis Sample had an excellent desktop score but the mobile score was partly penalized by CSL.
After applying the improvements in this tutorial the CLS will be zero and will have a better Google Pagespeed score:
Note: Keep in mind that these scores are on an installation without any optimization (code minification, cache…), so they are a good starting point.
Let’s see how you can apply it to your own custom Genesis Sample.
Steps to improve loading speed in Genesis Sample (< 3.4.1)
1. Modify the functions.php file
Add the following code to the end of the functions.php file:
To see this and another 997 code snippets of this website, login or subscribe here.
With this snippet you change how CSS js and non-js classes are handled in addition to preconnecting Google fonts.
2. Modify the output.php
Add the following snippet on line 107 of the output.php file in /lib/:
To see this and another 997 code snippets of this website, login or subscribe here.
With this snippet you take advantage of the CSS aspect-ratio property to improve the CLS.
You already have the functional part solved, now let’s go for the design part. 😉
3. Modify the style.css file
Finally, you need to edit the CSS for all the improvements to be applied.
To do this, add the following snippet to the end of the style.css file:
To see this and another 997 code snippets of this website, login or subscribe here.
You got it.
Conclusions
If you have a custom theme that is based on Genesis Sample 3.4 or lower and you want to improve the loading speed you know how to do it with a little bit of code.
Would you prefer me to customize it for any of them in particular? Send me the proposal via the contact form and I’ll prepare a custom tutorial.
Advantages of being a subscriber. 😉
