Cómo reducir el número de peticiones HTTP de tu página web

Cada vez que navegamos por la web, existen muchos aspectos técnicos que no vemos. Por lo general, los desarrolladores e ingenieros son quienes trabajan día y noche entre bambalinas, mientras que algunos profesionales del marketing (en especial los que no tienen demasiada experiencia técnica) suelen mantenerse al margen.

Sin embargo, estos últimos necesitan, al menos, tener una idea general sobre los aspectos técnicos de su sitio web.

¿Por qué? En primer lugar, las métricas a cargo de los profesionales del marketing pueden depender en gran medida del desarrollo back-end de un sitio web. Por ejemplo, el número de peticiones HTTP que necesita una página web afecta su tiempo de carga, y esto influye, en última instancia, en la experiencia del usuario, la tasa de rebote y otras métricas clave. 

¿Qué es una petición HTTP? ¿Cómo afecta la experiencia del usuario? ¿Y qué puede hacer un profesional del marketing para disminuir el número de peticiones HTTP de su sitio web? A continuación, analizaremos cada una de estas preguntas. Al final, entenderás mejor la importancia de estos protocolos de respuesta y qué puedes hacer para ofrecer una mejor experiencia a los visitantes de tu sitio web.

¿Qué es una petición HTTP?

Cada vez que alguien visita una página web, normalmente sucede lo siguiente: el navegador del usuario (Chrome, Firefox, etc.) envía una señal al servidor web que aloja la página que intenta visitar (p. ej., una página de tu sitio web). Le envía una petición al servidor para que este le mande los archivos con el contenido del sitio web. Los archivos contienen todo el texto, las imágenes y los elementos multimedia que existen en esa página web.

A este proceso se le conoce como “petición HTTP”. HTTP significa “protocolo de transferencia de hipertexto”, que en realidad es tan solo una denominación sofisticada para hacer referencia al proceso a través del cual un navegador envía una petición de archivo y el servidor del sitio web se lo manda (o “transfiere”).

Cuando el servidor de tu sitio web recibe una petición HTTP del navegador de un usuario, responde y envía los archivos al navegador. A continuación, el navegador del usuario procesa la página web.

El problema es el siguiente: el navegador debe realizar una petición HTTP por separado para cada archivo de tu sitio web. Si tu sitio web no tiene muchos archivos, entonces le tomará poco tiempo procesar la petición y descargar el contenido. Sin embargo, la mayoría de los sitios web buenos sí tiene muchos archivos. Y a menudo, las imágenes grandes de alta definición son las culpables.

¿Cómo afectan las peticiones HTTP a la experiencia del usuario?

En resumen, cuantos más archivos tenga tu sitio web, mayor será el número de peticiones HTTP que deberá realizar el navegador del usuario. Por lo tanto, cuando haya más peticiones HTTP, tu sitio web necesitará más tiempo de carga y la transferencia de archivos grandes tomará incluso más tiempo.

Cuando las páginas tardan mucho en cargar, la experiencia del usuario puede ser molesta y frustrante. Los usuarios de dispositivos móviles son los que se llevan la peor parte, ya que la mayoría deberá esperar a que todos los elementos de una página web se descarguen antes de que el contenido comience a aparecer en su navegador.

Las investigaciones demuestran que el tiempo de carga es importante cuando se trata del rendimiento del sitio web. Según KISSmetrics, el 47% de los consumidores espera que una página web cargue en 2 segundos o menos, mientras que el 40% abandona un sitio web si tarda más de 3 segundos en cargar.

Entonces, ¿cuál es el número mágico de peticiones HTTP que un sitio web debe tener como objetivo? Te daré una pista: la respuesta no es “1”. Hay quien piensa que puede resolver el problema usando solo un archivo JavaScript para controlar todo su sitio web. Pero recuerda que el tamaño de los archivos también afecta el tiempo de carga. En los sitios web complejos, ese archivo puede llegar a ser increíblemente grande.

Si bien no existe una cifra ideal de archivos que tu página web debería tener, Jeffrey Vocell, mánager de marketing de productos principal de HubSpot, sugiere que el número debe oscilar entre los 10 y los 30. Para la mayoría de los sitios web que tienen mejor rendimiento es difícil respetar este margen, ya que por lo general necesitan recursos de ingeniería específicos. Steve Souders, experto en rendimiento web que trabajó anteriormente en Yahoo! y Google, publicó el año pasado en Twitter que el promedio de peticiones de una página web supera las 99.

¿Cómo puedes disminuir el número de peticiones HTTP de tu sitio web?

1) Comprueba cuántas peticiones HTTP realiza tu sitio web en la actualidad.

Con el panel Network de Google Chrome, es posible revisar con facilidad el número de peticiones HTTP que recibe un sitio web. Es una manera genial de analizar el contenido de tu página web y ver qué elementos requieren más tiempo de carga.

Básicamente, te muestra todos los archivos que un navegador tuvo que solicitar y transferir para descargar la página, y también presenta una línea de tiempo que te permitirá saber cuándo ocurrió esto. Por ejemplo, la API puede indicar con precisión cuando comenzó la petición HTTP de una imagen y cuándo se recibió el último byte. Es una manera genial de analizar el contenido de tu página web y ver qué elementos requieren más tiempo de carga.

Para ver el panel Network de una página web específica, abre la página en Google Chrome. En el menú de navegación principal de Chrome que se encuentra en la parte superior de la pantalla, visita Ver > Desarrolladores > Herramientas para Desarrolladores.

El panel Network se abrirá en tu navegador. Puesto que el panel registra todas la actividad de la red cuando las herramientas para desarrolladores están abiertas, quizá lo encuentres vacío al abrirlo por primera vez. Vuelve a cargar la página para comenzar a registrar las actividades o espera a que la actividad de la red se registre en tu aplicación.

En la siguiente imagen podrás ver un resumen de las características del panel Network:

Créditos de la imagen: Google

¿Te interesa saber cuántas peticiones requiere tu sitio web? El panel Network también puede darte esa información. Observa la parte inferior izquierda de la captura de pantalla anterior y verás el número total de peticiones. En este caso son 25.

Para aprender a interpretar el panel y evaluar el rendimiento de tu red en detalle, lee este artículo de Google Chrome.

2) Elimina las imágenes innecesarias.

Ya debes tener una mejor idea sobre qué archivos tardan más en cargar, incluyendo los archivos de imágenes. ¿Cuál es la manera más fácil de disminuir el número de peticiones de archivos? Eliminar las imágenes innecesarias.

Las imágenes son un recurso valioso en cualquier página web porque logran crear una experiencia visual intensa. Sin embargo, si las imágenes que tienes en tu página no aportan demasiado valor, lo mejor es eliminarlas por completo, en especial las que son demasiado grandes.

3) Reduce el tamaño de los archivos de las imágenes restantes.

En las imágenes que decidas mantener, usa fotos de alta calidad que tengan un tamaño de archivo comprimido. Esto te permitirá disminuir el tiempo que tarda en realizarse una petición HTTP y, en consecuencia, el tiempo de carga también será menor.

Si eres usuario de HubSpot, no tendrás que preocuparte por comprimir imágenes, ya que el Sistema de Optimización de Contenidos (COS) de HubSpot cambiará el tamaño y comprimirá tus imágenes de manera automática. De lo contrario, usa una herramienta como TinyPNG o Compressor.io para reducir el tamaño de los archivos.

4) Evalúa otras secciones de tu página que estén afectando el tiempo de carga.

Cortar y comprimir imágenes es un buen inicio para disminuir el número de peticiones HTTP y el tiempo de carga de la página. Pero, ¿qué otros elementos viste en el panel Network que estén aumentando el número de peticiones? Por ejemplo, quizá descubriste que una integración de video o de Twitter añade uno o dos segundos más al tiempo de carga de tu página web. Es útil contar con esta información, ya que junto con tu equipo pueden decidir si merece la pena conservar dichos elementos.

5) Desincroniza los elementos de Javascript.

Si tu página web tiene elementos de JavaScript sincronizados, entonces deberás acudir a tu desarrollador para que los desincronice o, de ser posible, los elimine por completo.

¿Por qué? Para mejorar la experiencia del usuario. El navegador de un usuario carga los elementos de una página web de arriba hacia abajo. Cuando llega al archivo Javascript e intenta cargarlo, si este está sincronizado entonces el navegador dejará de procesar todos los demás elementos de la página hasta cargar el archivo Javascript en su totalidad.

Si el código Javascript está desincronizado, entonces el navegador lo cargará al mismo tiempo que continúa cargando los demás elementos de la página. Desincronizar los archivos de Javascript mejora la experiencia del usuario.

Para obtener más información sobre cómo desincronizar el código de Javascript, te recomiendo echarle un vistazo a esta presentación de Steve Souders y leer esta publicación de Visual Website Optimizer.

6) Combina los archivos de CSS.

Todos los archivos de CSS que usas aumentan el número de peticiones HTTP que requiere tu sitio web, de modo que el tiempo de carga de tu página será mayor. Si bien a veces esto es inevitable, en la mayoría de los casos puedes combinar 2 o más archivos CSS. Es posible que necesites ayuda de un desarrollador.

¿Por qué? Como el código CSS puede estar en cualquier lugar de tu sitio web o en cualquier número de archivos, funcionará de la misma manera. De hecho, por lo general la única razón por la que un sitio web tiene varios archivos de CSS es que al diseñador le pareció más fácil trabajar con archivos separados. Para obtener información más detallada sobre cómo combinar archivos CSS, échale un vistazo a esta guía sobre el rendimiento de front-end de un sitio web.

Si quieres obtener un informe más detallado sobre el rendimiento general de tu sitio web, échale un vistazo a la herramienta Website Grader de HubSpot. Recibirás un informe gratuito y personalizado que calificará tu sitio web en función de métricas clave, como el rendimiento, la optimización para dispositivos móviles, el SEO y la seguridad.