¡Saludos, estimado lector! Una vez más estoy aquí para compartir contigo una guía fácil de seguir que te permitirá mejorar tu puntuación en PageSpeed utilizando Elementor, el constructor visual líder para WordPress que personalmente empleo tanto en mis propios proyectos web como en los de mis clientes como diseñador web especializado en WordPress. A pesar de ser el constructor más robusto del mercado, Elementor puede tener el inconveniente de hacer que las páginas sean algo más lentas y pesadas.
Considerando que Google pone cada vez más énfasis en la velocidad de carga web (WPO) para el ranking SEO de los sitios, es vital, si usas Elementor, aprender a optimizarlo al máximo para no solo brindar una experiencia de usuario óptima sino también para sobresalir en Google y sus resultados de búsqueda.
Así que sin más preámbulos, vamos a profundizar en cómo puedes lograr una excelente calificación en el PageSpeed de Google utilizando Elementor.
¡Manos a la obra!
Cómo optimizar Elementor desde el punto de vista del WPO en 25 pasos
Para una optimización efectiva al 100% de tu Elementor, sigue estos pasos:
Opción de Optimización de Iconos en Elementor
Por regla general, utilizar iconos puede ralentizar tu sitio web a menos que optes por optimizarlos. Elementor ha creado una solución que transforma los iconos de FontAwsome poco eficientes en SVG, lo que reduce significativamente su tamaño.
Activar esta característica es sencillo a través de la opción de experimentos de Elementor (Elementor > Ajustes > Experimentos) seleccionando «Fuentes de iconos internas».
Integración de Iconos Personalizados en Elementor
Una alternativa que no compromete tu sitio web es subir tus iconos personalizados en formato .svg directamente a tu sitio.
Esto es posible mediante el uso de widgets de Elementor que soporten iconos y seleccionando «Subir SVG» en lugar de «Biblioteca de iconos».
Eliminación de Dashicons
Similar a los iconos FontAwesome, los Dashicons pueden hacer que tu sitio web sea más lento debido a que se cargan en casi todo el sitio. Puedes eliminarlos fácilmente utilizando el plugin Perfmatters y su función «Disable Dashicons».
Selección Adecuada de Tamaño de Imagen
Elementor no permite elegir el tamaño de imagen basado en el dispositivo, lo cual puede resultar en imágenes demasiado grandes para dispositivos móviles. Usa el plugin Dynamic Visibility for Elementor para mostrar imágenes adaptadas al dispositivo.
Escoger un Hosting de Calidad
Una obviedad repetida, pero esencial: un buen hosting es crucial. Un hosting de calidad supera a uno mediocre en velocidad de carga, siendo preferible un servidor dedicado o VPS sobre uno compartido, y un servidor LiteSpeed sobre Nginx o Apache.
Gestión de Caché en Elementor
Para la mejor entrega de archivos en Elementor, un plugin de caché especializado es recomendable. WP Rocket es mi recomendación, aunque si buscas una alternativa gratuita, Autoptimize es una opción viable.
Minificación y Optimización de HTML, CSS y JS
Plugins como WP Rocket pueden ayudarte a eliminar el «ruido» en el código de tu sitio web y a optimizar la entrega de CSS y JS, aspectos cruciales para la velocidad de carga.
Desactivación de LazyLoad de WordPress en favor del de WP Rocket
Desactívalo siguiendo este tutorial y luego habilita Lazy Load en WP Rocket para mejorar la carga de imágenes y videos, excluyendo aquellas imprescindibles desde el punto de vista visual inmediato.
Generación de CSS Crítico por URL
Crear un CSS crítico específico para el contenido visible sin desplazamiento (Above The Fold) puede mejorar significativamente la métrica CLS, importante para las Core Web Vitals de Google.
Actualización de la Versión de PHP para Elementor
Una versión antigua de PHP puede ralentizar Elementor significativamente. Asegúrate de actualizar a la versión más reciente recomendada por tu servicio de hosting.
… Y así sucesivamente, siguiendo con el resto de los puntos hasta la conclusión.
Conclusiones
Como hemos visto, optimizar tu sitio web con Elementor puede parecer complejo, pero es definitivamente alcanzable. A pesar de la mala fama que pueda tener Elementor respecto a la velocidad de carga, sus desarrolladores están haciendo progresos significativos en este área, en parte debido al énfasis creciente que Google pone en la velocidad web.
Me gustaría conocer tu opinión: ¿Logrará Elementor posicionarse como una herramienta rápida para los diseñadores web? ¿Gutenberg le superará en esta carrera? Espero tus comentarios y, como siempre, nos vemos en dos semanas.
