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

7 formas de optimizar imágenes en WordPress para mejorar la velocidad de carga de la página

5

Las imágenes son una parte inevitable de cualquier sitio web. Como dice la cita popular: "Una imagen vale más que mil palabras". Las imágenes son muy útiles para expresar el pensamiento, especialmente para tutoriales, fotografías y sitios de instrucciones. Con las redes sociales bulliciosas, es necesario que tengas una imagen destacada para cada publicación individual para compartirla de manera atractiva. Ahora la pregunta podría estar saliendo de su mente: estoy usando muchas imágenes en mi sitio de WordPress y ¿qué optimización debo hacer?

La respuesta simple es que cada imagen en su página afecta la velocidad de carga que a su vez impacta directamente en la experiencia del usuario. A nadie le gustan los sitios de carga lenta y, por lo tanto, debe tratar los problemas de optimización de imágenes con la máxima prioridad.

¿Cómo puedo saber los problemas de optimización de imágenes?

Es muy fácil y hay muchas herramientas gratuitas para verificar la velocidad de carga de la página. Google tiene una herramienta PageSpeed ​​Insights dedicada para medir los problemas en la página que afectan la velocidad de carga. Ingrese la URL de su página en la herramienta para ver los resultados a continuación:

7 formas de optimizar imágenes en WordPress para mejorar la velocidad de carga de la página

Optimizar imágenes en Google PageSpeed ​​Insights

Debería ver "Optimizar imágenes" como un tema de máxima prioridad cuando sus imágenes no están comprimidas. La compresión de imágenes es uno de los principales problemas que verá en la herramienta Google PageSpeed ​​Insights. Pero hay muchos otros problemas que puede encontrar al usar herramientas como pingdom y GTmetrix como se muestra a continuación.

  • Paralelizar las descargas a través de los nombres de host
  • Sirve contenido estático desde un dominio sin cookies
  • Especificar las dimensiones de la imagen
  • Sirve imágenes a escala

Todos estos problemas se pueden resolver fácilmente con complementos y siguiendo pautas simples.

¿Cómo optimizar las imágenes en WordPress para mejorar la velocidad de carga de la página?

Aquí está el resumen de las técnicas de optimización para mejorar la velocidad de carga de la página:

  1. Reducir el número de imágenes en el servidor
  2. Use el complemento para comprimir imágenes para ahorrar tamaño
  3. Sirve imágenes del subdominio
  4. Utilice el tamaño de imagen correcto
  5. Evite cambiar el tamaño dentro de HTML / CSS
  6. Utilice iconos vectoriales siempre que sea posible
  7. Seleccione el formato de imagen apropiado

1 Reducir el número de imágenes

Cada imagen en una página enviará una solicitud HTTP separada a su servidor y tardará un tiempo en descargarse. El proverbio “Una imagen vale más que mil palabras" puede verse bien, pero en realidad use imágenes solo cuando sea necesario. Menos imágenes significan menos solicitudes de servidor y una página de carga más rápida.

Por otro lado, las imágenes ocupan espacio en su servidor y aumentan el host de alojamiento. Especialmente WordPress genera una gran cantidad de miniaturas según el tema y los complementos instalados. Consulte el artículo sobre cómo reducir las miniaturas en el sitio de WordPress.

2 Comprimir imágenes para ahorrar tamaño

El navegador necesita descargar las imágenes de su servidor cuando se carga la página. La reducción de cada KB de tamaño dependerá del rendimiento; por lo tanto, asegúrese de servir las imágenes después de una compresión adecuada. Por ejemplo, las imágenes tienen metadatos como ubicación, detalles de la cámara, etc. A menos que lo necesite explícitamente, elimine esos datos usando complementos para reducir el tamaño de las imágenes.

Las imágenes se pueden comprimir de dos métodos: con pérdida y sin pérdida. En palabras simples, la compresión con pérdida es una forma irreversible y elimina algunos píxeles de datos de la imagen. Y la compresión sin pérdida es una forma reversible que comprime la imagen sin eliminar los píxeles. Según el formato de imagen (PNG / JPEG / GIF), la calidad y la compresión requerida, es posible que deba probar con diferentes complementos para ver qué funciona para usted.

Si tiene pocas páginas web o pocas imágenes para optimizar, le recomendamos que lo haga a través de herramientas de compresión de imágenes. A continuación, se muestran algunas de las herramientas de compresión de imágenes que puede utilizar:

  • gifsicle – para crear y optimizar imágenes GIF
  • optipng: use la compresión sin pérdida para reducir el tamaño de la imagen PNG
  • pngquant: use la compresión con pérdida para reducir el tamaño de la imagen PNG
  • jpegtran – comprime imágenes JPEG

WordPress tiene muchos complementos de compresión de imágenes gratuitos y premium. Dos de estos complementos populares son: EWWW Image Optimizer y WP-Smushit. EWWW Image Optimizer tiene muchas configuraciones y realiza la compresión en su propio servidor de alojamiento. Si bien WP-Smushit es simple y directo, comprime las imágenes en un servidor externo. Una vez instalados y activados, estos complementos ayudarán a comprimir automáticamente las imágenes cuando se carguen. Aquí está el tutorial completo sobre cómo usar el complemento WP-Smushit.

7 formas de optimizar imágenes en WordPress para mejorar la velocidad de carga de la página

Complemento de WordPress WP Smush

Recuerde que los complementos de compresión de imágenes consumirán una gran cantidad de recursos del servidor. No comprima cientos de imágenes a la vez, lo que provocará una violación de los términos de su empresa de alojamiento. Comprima menos imágenes con un intervalo suficiente para evitar una gran carga en el servidor.

3 Sirva imágenes del subdominio

Se recomienda alojar imágenes en subdominios separados. Esto ayudará a cargar las imágenes en paralelo al contenido del dominio principal. El contenido de su página se cargará más rápido ya que las imágenes se cargan desde un lugar diferente.

7 formas de optimizar imágenes en WordPress para mejorar la velocidad de carga de la página

Entrega de contenido de diferentes servidores

Consulte nuestro artículo sobre cómo mover la carpeta de imágenes de WordPress a un subdominio.

4 Utilice el tamaño de imagen correcto

Prepare imágenes exactamente con el tamaño que se mostrará en el sitio. Cuando necesite una imagen de 600 × 350, no prepare el tamaño de 1200 × 700. El navegador necesita mucho tiempo para descargar archivos de imagen más grandes debido al tamaño. El complemento WP-Smushit también tiene una opción para establecer el tamaño máximo de las imágenes cargadas. Esto ayudará a cambiar el tamaño de las imágenes cargadas al límite de tamaño máximo y reducirá el tamaño de la imagen.

5 Evite cambiar el tamaño dentro de HTML / CSS

La gente usa HTML y CSS para cambiar el tamaño de la imagen después de descargarla en el navegador. Esto solo agregará algo más de tiempo en la carga, ya que el navegador necesita tiempo adicional para renderizar la imagen al tamaño requerido.

Por ejemplo, no es una buena práctica cargar una imagen de 90 × 90 píxeles e intentar reducir el tamaño con el siguiente código HTML.

<img src="your image URL" height=45 width=45>

6 Utilice iconos vectoriales

Las imágenes normales (llamadas imágenes rasterizadas) vienen en un formato diferente y no se renderizarán correctamente al hacer zoom a dimensiones más grandes. La mejor manera es usar íconos de fuentes escalables SVG como íconos de fuentes impresionantes en lugar de imágenes. Por ejemplo, los íconos del menú de navegación deben usar íconos de fuentes SVG. El uso de imágenes para iconos tan pequeños no solo distorsionará el aspecto, sino que también aumentará el tiempo de carga de la página. A continuación se muestra un ejemplo de uso del icono de fuente:

Soy un ícono de fuente, úsame en lugar de una imagen.

Asegúrese de habilitar la compresión GZIP en la palanca del servidor para reducir el tamaño de archivo de las imágenes SVG y otro contenido.

7 Seleccione el formato de imagen apropiado

Hay tres formatos de imagen universalmente compatibles: GIF, PNG y JPEG. Cada uno tiene sus pros y sus contras.

  • Use GIF cuando necesite animación
  • PNG se puede utilizar para imágenes de alta resolución y alta calidad, como imágenes fotográficas. Pero las imágenes PNG serán de mayor tamaño.
  • JPEG es más adecuado para capturas de pantalla normales e imágenes web con menor tamaño de imagen y menor calidad (en comparación con PNG).

Elija el formato de imagen requerido y comprímalo con complementos antes de entregarlo a los usuarios.

Conclusión

Cuando esté iniciando un sitio web, le recomendamos que pruebe con múltiples combinaciones y verifique cuál le funciona. Si ya tiene un sitio en ejecución con una gran cantidad de imágenes, utilice complementos para comprimir todas las imágenes existentes. Utilice la herramienta Google PageSpeed ​​Insight para comprobar si se ha eliminado el problema de "Optimizar imágenes" y si se ha mejorado la puntuación de velocidad de su página. Si sigue todas las técnicas de optimización enumeradas anteriormente, ayudará a mejorar drásticamente la puntuación de carga de la página a la zona verde.

Fuente de grabación: www.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