Thread by @BorjaAV

¿No eres capaz de alcanzar el 100/100 en el PageSpeed de Google con Elementor de ninguna forma?

En ese caso lo mejor será que leas este hilo sobre como Optimizar Elementor para conseguir una gran nota.

#Elementor #WPO #Pagespeed

DENTRO HILO 🧵

Lo primero de todo es elegir un buen hosting. 

Sin esto olvídate de tener una buena nota. 

Lo digo de verdad, sin un hosting bueno JAMÁS conseguirás una buena nota

Si puedes utiliza siempre un dedicado a un compartido
Si puedes utiliza siempre un servidor LiteSpeed a un Apache

Si quieres buscas un servidor compartido siempre recomiendo @SiteGround_ES > siteground.es/go/borja

Si por el contrario buscas un compartido LiteSpeed te servirá @RaiolaNetworks >  
gestiondecuenta.eu/aff.php?aff=33…

Servidor LiteSpeed dedicado @iukanet >
iukanet.com/es/

@SiteGround_ES @RaiolaNetworks @iukanet Activa los siguientes experimentos de Elementor (Elementor > Ajustes > Experimentos)

- Carga de recursos mejorada
- Carga de CSS mejorada
- Fuentes de iconos integradas
- Salida del DOM optimizada

Una vez activados comprueba que la página web no se haya roto.

@SiteGround_ES @RaiolaNetworks @iukanet Instala un plugin como Perfmatters para eliminar toda la "moralla" que carga cada URL de tu página web de forma innecesaria.

Si necesitas una guía sobre este plugin te dejo aquí la mía:

borjaarandavaquero.com/blog/wordpress…

@SiteGround_ES @RaiolaNetworks @iukanet Instala un plugin de caché como WP Rocket (De pago) o LiteSpeed Cache (Gratuito y especialmente desarrollado para servidores LiteSpeed pero puede darte fallos con Elementor y puede ser complejo de configurar).

Tienes alternativas gratis como Autoptimize pero yo no las recomiendo

@SiteGround_ES @RaiolaNetworks @iukanet Si utilizas finalmente WP Rocket (El más popular) optimiza todo el CSS y JS activando todas las opciones.

Activa el Lazyload de WP Rocket, desactiva el nativo de WordPress.

Excluye del Lazyload a las imágenes Above The Fold mediante CSS y el plugin Add class to Elementor Image

@SiteGround_ES @RaiolaNetworks @iukanet Además, añade altura (Height) y anchura (Width) a todas las imágenes que no tienen marcando la opción de WP Rocket "Add missing image dimensions"

Además, asegúrate que tus imágenes sean ligeras (menos de 100kb) y no excedan el tamaño de visualización que realmente se utilizan.

@SiteGround_ES @RaiolaNetworks @iukanet Para esto último podrás utilizar un plugin como "Dynamic Visibility for Elementor" para mostrar diferentes tamaños de la misma imagen en función de si el dispositivo es Móvil o Desktop.

Finalmente en cada URL de tu página web genera un CSS crítico para reducir el CLS.

@SiteGround_ES @RaiolaNetworks @iukanet Para ello bastará con ir a editar un post/page de tu WordPress y en las opciones de WP Rocket (Que se encuentran en el sidebar derecho editando) pulsa sobre "Generar CPCSS Específico".

Con ello los elementos se cargarán a la primera y no se tendrán que colocar.

@SiteGround_ES @RaiolaNetworks @iukanet Si aplicas correctamente estos consejos conseguirás notas como las que te muestro en este tweet.

De todos modos, si te has quedado con ganas de más te dejo un post sobre el tema que seguro que te ayudará aún más:

borjaarandavaquero.com/blog/wordpress…