Optimización web – Reducir el número de peticiones HTTP

josulin 15 mayo, 2015     4 Comments     417 views

Con este primer post que sirve para inaugurar el blog inicio una serie de artículos en los que hablaré sobre los aspectos más importantes que debemos tener en cuenta a la hora de realizar un diseño web optimizado en cuanto a tiempos de carga se refiere. Con ello conseguiremos, entre otras cosas, mejorar el posicionamiento web – SEO y la experiencia de usuario de nuestro sitio web.

Según Wikipedia «HTTP (Hypertext Transfer Protocol) es el protocolo utilizado en cada transacción de la World Wide Web«; por cada recurso que utilizamos en nuestro sitio web (imágenes, css, js, fuentes…)  se realiza una petición al servidor en el que está alojado para descargarlo y hacer uso de él. Dependiendo del navegador utilizado el número de peticiones concurrentes variará pudiendo ir de 4 hasta 8.

¿Por qué se debe tener esto en cuenta?

Los diseños web actuales suelen demandar un número de recursos que excede del rango que manejan los navegadores por lo que debemos cuidar este aspecto desde el principio si no queremos encontrarnos en la desagradable situación de localizar el problema en una fase muy avanzada del proyecto o incluso una vez publicado en internet.  Normalmente se cumple la regla de «a mayor número de peticiones HTTP mayor tiempo de carga de nuestro sitio web«.

La limitación de peticiones concurrentes de los navegadores hace que, una vez se ha llegado a ese límite, el resto de recursos deben quedar «a la espera» para poder ser descargados; si a esto le añadimos que algunos recursos son dependientes (la carga de uno depende de haberse descargado otro previamente), comprobaremos que este límite puede afectar enormemente el tiempo de carga de la página. Por ello, es muy importante reducir el número de llamadas tanto de recursos internos como externos.

¿Qué puedo hacer para reducir el número de peticiones HTTP?

Antes de meternos en harina editando código y eliminar recursos, debemos llevar a cabo una auditoría de optimización de nuestro sitio web para:

– Localizar todos los recursos que cargamos (peticiones HTTP).

– Identificar la funcionalidad a la que están asociados esos recursos (en el caso de css y js, por ejemplo).

– Determinar si las llamadas a esos recursos son necesarias en todas las páginas y, de no ser así, realizar un esquema reflejando esas dependencias.

Una vez recopilada toda esta información: copia de seguridad, creación de un entorno sobre el que poder trabajar al margen de la web publicada en internet y ¡a optimizar!

Lo primero y más importante de todo: comprobar que nuestro sitio web no utiliza sistemas de cacheo (envío de cabeceras «Expire» mediante htaccess, caché propia de un gestor de contenidos, …etc) Podría pasar que realicemos alguna de las tareas (que nombraré a continuación) originando algún problema de comportamiento o visualización de la página web y nos parezca que «no se ha roto» nada, cuando en realidad lo que sucede es que el contenido que estamos viendo ha sido servido por el sistema de caché utilizado.

Con este primer punto solucionado, si tenemos claro que un recurso no se utiliza en ninguna página de nuestro sitio web y en la auditoría no hemos detectado dependencias con ese recurso, lo podemos eliminar (a la hora de borrar código soy más partidario de comentar con etiquetas <?php /* */ ?>  hasta comprobar que todo funciona correctamente).

En muchas ocasiones tanto las plantillas prediseñadas (no asociadas a ningún CMS), como las plantillas desarrolladas a medida para WordPress, Joomla o cualquier otro gestor de contenidos pueden traer en sus cabeceras llamadas a recursos cuya funcionalidad está disponible en esa plantilla, pero que no vamos a utilizar (pongamos por caso una librería jQuery para un carrusel). En caso de tratarse de una plantilla WordPress, explicaré próximamente cómo realizar la eliminación de recursos js y css, de manera que dicha eliminación no se vea afectada tras la actualización de plugins o plantillas.

Otra manera de reducir el número de peticiones es utilizar lo que se conoce como técnicas sprite o unificación de archivos; llegados a este punto lo más importante es respetar el orden de carga original de los recursos.

Optimizar llamadas a ficheros css

Editaremos todas las hojas de estilo (css) cogiendo su contenido y lo volcaremos a un fichero común (unificación de archivos); de esta manera podemos eliminar de un plumazo varias peticiones reduciéndolas a una sola. Deberemos comprobar la carga de la página tanto en dispositivo móvil como en ordenador; para un correcto funcionamiento de determinados diseños en dispositivo móvil en ocasiones es preferible «penalizar» teniendo alguna petición más para recursos como bootstrap, por ejemplo, y ganar en rendimiento de la web en estos dispositivos (puede pasar que la visualización de la plantilla en dispositivo móvil penalice en validadores de optimización móvil como el de Google por tardar en cargar los estilos que se requieren por estar dentro de un fichero css que pese demasiado). Deberemos evaluar en cada caso los pros y contras que tiene cada cambio.

Optimizar llamadas a ficheros jQuery / JavaScript

Editaremos las librerías y realizaremos la misma tarea que con las hojas de estilo unificando su contenido en un único fichero, manteniendo el orden original de las llamadas y evaluando la repercusión del cambio en el comportamiento de la página web (puede que en ocasiones podamos pasar de tener 5 ficheros a solo 1 o que por dependencias o fallos en el comportamiento de la página pasemos a tener 2 en lugar de 1 unificando las librerías en 2 ficheros. Igual que en el caso anterior, deberemos testear el comportamiento tanto en dispositivo móvil como en ordenador.

Optimizar llamadas a fuentes externas (Google Fonts)

En caso de tener varias llamadas a ficheros de Google Fonts, éstas se pueden unificar en una sola concatenando en una misma llamada las fuentes que se quieren cargar separándolas con el carácter «|».

Teniendo estas 4 llamadas:

<link href=’http://fonts.googleapis.com/css?family=Montserrat:400,700′ type=’text/css’ media=’all’ />
<link href=’http://fonts.googleapis.com/css?family=Kaushan+Script’ type=’text/css’ media=’all’ />
<link href=’http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic’ type=’text/css’ media=’all’ />
<link href=’http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700t’ type=’text/css’ media=’all’ />

Podemos unificarlas en 1 sola:

<link href=’http://fonts.googleapis.com/css?family=Montserrat:400,700|Kaushan+Script|Droid+Serif:400,700,400italic,700italic|Roboto+Slab:400,100,300,700′ rel=’stylesheet’ type=’text/css’>

¿Cómo optimizar las peticiones HTTP que no puedo eliminar?

Utilizar recursos CDN

Para aquellos recursos que bien por dependencias o bien por afectar a la funcionalidad de la página no pueden unificarse con el resto, lo primero que tenemos que hacer comprobar si existe dicho recurso en alguno de los servicios CDN existentes en la red.  Uno de los repositorios cuyo uso está más extendido es el repositorio CDN de Google.

En un próximo artículo explicaré los beneficios que tiene el uso de este tipo de servicios pero el más importante es que la descarga de recursos desde servidores de una red CDN nos proporcionará mayor velocidad de respuesta en la descarga de recursos web. De esta forma podremos optimizar la descarga de recursos comunes a muchos proyectos web como librerías jQuery genéricas u otras específicas asociadas a ciertos comportamientos que dependerán del diseño de la plantilla.

Optimizar la ubicación de los ficheros en el código

Otro aspecto importante es la ubicación de la llamada a recursos en el código fuente de nuestra página. La máxima que tenemos que seguir es colocar en la cabecera las llamadas a hojas de estilo y fuentes y en el pie de página (antes del fin de la etiqueta body) las llamadas a librerías jQuery / JavaScript (de nuevo siempre respetando el orden de llamada y las dependencias entre los ficheros de la plantilla original).

Nuestro objetivo es conseguir que la carga de recursos más pesados como suelen ser las librerías no interrumpan la descarga de recursos directamente relacionados con la visualización de la página. Un ejemplo podría ser la llamada a la librería Google recaptcha; no es un script necesario para que se visualice la página correctamente por lo que podremos ubicarlo antes del fin de body. Más adelante explicaré como optimizar las llamadas a librerías jQuery / JavaScript que no tienen relación directa con la correcta visualización de una página.

Minificación de ficheros

Minificar es reducir el tamaño de un fichero modificando o eliminando espacios innecesarios, tabulaciones, comentarios, …etc También se conoce con el término «ofuscar» dado que el resultado final no permite leer con claridad el contenido de los ficheros.  Se pueden minificar distintos tipos de ficheros (html, php, css, JavaScript) aunque por practicidad en el desarrollo normalmente nos centraremos en las hojas de estilo y las librerías jQuery / JavaScript.

Con la minificación conseguimos que el recurso a descargar pese menos de manera que se descargue más rápidamente reduciendo el tiempo de carga de página. En función del tipo de desarrollo (si usamos una plataforma concreta sobre la que desarrollar o se trata de un desarrollo a medida) podemos hacer uso de distintos recursos:

– En caso de hacer uso de una plataforma como un gestor de contenidos o un e-commerce normalmente éstas cuentan con plugins que realizan esas tareas de manera automática; en el caso de WordPress el plugin W3 Total Caché cuenta con esa opción.

– Si se trata de un desarrollo web a medida contamos con herramientas online que nos permitirán copiar nuestro código y descargarlo en formato minificado; un ejemplo para ficheros css y  javascript son: http://www.cleancss.com/css-minify y http://javascriptcompressor.com

Tras las minificaciones deberemos comprobar el correcto funcionamiento del sitio web dado que se pueden minificar los ficheros en mayor o menos grado de compresión y en ocasiones (sobretodo en ficheros JavaScript) la funcionalidad de la página podría verse afectada. Deberemos buscar el equilibrio entre minificar y mantener intactas las funcionalidades y efectos de nuestra página.

Carga los ficheros solo en las páginas que lo requieran

Vaya por delante que esta tarea puede ser difícil de llevar a cabo dado que cuando no se trata de un desarrollo a medida en el que podemos controlar mejor el comportamiento individual de las páginas se antoja complicado controlar la carga de recursos en función de la página en la que estamos navegando. No obstante, ciertas plataformas como WordPress permiten realizar ésta tarea haciendo uso de funciones propias de su API.

La «carga de ficheros personalizada» en función de la página en la que estamos navegando nos proporcionará flexibilidad a la hora de optimizar nuestras páginas dado que podremos cargar los recursos únicamente en aquellas que lo requieran (no tiene sentido cargar una librería o css de un carrusel cuando estamos navegando en una página que no hace uso de ese recurso).

En resumen, la optimización de peticiones HTTP  incidirá positivamente en el comportamiento de nuestro sitio web, sus tiempos de carga y la mejora en su posicionamiento en buscadores pero debemos buscar el equilibrio entre su optimización, el comportamiento de la página y la mejor experiencia de usuario para nuestros visitantes.