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 ARCHIVOJPG ORIGINALJPG COMPRIMIDOFORMATO WEBPDIFERENCIA DE TAMAÑO%
jpg-to-webp-1.jpg758 KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58.8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71,7 KB93%

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 archivoPNG originalPNG comprimidoFormato WebPDiferencia de tamaño%
png-a-webp-1.png44 KB34 KB30 KB32%
png-a-webp-2.png46 KB35 KB33 KB28%
png-a-webp-3.png43 KB31 KB25 KB42%
png-a-webp-4.png30 KB24 KB18 KB40%
png-a-webp-5.png15 KB11 KB8 KB47%
png-a-webp-6.png34 KB24 KB18 KB47%
png-a-webp-7.png15 KB13 KB8 KB47%
png-a-webp-8.png63 KB47 KB44 KB30%
png-a-webp-9.png48 KB36 KB33 KB31%
png-a-webp-10.png17 KB14 KB11 KB35%
png-a-webp-11.png18 KB13 KB9 KB50%
png-a-webp-12.png61 KB45 KB39 KB36%
png-a-webp-13.png32 KB25 KB21 KB35%
png-a-webp-14.png26 KB21 KB17 KB35%
png-a-webp-15.png14 KB12 KB9 KB36%
png-a-webp-16.png36 KB27 KB24 KB33%
png-a-webp-17.png14 KB12 KB8 KB43%
png-a-webp-18.png21 KB18 KB13 KB38%
png-a-webp-19.png42 KB30 KB27 KB36%
png-a-webp-20.png23 KB20 KB18 KB22%

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.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map