• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Improve the loading speed of Genesis Sample

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.

pagespeed-Genesis-Sample-desktop
Computer Scoring
pagespeed-Genesis-Sample-mobile
Mobile Scoring
pagespeed-Genesis-Sample-CLS-without-improvements
CLS on mobile

After applying the improvements in this tutorial the CLS will be zero and will have a better Google Pagespeed score:

pagespeed-Genesis-Sample-CLS-improved
pagespeed-Genesis-Sample-mobile-improved-CLS
Mobile improving CLS

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 847 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 847 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 847 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. ๐Ÿ˜‰

CSS Genesis Framework Genesis Sample PHP

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice ยท Privacy Policy ยท Cookie Policy ยท Terms and conditions
Copyright © 2023

Lost your password?