Cuantas más solicitudes HTTP tenga tu sitio, más lento se cargará. Por lo tanto, si puedes reducir el número de solicitudes HTTP y optimizar la forma en que se cargan, puedes mejorar el rendimiento de tu sitio web.
En este post, te guiaremos a través de todo lo que necesitas saber sobre cómo hacer menos solicitudes HTTP en WordPress.
Empezaremos con una introducción básica a las solicitudes HTTP, por qué son importantes y cómo analizar las solicitudes de tu sitio de WordPress.
A continuación, compartiremos algunos consejos y estrategias que puedes implementar para reducir las solicitudes de tu sitio. Además de ayudarte con el mensaje «Realiza menos solicitudes HTTP» en GTmetrix, estas estrategias también te ayudarán con el mensaje «Evita encadenar solicitudes críticas» en Google PageSpeed Insights.
¿Prefieres ver la versión en vídeo?
¿Qué Son las Solicitudes HTTP?
Cuando construyes un sitio web, tiene muchas partes diferentes. Tienes los diferentes archivos de imagen que usas en una página, las hojas de CSS que controlan cómo se ve el contenido, los archivos JavaScript que agregan toda esa genial funcionalidad, y así sucesivamente.
Cuando alguien visita tu sitio web, su navegador necesita una forma de descargar todos los recursos necesarios para esa página de tu servidor. Para ello, hace solicitudes HTTP al servidor para cada recurso individual.
Por ejemplo, podría decir, «hey servidor, necesito ese archivo coolimage.png» y «hey servidor, también necesito la hoja de estilos CSS para ese plugin de formulario de contacto«. El servidor entonces responde a esas solicitudes con los archivos en cuestión.
Una vez que el navegador web obtiene esos archivos, puede montar la página web de tu visitante. Por supuesto, es un poco más complicado que eso, pero esa es la idea básica.
HTTP, es la abreviatura de Hypertext Transfer Protocol (Protocolo de transferencia de hipertexto), es la forma en que se comunican estos ordenadores (el navegador del visitante y tu servidor web).
Una cosa importante que tienes que entender es que cada elemento separado es una solicitud HTTP independiente. Por ejemplo, si tienes cinco archivos de imagen en una página web, el navegador necesita hacer cinco solicitudes HTTP separadas, una para cada imagen.
Del mismo modo, si se utilizan cuatro plugins de WordPress y cada plugin añade su propia hoja de estilo CSS, el navegador del visitante tendrá que hacer cuatro solicitudes HTTP separadas, una para la hoja de estilo de cada plugin.
¿Por Qué es Importante Reducir las Solicitudes de HTTP?
En general, cuantas más solicitudes HTTP tenga tu sitio web, más lento se cargará. Por lo tanto, si quieres que tu sitio web se cargue más rápido, necesitas optimizar y reducir el número de solicitudes HTTP que tu sitio requiere.
Aunque esto es una simplificación excesiva, la idea básica es que el navegador web solo mostrará el sitio web a tu visitante una vez que haya terminado de descargar todas las solicitudes HTTP (aunque hay algunas tácticas para indicarle al navegador que está bien esperar por ciertos archivos).
Así que si un sitio web tiene que hacer 70 solicitudes HTTP antes de poder mostrar la página, eso va a tomar más tiempo que si tiene que hacer 40 solicitudes HTTP.
Además, algunas solicitudes HTTP «bloquearán» otras solicitudes HTTP, lo que significa que el navegador no puede empezar a descargar ciertas solicitudes HTTP hasta que termine de descargar las solicitudes HTTP anteriores.
La conclusión es: cuando haces menos solicitudes HTTP, haces que tu sitio web se cargue más rápidamente.
Cómo Ver y Analizar las Solicitudes HTTP de Tu Sitio
En la parte anterior, aprendiste que, si todas las cosas siguen iguales, reducir el número de peticiones HTTP acelerará tu sitio. Sin embargo, las solicitudes HTTP no siempre son «iguales». Algunas solicitudes HTTP son más grandes que otras. Algunas son más lentas que otras.
Por ejemplo, la solicitud de un enorme archivo de imagen de 3 MB llevará mucho más tiempo que la solicitud de una diminuta imagen de 20 KB.
Si quieres efectuar la máxima mejora en tu sitio, centrándote primero en las solicitudes HTTP grandes y de carga lenta tendrás el mayor retorno de tu inversión.
Para analizar las solicitudes HTTP de tu sitio, puedes usar algo llamado Análisis de Cascada (Waterfall analysis).
La mayoría de las herramientas de prueba de velocidad ofrecen esto, pero las interfaces de GTMetrix y Pingdom son muy prácticas. También puedes usar las herramientas de desarrollo de tu navegador. Sin embargo, usaremos GTmetrix para nuestras capturas de pantalla.
Una vez que conectes tu URL, verás un cuadro con un resumen básico en la parte superior. Esto te muestra cuántas solicitudes HTTP tiene tu sitio, pero no desglosa las solicitudes individuales:
Para analizar tus solicitudes individuales, ve a la pestaña Waterfall abajo.
Aquí, verás una lista de cada solicitud HTTP individual en tu sitio junto con información sobre el tiempo que esa solicitud HTTP tardó en descargarse:
Puedes ver como no todas las solicitudes HTTP son iguales. Por ejemplo, la imagen de 839,3 KB tarda 1,12s mientras que la imagen de 57,6 KB tardó solo 87,5 ms:
También puedes encontrar solicitudes HTTP de los diferentes plugins de WordPress que estás usando buscando el nombre de la carpeta de ese plugin en tu servidor. Por ejemplo, puedes ver que WooCommerce añade siete de sus propias solicitudes HTTP:
De esta manera, puedes ver si algún plugin que utilizas está añadiendo muchas solicitudes HTTP (especialmente solicitudes de carga lenta).
Cómo Optimizar y Hacer Menos Solicitudes HTTP en WordPress
A un alto nivel, hay dos amplias estrategias para hacer menos solicitudes HTTP:
- Eliminar las solicitudes HTTP. Si es posible, deberías eliminar completamente todas las solicitudes HTTP innecesarias. Por ejemplo, si tienes un plugin que no añade ningún valor a tu sitio y que está cargando su propio CSS y JavaScript, elimina completamente ese plugin para deshacerte de todas sus solicitudes HTTP.
- Combina las solicitudes HTTP. Si tienes solicitudes HTTP que debes cargar, puedes combinarlas en un solo archivo. Por ejemplo, en lugar de seis pequeños archivos CSS, puedes combinarlos en un único archivo CSS más grande, que se cargará más rápido porque el navegador necesita hacer menos solicitudes (esto no siempre es así con HTTP/2, asunto que trataremos más adelante).
Empezaremos con las tácticas que se centran en la eliminación de las solicitudes HTTP y luego veremos cómo combinar las solicitudes HTTP restantes. La idea principal es eliminar todo lo que se pueda y luego combinar lo que quede.
1. Elimina los plugins innecesarios de WordPress
Para empezar, querrás usar el análisis de cascada para obtener todas las solicitudes de tus plugins. Puedes hacer esto buscando «plugins», que mostrará todas las solicitudes HTTP originadas en la carpeta wp-content/plugins.
Si pasas el cursor por encima del nombre del archivo, puedes ver de qué plugin proviene. Por ejemplo, aquí puedes ver una solicitud del plugin de slider que podrías estar usando.
Si profundizamos un poco más, veremos que Slider Revolution añade tres de sus propias solicitudes HTTP, a pesar de que esta página de prueba no contiene ningún slider:
Si estás usando Slider Revolution para un slider clave, entonces tal vez necesites conservarlo. Pero si lo instalaste para probarlo, y luego lo quitaste el slider, y ahora no lo estás usando realmente… entonces deberías eliminarlo para deshacerte de esas solicitudes HTTP.
Básicamente, tienes que repasar toda la lista y preguntarte si cada plugin está realmente añadiendo valor a tu sitio. Si un plugin no lo es (pero está agregando solicitudes HTTP), entonces será mejor que lo elimines.
2. Reemplaza los plugins pesados por otros más ligeros
Una vez que hayas eliminado los plugins innecesarios, el siguiente paso es ver si puedes reemplazar los plugins que estás usando con alternativas más livianas.
Por ejemplo, digamos que quieres añadir botones de compartición social a tu sitio. Es una buena funcionalidad, pero algunos plugins de compartición social pueden añadir muchas solicitudes HTTP.
Por ejemplo, el popular plugin AddThis añade seis de sus propias solicitudes HTTP (incluyendo algunas solicitudes externas – más sobre las solicitudes externas en un segundo):
Podrías eliminar mucha de esta grasa usando una alternativa más optimizada como NovaShare o Grow by Media Vine.
3. Carga condicionalmente los scripts que no se necesitan en todo el sitio
En este punto, deberías haber eliminado todos los plugins que no se necesitan en ninguna parte de tu sitio. Sin embargo, hay otro tipo de plugins que pueden causar problemas: los plugins que solo se necesitan en partes específicas de su sitio pero que cargan sus scripts en todas partes.
Por ejemplo, toma el popular plugin Contact Form 7. Probablemente solo necesites este plugin en un par de páginas (por ejemplo, tu página «Contáctanos»). Sin embargo, Contact Form 7 carga sus scripts en cada una de las páginas de tu sitio. Así, por ejemplo, Contact Form 7 sigue añadiendo algunas solicitudes HTTP a las entradas de tu blog aunque las entradas de tu blog no tengan formularios de contacto.
Otro ejemplo podría ser WooCommerce si solo lo usas como procesador de pagos. WooCommerce seguirá cargando sus scripts en todas partes, aunque en realidad solo los necesites en el carrito y en las páginas de pago para este caso de uso.
Una táctica avanzada aquí es cargar condicionalmente los plugins solo donde se necesitan. Por ejemplo, podrías dejar que el Formulario de Contacto 7 se cargue en tu página de «Contáctanos», pero deshabilitarlo en cualquier otro lugar.
Si no eres desarrollador, puedes usar plugins como AssetCleanUp o Perfmatters para hacerlo sin código. Con Perfmatters, primero tendrás que habilitar el administrador de scripts. Luego, puedes abrir el administrador de scripts para ver todos los scripts que se cargan en una página y desactivar los que no se necesitan:
Ten cuidado, ya que pueden causar problemas si accidentalmente deshabilitas un script que realmente es necesario. Aunque es una táctica útil, también es una táctica avanzada.
Si no te sientes seguro, tal vez quieras saltarte este paso o contratar a un desarrollador para que te ayude.
4. Elimina las imágenes innecesarias (y optimizar el resto)
Bien utilizadas, las imágenes hacen que tu sitio web sea más fácil de usar y también más atractivo. Además añaden valor a tu sitio.
Sin embargo, cada imagen en tu sitio es una solicitud HTTP separada. Así que si tienes imágenes que no añaden valor, es mejor eliminarlas para eliminar esas solicitudes HTTP.
Por ejemplo, ¿merece la pena ese divertido GIF? Puede que sí… pero también puede que no. Tienes que pensar en las ventajas y desventajas cada vez que añadas más imágenes a tu contenido.
Finalmente, asegúrate de redimensionar y comprimir el resto de las imágenes. Aunque esto no reducirá el número de solicitudes HTTP por sí mismo, reducirá el tamaño de esas solicitudes HTTP, lo que hará que se carguen más rápido.
5. Usa la carga diferida para imágenes y videos
Con la carga diferida, tu sitio esperará para cargar imágenes, videos e iframes por debajo del pliegue hasta que el usuario comience a desplazarse hacia abajo.
Debido a que estos recursos no se cargan de inmediato, no hay necesidad de hacer una solicitud HTTP para la carga de la página inicial.
A partir de WordPress 5.5, WordPress ahora incluye la carga diferida nativa de imágenes mediante el atributo de carga HTML. Para otras formas de implementar la carga diferida (incluyendo para archivos de video), puedes revisar nuestra guía completa de carga diferida de WordPress.
6. Limita el uso de fuentes personalizadas y/o usar fuentes del sistema (lo mismo para las fuentes de iconos)
Las fuentes personalizadas son ideales para mejorar el diseño y la experiencia del usuario en tu sitio. Sin embargo, debes tener cuidado con la forma en que las usas porque cada tipo de fuente personalizada que usas añade otra solicitud HTTP.
Si vas a usar fuentes personalizadas, asegúrate de que sean pocas. ¿Realmente necesitas una fuente diferente para el título y el cuerpo de tu mensaje? ¿O podrías usar la misma fuente? ¿De verdad necesitas los cinco grosores de las fuentes? ¿O podrías elegir solo dos?
Lo mismo ocurre con las fuentes de iconos como Font Awesome e IcoMoon. Las fuentes de iconos pueden ser útiles, pero probablemente no necesites cargar varias bibliotecas de fuentes de iconos. Es mejor elegir una sola biblioteca de fuentes para iconos y seguir con ella.
Por último, si quieres ir un paso más allá y eliminar completamente las solicitudes HTTP relacionadas con las fuentes de tu sitio, puedes considerar el uso de una pila de fuentes del sistema. Aunque esto te dará menos flexibilidad en términos de diseño, también significa que tus visitantes no tendrán que cargar ningún archivo de fuente solo para renderizar su sitio.
(Lectura sugerida: Cómo cambiar las fuentes en WordPress).
7. Desactiva los Emojis de WordPress
De forma predeterminada, WordPress añade su propia solicitud HTTP para los emojis. Aunque solo es una solicitud HTTP de 5,1 KB, este archivo ha sido durante mucho tiempo una espina clavada para los fanáticos del rendimiento de WordPress. Aquí en Kinsta, nos encanta el rendimiento de WordPress, por lo que tenemos una guía completa sobre cómo desactivar los emoticonos de WordPress.
La opción más simple es simplemente instalar y activar el plugin gratuito Disable Emojis (RGPD amigable). Sin embargo, puedes leer nuestra guía completa para ver otras opciones.
Después de hacer esto, el conteo de solicitudes HTTP bajará en uno y aún podrás utilizar emojis 😃
8. Reduce/elimina las solicitudes HTTP de terceros
Hasta ahora, nos hemos centrado principalmente en reducir las solicitudes HTTP de archivos en el servidor de tu sitio de WordPress. Sin embargo, los navegadores de tus visitantes también podrían necesitar solicitar archivos de servidores de terceros.
Estas solicitudes pueden ser aún más problemáticas porque tu sitio está a merced de la velocidad de esos servidores de terceros.
Algunos ejemplos:
- Google Analytics – el script de rastreo está alojado en los servidores de Google, pero los navegadores de los visitantes todavía necesitan descargar ese archivo.
- Vídeos de YouTube incrustados – verás muchas solicitudes HTTP a los servidores de YouTube.
- Servicios de anuncios de terceros: verás toneladas de solicitudes de terceros relacionadas con la publicación de tus anuncios.
- Google Fonts (en el CDN de Google): verás solicitudes de terceros a los servidores de Google para cargar tus archivos de fuentes.
Puedes aplicar muchas de las mismas tácticas anteriormente mencionadas a estas solicitudes HTTP de terceros.
Por ejemplo, si un plugin añade sus propias solicitudes de terceros (como hace el plugin AddThis de arriba), puedes eliminarlo y usar algo más optimizado.
En el caso de los vídeos de YouTube, puedes cargarlos de forma diferida y sustituir la carga de la página inicial por una imagen en miniatura. Esto retrasará la adición de esas solicitudes HTTP hasta que un visitante quiera reproducir el vídeo.
Para los scripts de terceros que sean necesarios, como Google Analytics o Facebook Pixel, puedes experimentar con el alojamiento de esos scripts localmente.
WP Rocket tiene complementos incorporados para alojar Google Analytics y Facebook Pixel localmente o puedes usar un plugin como CAOS (Complete Analytics Optimization Suite).
También tenemos algunas guías que te podrían ayudar:
9. Combina las imágenes con los Sprites CSS
En este punto, deberías haber sido capaz de hacer menos solicitudes HTTP desde tu sitio. Ahora es el momento de entrar en cómo combinar las solicitudes HTTP que quedan, empezando por las imágenes.
Otra forma de optimizar las imágenes de tu sitio es combinar imágenes separadas en un solo archivo de imagen. Luego, puedes usar CSS para mostrar solo una porción de ese archivo de imagen donde sea necesario. Esta es una táctica llamada «sprites CSS».
Los sprites CSS funcionan mejor para imágenes decorativas como variaciones de logotipos o iconos. No deberías usar los sprites CSS para imágenes informativas (como las imágenes en el cuerpo de una entrada de blog) porque hay dos grandes inconvenientes:
- SEO: como estás combinando imágenes en un solo archivo de imagen, no puedes clasificar imágenes individuales en la Búsqueda de Google.
- Accesibilidad – porque no puedes añadir texto alternativo a las imágenes, la gente con lectores de pantalla no será capaz de entender las imágenes cargadas con sprites CSS (aunque hay algunas tácticas para arreglar esto).
Si todavía estás confundido sobre este tema, aquí tienes un ejemplo del archivo de sprites CSS de Amazon – puedes ver cómo incluye un montón de variaciones de logotipos, así como algunos iconos. Amazon utiliza CSS para asegurarse de que solo la «parte» relevante de ese archivo de imagen se muestra en cada ubicación:
Desafortunadamente, no hay un plugin de WordPress para los sprites de CSS. Sin embargo, puedes encontrar herramientas de ayuda, como esta herramienta para sprites CSS:
- Sube las imágenes que quieras combinar a la herramienta.
- La herramienta te dará un archivo de imagen combinado, junto con un código CSS para cada imagen que subas.
- Sube el archivo de imagen combinado a tu sitio de WordPress.
- Usa el código CSS para mostrar la imagen en tu contenido. El CSS proporcionado seleccionará automáticamente solo la parte apropiada del archivo de imagen combinada.
10. Combina los archivos CSS y JavaScript
Entre tu tema de WordPress y tus plugins, tu sitio probablemente cargará múltiples hojas de estilo CSS y archivos de JavaScript, lo que se traduce en múltiples solicitudes HTTP solo para que el navegador descargue el CSS y el JavaScript que necesita para renderizar la página.
Para reducir todas estas solicitudes separadas, puedes combinar estos archivos/hojas de estilo separados en un solo archivo/hoja de estilo. Esto se denomina combinación de archivos o concatenación de archivos, dependiendo de la herramienta que estés utilizando.
Muchos plugins de almacenamiento en caché de WordPress incluyen características para combinar archivos CSS y JavaScript. Por ejemplo, WP Rocket, que puedes usar en Kinsta, te permite habilitar ambos con unos pocos clics.
Ve a la pestaña de Optimización de Archivos en la configuración de WP Rocket. Luego, habilita la minificación y luego combina los archivos:
Para una información más detallada, lee nuestra guía completa de WP Rocket.
También puedes usar Autoptimize para combinar archivos CSS y JavaScript. Para combinar archivos, ve a Configuración → Autoptimize y elige las opciones para:
- Agregar archivos JS
- Agregar archivos CSS
Para obtener una información más detallada, consulta nuestro tutorial completo de Autoptimize.
Los beneficios de la combinación de archivos son menos claros conHTTP/2, que es lo que utiliza tu sitio si te alojas en Kinsta. HTTP/2 está diseñado para ser más eficiente en la transferencia de múltiples archivos pequeños, lo que significa que hay menos diferencia entre un archivo CSS/JS grande y múltiples archivos pequeños.
Generalmente, si te alojas en Kinsta, no necesitarás hacer este paso para mejorar los tiempos de carga de tu página. Esto es porque los clientes de Kinsta pueden acceder a la función de minificación de código directamente en su panel de control de MyKinsta. Esto ayudará a impulsar la optimización general permitiendo a los clientes habilitar la minificación automática de CSS y JavaScript con un solo clic.
Te recomendamos que sigas probándolo, ya que puede ser beneficioso para algunos sitios, pero también es posible que no notes ninguna diferencia en los tiempos reales de carga de la página.
Sin embargo, muchas herramientas de pruebas de rendimiento como GTmetrix todavía no reconocen HTTP/2, por lo que GTmetrix podría seguir mostrando el mensaje «Realiza menos solicitudes HTTP» y reducir tu puntuación. Recuerda, sin embargo, que las puntuaciones no importan tanto como los tiempos reales de carga de la página.
11. Aplaza el bloqueo de la renderización JavaScript
Aplazar el bloqueo del renderizado de JavaScript no es eliminar las solicitudes HTTP per se. Sin embargo, optimizar la forma en que se cargan, puede tener el mismo efecto en los tiempos de carga percibidos de tu sitio.
También puede ayudar con el mensaje «Evita encadenar solicitudes críticas» en Google PageSpeed Insights/Lighthouse.
Al aplazar las solicitudes de ciertos archivos o cargarlos asincrónicamente, puedes evitar que ciertos recursos sin importancia «bloqueen» los recursos necesarios para cargar rápidamente la parte visible de tu sitio.
Para más información sobre por qué sucede esto, puedes leer nuestra guía para entender el camino crítico de la representación de una página web.
Luego, puedes seguir con nuestra guía detallada para eliminar los recursos que bloquean el renderizado en WordPress.
Los Mejores Plugins de WordPress para Hacer Menos Solicitudes HTTP
Si buscas algunos plugins de WordPress «todo en uno» para hacer menos solicitudes HTTP, te recomendamos dos de los plugins del tutorial anteriormente mencionados:
Aunque todavía tendrás que evaluar manualmente tu tema y los plugins para ver si están haciendo demasiadas solicitudes HTTP, estos dos plugins pueden ayudarte a optimizar todo lo que queda en tu sitio una vez que hayas hecho la limpieza.
Resumen
Cada recurso separado en tu sitio agrega una solicitud HTTP. Una imagen es una solicitud HTTP, una hoja de estilo CSS es una solicitud HTTP, un archivo de fuente es una solicitud HTTP, y así sucesivamente.
Si usas WordPress, tu tema seguramente añadirá sus propias solicitudes HTTP y muchos plugins también añaden sus propias solicitudes HTTP. También tendrás solicitudes HTTP de cualquier imagen que utilices y scripts de terceros que añadas (como herramientas de análisis).
Más y/o mayores solicitudes HTTP conducirán a un sitio web más lento. Es por eso que normalmente verás mensajes como «Realiza menos solicitudes HTTP» u «Optimiza las solicitudes HTTP» o «Evita encadenar solicitudes críticas» cuando uses herramientas de prueba de velocidad como GTmetrix o PageSpeed Insights.
Para reducir el número de solicitudes HTTP en tu sitio, puedes seguir los pasos que detallamos arriba.
¿Todavía tienes alguna pregunta sobre cómo hacer menos solicitudes HTTP en WordPress? ¡Háznoslo saber en los comentarios!
Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.
Deja una respuesta