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
Después de aplicar las mejoras de este tutorial el CLS será cero y tendrá mejor puntuación en Google Pagespeed:
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 1453 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 1453 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 1453 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. 😉
