Cómo hacer menos solicitudes HTTP en WordPress y acelerar su sitio

¿Está experimentando un sitio de WordPress lento? Demasiadas solicitudes HTTP podrían ser la fuente del problema. Reducir el tiempo de carga de la página de su sitio al hacer menos solicitudes HTTP mejora la rapidez con la que los usuarios pueden acceder a ese contenido y afecta sus experiencias generales de navegación web. La velocidad de carga de la página es importante y afecta directamente cómo se sienten los usuarios al usar una aplicación o un sitio web.

Pero, ¿qué son las solicitudes HTTP? ¿Cuántos se deben hacer por página? ¿Con cuántas solicitudes estás lidiando actualmente? Quédese con nosotros: en este artículo, definiremos las solicitudes HTTP, explicaremos por qué son importantes, cómo medirlas y cómo mantenerlas bajas .

¿Qué son las solicitudes HTTP?

HTTP es un protocolo de comunicación utilizado para entregar contenido y datos (archivos HTML, CSS, imágenes, videos, etc.) en Internet. La World Wide Web es un lugar expansivo con mucha información alojada en servidores, ¿verdad? Si desea acceder a este contenido, su navegador necesita enviar solicitudes y recibir respuestas. Sin las solicitudes, no hay comunicación efectiva entre usted y el servidor.

Una solicitud HTTP también puede verse como una capa de comunicación entre el usuario y el servidor. El mensaje enviado por el cliente se llama HTTP (Protocolo de transferencia de hipertexto), que ayuda a estructurar los mensajes de solicitud de manera efectiva en tres partes: línea de solicitud, encabezado y cuerpo.

Como puede ver, cada vez que visita un sitio, se realizan algunas solicitudes HTTP para mostrar el contenido. En consecuencia, cuantas más solicitudes HTTP se realicen en una página, más tiempo tardará en cargarse.

Quizás se esté preguntando, ¿cuántas solicitudes HTTP son "demasiadas" solicitudes HTTP? Repasemos algunas cifras clave para que sepa dónde posicionar su sitio de WordPress:

• Rendimiento excepcional: obtener solicitudes HTTP por debajo de 25 por página
• Rendimiento saludable: mantener las solicitudes HTTP por debajo de 50 por página
• Promedio de solicitudes HTTP en la web: 70 solicitudes HTTP

Es importante mantener su sitio en buen estado porque demasiadas solicitudes HTTP lo ralentizarán. Te explicamos por qué en la siguiente sección.

Por qué debería reducir las solicitudes HTTP

Debe realizar menos solicitudes HTTP para mantener una gran velocidad y rendimiento. Yahoo dijo que "el 80% del tiempo de respuesta del usuario final se dedica al front-end". En otras palabras, su rendimiento se ve afectado principalmente por imágenes, hojas de estilo y scripts, que se procesan gracias a las solicitudes HTTP.

Son un componente clave para mostrar contenido, pero el chat entre el servidor y el usuario tarda en cargarse. Este viaje de ida y vuelta de datos se denomina tiempo de respuesta de ida y vuelta (RTT):

Otra razón para hacer menos solicitudes HTTP es mantener su Core Web Vitals saludable, especialmente su KPI de pintura de contenido más grande (LCP).

LCP determina qué tan rápido se carga la primera parte significativa del contenido. Se trata de la percepción de la velocidad por parte de los usuarios.

Tres factores afectan el puntaje LCP de su sitio de WordPress: tiempos de respuesta lentos del servidor, JavaScript y CSS que bloquean el procesamiento y tiempo lento de carga de recursos. Por lo tanto, reducir su número de solicitudes HTTP es la clave para páginas más rápidas. Cuantas menos solicitudes HTTP realice su sitio web, más rápido podrá cargar el contenido más importante (LCP) para el usuario.

Para resumir:

Y recuerde, si los usuarios pueden acceder a su contenido más rápido, aumenta las posibilidades de que permanezcan en la página e interactúen con su sitio. Interactuar también significa que podrían estar comprando tus productos… Y no solo evitas la frustración de los visitantes, sino que a Google también le encantará tu sitio.

Eso nos lleva a la siguiente pregunta crucial: ¿cuántas solicitudes HTTP está realizando su sitio de WordPress?

Cómo probar y medir las solicitudes HTTP de su sitio

Existen algunas herramientas en línea que simulan solicitudes HTTP en su sitio de WordPress, a saber:

• GTmetrix ( necesita tener una cuenta gratuita para acceder a los detalles de su página ): simplemente ingrese la URL de su sitio, ejecute la auditoría y abra la pestaña "Resumen " . Desplácese hacia abajo hasta la última sección llamada "Detalles de la página" para averiguar cuántas solicitudes está realizando su página.

La pestaña de cascada es una excelente manera de ver cuánto tiempo tardan las solicitudes HTTP individuales en su sitio:

También puede ver las solicitudes HTTP provenientes de un complemento específico, como Elementor:

• Pingdom: simplemente ingrese su URL en el cuadro para averiguar cuántas solicitudes HTTP requiere su página:

• Query Monitor: una herramienta de depuración gratuita para identificar complementos o scripts que ralentizan la carga de la página. El panel Llamadas de la API HTTP le muestra información sobre las solicitudes HTTP realizadas durante la carga de la página.

10 formas de hacer menos solicitudes HTTP a su sitio web (manualmente y con un complemento)

Menos solicitudes HTTP significan menos bytes para descargar, pero puede ser desalentador comenzar esta optimización. No te preocupes. Gracias a nuestra lista de técnicas a continuación, podrá reducir sus solicitudes HTTP. Para cada táctica, siempre daremos dos soluciones: usar un complemento de WordPress y uno manual.

1. Combina CSS y JavaScript

Impacto: Alto

Una forma sencilla de reducir las solicitudes HTTP es combinar varios archivos JS y CSS.

Con su tema y complementos de WordPress, es necesario cargar muchas hojas de estilo CSS y JS. Esto requiere que el navegador cargue todos estos recursos para mostrar páginas web, lo que significa múltiples solicitudes HTTP.

Combinando CSS y JS usando herramientas en línea:

• Minify: combina varios archivos CSS o JavaScript.
• Combinar: script PHP combinado con reescritura de URL para concatenar y comprimir archivos CSS y JavaScript.
• csscompressor.net (solo CSS): compresor de CSS en línea, rápido y de uso gratuito.
• jscompress.com (solo JS): esta herramienta de compresión de JavaScript le permite combinar archivos de JavaScript en un solo archivo.
• SmartOptimizer: una biblioteca de PHP que mejora el rendimiento de su sitio web mediante la optimización del front-end mediante técnicas de concatenación.
• CSS-JS-Booster: concatena, minimiza y gzips archivos CSS y JavaScript.
• CSS Crush: concatena y minimiza los archivos CSS.
• csscompressor.net (solo CSS): compresor de CSS en línea, de uso rápido y gratuito.
• jscompress.com (solo JS): esta herramienta de compresión de JavaScript le permite combinar archivos de JavaScript en un solo archivo.

Subiendo sus nuevos archivos CSS y JS combinados a su sitio de WordPress:

Nuestro objetivo es reunir todas las solicitudes separadas en un solo archivo.

• Simplemente copie/pegue todo su código CSS en un archivo principal y vuelva a cargar el archivo en el servidor (haga esto solo si se siente cómodo con sus archivos de WordPress)
• Si está utilizando el panel C:
  • Inicie sesión en su cPanel
  • Ve a tu 'Administrador de archivos'
  • Haga clic en la carpeta que contiene su sitio de WordPress
  • Cree una carpeta en su directorio raíz con el nuevo archivo combinado

Combinar archivos CSS y JS usando un complemento (la forma más rápida y segura):

• WP Rocket: combina archivos minimizados en un archivo por tipo de archivo (CSS o JavaScript)

• Autoptimize: te ayuda con la concatenación de tus scripts (CSS o JavaScript).

2. Combina imágenes con sprites CSS

Impacto: Alto

Los sprites CSS son una excelente manera de reducir la cantidad de solicitudes HTTP realizadas para recursos de imágenes. Todos los archivos CSS en su sitio bloquean el procesamiento, lo que significa que cuantos más archivos CSS se carguen, es más probable que esto ralentice su sitio.

Para evitar esto, debe optimizar las imágenes en su sitio y combinarlas en un solo archivo. Una vez hecho esto, es hora de inclinarse hacia la técnica de sprites CSS: use CSS para mostrar solo una parte de ese archivo de imagen donde se necesita. Esta técnica mejora el rendimiento del sitio donde se utilizan muchas imágenes, logotipos o iconos pequeños.

Puede obtener más información en nuestro artículo dedicado a combinar imágenes usando sprites CSS en WordPress.

Combinar imágenes con sprites CSS utilizando herramientas basadas en la web:

• Generador, editor y código de sprites CSS
• CSSspritestool
  • Vaya al sitio de CSSspritestool para combinar varias imágenes en una usando el generador de arrastrar y soltar.
  • Obtiene un archivo de imagen combinado, junto con un código CSS para cada imagen que cargue.
  • Cargue el archivo de imagen combinado en su sitio de WordPress
  • Agregue el código CSS a su sitio de WordPress usando el Personalizador
  • Muestra cada imagen donde quieras usando HTML

3. Optimice las imágenes (y elimine las que no son importantes)

Impacto: Alto

Si bien no existe un complemento de WordPress que le permita combinar específicamente imágenes con sprites CSS, aún puede usar algunos complementos increíbles para optimizar sus imágenes. Las imágenes son imprescindibles para la experiencia del usuario, pero aquí está el problema: ¡cada imagen en su sitio es una solicitud HTTP separada! En consecuencia, elíjalos sabiamente y considere tener solo imágenes que aporten valor a su contenido.

Optimizar imágenes significa reducir su peso sin comprometer la calidad. No tiene sentido tener una imagen clara borrosa donde ni siquiera se puede identificar el contenido, ¿verdad?

Aquí hay algunas herramientas de cambio de tamaño que puede usar:

• photoshop
• GIMP — Gratis, Windows y Mac
• IrfanView — Gratis para Windows
• Vista previa para Mac: ¡ya está instalada!

Para optimizar sus imágenes automáticamente, le recomendamos que utilice un complemento de WordPress:

• Imagify, de WP Media, la misma empresa detrás de WP Rocket. Optimice hasta 20 MB de imágenes gratis al mes.
• Optimole (optimización de imagen y carga diferida de Optimole)

Lea nuestro artículo dedicado para descubrir más complementos de optimización de imágenes.

Nota : la optimización de imágenes no reducirá directamente la cantidad de solicitudes HTTP, pero reducirá su tamaño y hará que se carguen más rápido.

4. Habilite la carga diferida en las imágenes

Impacto: Alto

Implementar la "carga diferida" significa posponer la carga de imágenes fuera de la ventana del navegador. En palabras simples, si su visitante no se desplaza completamente hacia abajo, las imágenes colocadas al final de la página ni siquiera se cargarán. Gracias al script de carga diferida, reduce la cantidad de solicitudes HTTP porque solo carga las imágenes en la mitad superior de la página.

Implementando el script de carga diferida manualmente:

Primero, debe determinar cómo cargará sus imágenes: ¿está usando la etiqueta <img> o CSS? Web.Dev explica muy bien cómo implementar el script de carga diferida para ambos métodos. También debe verificar si el elemento está en la ventana gráfica utilizando la API Intersection Observer.

Así es como puede verse la carga diferida respectivamente en una imagen y en un iframe:

<img src=”image.jpg” alt=”…” loading=”lazy”><iframe src=”video-player.html” title=”…” loading=”lazy”></iframe>

​​Usando un complemento de carga diferida para aplicar el script automáticamente:

• Lazy Load de WP Rocket (gratis): muestra el contenido solo cuando es visible para el usuario.
• WP Rocket: viene con funciones de carga diferida. Es un complemento premium que viene con muchas otras ventajas, como el almacenamiento en caché, la limpieza de su código, etc.)
• Si está buscando más complementos de carga diferida, eche un vistazo a nuestro artículo.

5. Minimice HTML, CSS y JavaScript

Impacto: Medio

Minimizar su código significa eliminar espacios en blanco, comentarios y caracteres adicionales innecesarios de un archivo para hacerlo más claro. Esta técnica se puede aplicar a archivos JavaScript, CSS y HTML. Por supuesto, se trata de limpiar el código que no es crucial para los usuarios finales.

Ejemplo de JS no minificado	Ejemplo de un JS minimizado

Minificando tu código manualmente :

Antes de editar el archivo, descargue una copia de su servidor para guardarla en su computadora para su custodia.

• Minimización de HTML: abra su hoja de códigos y elimine comentarios (<!– … –>), espacios adicionales, saltos de línea y contenido similar
• Minificación de CSS: elimine los espacios adicionales y los comentarios de los archivos CSS (/* … */) Acorte los nombres de ID, clase o variable tanto como sea posible
• Minificación de JS: elimine los comentarios de JS (//) y los espacios adicionales del código fuente. Convierta matrices en objetos siempre que sea posible, optimice sus declaraciones condicionales y encuentre respuestas a expresiones constantes básicas.

Minificando su código usando una herramienta en línea :

• Use un editor de código como Sublime text para editar el archivo
• Pegue su código en una de esas herramientas en línea: Closure Compiler, CSS nano, JS nano, UNCSS. (Tenemos una lista completa de códigos minificadores gratuitos para que los consultes).
• Reemplace su código antiguo con el nuevo código minificado y vuelva a subirlo a su sitio

Usando un complemento de WordPress para minimizar su código :

• WP Rocket: minimice su CSS y JS automáticamente. Todo lo que necesita hacer es marcar dos casillas. WP Rocket tiene una sección dedicada a la optimización de archivos.

6. Reemplace los complementos pesados ​​​​con los livianos

Impacto: Medio

Las velocidades de carga lentas de su sitio podrían ser el resultado de uno o dos complementos que están sobrecargando su sitio de WordPress con demasiadas solicitudes HTTP. Para clasificar un complemento como liviano, debe observar: la calidad y el profesionalismo del código, las características, la eficiencia con que el código las ejecuta y el tamaño del archivo.

¿Cómo marcar los complementos lentos de su sitio de WordPress?

Digamos que está dudando entre dos complementos de formularios de contacto (A y B). Utilice nuestros 5 pasos para ejecutar su diagnóstico:

1. Ejecute una prueba de rendimiento con Pingdom para comprobar su número de solicitudes HTTP: anote su puntuación
2. Active el complemento A y ejecute su prueba nuevamente; anote su puntaje
3. Desactive el complemento A e instale el complemento B para hacer la misma auditoría
4. Compare cuántas solicitudes HTTP se han agregado para cada complemento
5. ¡Elija el que tenga menos solicitudes HTTP y elimine el lento!

Usar un complemento para identificar qué complementos están ralentizando su sitio con demasiadas solicitudes HTTP:

• El complemento Query Monitor se puede usar para identificar qué complementos están dañando su sitio y ayudarlo a eliminarlos.

7. Cargue scripts solo cuando sea necesario (y solo en páginas específicas)

Impacto: Medio

Otra forma de hacer menos solicitudes HTTP es deshabilitar selectivamente scripts y complementos de páginas/publicaciones específicas que no necesitan cargarse.

Use un complemento de WordPress para cargar el script solo cuando sea necesario:

• Perfmatters : le permite deshabilitar un script en una página o publicación.

• Asset Cleanup Pro , que es un poco menos fácil de usar pero también hace el trabajo.

8. Reduzca las secuencias de comandos externas/solicitudes HTTP

Impacto: Medio

Cargar cada secuencia de comandos de terceros es una solicitud HTTP adicional que realiza el navegador, lo que ralentiza el rendimiento de la página (así es como puede reducir el impacto de las secuencias de comandos de terceros). Hacer un seguimiento de todas sus integraciones de terceros es crucial para comprender qué activos externos ralentizan la velocidad de su sitio. Hemos estado explicando cómo reducir sus solicitudes HTTP. No nos dejemos impactar por los externos, ¿no?

Demasiadas solicitudes HTTP a menudo forzarán la obtención de recursos de la red, y no queremos esto para nuestro rendimiento.

Los scripts externos provienen principalmente de etiquetas de Google Analytics, píxeles de Facebook, videos de YouTube, botones para compartir en redes sociales y etiquetas de prueba A/B. Se recomienda identificar todos los archivos que están agregando solicitudes.

Uso de herramientas para identificar los scripts externos más pesados:

• Las herramientas de rendimiento como These Chrome DevTools, PageSpeed ​​Insights y WebPageTest pueden ayudarlo a identificarlos.

Optimización de las solicitudes de terceros manualmente :

Ahora que ha identificado qué scripts externos afectan el rendimiento, puede usar el atributo asíncrono o diferido en ellos:

< guión asíncrono src= “ script.js ”> < script diferido src= “script.js”>

Si desea obtener más información sobre el uso de ambos atributos, le recomendamos leer Web.Dev, que enumera todos los pasos para cargar JS de terceros de manera eficiente.

Usando un complemento para reducir el impacto de sus scripts externos en el rendimiento:

• WP Rocket lo ayuda a reducir el impacto del código de terceros de muchas maneras:
  • Alojar archivos y etiquetas de Google Analytics localmente.
  • Precargar solicitudes de DNS, lo que significa que los archivos externos se cargarán más rápido.
  • Precargar fuentes para ayudar a los navegadores a descubrir las fuentes de Google más rápido en sus archivos CSS.

• Al diferir su JS de terceros, como anuncios y análisis, simplemente dígale a su navegador qué debe cargar primero.

Para la historia, Telegraph recientemente aplazó todos sus guiones y mejoró el tiempo de carga de anuncios en un promedio de cuatro segundos.

9. Usa un CDN

Impacto: Medio

Una red de entrega de contenido (CDN) se refiere a servidores distribuidos geográficamente que entregan contenido desde la ubicación más cercana posible. No importa dónde se encuentre un usuario, puede acceder a los contenidos de su sitio de manera rápida y eficiente. Cada solicitud HTTP realizada por ellos se atenderá desde la ubicación más cercana posible.

Los mejores CDN disponibles en el mercado:

• RocketCDN
• CDN de Cloudflare

También escribimos una guía para ayudarlo a elegir la CDN adecuada para usted.

10. Aplazar JavaScript y CSS que bloquean el renderizado

Impacto: Medio

¿Este recurso es muy útil o está bien cargarlo más tarde? La necesidad inmediata de usar el recurso determinará si el recurso bloquea el renderizado o no. Para eliminar JavaScript y CSS que bloquean el renderizado, debe usar la opción de aplazamiento o la opción asíncrona.

Eliminación manual de los recursos de bloqueo de procesamiento :

Primero, realiza una auditoría en Google PageSpeed ​​Insights y revisa tu sección de oportunidades. Si tiene una sección "Eliminar recursos que bloquean el procesamiento", entonces probablemente necesite hacer algo como en nuestro ejemplo a continuación:

Para eliminar este problema manualmente, debe usar los atributos defer y async.

Aquí hay un ejemplo del atributo defer para diferir JS:

<script defer src=”/ejemplo-js-script”></script>

Siga nuestro tutorial detallado que explica cómo eliminar los recursos que bloquean el renderizado usando ambos scripts manualmente.

Si desea algo más sencillo, simplemente use un complemento de WordPress.

Usando un complemento de WordPress para diferir JS y CSS :

• WP Rocket, que lo ayuda a diferir sus archivos JS de la manera más sencilla.   El complemento también ofrece la función "Optimizar la entrega de CSS" que constituye los recursos de bloqueo de procesamiento. También puede excluir cualquier archivo JS o CSS del aplazamiento si lo necesita.

Cómo reducir las solicitudes HTTP con un complemento

Un complemento como WP Rocket ayuda a reducir las solicitudes HTTP y acelera significativamente su sitio. Realicemos una auditoría de rendimiento de un sitio de WordPress con y sin WP Rocket. Verá después de la comparación que es uno de los mejores complementos de almacenamiento en caché para WordPress.

Usaremos GTmetrix para medir los siguientes KPI:

• Calificación general de desempeño (A a F)
• Puntuaciones de Core Web Vitals (LCP, CLS y FID) + TTI y TBT (Nota: si FID no está disponible, mediremos FCP)
• Número de solicitudes HTTP (Total de solicitudes de página)

En términos de contenido, mi sitio de WordPress contiene texto, algunos íconos de redes sociales, 8 imágenes, un video incrustado de YouTube, un mapa con un pin (de Google Maps) y 3 testimonios de clientes con sus fotos.

Escenario 1: medición del rendimiento y solicitudes HTTP: sin WP Rocket

Echemos un vistazo a los resultados de rendimiento con GTmetrix. No son muy alentadores y obtuve una "E" en mi calificación general de desempeño:

Notamos que mi página está haciendo 140 solicitudes HTTP y que el 42,9% de ellas se deben a JS. Mi página tarda 10,2 s en cargarse por completo y el tamaño de la página es de 5,11 MB.

Las principales recomendaciones de GTmetrix son las siguientes:

• Cargar JS de terceros de manera eficiente (aplazar JS, establecer conexiones tempranas a los orígenes requeridos y aplicar carga diferida en recursos de terceros incorporados)
• Elimine los recursos que bloquean el renderizado (considere entregar CSS y JS críticos en línea y posponer todos los JS/estilos no críticos. Obtenga más información sobre qué es CSS crítico en nuestro artículo)
• Optimizar mi código (combinar y minimizar JS y CSS/optimizar la entrega de CSS)
• Implementar el almacenamiento en caché de la página

¿Adivina qué? Esto es exactamente lo que WP Rocket puede hacer por su sitio de WordPress (entre otras cosas). En el escenario 2, activaremos WP Rocket y volveremos a comprobar el estado de nuestro sitio web. Vienen cosas buenas.

Escenario 2: medir el rendimiento y las solicitudes HTTP con WP Rocket

Ahora que WP Rocket está activado, ejecutemos otra auditoría de rendimiento usando la misma página.

Esta vez, los resultados son muy alentadores y pasamos de "E" a "A" con respecto a mi calificación general de desempeño:

Otro progreso impresionante es el número de mis solicitudes HTTP que se redujo de 140 a 18 tras la activación de WP Rocket (-87 %).

A nivel mundial, todos mis KPI son mejores y mi sitio web es mucho más rápido cuando uso WP Rocket:

Nuestro rendimiento ha mejorado globalmente con el complemento de caché WP Rocket activado.

WP Rocket aplicó automáticamente casi todas las técnicas enumeradas en la sección "Cómo hacer menos solicitudes HTTP a su sitio web".

Desde el tablero de WP Rocket, puede ver que mi código CSS ha sido minimizado, combinado y optimizado:

La misma optimización se ha aplicado automáticamente a mi JS:

Terminando

WP Rocket ayudó a reducir las solicitudes HTTP de mi sitio de WordPress en un 87 % . En nuestro caso de estudio, vimos que nuestras solicitudes pasaron de 140 a 18 simplemente al activar el complemento. ¡Ahorras tiempo y esfuerzo!

Sin WP Rocket	Con WP Rocket
140 solicitudes HTTP	18 solicitudes HTTP (-87%)

Para mantener un gran rendimiento de su sitio, se recomienda mantener las solicitudes HTTP por debajo de 50. ¡WP Rocket es una excelente herramienta automática para nunca superar ese número! Aumentará el rendimiento al reducir y eliminar las solicitudes HTTP innecesarias, sin necesidad de ningún conocimiento técnico de su parte.

¡Trabaja menos y obtén mejores resultados de rendimiento gracias a WP Rocket hoy! Tenemos una garantía de devolución de dinero de 14 días: si no está satisfecho, le reembolsamos. Vamos, pruébalo y cuéntanos cómo van tus solicitudes HTTP en los comentarios.