Cree hermosas páginas de WordPress optimizadas para imágenes con Elementor e ImageEngine – Usabilidad web y seo

Cree hermosas páginas de WordPress optimizadas para imágenes con Elementor e ImageEngine

Vistas: 149
0 0
Tiempo de lectura:9 Minutos, 10 Segundos

WordPress impulsa casi el 40% de todos los sitios web gracias a su compromiso de hacer posible la publicación para todos de forma gratuita. Combinado con complementos y temas premium, esta es posiblemente la mejor herramienta para crear sitios web atractivos, únicos y ricos en funciones sin ningún tipo de codificación o diseño.

Sin embargo, paga un precio por esta experiencia, ya que WordPress y sus productos de terceros no siempre están diseñados para mejorar el rendimiento, ya sea el tiempo de carga de la página o el SEO.

La optimización de imágenes es un problema particularmente grave. Las imágenes son uno de los mayores contribuyentes al peso de la página, si no el más grande, y aumenta significativamente cada año. Entonces, si bien las imágenes son fundamentales para decorar las páginas de su sitio web, también son uno de los principales factores que lo ralentizan.

En términos de optimización de imágenes, WordPress + Elementor hace muy poco. El núcleo de WordPress ahora tiene una sintaxis receptiva y una carga diferida. El propio Elementor también viene con una sintaxis flexible lista para usar. Sin embargo, estas son técnicas básicas de optimización de imágenes que proporcionarán la menor mejora.

Esto significa que, si bien Elementor facilita la creación de páginas de WordPress llamativas (con toneladas de imágenes utilizadas de forma creativa), es probable que pague el precio cuando se trata de rendimiento. Pero no se preocupe. Le mostraremos cómo mejorar drásticamente el rendimiento de su web al obtener más de 30 en herramientas de evaluación como Google PageSpeed ​​Insight.

¿Por qué optimizar las imágenes de Elementor con ImageEngine?

En general, las CDN de imágenes utilizan una variedad de técnicas para lograr la carga útil de imagen más pequeña posible y entregar contenido de imagen más rápido mientras se minimiza el impacto visual. ImageEngine no es diferente en este sentido.

Primero, ImageEngine, cuando se usa en modo desatendido, aplicará todas las siguientes optimizaciones que recomiendan las herramientas de rendimiento web como Google PageSpeed ​​Insight. Por ejemplo:

  • El tamaño correcto para las imágenes es ImageEngine cambia automáticamente el tamaño de las imágenes para lograr la relación tamaño / calidad óptima según el tamaño de la pantalla del dispositivo del usuario. ImageEngine es compatible con dispositivos Retina.
  • Codificación de imágenes eficiente – Aplica diferentes tasas de compresión según el PPI de los dispositivos del usuario. Por ejemplo, ImageEngine se adapta y comprime de forma más agresiva en dispositivos con PPI más altos sin perder calidad visual.
  • Conversión de formato de próxima generación – Convierte automáticamente las imágenes al formato óptimo de próxima generación según el navegador, el dispositivo o el sistema operativo. ImageEngine puede convertir imágenes a WebP o JPEG-2000 y GIF a MP4 o WebP. AVIF también está disponible en modo de directiva manual.
  • Eliminar metadatos innecesarios

Si bien estas características son estándar en la mayoría de las imágenes CDN, ImageEngine es único en el sentido de que utiliza el descubrimiento de dispositivos WURFL. Esto le da a ImageEngine una comprensión mucho más profunda del dispositivo del usuario que accede a una página web y, por lo tanto, a sus imágenes. Al usar el tamaño de la pantalla, la resolución, PPI y más, ImageEngine puede tomar decisiones más inteligentes sobre cómo reducir la carga útil de la imagen mientras se mantiene la calidad visual.

Esta es la razón por la que ImageEngine se comercializa a sí misma como una imagen CDN “centrada en dispositivos inteligentes” y por qué puede reducir la carga útil de la imagen en un 80% (si no más).

ImageEngine también ofrece su propio servicio CDN para acelerar la entrega de imágenes. CDN consta de 20 puntos de presencia ubicados globalmente con lógica integrada orientada a dispositivos. Esto le permite entregar contenido de imágenes a diferentes regiones más rápido, así como también entregar imágenes directamente desde la caché con una tasa de aciertos de ~ 98%.

ImageEngine también admite la personalización de datos guardados de Chrome. Si alguien tiene una conexión lenta o esta opción está habilitada, ImageEngine comprime automáticamente la carga útil de la imagen aún más para brindar una mejor experiencia de usuario en conexiones más lentas.

Cómo usar ImageEngine con WordPress y Elementor

Si está utilizando WordPress y Elementor, lo más probable es que desee dedicar el menor tiempo posible al desarrollo y otros problemas técnicos. Afortunadamente, ImageEngine es una herramienta altamente optimizada que requiere poco o ningún esfuerzo para integrarse o mantenerse con un sitio de WordPress.

Suponiendo que ya tiene un sitio web de WordPress con Elementor, aquí están las instrucciones paso a paso para usar ImageEngine:

  1. Vaya a ImageEngine.io y regístrese para una prueba gratuita de 30 días.
  2. Proporcione a ImageEngine la URL del sitio web que desea optimizar.
  3. Cree una cuenta (o regístrese con una cuenta existente de Google, GitHub o ScientiaMobile).
  4. Proporcione a ImageEngine el origen actual desde el que se sirven sus imágenes. Si carga imágenes en su sitio web de WordPress como de costumbre, significa que está volviendo a ingresar la URL de su sitio web de WordPress.
  5. Finalmente, ImageEngine generará una dirección de envío de ImageEngine para usted desde donde se servirán sus imágenes optimizadas. Esto generalmente toma la forma: {randomstring}.cdn.imgeng.in. Puede cambiar su dirección de envío a algo más significativo desde el panel como myimages.cdn.imgeng.in.

Ahora, para configurar ImageEngine en su sitio web de WordPress:

  1. Vaya a su panel de WordPress y vaya a Complementos -> Agregar nuevo.
  2. Busque el complemento Image CDN de ImageEngine. Cuando lo encuentre, instale y active el complemento.
  1. Vaya a Configuración -> Imagen CDN. Ok, este es el panel de control del complemento ImageEngine. Para configurarlo, todo lo que necesita hacer es:

pero. Copie la dirección de envío que recibió de ImageEngine arriba y péguela en el campo Dirección de envío.

B. Marque la casilla junto a Habilitar ImageEngine.

Eso es literalmente todo. Todas las imágenes que usa en sus páginas de WordPress / Elementor ahora deben servirse a través del CDN de ImageEngine ya optimizado.

ImageEngine es prácticamente una herramienta de “configurar y olvidar”. Proporcionará los mejores resultados automáticamente sin la intervención del usuario. Sin embargo, puede anular algunas configuraciones de ImageEngine desde el panel de control o usar directivas URL para manipular imágenes.

Por ejemplo, puede cambiar el tamaño de una imagen a 300px de ancho y convertirla a WebP cambiando el atributo src de esta manera:

<img src="https://myimages.cdn.imgeng.in/wp-content/uploads/2021/03/banner-logo.png?imgeng=/w_300/f_webp">

Sin embargo, use esto solo cuando sea necesario, ya que limitará la adaptabilidad de ImageEngine en diferentes entornos.

¿Qué mejoras puede esperar?

Veamos qué resultados puede esperar del uso de una imagen CDN para acelerar los tiempos de carga de la página.

Para esto, creé dos páginas idénticas de WordPress usando el tema Elementor. Una página se basó completamente en WordPress y Elementor, mientras que instalé y configuré ImageEngine para la otra. Había varias galerías en la página, así como imágenes a tamaño completo:

Las páginas usaban una gran cantidad de imágenes de alta calidad que cabría esperar en galerías de fotografía profesional, blogs de fotografía, sitios web de fotografías, grandes sitios de comercio electrónico y más. Luego realicé pruebas de rendimiento de la página con la herramienta integrada de Chrome. Auditoría Lighthouse. eligiendo puntuaciones que representen los resultados promedio que obtengo en cada página.

Para ser exhaustivo, probé el rendimiento tanto en dispositivos móviles como en computadoras de escritorio. Sin embargo, me concentré en los resultados móviles, ya que muestran imágenes CDN más receptivas. El tráfico móvil también constituye la mayor parte del tráfico de Internet y parece que será el foco de los motores de búsqueda en el futuro.

Entonces, en primer lugar, echemos un vistazo a la clasificación de la página móvil sin ImageEngine:

Como puede ver, entregar una gran cantidad de contenido gráfico fue definitivamente difícil. Google mostró que el 53% de los usuarios de dispositivos móviles abandonan una página que tarda más de 3 segundos en cargarse. Entonces, obviamente, esta página tiene algunos problemas serios en lo que respecta a la experiencia del usuario y la retención de tráfico.

La versión de escritorio resultó ser mucho mejor, aunque dejaba mucho que desear:

Al estudiar las razones de la desaceleración, se pueden distinguir los siguientes problemas:

La mayoría de los problemas están relacionados de alguna manera con el tamaño y el peso de las imágenes. Como puede ver, Lighthouse identificó una carga útil de 3.8 MB, mientras que la carga útil total de la imagen de la página fue cercana a los 40 MB.

Ahora veamos qué mejoras puede aportar ImageEngine a estos problemas mirando primero las clasificaciones móviles:

Entonces, como puede ver, hay una mejora significativa de 30 puntos con respecto a la página estándar de WordPress / Elementor. Los tiempos de carga de imágenes se han reducido en aproximadamente un 80% en parámetros de red clave como FCP, LCP e índice de velocidad general.

De hecho, acabamos de alcanzar el hito crítico de 3 segundos para FCP (el elemento más grande visible en la página en la carga inicial), lo que da la impresión de que la página ha terminado de cargarse y le ayudará a ahorrar mucho tráfico móvil. …

La puntuación para los equipos de escritorio también fue mucho más alta y se observaron mejoras adicionales en las métricas clave de rendimiento.

Si observamos los problemas de rendimiento que aún existen, podemos ver que las imágenes se eliminan casi por completo. También pudimos reducir la carga útil inicial de 3.8 MB a 1.46 MB, que es ~ 62%:

Un efecto secundario desafortunado del uso de WordPress y los complementos de WordPress es que casi inevitablemente enfrentará una degradación del rendimiento debido a todo el JavaScript y CSS adicionales. Esta es una de las razones por las que no hemos visto aún más mejoras. Este es el precio que paga por la usabilidad de estas herramientas.

Al mismo tiempo, cuantas más imágenes tenga en las páginas y mayor sea su tamaño, más significativa será la mejora.

También vale la pena señalar que las imágenes de carga diferida se cargan notablemente más rápido con ImageEngine si se desplaza rápidamente hacia abajo en la página, lo que nuevamente mejora la experiencia del usuario.

Como puede ver en esta comparación, no hubo pérdida visible en la calidad de la imagen gracias a la compresión de imagen inteligente:

Conclusión

Entonces, como puede ver, podemos lograr mejoras de rendimiento significativas en sitios web con muchas imágenes utilizando la CDN de imágenes de ImageEngine, a pesar de los problemas de rendimiento inherentes al CMS. Esto conducirá a usuarios más felices, mejores clasificaciones en los motores de búsqueda y un sitio web más exitoso en general.

La mejor parte es que ImageEngine se mantiene fiel a los principios básicos de WordPress. No necesita preocuparse por las tuercas y los tornillos del interior. Además, ImageEngine ajustará automáticamente las estrategias de automatización según sea necesario, protegiéndolo de tener que reescribir imágenes para optimizarlas de vez en cuando.

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Estudios de caso de construcción de enlaces inspiradores con estrategias viables para 2021
Next post Carretes de Instagram: 7 consejos para los especialistas en marketing

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta