Trucos consejos y herramientas para aumentar la velocidad de carga de un sitio web

Todo queremos que nuestros sitios web carguen más rápido. Como ya sabemos, los usuarios de Internet no tienen precisamente la virtud de la paciencia. Si nuestro sitio web no va a una velocidad adecuada podemos acabar perdiendo visitas. Como ya vimos en este artículo anterior, Google considera la velocidad de una página como un factor importante en el posicionamiento en buscadores. De hecho no es solo beneficioso, sino que es obligatorio disponer de un sitio web que carga de forma rápida.

Más adelante vamos a ver algunos pasos sencillos que podemos hacer para acelerar nuestro sitio web.

Mejorar los tiempos de carga de una página

Las bases

Lo primero que vamos a hacer, antes de usar alguna herramienta para mejorar la velocidad de carga de una web, es saber cuanto tiempo tarda en cargar la web en cuestión.

Se puede decir que un sitio web se toma un tiempo en cargar cuando hay varias peticiones HTTP realizadas en nuestro servidor. Estas solicitudes hacen más lenta la carga de un sitio. Los ejemplos de estas peticiones incluyen la carga de secuencias de comandos, hojas de estilo, imágenes, entre otras…

Para comprender y analizar el funcionamiento de la velocidad de nuestro sitio web, se pueden utilizar herramientas como Google PageSpeed o Yahoo! YSlow. Estas dos herramientas nos ayudan a optimizar un sitio web y mejoran los tiempos de carga de una página.

De este modo tanto PageSpeed como YSlow disponen de complementos para instalar en el navegador y ayudarnos a sacar el máximo provecho de estas. El funcionamiento es muy sencillo y ambos muestran una documentación aceptable, de esta forma no tendrás problemas aunque sea la primera vez que las utilizas.

Una herramienta muy útil que también se puede utilizar es GTmetriz, que utiliza las funciones tanto de YSlow como de PageSpeed para analizar la velocidad de nuestro sitio web, y ofrecer las respectivas recomendaciones y sugerencias para mejorar la misma.

Tiene la opción para descargar los resultados en un archivo PDF y hay un apartado de recomendaciones y consejos para los sitios que utilizan WordPress. La herramienta GTmetrix también muestra los resultados de YSlow y PageSpeed uno al lado del otro, para de esta forma poder comparar los resultados de velocidad con cada uno.

Este recurso no utiliza un mecanismo de clasificación como las herramientas anteriores, por el contrario escanea el sitio web y realiza comentarios sobre cada sección. Las zonas correctas se muestran en verde mientras que las cuestiones que tienen problemas se encuentran en rojo.

Algunos de los aspectos importantes que muestra es la optimización de las CSS, HTML y JavaScript. Pero esta herramienta no solo ofrece esto, si no que ofrece también nuevas funciones que vamos a ver en próximos artículos.

Si ya hemos terminado de medir los tiempos de carga de nuestra web, ahora hay que ponerse manos a la obra para mejorar la velocidad de la página.

Compresión y escalado de imágenes

No es relevante si la web es grande o pequeña, en alguna ocasión se hará uso de las imágenes. Se puede cargar una imagen como principal en cada entrada de un blog, o es probable que se utilicen imágenes en los artículos. Si esto es así debemos considerar la compresión de imágenes en el sitio web.

La herramienta Google PageSpeed tiene un compresor de imágenes que trae por defecto, aunque el compresor de imágenes TinyPNG en la práctica puede ser más útil. La aplicación solo se puede utilizar con archivos PNG. Lo único que hay que hacer es subir las imágenes y comprimir, ofreciendo una versión comprimida lista para descargar.

Otras herramientas útiles son los compresores de imagen como Optimizilla. Hay minimizadores para archivos PNG y JPEG, y el mecanismo es similar a TinyPNG: cargar, comprimir y descargar.

Otro consejo es que antes de cargar imágenes en la web, debemos asegurarnos de que se escalan de acuerdo a las dimensiones en píxeles que utiliza el código HTML. Esto evita retrasos innecesarios en el servidor.

El almacenamiento en caché y CDN

Las versiones en caché de contenido estático para aumentar la velocidad de un sitio ha estado desde hace mucho tiempo. Se puede empezar con el almacenamiento de caché en el navegador, aunque se debe de poner en práctica otras cuestiones. Podemos incluso buscar alternativas al caché PHP si no utilizamos un servidor compartido.

Cuando se utiliza un CMS como el Joomla, el caché y otras funciones ya las traen incorporadas y sólo tenemos que activar y configurar. En cambio los que utilizamos Wordpress, lo mejor que se puede hacer es instalar y configurar un plugin de caché. Uno de los plugins más populares es W3 Total Cache.

Una red de entrega de contenidos o CDN puede ser un buen recurso para mejorar la velocidad de carga de un sitio web. Podemos decir que un CDN cuenta con una infraestructura mundial de servidores que además de reducir el tiempo de carga de tu servicio de hosting, también aumenta la velocidad de las páginas, al servir de forma dinámica el contenido del servidor que se encuentra más cerca de la ubicación del que visita la web.

Si nuestro sitio tiene una gran cantidad de visitas y contenidos, es aconsejable invertir en un CDN. Las opciones disponibles son muchas, donde hay que elegir el que mejor se adapte a nuestras necesidades. Uno de los servicios más conocidos es MaxCDN que se integra muy bien con el plugin W3 Total Cache de Wordpress.

Existen servicios de CDN muy conocidos como CloudFlare o Amazon S3, pero existen otros menos conocidos y con muy buenas prestaciones como Incapsula. Este servicio además de ayudarnos a la optimización de la web y CDN, también ofrece protección contra ataques DDoS, análisis, estadísticas en tiempo real, aplicaciones de cortafuegos (firewall) y estadísticas de seguridad. El precio para el plan más econónico son de 9 dólares al mes, aunque también se puede utilizar de forma gratuita pero con funciones limitadas.

CSS Sprites, JavaScript y otros

Cuando la carga de una web es lenta por culpa de múltiples imágenes, podemos reducir este número mediante la combinación de imágenes en CSS Sprites. Explicado de otro modo, un Sprite CSS es la unión de varias imágenes para formar una sola. Con esto en lugar de tener que cargar un buscador varias imágenes diferentes, hace que cargue solo una por medio de un CSS Sprite. Una de las formas para hacer esto es a través de un generador de Sprite , el cual se puede utilizar de forma gratuita.

Otra cosa que podemos hacer es aplazar el análisis de JavaScript. Lo ideal es que el JS debe cargar al final de un documento HTML, ya que si se encuentra en la parte superior de un documento, puede retrasar el procesamiento de la web. Se puede utilizar el atributo «defer” para aplazar el análisis del JavaScript hasta que la web haya cargado.

Estos pasos adicionales que se pueden hacer incluyendo la combinación de archivos CSS y JS. Si estamos utilizando un CMS, lo más seguro es que la web este basada en varios archivos CSS y JS que pueden ralentizar la velocidad de carga. Se puede combinar este tipo de scripts en los archivos más grandes y mejorar la velocidad del sitio.

Existen otros métodos para comprimir el CSS, HTML y JS para mejorar el tiempo de carga. Esta herramienta es muy útil para la minificación de estos.

Y con esto terminamos este artículo sobre la aceleración de un sitio web. ¿Conoces algún truco, consejo o herramienta más? ¡Pues comenta y compártelo con nosotros!