• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mejorar la velocidad de carga de Genesis Sample

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.

  • pagespeed-Genesis-Sample-ordenador
    Puntuación en ordenador
  • pagespeed-Genesis-Sample-movil
    Puntuación en móvil
CLS en móvil

Después de aplicar las mejoras de este tutorial el CLS será cero y tendrá mejor puntuación en Google Pagespeed:

Móvil mejorando CLS

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 1643 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 1643 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 1643 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. 😉

CSS Genesis Framework Genesis Sample PHP

Nahuai Badiola

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2022 · Código Genesis

¿Has olvidado tu contraseña?