homefinance blog
Si realiza una auditoría de su sitio de WordPress a través de PageSpeed Insights, Lighthouse puede recomendar que codifique sus imágenes de manera efectiva. PageSpeed Insights (PSI) es un instrumento que genera una relación de rendimiento para toda la página de WordPress. Si detecta que sus imágenes podrían estar mejor optimizadas, desencadena la advertencia de “codificación de imágenes efectiva”.
El problema “codifica efectivamente las imágenes” – Fuente: PageSpeed Insights En esta guía, explicamos lo que significa codificar las imágenes y cómo verificar la condición de sus imágenes. Esta es también una forma efectiva de mejorar su puntaje de rendimiento ligero. También compartimos 6 técnicas de optimización de imágenes y una forma rápida de remediar la advertencia de “imágenes efectivas”.
¡Vamos a bucear! ¿Qué significa la codificación de imágenes eficientes? La codificación efectiva de imágenes significa optimizar las imágenes para reducir el tamaño de su archivo sin afectar significativamente su calidad. ¿Cómo señala las imágenes de Lighthouse como optimización? ¿Qué desencadena este problema? Lighthouse escanea todas sus imágenes en la página que escuche, luego establezca el nivel de compresión en 85%. Si el ahorro potencial es de 4 kib o más, informará la imagen e informará como un error en el informe de rendimiento.
Imagen reportada por Lighthouse porque el ahorro potencial es superior 4B (24.6 KIB) imágenes sin comprimir a una calidad muy alta a menudo conducen a grandes dimensiones de archivos. Y cuanto más grandes sean las imágenes, más tiempo llevará tiempo descargarlas y jugarlas con sus visitantes. Cuando esto sucede para todas sus imágenes, es posible que el tiempo de carga total crezca y pueda llegar a un sitio web lento. Para evitar esta situación, compartimos 6 técnicas de optimización que le permiten transmitir correctamente sus imágenes web. 6 formas de codificar las imágenes de manera efectiva en WordPress: hay seis pasos que puede tomar para codificar de manera efectiva las imágenes y abordar esta recomendación de información de la página, que incluye:
Comprimiendo sus imágenes
Implementación de la carga perezosa
Conversión de imagen a WebP (formato de próxima generación)
Servir imágenes con las dimensiones correctas
Usando una imagen CDN
Reemplazo de gifs animados con videos
Vamos a superar cada paso. 1. Compresión de imagen El propósito de la compresión de la imagen es reducir el archivo de imagen sin comprometer demasiada calidad. Esto hace que PageSpeed Insights sea muy feliz, porque las imágenes se pueden almacenar y representar en la forma más efectiva, haciéndolas codificadas correctamente. La compresión de la imagen puede tener pérdidas, pero sin pérdidas si prefiere no alcanzar la calidad de la imagen.
Sin embargo, si usa la herramienta adecuada, no hay compresión de pérdida no es visible a simple vista. En nuestro ejemplo a continuación, uno es el archivo original, y el otro ha sido comprimido. ¿Puedes ver la diferencia? No puedo.
Recuerde, las imágenes de Suboptime afectan significativamente la velocidad de su página y ralentizan su sitio de WordPress. La forma más fácil de evitar cualquier problema de rendimiento es usar un complemento de WordPress. No te preocupes. Hice el trabajo duro para usted e hice una lista del mejor complemento de complemento de compresión de imágenes. Si prefiere el modo de compresión de imagen manual, también ofrecemos una nueva cobertura. Y si te sientes abrumado por Photoshop y Lightroom, hay muchas herramientas de optimización alternativas que puedes usar. La implementación de la carga perezosa de carga perezosa ayuda a codificar de manera efectiva las imágenes, ya que es una técnica de optimización que sigue la pantalla de imagen solo cuando sea necesario. Si el usuario los ve, las imágenes serán prestadas por el navegador. De lo contrario, la carga se pospondrá para priorizar el contenido más crítico. Google recomienda “posponer las imágenes fuera de la pantalla” en PageSpeed, lo que significa aplicar el siguiente script de carga perezosa: “Carga = Lazy” Recuerde, debe evitar configurar este script para cualquier imagen en la primera ventana de vista visible. En su lugar, aplique el retraso en el contenido a continuación:
Aplique la carga perezosa para el contenido a continuación si no desea implementar la carga perezosa manualmente, puede usar un complemento gratuito de WordPress, como la carga perezosa de WP Rocket, o puede ver los mejores complementos de carga perezosa para WordPress. 3. Conversión de imágenes en WebP (formato de próxima generación) desarrollado por Google, WebP es una formación de imágenes de nueva generación que ofrece mejores pérdidas y pérdidas para imágenes. Esto da como resultado una mejor codificación de imágenes en su sitio web de WordPress y la aprobación de la auditoría de PageSpeed. De hecho, según Google, “el tamaño promedio del archivo WebP es 25% -34% más pequeño en comparación con el tamaño del archivo JPEG”. Esta tabla muestra que WebP hace una mejor compresión que el formato JPEG:
WebP con un tamaño de archivo más pequeño – Fuente: Greenspector ¿Está convencido? Imagify Plugin puede convertir sus imágenes en WebP directamente desde el tablero de WordPress. Si desea obtener más información sobre este formato de nueva generación, le recomendamos leer el formato de WordPress. 4. Servir imágenes con las dimensiones correctas del faro facilita la búsqueda de imágenes con dimensiones incorrectas en su sitio web de WordPress. Simplemente escuche su página y, si encuentra la advertencia “Imágenes con el tamaño correcto”, debe cambiar el tamaño de ellos.
El panel DevTools Elements también se puede usar para verificar qué tamaño se muestra:
Identificar el tamaño de mi imagen en la pestaña “Elementos” – Fuente: Devtools Esta sección suena fácil, pero teniendo en cuenta la variedad de visualización disponible en 2022, las cosas pueden volverse rápidamente complejas. Una regla: idealmente, su página nunca debe transmitir imágenes más altas que la pantalla de usuario. La pantalla de escritorio promedio es 1920 x 1080 píxeles
La mayoría de los teléfonos móviles tienen un ancho de dispositivo de 400 PX
Para su sitio de WordPress, puede cargar imágenes a través de la biblioteca de medios, o directamente en su página de Google, recomendar que se usen las dimensiones de imagen óptimas (incluidas las de los puntos de interrupción receptivos). La clave es evitar usar imágenes de tamaño completo y cambiarlas correctamente:
Intente mantener el tamaño del archivo de imagen por debajo de 200 kb
Para la mayoría de las imágenes, un ancho máximo de 800 píxeles es suficiente
Mantener las imágenes entre estos números asegurará que se carguen rápidamente en los dispositivos del usuario. Puede ir más allá y puede optimizar las imágenes de acuerdo con cada dispositivo, como se muestra a continuación en el boceto:
Dimensiones de Apple – Fuente: Software de boceto
Tiene muchas opciones para dimensionar correctamente las imágenes y evitar ralentizar el sitio:
Hazlo manualmente con herramientas como Photoshop, Lightroom, GIMP, etc.
Use un complemento de optimización de imágenes como Imagify. Similar a la compresión, también puede usar a granel para cambiar el tamaño de todas las imágenes existentes en su sitio web:
RESISTENCIO CORRECTO DE MIS IMÁGENES – Fuente: Imagify 5. Uso de una imagen CDN para codificar las imágenes de manera efectiva en WordPress, debe optar por un proveedor de CDN. Entregará sus imágenes más rápido y lo ayudará a deshacerse de las imágenes de Google PageSpeed. Un CDN se especializa en la optimización y la entrega de imágenes donde sea que estén sus usuarios: +50 ubicaciones de borde para entregar imágenes más rápidas – Fuente: Rockeetcdn según WebDev “, cambiar a una imagen de CDN puede generar ahorros de 40-80% en el tamaño de el archivo de imagen ”, como se muestra a continuación:
Ahorros de bytes de imagen después de cambiar a una fuente de CDN: Google Chrome Developers 6. Reemplazar GIF animados con reemplazo de video con un video mejorará el rendimiento, porque un video .mp4 es mucho más fácil que un GIF, por lo que puede ver en mi ejemplo A continuación: – Tamaño del archivo GIF: 12 MB – MP4 Tamaño del archivo: 286 KB (ahorros totales: 98%)
El tamaño del archivo GIF vs MP4 también, PageSpeed recomienda transmitir el contenido animado a través del formato de video y no usar GIF.Al convertir el contenido en MP4, asegúrese de tener la configuración correcta para que se vea como un GIF: -En debe circular continuamente, debería jugar automáticamente, debe cerrar más formas de convertir GIF en el video, utilicé EZGIF para el por encima de la comparación.Ahora que he visto las 6 técnicas de optimización para codificar efectivamente las imágenes en WordPress, permítanme compartir mi caja de herramientas de rendimiento.Puede ser útil si necesita aumentar la velocidad de su sitio de WordPress y asegurarse de que las imágenes estén bien optimizadas para la web. PageSpeed Insights (incluso para codificar las imágenes de manera efectiva):
-Imagify, para comprimir mis imágenes y servirlas en webp (gratis para 20 MB de imágenes cada mes) -Lazy por WP Rocket (gratis) -Rocketcdn para entregar mis imágenes (solo $ 8.99/ luna para ancho de cinta ilimitado) -ezgif ( herramienta gratuita para convertir .gif a .mp4) -wp cohete, uno de los mejores complementos de rendimiento para aumentar la velocidad)
En la siguiente sección, nos centraremos en Imagify, nuestro potente complemento de compresión de imágenes que codifica automáticamente imágenes. Cómo remediar la codificación efectiva de las imágenes con Imagify Debido a Imagify, puede comprimir sus imágenes sin comprometer la calidad y arreglar la advertencia de “codificación de imágenes efectiva”. Es hora de ver Imagify en acción y comparar estadísticas de la energía de las páginas con y sin imagor.
Antes de imagificar: mi rendimiento tiene resultados en PageSpeed Insights Lighthouse no ofrece excelentes resultados y tengo algunos problemas de imagen, a saber:
Imágenes efectivas (que es nuestro tema hoy)
Servir imágenes en formatos de nueva generación
El tamaño correcto de las imágenes
Los problemas informados por Lighthouse (antes de la optimización de Imagify) ahora son el momento de descargar Imagify para comprimir y servir nuestras imágenes en la nueva generación, dimensionarlas adecuadamente y, por supuesto, codificarlas de manera efectiva. ¡Con Imagify – Resultados de rendimiento en PageSpeed Imagify PageSpeed Imagify ha remediado la advertencia “Imagen eficiente de código”! También optimizó todas las imágenes y colocó mis problemas anteriores en el área de auditoría pasada: las imágenes codificadas correctamente con Imagify (auditoría anterior) – Fuente: PSI Imagify redujo el tamaño de mi archivo en un 90% – ha pasado de casi 2 MB a 200 kb, como Mostrado en nuestro ejemplo a continuación: Imagify Optimización de mis imágenes y guardando casi el 90% del tamaño del archivo ¿Desea deshacerse de la advertencia de “imagen de manera efectiva”, como yo? Instale Imagify y aplique la siguiente configuración:
Configurar Imagify (es simple)
Seleccione el nivel de optimización que desea usar para comprimir las imágenes. Elegimos Ultra, el más alto nivel de optimización:
Elegir el nivel de ultra optimización – Fuente: Imagify
Convierta sus imágenes en WebP, el formato de nueva generación recomendado por PageSpeed Insights:
Conversion WebP con un solo clic – Fuente: Imagify
Optimice sus grandes imágenes a granel con Imagify. (¡Eso significa optimizar toda la biblioteca con un solo clic!)
Y aun así, la advertencia de PSI ha desaparecido.
¡Debe mencionarse que este proceso de optimización de imágenes fue completamente gratuito! La versión gratuita de Imagify le permite cambiar el tamaño y comprimir 20 MB de imágenes por mes. Si tiene la intención de agregar más imágenes, puede optar por el siguiente precio de prima:
$ 4.99 por mes por 500 GB (aproximadamente 5000 imágenes) y $ 9.99 por mes para uso ilimitado.
Si tiene más dudas, PageSpeed Insights recomienda y use un complemento de optimización de imágenes como Imagify:
El complemento Imagify recomendado por PSI como una solución para codificar de manera efectiva las imágenes sin Imagify, PageSpeed ha informado más problemas para mis imágenes:
Mi sitio sin fuente de imagen: PSI Cuando usa Imagify, todos mis problemas de imagen se han solucionado. Fueron optimizados en uno de los formatos de nueva generación (WebP) y mi advertencia “codifica efectivamente las imágenes” finalmente se ha convertido en verde.
Mi sitio ha pasado la auditoría con Imagify si eres como yo y quieres codificar de manera efectiva tus imágenes en WordPress en unos pocos clics, entonces ¿por qué no usar Imagify? Puede probar Imagify de forma gratuita, puede optimizar las imágenes y puede realizar su propia auditoría en PageSpeed Insights, como yo. Avíseme en los comentarios si ha aprobado la prueba debido a Imagify, ¡tengo curiosidad!
