Cómo usar archivos WebP en WordPress y disminuir los tiempos de carga de la página

archivos webp wordpress

La mayoría de nosotros sabemos que la optimización de la imagen es muy importante ya que juega un papel importante en los tiempos de carga totales de su sitio web de WordPress. Hoy queremos compartir con ustedes una alternativa fácil sobre cómo integrar los archivos WebP de Google en su sitio de WordPress. Algunos usuarios han visto reducciones de tamaño de archivo de imagen de más del 70%!

¿Qué es WebP??

Si no estás familiarizado con WebP, Es un formato de archivo de imagen creado por el equipo de rendimiento web en Google con la intención de crear imágenes más pequeñas y rápidas. Se anunció por primera vez en 2010 y presenta métodos de compresión con y sin pérdida. Las imágenes se entregan al navegador web desde un servidor web en función del tipo MIME que utiliza, que es imagen / webp.

Las imágenes sin pérdida de WebP son 26% más pequeño en tamaño en comparación con PNG y las imágenes con pérdida WebP son 25-34% más pequeño que JPEG.

Empresas como YouTube y eBay ya están utilizando WebP para alimentar silenciosamente muchos de sus sitios. A continuación se muestra un ejemplo de eBay, donde en su página de inicio promedian alrededor de 30 archivos WebP.

uso de webp ebay

¿Por qué es tan importante WebP? De acuerdo a httparchive, a partir de agosto de 2016, las imágenes representan más del 64% del peso promedio de una página web. Por lo general, es más que tu CSS, JS y HTML combinados. Por lo tanto, elegir un método de optimización de imagen robusto y un formato de imagen como WebP es crucial para que pueda disminuir el peso de su página tanto como sea posible. En general, cuanto más pequeña sea su página, más rápido se cargará. Y eso complacerá no solo a sus visitantes, sino también a Google, ya que la velocidad de la página es un factor de clasificación.

Soporte web

Ahora, aunque WebP es muy emocionante, también es importante mencionar la compatibilidad con el navegador. No todos los navegadores modernos admiten WebP en este momento. De acuerdo a Puedo usar, Actualmente, WebP es compatible con Chrome 23+, Opera 39+, todas las versiones de Opera mini, navegador Android 4.3+ y Chrome para Android.

soporte para navegador webp

¡Pero espera! No se decepcione demasiado, porque en el tutorial que le mostraremos a continuación, hay un método para entregar archivos WebP a navegadores compatibles y JPG / PNG como respaldo. Esto significa que los navegadores no compatibles no verán una imagen rota, solo verán lo que estaban viendo antes. Piense en WebP como una adición a su sitio de WordPress, en lugar de una migración.

De acuerdo a W3Schools, Chrome tiene el monopolio de la cuota de mercado del navegador en poco más del 70%. Pero no solo tome la participación en el mercado como una prueba sólida, mire los datos de sus propios visitantes y vea qué navegadores están utilizando, ya que pueden diferir según su nicho. Sin embargo, es posible que se sorprenda de lo sesgadas que son las estadísticas. En Google Analytics, en “Audiencia”, puede hacer clic en “Navegador y SO” y ver qué navegadores utilizan las personas cuando acceden a su sitio. Hicimos un sitio web aleatorio y, como puede ver a continuación, el 67% de los visitantes son de Chrome y otro 1% de Opera. Entonces El 68% de estas personas pueden ver y beneficiarse de la WebP formato de archivo de imagen!

navegadores webp de cromo

Cómo usar archivos WebP en WordPress

En el ejemplo de hoy vamos a utilizar una combinación de dos complementos diferentes de WordPress para poner en funcionamiento WebP en WordPress. Estos son creados y desarrollados por el equipo de KeyCDN, que es una red global de entrega de contenido (CDN).

  1. [prima] Optimus Image Optimizer: Complemento de compresión de imágenes sin pérdida para WordPress, convierte imágenes a WebP
  2. [gratis] WordPress Cache Enabler: Complemento de almacenamiento en caché que le permite servir a WebP a navegadores compatibles

Optimus Image Optimizer

Puede descargar Optimus Image Optimizer desde Repositorio de WordPress, desde optimus.io, o desde el panel de control de tu complemento. Nota: Requiere una licencia premium si desea convertir sus imágenes a WebP. Una vez instalado, puede habilitar la “Creación de archivos WebP” en la configuración del complemento.

creación de archivos webp

Después de habilitar WebP, esto esencialmente crea una imagen adicional para todo lo que se convierte. Entonces, si sube un archivo PNG o JPG, ahora también hay una versión .webp de su imagen. Recuerde, todavía se necesita PNG / JPG porque todavía se usan para servir a navegadores no compatibles. Optimus realiza una compresión sin pérdidas, por lo que sus PNG y JPG también están comprimidos.

archivos webp y png

También hay una opción de optimizador masivo en caso de que ya haya comprimido sus imágenes antes y todavía necesite convertirlas a WebP.

optimizador de imagen masiva

WordPress Cache Enabler

Entonces, ahora que tiene imágenes WebP, necesita una forma de decirle a WordPress que sirva las imágenes WebP a los navegadores compatibles y PNG / JPG a los otros navegadores. Esto se puede lograr con el complemento gratuito de WordPress Cache Enabler. Puede descargar el complemento desde Repositorio de WordPress o instálelo desde el tablero de su complemento. Una vez instalado, puede habilitar la opción “Crear una versión adicional en caché de WebP” en la configuración del complemento.

configuración del habilitador de caché

Una vez que habilita esa opción, se crea una versión WebP adicional en caché de su página.versiones webp

¡Y eso es todo! Ahora debería tener archivos WebP ejecutándose en su sitio web de WordPress.

Comparación de JPG a WebP

Hicimos una comparación de JPG a WebP para mostrar las diferencias que puedes lograr.

NOMBRE DEL ARCHIVO JPG ORIGINAL JPG COMPRIMIDO FORMATO WEBP DIFERENCIA DE TAMAÑO%
jpg-to-webp-1.jpg 758 KB 685 KB 109 KB 86%
jpg-to-webp-2.jpg 599 KB 529 KB 58.8 KB 90%
jpg-to-webp-3.jpg 960 KB 881 KB 200 KB 79%
jpg-to-webp-4.jpg 862 KB 791 KB 146 KB 83%
jpg-to-webp-5.jpg 960 KB 877 KB 71,7 KB 93%

WebP resultó en un 85.87% de disminución en el tamaño promedio de la imagen.

Comparación de PNG a WebP

Nuevamente, también realizamos una comparación de PNG a WebP para mostrar las diferencias que puedes lograr.

Nombre del archivo PNG original PNG comprimido Formato WebP Diferencia de tamaño%
png-a-webp-1.png 44 KB 34 KB 30 KB 32%
png-a-webp-2.png 46 KB 35 KB 33 KB 28%
png-a-webp-3.png 43 KB 31 KB 25 KB 42%
png-a-webp-4.png 30 KB 24 KB 18 KB 40%
png-a-webp-5.png 15 KB 11 KB 8 KB 47%
png-a-webp-6.png 34 KB 24 KB 18 KB 47%
png-a-webp-7.png 15 KB 13 KB 8 KB 47%
png-a-webp-8.png 63 KB 47 KB 44 KB 30%
png-a-webp-9.png 48 KB 36 KB 33 KB 31%
png-a-webp-10.png 17 KB 14 KB 11 KB 35%
png-a-webp-11.png 18 KB 13 KB 9 KB 50%
png-a-webp-12.png 61 KB 45 KB 39 KB 36%
png-a-webp-13.png 32 KB 25 KB 21 KB 35%
png-a-webp-14.png 26 KB 21 KB 17 KB 35%
png-a-webp-15.png 14 KB 12 KB 9 KB 36%
png-a-webp-16.png 36 KB 27 KB 24 KB 33%
png-a-webp-17.png 14 KB 12 KB 8 KB 43%
png-a-webp-18.png 21 KB 18 KB 13 KB 38%
png-a-webp-19.png 42 KB 30 KB 27 KB 36%
png-a-webp-20.png 23 KB 20 KB 18 KB 22%

WebP resultó en un 42.8% de disminución en el tamaño promedio de la imagen.

Resumen

Como puede ver, WebP es muy fácil de implementar en su sitio de WordPress y puede lograr tamaños de archivo de imagen drásticamente más pequeños. No hay compresión de imagen que pueda compararse con los ahorros de WebP. Ah, y ¿mencionamos que WebP tiene la capacidad de utilizar la compresión sin pérdida? Eso significa que no verá ninguna pérdida de calidad notable. Si está buscando una mejor manera de acelerar WordPress, WebP puede ser una excelente solución.