Avisos
Vaciar todo

Conveniencia de cargar las Google Fonts en local para mejorar CLS  

 
Gabriel
 Gabriel
Reputable Member

Buenas tardes,

Recibida comunicación de Google Search Console en la que me informa que las páginas con experiencia de usuario no cumplen con los mínimos de Core Web Vitals. He estado revisando el CLS mediante el inspector de Chrome y veo que la mayor parte del problema del CLS es por el efecto FOUT.

Tengo activa la CDN de Cloudflare, Varnish y uso WP Rocket teniendo configurada la precarga de las DNS para //fonts.gstatic.com pero cuando en el inspector simulo condiciones de 3G se observa claramente el efecto FOUT y por tanto me penaliza en mucho el CSS.

Me estoy planteando la posibilidadd de descargar las Fonts de Google y subirlas a mi sitio. He encontrado este artículo al respecto:  https://soporteforo.webempresa.eu/guia/como-cambiar-tipografia-en-wordpress/ pero no tengo claro si con ello mejoraré los tiempos de carga y conseguiré mejorar el CLS porque supongo que la CDN de Google debe estar muy optimizada. 

Por favor, ¿me podeís dar vuestra opicinión?

Muchas gracias,

Contenido solo visible a usuarios registrados

Citar
Respondido : 31/10/2022 5:10 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Gabriel,

Veo en tu pagespeed que las fuentes no ocupan mucho problema, mas que nada el problema está en las imágenes de gran tamaño, igualmente puedes hacer la prueba realizando lo que se indica en esa guía para aplicar tus fuentes directamente en el sitio y así no tener una carga externa adicional.

Si vez que no esta resultando o te da otros errores vuelves al sistema que tenías.

Un saludo 🖐️ 

ResponderCitar
Respondido : 31/10/2022 6:06 pm

Cursos Gratuitos WordPress

Gabriel
 Gabriel
Reputable Member

@argenis Gracias Argenis,

Estoy probando también con las imágenes. He incluido el logo entre las excepciones del Wp Rocket->Medios->LazyLoad y he subido algunos puntos en PageSpeed. Es verdad que, especialmente en los post, el problema principal es la imagen principal pero no sé si hay alguna forma a nivel de página de desactivar lazyload solamente para la imagen principal de la primera pintada porque supongo que incluir cada una de las imágenes, tal y como he hecho con el Logo, en las excepcions es WP Rocket no es lo adecuado.

Por favopr, ¿me puedes dar tu valoración?

Gracias,

ResponderCitar
Respondido : 31/10/2022 6:21 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Gabriel,

El problema de las imágenes no veo que sea por la carga retrasada de lazyload, indica que son muy grandes las imágenes, igualmente cada página es un tipo de ajuste que se debe hacer dependiendo de la cantidad de complementos y en general ninguna página es igual a otra, desde foro te podemos ayudar dando indicaciones un poco generalizadas de que puedes hacer para mejorar la puntuación y la velocidad (aunque en velocidad no veo problemas), con respecto a lo que nos comentas de lazyload debes consultarlo con wp rocket, al ser un complemento de pago no podemos más que compartirte guías de su funcionamiento y no ofrecen una opción en las guías para estandarizar que no comprima la imagen destacada.

Algo que puedes intentar hacer es tanto las imágenes como las tipografías, un ejemplo es esta:

image

Tienes algún programa de compresión de imágenes como por ejemplo imgoptimizer?, verifica todo y luego nos comentas.

Un saludo 🖐️ 

ResponderCitar
Respondido : 31/10/2022 6:46 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación