Crecí en un pequeño pueblo de Costa Rica donde solo tenía 6k/seg de Internet (56k habría sido un sueño hecho realidad), así que cuando se trata de optimizar un sitio para la velocidad, soy muy exigente. Siempre trato de que los sitios se carguen lo más rápido posible. Creo que en un momento Themelocal.com tenía una clasificación de Google Page Speed de 97-98. Por supuesto, ahora con los botones de redes sociales y otras cosas que he tenido que acomodar.
Además de la codificación general de su tema de WordPress, el otro factor que tiene un gran efecto en la rapidez de su sitio son las imágenes. En estos días, los temas de WordPress tienen una gran cantidad de imágenes y, por supuesto, asumiré parte de la culpa porque me encanta agregar imágenes destacadas siempre que sea posible 🙂
Esta es solo una publicación rápida con algunos consejos sobre cómo puede ayudar a optimizar las imágenes en su sitio para aumentar los tiempos de carga de su sitio. Si eres un usuario de WordPress o un desarrollador de temas, esta publicación puede ayudarte un poco. ¡Siéntase libre de publicar algunos consejos más en los comentarios!
Consejos para acelerar el tiempo de carga de imágenes
A continuación, se incluyen algunos consejos generales para que sus imágenes se carguen rápidamente en su sitio. Nada demasiado elegante, solo algunas sugerencias:
- Los JPG tienden a tener tamaños de archivo más bajos que los PNG.
- Cuando use Photoshop, asegúrese de guardar su imagen «para la web»
- No use las etiquetas IMG de ancho y alto para cambiar el tamaño de sus imágenes, recórtelas siempre que sea posible
- Asegúrese de definir los atributos de ancho y alto para que el navegador no tenga que hacer ningún trabajo
Complementos y servicios de optimización de imágenes
A continuación hay varios servicios y un par de complementos de WordPress que pueden ayudarlo a optimizar sus imágenes para disminuir el tamaño de su archivo y/o acelerar la carga de imágenes en su sitio.
Smush it y el complemento WP Smush.it
Smush.it es un increíble servicio creado por Yahoo que le permite cargar imágenes y eliminará la metabasura innecesaria o aplanará los png para reducir el tamaño del archivo. Puede visitar su sitio para optimizar sus imágenes, pero aún mejor, ofrecen una API que realiza la optimización (excepto para eliminar los metadatos JPEG).
Alex Dunae ha creado el WP Smush.es complemento que hace uso de la API para que pueda mezclar las imágenes en su sitio con WordPress automáticamente al cargarlas.
Es uno de los mejores complementos de optimización de imágenes que existen y querrás tenerlo en todos
de sus sitios.
Punny PNG
Punny PNG es otro servicio de compresión de imágenes alardeado que recomiendo a los desarrolladores de temas.
PunnyPNG lo llevará un paso más allá de smush.it para optimizar aún más sus imágenes y es ideal para las imágenes en sus archivos de temas que se cargan en todas sus páginas.
Uso de una CDN (red de entrega de contenido)
Probablemente la forma más efectiva de aumentar la carga de imágenes en su sitio es a través de CDN – Sistema de gestión de contenido. Una CDN es básicamente una red de computadoras que mantendrá copias de sus datos en varios nodos de una red y les brindará a sus visitantes los datos desde la ubicación más cercana al visitante. Esto puede ayudar a reducir significativamente el tiempo que lleva cargar imágenes en su sitio.
Todos los «mejores perros» utilizan servicios de CDN y pueden marcar una gran diferencia en los tiempos de carga. Sin embargo, puede ser bastante costoso, por lo que la mayoría de los bloggers probablemente no usarán uno, especialmente si no tienen una cantidad significativa de tráfico.
Para desarrolladores: use la imagen destacada de WordPress En lugar de de timpulgar
Muchos desarrolladores de temas (este era yo en el pasado) están usando el script de TimThumb para cambiar el tamaño de las imágenes automáticamente. El problema con este script es que se ejecuta cada vez que se cargan las páginas (siempre y cuando las imágenes no estén almacenadas en caché), por lo que lleva tiempo ejecutar el script y guardar la imagen en caché. Además, es un script que hace un uso intensivo de la base de datos, especialmente si tiene muchas páginas en su sitio y si está alojado en algún lugar como la cuadrícula de MediaTemple, ocupará una gran parte de su uso mensual de GPU.
Por otro lado, al definir tamaños de imagen específicos para las imágenes destacadas, todas sus imágenes se recortarán al cargarlas (o cuando ejecute el complemento Regenerar miniaturas) y no tendrá que ejecutar ningún script simplemente para mostrar una imagen en el sitio. WordPress también cambia un poco la calidad de las imágenes redimensionadas, lo que puede hacer que el tamaño del archivo sea un poco más pequeño.
Cambio de la calidad de la imagen en miniatura JPEG
Encontré este increíble truco de Glyin Mooney en Skidoosh.co.uk para cambiar la calidad de JPEG en WordPress…
Básicamente, puede agregar una función simple a su archivo functions.php para definir la calidad JPEG predeterminada para sus imágenes. Si bien muchas personas pueden usar esto para aumentar la calidad a 100 (como sugiere en la publicación), también puede usarlo para reducir la calidad y acelerar su sitio.
La calidad JPEG actual para miniaturas redimensionadas en WordPress es 90, simplemente agregue lo siguiente para cambiar el valor (digamos que queremos imágenes realmente de mierda al 60% de la calidad original)
add_filter('jpeg_quality', function($arg){return 60;});
Simplemente cambie el «valor de retorno» a la calidad que desea que tengan sus imágenes. Y si recibe un error «T_FUNCTION inesperado», intente la siguiente función en su lugar:
function jpeg_quality_callback($arg) { return (int)100; } add_filter('jpeg_quality', 'jpeg_quality_callback');
¿Cómo mantienes tu WordPress cargando rápido?
¿Tienes algún otro gran consejo para optimizar las imágenes utilizadas en tu blog para la velocidad? ¿Qué otros pasos toma para que su sitio web funcione rápido y Google y sus usuarios estén contentos?
Nota: Gente increíble deja comentarios 🙂