Uno de los principales retos que tenemos todos aquellos desarrolladores y sysadmin es siempre optimizar nuestra plataforma, esto nos ayudara a consumir menos recursos de nuestros servidores y mucho más importante la experiencia del usuario va a ser mucho mejor y esto se transformara automáticamente en más y mejores visitas para nuestros sitios.
En esta oportunidad vamos a conocer como seria la forma correcta de despachar nuestras imágenes en nuestro sitio realizado en wordpress, por eso hemos nombrado Optimizar WordPress en el item Carga de Imágenes.
Este es un item bien importante por una de las principales razones de que nuestros sitios carguen lento o demore en la carga de cara al usuario final son nuestras imágenes, ya que por ejemplo si nuestras imágenes son grandes y de gran resolución esto tardara mucho en cargar en nuestra web.
Ahora bien la principal solución lógica y lo primero de debemos hacer con nuestras imágenes es optimizarlas para web esto lo podemos hacer con nuestro programa de edición tipo Fireworks o Photoshop y que ellos nos ayudan a mantener la calidad de la imagen mejorando el peso del misma. Este recurso es muy bueno y de seguro mejorara la carga de nuestro sitio, ahora vamos a conocer en especifico 2 técnicas más para que las imágenes en nuestro sitio dejen de ser un dolor de cabeza.
Carga de imágenes por demanda en Wordpress
Bien expliquemos este punto en teoría para tener claro a la hora de entrar en el código, esta técnica consiste en solo mostrar las imágenes que se encuentran en el área visible del navegador ya que normalmente si nuestra web es una web que tiene mucho contenido y la misma se extiende mucho hacia abajo el explorador igualmente cargara las imágenes que no son visibles por el usuario en ese momento y esto casi siempre retrasa la carga de nuestra web.
Nuestra propuesta de solución es la siguiente, implementar una metodología de carga de imágenes con la siguiente libreria Unveil.js con esta libreria podemos implementar lo que nos dice la teoría de la siguiente forma.
<img src="blank.png" data-src="infranetworking-logo.jpg" alt="Logo Infranetworking" />
Para mantener el SEO de nuestras imagenes le agregamos estas lineas
<noscript> <img src="blank.png" data-src="infranetworking-logo.jpg" alt="Logo Infranetworking" /> </noscript>
Ahora solo colocamos esto en nuestro codigo javascript para que inicie la magia
$(document).ready(function() {
$("img").unveil();
});
Descripción del Código
– blank.png es la imagen de 1px por 1px transparente que debemos crear para que cuando todavia la imagen no este en pantalla nuestro navegador cargue una imagen que no pesa nada rapidamente ya que esta imagen sera cacheada de forma rapida.
– data-src en esta propiedad de nuestra etiqueta img es donde se colocara la ruta real de nuestra imagen, es la que utilizara nuestra libreria para realizar la carga por demanda de nuestra imagen, la logica es si la imagen esta en nuestra parte visible de nuestro navegador entonces se carga la imagen que esta en la etiqueta data-src.
– noscript se debe colocar esta etiqueta con el contenido de una etiqueta img original como esta en el ejemplo esta sera utilizada por el robot de los buscadores para de igual forma indexar esta imagen.
Ahora que conoces como funciona esta técnica esperamos que la apliques en tus sitios y nos comentes como mejoro la experiencia de tus usuarios.