Optimización de velocidad de páginas web (2/3)

El primer paso de la WPO (Web Performance Optimization) es obtener una visión global de la velocidad de las páginas.

Una forma sencilla es mediante un servicio de monitorización que vaya midiendo regularmente la velocidad de carga. Keynote Systems ofrece gratuitamente (para uso privado) el software Kite. Una monitorización de varios días puede darnos una idea muy buena de la velocidad de carga de la web y de si hay fluctuaciones durante el día. Si hubiese muchas fluctuaciones, sería recomendable contactar con el proveedor del alojamiento para buscar alternativas (cambio de la web de servidor, incremento del paquete contratado, etc).

Una vez tenemos una presencia online estable, ya podemos pasar a analizar la velocidad de carga de las páginas en si. Para ello hay varias herramientas, destacar los add-ons YSlow y Google Page Speed que están disponibles para varios navegadores, que analizan la páginas web y dan consejos de optimización de la misma.

Google incluso ofrece desde hace algunos días un servicio para realizar esa optimización en sus servidores. Este servicio funciona redireccionando los contenidos de la web a los servidores de Google, donde el servicio Google Page Speed Online incrementa la velocidad de carga. De momento es gratuito, pero en el futuro habrá que pagar por este servicio. Otro punto negativo es que se depende de Google, por lo que mejor optimizar las páginas web en los servidores de uno mismo.

 

Optimizaciones de las páginas:

1) Reducir el número de componentes de una página web. En vez de usar varios archivos Javascript o CSS externos, habría que intentar reducirlos al máximo. Cada archivo externo que se carga necesita peticiones de DNS y HTTP, respuestas del servidor y finalmente el tiempo de descarga de los archivos.

2) Enlazar siempre el archivo CSS antes de los archivos Javascript. Los navegadores no ejecutan el código Javascript hasta que no están completamente cargados los archivos CSS. Este funcionamiento es debido a que el Javascript puede necesitar información de estilos.

3) Vigilar las dependencias de bibliotecas como jQuery, jQUery UI, etc. En este caso jQUery UI solo funciona correctamente si se enlaza después de jQuery.

4) De todas las bibliotecas Javascript hay versiones minimizadas para los servidores productivos. Siempre se deberían de utilizar estas versiones. En el caso de jQuery el archivo ocupa 232 KB y la versión minimizada 92 KB.

5) Todas las funciones Javascript personalizadas también deberían comprimirse. Hay distintas herramientas como Closure Compiler, JSMin y YUI Compressor.

6) La optimización del código propio Javascript también es muy relevante, pudiendo alcanzarse fácilmente incrementos de velocidad al doble. Para detectar el potencial de optimización se puede usar la extensión de FIrefox Firebug. Si se hace click sobre «Medición de tiempo», Firebug mide los tiempos de ejecución de los scripts de Javascript y da los resultados en ms.

7) El funcionamiento normal de Javascript también tiene influencia directa sobre la velocidad. La página web no se muestra hasta que el código Javascript no se ha cargado completamente. Esto se puede evitar incluyendo el código al final de la página.

8) Al igual que los archivos Javascript, los archivos CSS también se pueden comprimir. Existen herramientas como Minify CSS o Google Minify (que también existe como plugin de WordPress).

Y continuará mañana con los 9 factores que faltan en la lista.