TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo servir imágenes WebP en SiteGround?

18

SiteGround es una de las empresas de alojamiento recomendadas por WordPress.org oficial. En los últimos años, el alojamiento de SiteGround ha crecido a un nivel diferente. Han reemplazado la configuración tradicional de cPanel y han migrado todas las cuentas existentes a su configuración personalizada de Herramientas del sitio. Con esto, puede servir imágenes WebP en lugar de PNG o JPEG para aumentar la velocidad de carga de su sitio web. En este artículo, explicaremos cómo servir imágenes WebP en SiteGround y verificar en el navegador.

Relacionado: ¿Cómo usar WebP en WordPress para corregir el error de servir imágenes en formatos de próxima generación en la herramienta Google PageSpeed ​​Insights?



¿Por qué WebP Images?

Siempre que verifique la puntuación de velocidad de la página en la herramienta Google PageSpeed ​​Insights, le mostrará muchas oportunidades que pueden mejorar la velocidad del sitio. Una de las sugerencias importantes que no puede resolver fácilmente es "Sirva imágenes en formatos de próxima generación". Los formatos de próxima generación incluyen WebP, JPEG 2000 o JPEG XR para reemplazar los formatos de imagen tradicionales de PNG y JPEG.

¿Cómo servir imágenes WebP en SiteGround?

Sirva imágenes en formatos de próxima generación

Por lo tanto, servir la imagen de WebP le ayudará a resolver el problema de Google PageSpeed ​​Insights. Además, reduce el tamaño de la imagen a más de un 75% menos con la misma calidad mejorando así la velocidad de carga de la página.

¿Cómo funciona con SiteGround?

SiteGround ofrece el complemento SG Optimizer que le permite convertir todas sus imágenes al formato WebP. Lo bueno es que no necesita ninguna otra configuración.

  • Todas las imágenes de WebP se almacenan en el lado del servidor y no puede verlas en su biblioteca de medios o usando FTP.
  • Puede comprobar si las imágenes de WebP se están cargando cuando visualiza el sitio en el navegador.
  • Debe activar WebP para sitios individuales en su cuenta de alojamiento.

¿Cómo servir imágenes WebP en SiteGround?

Si no está utilizando SG Optimizer, primero debe instalar el complemento.

  • Inicie sesión en su sitio de WordPress y vaya a la sección "Complementos> Agregar nuevo".
  • Busque "SG Optimizer" para encontrar el complemento.
  • Instale y active el complemento en su sitio.

¿Cómo servir imágenes WebP en SiteGround?

Instalar el complemento SG Optimizer

Después de instalar SG Optimizer, vaya al menú "SG Optimizer" y luego a la sección "Optimización de medios". Aquí, tiene las opciones para habilitar imágenes WebP en su sitio.

Recuerde, si ya está utilizando algún complemento de almacenamiento en caché, no debe habilitar otras opciones en el complemento SG Optimizer. Asegúrese de no habilitar las mismas opciones en dos complementos y romper el sitio.

Habilitar WebP para nuevas imágenes

Primero habilite la opción “Generar copias WebP de nuevas imágenes". Elija el tipo de optimización para elegir la calidad de sus imágenes WebP. La opción sin pérdida le ayuda a conservar la calidad y la opción con pérdida reduce el tamaño a un tamaño mucho menor al reducir la calidad de la imagen.

¿Cómo servir imágenes WebP en SiteGround?

Genere imágenes WebP en SiteGround

Le recomendamos que seleccione sin pérdida para conservar la calidad con una reducción nominal de tamaño. Sin embargo, si tiene imágenes más grandes en su sitio y la reducción de calidad es aceptable para usted, elija la opción con pérdida. Para la opción con pérdida, puede seleccionar el porcentaje de calidad arrastrando el control deslizante.

¿Cómo servir imágenes WebP en SiteGround?

Generar WebP con pérdida en SiteGround

Cargue una nueva imagen y verifique la calidad de algunas imágenes en el navegador (consulte la sección a continuación para esto) antes de procesar de forma masiva todas las imágenes existentes.

Generación masiva de archivos WebP

Una vez que haya decidido y configurado la calidad, haga clic en el botón "Generar archivos WebP a granel". Esto regenerará la versión WebP para todas sus imágenes existentes. A diferencia de la opción normal de optimización de imágenes, la creación de imágenes WebP solo llevará menos tiempo dependiendo de la cantidad de imágenes en su sitio. En nuestro caso, tenemos imágenes de 14K que tardaron poco menos de un minuto.

Cambiando la Calidad

En cualquier momento, puede decidir cambiar la calidad de sin pérdidas a con pérdidas o viceversa. También puede cambiar la calidad de las imágenes WebP con pérdida en cualquier momento posterior. Siempre que cambie la calidad, haga clic en el enlace "regenerar" para regenerar imágenes con nueva calidad. Alternativamente, haga clic en el botón "Eliminar todos los archivos WebP" y luego haga clic en "Generar archivos WebP a granel" para regenerar imágenes con nueva calidad.

Prueba de imágenes de WebP en el navegador

Abra su sitio en Google Chrome y verifique el código fuente de Developer Console. Verá que se están cargando imágenes PNG o JPEG en lugar de imágenes WebP. Sin embargo, esta no es la forma correcta de comprobarlo.

¿Cómo servir imágenes WebP en SiteGround?

Fuente que muestra imagen PNG

Como no puede ver las imágenes de WebP en el servidor de alojamiento o en la biblioteca de medios, puede confundirse si funciona en su sitio o no. Siga las instrucciones a continuación para confirmar que su sitio funciona con imágenes WebP.

  • Abra Google Chrome y abra la sección Herramientas para desarrolladores de Chrome. Puede acceder a las herramientas de desarrollador presionando F12 en Windows y yendo a "Opción + Comando + I" en Mac.
  • Haga clic en la pestaña "Red" y abra la página web en la barra de direcciones. Si ya ha abierto la página, haga clic en el botón de actualización para volver a cargar la página.
  • Ahora, puede ver que las actividades de la red se están registrando y haga clic en la pestaña "Img".
  • Aquí puede ver el tipo de recurso cargado desde su sitio.
  • Puede ordenar la columna "Nombre" o "Tipo" para comprobar el tipo de imagen. Debería mostrarse como "WebP".
  • Esta es la forma de confirmar que las imágenes WebP se sirven desde su sitio web.

¿Cómo servir imágenes WebP en SiteGround?

Compruebe SiteGround WebP en el navegador

Método alternativo de prueba

La otra forma de probar es simple.

  • Abra su página web en Chrome y haga clic derecho en cualquiera de las imágenes.
  • Seleccione la opción "Guardar imagen como …".

¿Cómo servir imágenes WebP en SiteGround?

Guardar imagen como

  • Debería ver el formato de imagen como "Google WebP".

¿Cómo servir imágenes WebP en SiteGround?

Guardar imagen de WebP

Aunque la imagen original es PNG (o JPEG), debería ver el formato como "Google WebP", ya que este es el formato de imagen disponible en su sitio.

Imágenes WebP almacenadas en caché

Algunos complementos de almacenamiento en caché como WP Rocket le permiten almacenar en caché imágenes WebP. Si almacena imágenes de WebP en caché, puede encontrar las versiones .png.webp o .jpg.webp en su servidor de alojamiento en el directorio de cargas. Este no es el comportamiento predeterminado del servicio SiteGround WebP y cuando deshabilita el complemento de almacenamiento en caché, la generación de caché se detendrá y debe usar uno de los métodos anteriores para verificar.

¿Cómo servir imágenes WebP en SiteGround?

Almacenamiento en caché de WebP en WP Rocket

¿Cuánto tamaño puedo ahorrar?

Esto realmente depende de la calidad que elija para sus imágenes WebP. En nuestro caso, elegimos la opción sin pérdidas y tenemos el ahorro de más del 77% para una sola imagen.

  • Tamaño de imagen PNG original: 139 KB
  • Tamaño de imagen WebP: 31 KB

Prueba de nuevo con Google PageSpeed ​​Insights

Ahora, vuelva a la herramienta Google PageSpeed ​​Insights y pruebe una de sus páginas web. La sugerencia de servir imágenes en formato de próxima generación debería desaparecer ahora.

Puntos a tener cuidado

Asegúrese de tener en cuenta los siguientes puntos cuando utilice WebP en su sitio:

  • No todos los navegadores son compatibles con WebP, asegúrese de consultar su sitio en Google Chrome o en cualquier navegador compatible.
  • Los complementos de almacenamiento en caché como WP Rocket ofrecen almacenar en caché imágenes WebP para aumentar la velocidad de carga de la página. Sin embargo, estos complementos de almacenamiento en caché no detectarán imágenes WebP en el servidor SiteGround. Puede confirmar con el desarrollador del complemento antes de habilitar el almacenamiento en caché de imágenes WebP.
  • Los servicios CDN como Cloudflare funcionarán a la perfección con SiteGround. Sin embargo, si tiene una configuración de CNAME separada para servir archivos multimedia a través de CDN, confirme con su proveedor de CDN si pueden servir imágenes WebP.
  • La opción WebP no está disponible para los sitios que aún utilizan la configuración de cPanel. Tiene que esperar a que SiteGround migre su cuenta a Herramientas del sitio.
  • Debe usar el complemento SG Optimizer para habilitar WebP, sin el complemento no hay forma de que pueda habilitarlo desde su cuenta de alojamiento.
  • Asegúrese de regenerar las imágenes cada vez que cambie la calidad de las imágenes de WebP.

Ultimas palabras

La velocidad del sitio se está convirtiendo en un factor importante con Google anunció Core Web Vitals que influirá en el ranking en el futuro. Los sitios web de SiteGround ya están en la plataforma Google Cloud y con WebP estará muy por delante de su competencia alojada en otras empresas.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More