speed up image loading wordpress

7 consejos probados para acelerar la carga de imágenes para un sitio de WordPress más rápido

¿Sabías que las imágenes tienen el 63% del tamaño de una página web promedio? Esto significa que si desea que su sitio web sea más rápido, una de las mejores cosas que puede hacer es que las imágenes se carguen más rápido.

Los sitios web más rápidos tienen:

Pero, ¿cómo acelera la carga de imágenes y disfruta de los beneficios de un sitio web de WordPress más rápido? Bien, sigues el consejo que estoy a punto de darte. Vamos a cavar.

Antes de comenzar: obtenga un punto de referencia para comparar

No se preocupe, le mostraré cómo acelerar su sitio y sus imágenes. Pero quiero demostrarte que esto realmente funciona. Así que te voy a pedir que me hagas un favor antes de empezar:

Determine el tiempo de carga de su sitio ahora. Además de servir como prueba de que sé de lo que estoy hablando, te da un punto de referencia para comparar. De esta manera, no tiene que adivinar si un cambio realmente aceleró su sitio. Tendrás los datos para estar seguro.

Pero, ¿cómo prueba el tiempo de carga de su sitio? Ok, vas a necesitar un cronómetro y un dedo rápido …Espera no. No parece una buena idea. ¿Qué tal una forma automática de hacerlo?

Prueba esto en su lugar: dirígete a las herramientas de Pingdom, ingrese la URL de su sitio y haga clic en el botón Iniciar la prueba botón:

Luego, Pingdom le dirá exactamente cuánto tiempo tardó en cargarse su sitio:

Sea cual sea el número que obtenga, este es el número que debe esperar superar después de terminar de leer este artículo.

El sitio de mi cartera (el ejemplo) ya está bastante bien optimizado; espero que veas tiempos de carga de página similares una vez que implementes estos consejos …

1. Cambie el tamaño de las imágenes antes de usarlas

Independientemente del tema de WordPress que utilice, su tema solo podrá mostrar imágenes hasta un cierto ancho máximo. Esto significa que si subes imágenes cuyas dimensiones superan este ancho máximo, ralentizarás tu sitio de dos formas:

  • Aumenta el tamaño de archivo de sus imágenes.
  • Utiliza el navegador web de su visitante para cambiar el tamaño de la imagen.

¡Esto tampoco es algo bueno si está buscando acelerar la carga de imágenes! Entonces, para solucionar el problema, asegúrese de cambiar siempre el tamaño de sus imágenes antes de cargarlas.

¿Qué dimensiones debería utilizar? Bueno, las dimensiones exactas dependen de su tema de WordPress, por lo que no puedo dar una respuesta general. Pero como regla general, en algún lugar del rango de 700 a 800 píxeles funciona para la mayoría de los temas de WordPress.

Cómo cambiar el tamaño de las imágenes de WordPress

Hay dos formas sencillas de cambiar el tamaño de las imágenes de WordPress.

En primer lugar, puede instalar un complemento como Imsanidad que cambiará automáticamente el tamaño de las imágenes que cargue en su sitio de WordPress.

En segundo lugar, si prefiere una solución sin complementos, puede usar Cambio de tamaño de imagen por lotes simplificado para cambiar fácilmente el tamaño de las imágenes a granel. Solo asegúrate de elegir Altura automática para que la herramienta no recorte sus imágenes durante el proceso de cambio de tamaño:

acelerar la carga de imágenes cambiando las dimensiones de la imagen

Si está trabajando en un sitio existente, también debe volver atrás y cambiar el tamaño de tantas imágenes antiguas como sea posible. El complemento Imsanity puede ayudarlo a cambiar el tamaño de las imágenes existentes de WordPress.

2. Comprime imágenes para ahorrar aún más tamaño

Ok, cambiar el tamaño de las imágenes es la mitad de la batalla. Pero puede ir aún más lejos para reducir el tamaño de archivo de sus imágenes con algo llamado compresión. La compresión reduce los tamaños de dos formas posibles:

  • Sin perdida Compresión. Reduce el tamaño del archivo sin pérdida de calidad.
  • Compresión con pérdida. Ofrece mayores ahorros en tamaño, pero a expensas de algo de calidad.

Normalmente recomiendo la compresión sin pérdida para fotografías u otras imágenes en las que la calidad es el rendimiento más alto. Pero para algo como capturas de pantalla de tutoriales (como las imágenes de este artículo), recomendaría usar compresión con pérdida para ahorrar el mayor tamaño.

Cómo comprimir imágenes de WordPress

Al igual que con el cambio de tamaño de las imágenes, puede tomar un complemento para ayudarlo o usar una herramienta independiente.

En cuanto a los complementos, Smush compresión y optimización de imágenes es una gran opción porque en su última versión puede comprimir y cambiar el tamaño de sus imágenes.

Si desea un sitio independiente, Kraken es otra opción sólida que le permite comprimir imágenes a través de métodos sin pérdida y con pérdida:

cómo acelerar la carga de imágenes con competencia

Sé que esto es doloroso, pero al igual que con el cambio de tamaño de las imágenes, debería volver atrás y comprimir tantas imágenes antiguas como sea posible. Si usa el complemento Smush, puede comprimir automáticamente imágenes antiguas y nuevas.

3. Use una CDN para entregar sus imágenes y otro contenido

Un CDN, abreviatura de red de entrega de contenido, acelera la carga de su sitio y la imagen de esta manera:

Normalmente, cuando alguien visita su sitio web, tiene que descargar todos los archivos de su centro de datos de alojamiento. Si su centro de datos está en Dallas, TX y alguien es de California, está bien. ¡Siempre están bastante cerca el uno del otro!

Pero, ¿y si alguien es de Londres, Reino Unido? Ahora no es tan bueno. Mira, tan rápido como es Internet, las velocidades de datos todavía están limitadas por la física. En otras palabras, la distancia física importa, aunque solo sea por una fracción de segundo.

Las CDN resuelven este problema almacenando los archivos de su sitio web en varios centros de datos de todo el mundo. Luego, cada vez que alguien visita su sitio, puede descargar sus archivos desde el centro de datos global más cercano.

Es una herramienta bastante impresionante para acelerar su sitio. ¿Pero cuánto va a costar?

¡No te preocupes! De hecho, puede encontrar CDN gratuitos de calidad. Dos de estas opciones son:

    • Acelerador de sitios Jetpack – el módulo Photon del complemento Jetpack actúa como un CDN para sus imágenes. Si solo desea acelerar la carga de la imagen, esta es una buena opción.

Acelerador de sitios Jetpack

  • Cloudflare – una opción popular que es fácil de configurar y proporciona todos sus archivos estáticos, incluidas imágenes y HTML.

4. Habilite el almacenamiento en caché del navegador para su sitio.

Si ha utilizado la herramienta Google PageSpeed ​​Insights anteriormente, la frase “Aprovechando el almacenamiento en caché del navegador” probablemente esté persiguiendo sus sueños. Es decir, es una sugerencia común para acelerar su sitio.

El almacenamiento en caché del navegador básicamente le dice al navegador de su visitante que almacene ciertos archivos en la PC local de su visitante, en lugar de descargar los archivos cada vez. Entonces, por ejemplo, su visitante tendrá que cargar la imagen de su logotipo en su primera visita. Pero en cada visita posterior, su visitante cargaría este archivo desde su caché local.

Esto significa tiempos de carga más rápidos porque su visitante no tiene que obtener todo directamente de su servidor.

La forma más sencilla de configurar el almacenamiento en caché del navegador es simplemente agregar el siguiente código a su archivo .htaccess:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Puede encontrar su archivo .htaccess utilizando un programa FTP para conectarse al directorio raíz de su servidor. O, si no sabe dónde encontrar este archivo, ¡el soporte de su proveedor de alojamiento web puede ayudarlo!

5.Asegúrate de que también estás usando un complemento para el almacenamiento en caché de páginas.

El almacenamiento en caché del navegador no es la única forma de acelerar su sitio de WordPress. También existe algo llamado almacenamiento en caché de páginas, que facilita la entrega de contenido desde su sitio. Lo mejor de todo es que el almacenamiento en caché de las páginas acelerará la carga de imágenes y el resto de su sitio.

Para implementar el almacenamiento en caché de la página, recomiendo un complemento llamado Activador de caché porque es ligero y fácil de instalar. Instalarlo y activarlo. Entonces dirígete a Configuración → Activador de caché y configúrelo así:

Lo mejor de todo es que Cache Enabler también reducirá su código, que es otra técnica para reducir los tiempos de carga de la página.

6. Desactive el enlace directo para sus imágenes.

El enlace directo se produce cuando otros sitios web publican imágenes alojadas en su servidor. Básicamente, su servidor web usa recursos para mejorar el sitio de otra persona. ¡No es bueno!

Es por eso que debería considerar deshabilitar el enlace directo. De esta forma, su servidor puede centrarse exclusivamente en su propio sitio web.

Para deshabilitar el hotlinking, puede usar el Plug-in All In One WP Security & Firewall o agregue el siguiente código a su archivo .htaccess (el mismo archivo donde agregó el almacenamiento en caché del navegador):

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

Solo asegúrate de reemplazar tudominio.com con su nombre de dominio real!

7. Todo lo demás falla: elija un host más rápido

Todo lo que he enumerado anteriormente hará que su sitio y sus imágenes se carguen más rápido. Pero hay algo que todos estos consejos no pueden superar:

Alojamiento lento.

Si tiene un servidor web con tiempos de respuesta lentos, todos estos consejos son solo ayudantes. En otras palabras, la velocidad de su sitio siempre se verá perjudicada por el rendimiento de su anfitrión.

Entonces, si ha implementado todo lo anterior y aún está decepcionado con los tiempos de carga de su página, podría ser el momento de morder la bala y actualizar a un proveedor de alojamiento premium.

O si está buscando opciones más económicas pero efectivas, soy un gran fan de SiteGround. SiteGround es lo que uso para mi sitio de portafolio personal que se carga menos de 700 ms.

Envolver las cosas

Me tomaré un breve descanso mientras vuelves a Pingdom y vuelves a probar tu sitio.

¿Son las cosas más rápidas? ¡Ellos deberían ser!

Y con eso, ha preparado su sitio web para el éxito tanto ahora como en el futuro. Porque a medida que Internet móvil sigue creciendo, los tiempos de carga de la página serán aún más importantes.

¿Quieres dar tu opinión o unirte a la conversación? Agrega tus comentarios 🐦 en Twitter.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba