Aprende con este tutorial cómo mejorar la velocidad de carga en versiones previas de Genesis Sample (< 3.4.1) gracias a reducir el Cumulative Layout Shift (CLS) con código.
Este tutorial te puede resultar especialmente interesante si has utilizado una versión inferior de Genesis Sample a la 3.4.1 para personalizarlo a tu gusto. Me consta que más de un suscriptor de Código Genesis lo ha hecho, así que si eres uno de ellos, te invito a seguir leyendo. 😉
Si tienes la versión 3.4.1 o superior no necesitas poner en práctica este tutorial, ya que las mejoras de rendimiento ya están incorporadas.
En las versiones anteriores (< 3.4.1) Genesis Sample tenía una excelente puntuación en ordenador pero la puntuación en móvil se veía en parte penalizada por el CSL.
Puntuación en ordenador Puntuación en móvil
![](https://codigogenesis.com/genesis/2021/07/pagespeed-Genesis-Sample-CLS-sin-mejoras.jpg)
Después de aplicar las mejoras de este tutorial el CLS será cero y tendrá mejor puntuación en Google Pagespeed:
![](https://codigogenesis.com/genesis/2021/07/pagespeed-Genesis-Sample-CLS-mejorado.jpg)
![](https://codigogenesis.com/genesis/2021/07/pagespeed-Genesis-Sample-movil-mejorando-CLS.jpg)
Nota: Ten en cuenta que estas puntuaciones son en una instalación sin ningún tipo de optimización (minificación de código, caché…), así que son un buen punto de partida.
Vamos a ver cómo puedes aplicarlo a tu propio Genesis Sample personalizado.
Pasos para mejorar la velocidad de carga en Genesis Sample (< 3.4.1)
1. Modifica el fichero functions.php
Añade el siguiente código al final del fichero functions.php:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
Con este fragmento cambias cómo se gestionan las clases de CSS js
y no-js
además de preconectar las fuentes de Google.
2. Modifica el fichero output.php
Añade el siguiente fragmento en la línea 107 del fichero output.php en /lib/:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
Con este fragmento aprovechas la propiedad CSS aspect-ratio
para mejorar el CLS.
Ya tienes la parte funcional resuelta, ahora vamos a por la parte de diseño. 😉
3. Modifica el fichero style.css
Por último, necesitas editar el CSS para que se apliquen todas las mejoras.
Para ello, añade el siguiente snippet al final del fichero style.css:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
Ya lo tienes.
Conclusiones
Si tienes un tema personalizado que esté basado en Genesis Sample 3.4 o inferior y quieres mejorar la velocidad de carga ya sabes cómo hacerlo con un poco de código.
¿Prefieres que lo adapte a alguno de ellos en particular? Envíame la propuesta a través del formulario de contacto y prepararé un tutorial a medida.
Ventajas de ser suscriptor. 😉