Aprende cómo se comporta el protocolo Https con tus páginas, cómo mejorar la carga de cualquier imagen alojada en servidores externos aprovechando los servidores de Blogger y descubre cómo con Base64 puedes poner las imágenes en HTML sin necesidad de que sean descargadas de ningún servidor.
Con el objetivo de conseguir una mayor fluidez de navegación para nuestros usuarios y un mejor posicionamiento en los buscadores, hemos revisado en cuatro entregas llenas de consejos prácticos cómo incrementar la velocidad de carga de nuestro Blog.
En esta última entrega voy a darte unos consejos finales para el tratamiento de imágenes que potenciarán definitivamente, si ya has realizado las pasadas tres entregas, el dibujado con nulo o escaso impacto en las prestaciones de los ordenadores de tus usuarios.
Vamos a centrarnos en descubrir cómo optimizar el uso de imágenes cuando estas provienen de otros servidores que no sean Blogger, como por ejemplo si provienen de servicios como Google Drive o similares. Así mismo introduciré un nuevo concepto para los que gustan de la experimentación que es la utilización de algoritmos en Base64 para almacenar las imágenes directamente en nuestras páginas, es decir, evitando hacer al navegador que se descargue las mismas de un servidor porque podrá dibujarlas directamente desde nuestras propias páginas.
Si has llegado hasta aquí y has puesto a punto tu blog para la ejecución más rápida, ya sólo te queda esta última entrega para arañar esos milisegundos que diferenciarán a tus páginas de las demás.
Antes de comenzar el tutorial, te recomiendo que primero realices las primeras entregas para tener un funcionamiento óptimo a todos los niveles:
Uso de Protocolo HTTPS con imágenes, Google Drive y un poco de "Caché":
El protocolo de comunicaciones HTTPS según reza la Wikipedia:
"El sistema HTTPS utiliza un cifrado basado en SSL/TLS para crear un canal cifrado (cuyo nivel de cifrado depende del servidor remoto y del navegador utilizado por el cliente) más apropiado para el tráfico de información sensible que el protocolo HTTP. De este modo se consigue que la información sensible (usuario y claves de paso normalmente) no pueda ser usada por un atacante que haya conseguido interceptar la transferencia de datos de la conexión, ya que lo único que obtendrá será un flujo de datos cifrados que le resultará imposible de descifrar."
Cuando disponemos de servidores de almacenamiento de imágenes, presentaciones o datos de cualquier caso como Google Drive, éste nos proporciona URLs para dibujar dichos componentes en nuestro blog que van con protocolo HTTPS. Dado el carácter seguro de dicho protocolo, las imágenes que se descargan por esta vía no se almacenan en la caché del usuario o se almacenan con tiempos de caché de escasos segundos.
La memoria caché del navegador del usuario es una memoria intermedia que sirve para alojar los datos que componen las páginas web de nuestro blog, evitando así la necesidad de que el navegador tenga que descargarse del servidor de origen de dichos datos. Esta memoria caché se suele rellenar la primera vez que se "dibuja" una página web en nuestro navegador, para que el resto de veces, las imágenes y otros componentes que se descargan en el cliente no tengan que volver a descargarse del servidor.Con el protocolo HTTPS que se utiliza por ejemplo en Google Drive, las imágenes dibujadas bajo ese protocolo, dependiendo del navegador o no se alojarán en caché, o de hacerlo, tendrán tiempos límite de expiración muy bajos. Con lo que finalmente, cada vez que nuestro navegador al dibujar nuestra página con imágenes almacenadas en servidores que utilizan HTTPS para sus direcciones, tendrán que hacer peticiones de descarga al servidor en lugar de poder acceder a la memoria caché del navegador.
¿Cómo podemos mejorar con Blogger la carga de imágenes HTTPS?
Muy sencillo, evitando que se carguen por HTTPS cargando las imágenes en los propios servidores de Blogger.
Fíjate que al cargar una imagen en Drive la URL siempre tiene esta forma (utiliza HTTPS):
https://googledrive.com/host/CODIGO_IMAGEN/'
Fíjate que al cargar una imagen del Album de Google+ siempre tiene este formato (utiliza HTTPS):
https://lh6.googleusercontent.com/CODIGO_IMAGEN
Una imagen de Blogger (alojada en los servidores de Blogger) siempre tiene este formato (utiliza HTTP):
http://2.bp.blogspot.com/CODIGO_IMAGEN
Como podemos apreciar, las imágenes de Blogger no utilizan HTTPS. Esta característica les permite tener un mejor alojado en caché y hacer que no sea necesario descargarlas o, en caso de que hubiera que hacerlo, al encontrarse dentro del mismo servidor donde están las páginas que el navegador está dibujando (en los mismos servidores de Blogger), su descarga será mucho más rápida (no tendrá que ir a "buscarlas fuera").
¿Qué hacemos entonces para conseguir la máxima velocidad en este caso?
1) Créate una nueva entrada vacía en Blogger.
2) Con el icono insertar imagen metes la imagen en la entrada como sueles hacer normalmente (la subes a Blogger como normalmente haces o utilizas una ya existente).
3) una vez insertada en la entrada, haz "clic" derecho sobre la imagen y copia la URL que Blogger ha asignado a la misma.
4) Cuando necesites llamar a esa imagen en tus páginas, por ejemplo iconos de redes sociales o de más que puedas tener alojados en Drive o servidores externos, cambia la URL por la nueva que Blogger ha asignado a la imagen al alojarla en sus servidores.
Con esto la carga de la imagen será por HTTP con un correcto alojado en caché y además dentro de los propios servidores de Blogger (sin necesidad de "salir fuera" a por dicha imagen).
Ir "más allá", alojar la imagen en la propia página HTML, evitando la descarga de la misma de un servidor, utilizar BASE64:
Uno de los extremos de optimización menos conocidos pero altamente eficientes que existen es almacenar la imagen en "Base64". Base 64 es un sistema de numeración posicional que usa 64 como base. Es la mayor potencia de dos que puede ser representada usando únicamente los caracteres imprimibles de ASCII.
Para no complicarnos, es tan sencillo como que el navegador es capaz de leer una imagen "convertida" a texto realizada en Base64. Esto quiere decir que la imagen puede ir escrita en código, en el propio código HTML de tus páginas.
La venta fundamental es que al encontrarse esa imagen "incrustada" en la página que se dibuja en el navegador, éste no tendrá que "ir a por ella" y descargársela de ningún servidor, evitando consumir un tiempo precioso en dichas tareas.
¿Cómo lo hacemos?
1) Conéctate a http://www.motobit.com/util/base64-decoder-encoder.asp
 |
| Servicio Online para la codificación de imágenes en Base64 |
2) Pulsa Seleccionar archivo (el botón de la izquierda) y añade la imagen con la que desees probar.
3) Pulsa después "Convert to resource data" (el botón de la derecha) para convertir la imagen en base64.
 |
| Imagen convertida a Base64 |
4) Copia y pega el texto, el código en base64 de la imagen a un editor.
5) Añade dentro de este código <img alt="Embedded Image" src="data:image/jpeg;base64,METE_AQUI_TU_CÓDIGO_BASE_64" /> el código en base64 que te ha dado la herramienta de "motobit".
El resultado es este... aquí tenéis a ASIMOV en Base64, sin necesidad de ser descargado de ningún servidor y cargado directamente en el código HTML de esta página:
Los inconvenientes de esta técnica son fundamentalmente que la página HTML aumentará CONSIDERABLEMENTE de tamaño y que el procesado de la imagen se realiza en el servidor del cliente. A cambio las ventajas son que el navegador no se tendrá que ir a un servidor y descargarse la imagen para luego dibujarla en el cliente.
No conviene abusar por tanto de esta técnica, pero es especialmente útil con imágenes de fondo de título, iconos, aquellas imágenes que NO quieras que residan en ningún servidor, etc...
Con esto cerramos todo el manual de optimización para tu Blog, espero que te haya servido y que cualquier duda que tengas la formules sin temor en los comentarios.
0comentarios:
Publicar un comentario