Uno de los factores que puede ralentizar su sitio web es el uso de fotografías grandes que no están optimizadas para la web.
A veces, cuando la gente intenta publicar algo rápidamente, suben fotos directamente desde sus cámaras fotográficas, en muy alta resolución, imágenes que pesan entre 4 y 5 MB.
Una imagen optimizada tiene menos kilobytes sin ninguna pérdida visible de calidad, y siempre debes optimizar las imágenes sin perder calidad antes o durante la carga en tu sitio.
No importa si su sitio es WordPress u otra plataforma, puede optimizar las imágenes para la web y hacer que su sitio web se cargue más rápido.
Una ventaja de usar WordPress es que tiene complementos que pueden optimizar las imágenes a medida que las carga en su sitio y también optimizar de forma masiva las imágenes existentes.
Entonces, ¿cuáles son las mejores prácticas con respecto a las fotografías?
No pierdas calidad
Siga los objetivos de su sitio web. No optimice a ciegas solo porque alguna herramienta le dio una mala puntuación. Las herramientas no conocen los objetivos de su sitio.
Si tuviera un blog de moda o una tienda, mostraría imágenes bonitas; No me importa lo que me calificaron YSlow o Pagespeed Insights.
No se obsesione con las calificaciones y los puntajes, haga lo mejor para usted y sus visitantes. Es mejor gastar más en CDN para ofrecer imágenes mejores y más grandes, que optimizar demasiado las imágenes y tener un sitio web feo.
Podría costarle visitas y dinero.
No subas imágenes más grandes de lo necesario
Si el ancho de su contenido es de 620 px, entonces debe cambiar el tamaño de sus imágenes a 620 px de ancho antes de cargarlas en su sitio web.
Si desea que los visitantes vean una imagen más grande cuando hagan clic en ella, puede usar un ancho de 1024 px. Configure una de las miniaturas de WordPress para que tenga un ancho de 620 px y use esa miniatura en su página y vincúlela a la imagen más grande.
Probablemente no necesites imágenes de más de 1024 píxeles (eso debería ser suficiente para la mayoría de los blogs), pero ¿qué pasa si las necesitas?
En ese caso, podría considerar cargar imágenes con resoluciones más grandes y usar una CDN.
Entraremos más en detalles sobre CDN en un minuto.
Optimice las imágenes antes de subirlas
Puedes optimizar tus imágenes en tu computadora con Photoshop. Algunas personas recomiendan que hagas tu imagen un poco más nítida con Smart Sharpen, Desenfoque de máscara, Filtro de paso alto o cualquier herramienta que desees; Photoshop tiene múltiples opciones.
No he visto mucha diferencia (en KB) después del enfoque, pero no soy un maestro de Photoshop.
Cambie el tamaño de la foto a la resolución que necesita en su sitio web, use Guardar para la web, elija JPG, Calidad entre 60-80%, marque Progresivo y luego Guardar.
Te recomiendo que uses JPG a menos que necesites transparencia y necesites usar PNG.
Si no tienes Photoshop, puedes utilizar estas herramientas para optimizar:
- Disturbios (Windows)
- Imagen óptima (Mac)
- Jpegmini (en línea, Mac y Windows)
- Kraken (en línea)
- Compresor.io (en línea)
Yo mismo uso Jpegmini; Todavía puedo reducir otro 5-10% incluso después de optimizar primero con Photoshop.
U optimizar durante la carga
No creo que haya una manera que sea la mejor para optimizar imágenes. Si no quieres perder tiempo optimizando tus fotos en tu computadora antes de subirlas, puedes optar por dejar que un complemento de WordPress haga todo el trabajo. para ti.
Hay muchos complementos de WordPress que puedes usar:
- WP Smush – Optimización de imagen
- Optimizador de imágenes ShortPixel
- Optimizador de imágenes Kraken.io
- Optimus: optimizador de imágenes de WordPress
- Nube del optimizador de imágenes EWWW
- Imaginar Optimizador de imágenes
Con estos complementos, puede optimizar las imágenes al cargarlas y también optimizar las que ya ha cargado.
No los he usado todos, sólo WP Smush y ShortPixel, y ShortPixel me pareció excelente. Puede reducir algunos KB incluso para imágenes previamente optimizadas con Photoshop y Jpegmini.
Otro complemento útil es Imsanity .
Si tiene un sitio de varios autores, entonces necesita controlar qué imágenes cargan las personas. Establezca un ancho, alto y calidad máximos. Cuando un usuario carga una imagen más grande, el complemento la reducirá automáticamente al tamaño configurado.
WP Smush Pro también hace eso.
Mostrando imágenes
Ahora que ha optimizado las imágenes, también puede mejorar la forma en que presenta estas imágenes en su sitio web.
Si tienes muchas fotos en una página, como en un blog de moda, por ejemplo, puedes aprovechar la carga diferida.
Eso significa que sus imágenes se cargarán solo cuando sean visibles, mientras el visitante se desplaza hacia abajo.
Puede utilizar uno de los siguientes complementos de WordPress para eso:
- Carga perezosa
- BJ carga perezosa
- Carga diferida del cohete
- Carga diferida de imagen
- Carga diferida de WPParse
No puedo decirte qué complemento es mejor. Debes realizar la prueba porque puede haber incompatibilidades con tu tema. Por ejemplo, la carga diferida no funciona para las imágenes destacadas si tienes un tema de Genesis Framework.
Además, mientras probaba la carga diferida, parecía extraño en el móvil. Había espacios en blanco donde deberían haber estado las fotos porque no se cargaban tan rápido como en la vista de escritorio.
Otra cosa que puedes hacer para acelerar el tiempo de carga es publicar imágenes de un subdominio, como imágenes.dominio.com.
Debe crear un subdominio desde cPanel o cualquier panel de control que ofrezca su empresa de alojamiento y luego configurar WordPress para cargar medios desde ese subdominio utilizando el WP Original Media Path .
Puedo escribir una publicación de blog detallada para las personas que quieran hacerlo (si alguien lo solicita), pero mi recomendación es usar una CDN en su lugar. Es una solución mucho más sencilla.
Utilice una CDN
Cloudflare es súper fácil y gratuito. Simplemente cambie sus servidores de nombres de dominio a Cloudflare y actívelos (verifique la nube naranja para ver las entradas DNS), y eso es todo. Sus archivos estáticos (imágenes, CSS, JS) se cargarán desde la CDN de Cloudflare.
Hay otras empresas de CDN que puede utilizar, que se enumeran a continuación. Pero creo que Cloudflare es el más fácil de implementar:
Limpia lo que ensucias
Cada vez que cambias de tema, dejas un rastro de miniaturas no utilizadas y entradas de bases de datos relacionadas con esas imágenes.
Al cambiar de tema, puede utilizar el AJAX Thumbnail Rebuild para reconstruir miniaturas que se ajusten a su nuevo tema.
Las miniaturas antiguas se pueden eliminar del servidor utilizando uno de los siguientes complementos:
Recomiendo Thumbnail Cleaner porque es rápido. Pero elimina todas las miniaturas, no sólo las que no se utilizan. Después de que se elimine, debe usar el AJAX Thumbnail Rebuild para reconstruir las miniaturas que necesita.
Las miniaturas no utilizadas no afectan el rendimiento de su sitio web. Simplemente ocupan espacio en su servidor. Sin embargo, hay entradas de la base de datos relacionadas con esas miniaturas y es una buena práctica mantener la base de datos lo más limpia posible.
Eso es lo que haremos en el siguiente paso: limpiar la base de datos de WordPress.
Deja un comentario