Es importante optimizar bien la velocidad de carga de tu página web o blog para que mister Google te posicione bien, aunque hay muchos factores, este es un factor muy importante, ya que si tu página tarda unos cuantos segundos en cargar tus visitantes abandonarán sin pensarselo.

Gracias a estas herramientas, evitarás que tu web se ralentice más de lo necesario y tendrás una visión más amplia de que partes de tu web hace que cargue mas lenta, asi como soluciones para mejorar la carga.

MIDE LA VELOCIDAD DE CARGA DE TU WEB

Dotcom-monitor

Dotcom-monitor te permite saber el tiempo de carga desde diferentes partes del mundo, así como el tanto por ciento de las partes más importantes de la carga de tu código HTML, CSS, JavaScript, incluso imágenes, lo cual te ayuda a centrarte en las partes que más consumen de tu web y así poder optimizarlo.

Gtmetrix

Otra buena herramienta que mide la velocidad de tu página web es gtmetrix, esta te ofrece datos detallados bastante amplios, y como mejorarlos, así como el código de HTML, CSS minificado, eliminando las sangría y espacios en blanco, consiguiendo arañar unos cuantos milisegundos a la carga de tu web.

Nibbler

Nibbler es una buena herramienta para medir y mejorar multitud de datos de tu web, da puntuaciones y consejos de como podrías mejorar una gran parte de la web, desde el código CSS, HTML, JavaScript, hasta las imágenes, enlaces, enlaces a redes sociales, etiquetas metas y otros datos interesantes.

Yslow

Yslow se integra en el navegador, con lo que no tienes que recurrir a herramientas online, ya que esta extensión la tienes siempre a mano en la zona de extensiones de tu navegador, la verdad es que esta bastante bien, nunca viene mal probar diferentes metodos.

COMPRIME LAS IMAGENES Y AUMENTA EL RENDIMIENTO

Si quieres rascarle unos cuantos milisegundos a tu web, comprime todas las imágenes que puedas, puedes utilizar varias herramientas, aquí te muestro algunas.

Compressjpeg.com y Compresspng.com

dos buenas herramientas para comprimir tus imagenes de extensiones jpg y png, muy importante tener la imagenes comprimidas ya que en muchas ocasiones ocupan un gran espacio en nuestra web.

Tinypng

otro compresor para imágenes de extensión png muy sencillo de utilizar, tan sencillo como arrastrar la imagen, comprimirla y descargarla, te deja subir hasta 20 imágenes a la vez.

EVITA EL CÓDIGO EN LÍNEA O INCRUSTADO

1.- En línea: Evita los elementos dentro del atributo style ya que aumentan el tamaño de tu documento HTML, a no ser que sean archivos pequeños.

2.- Incrustado: Evita los elementos dentro de la etiqueta style por las mismas razones que el punto uno.

3.- Externo: La mejor manera es cargandolo a través de una etiqueta link y creando un archivo externo CSS, de esta manera mejoras la organización y das la posibilidad al navegador de cachearlo, suele ser la mejor opción sobre todo si vas a trabajar con archivos grandes o muchas páginas.

COMPRIME TUS ARCHIVOS CSS Y SCRIPTS

A la hora de generar el código CSS Y JAVASCRIPT, es lógico generar comentarios, espaciados o sangria para una mayor legibilidad, pero el navegador no presta atención a nada de eso, lo que le importa es un código lo más compacto posible, una vez generado el código utiliza herramientas para su compresión, como pueden ser Less o Sass para CSS.

CUANDO PUEDAS COLOCA LOS SCRIPT AL FONDO

Cuando el navegador carga la página si se encuentra un script, primero tiene que cargarlo o descargarselo donde este alojado, lo que ralentiza la carga, a veces no será posible, como por ejemplo al cargar el archivo de JQuery externo, si lo carga al fondo puede que no te funcione JQuery, excepto en casos puntuales lo mejor es colocarlo al fondo del body.

NO PASARSE CON LOS TIPOS DE FUENTES

Si vas a colocar distintos tipos de fuentes de google fonts, utiliza un máximo de 2 fuentes distintas, ya que cada fuente supondrá 200 milisegundos de carga para tu página o blog.

CARGA LOS SCRIPT DE TERCEROS DE FORMA ASÍNCRONA

Cargar scripts de terceros siempre es mas lentos, con lo que acaba influyendo en la carga de tu web, para evitar esto carga tus scripts de manera asíncrona insertando la palabra async dentro de las etiquetas script de terceros.

Si quieres saber más encontrarás información complementaria y muy útil en browserdiet.com o en la web de Rubén Alonso MiPosicionamientoWeb.

También te podría interesar

15 consejos sobre como escribir un buen post

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.