Cómo hacer menos solicitudes HTTP en WordPress
Publicado: 2022-11-17
Los sitios web que realizan más solicitudes HTTP tienden a cargar más lentamente. Optimizar su servidor para hacer menos solicitudes HTTP mejorará el rendimiento de su sitio web y la velocidad de carga general.
En esta guía, aprenderá cómo optimizar su sitio web para realizar menos solicitudes HTTP . Antes de eso, expliquemos qué significan las solicitudes HTTP y por qué debería reducir la cantidad de solicitudes que procesa su servidor.
Contenido:
- ¿Qué son las solicitudes HTTP?
- Beneficios de reducir las solicitudes HTTP
- Cómo analizar las solicitudes HTTP de su sitio
- Consejos para hacer menos solicitudes HTTP en WordPress
- Conclusión
¿Qué son las solicitudes HTTP?
HTTP es la abreviatura de Protocolo de transferencia de hipertexto. Es cómo los servidores se comunican entre sí (es decir, el navegador y el servidor web).
Un sitio web contiene varios elementos, como archivos de imagen, JavaScript y archivos CSS. Estos archivos funcionan juntos para garantizar que el sitio web se muestre correctamente. Si uno de los elementos no se carga correctamente, afectará el diseño y la funcionalidad del sitio web.
Para cargar una página, el navegador web tiene que descargar todos los archivos del servidor web. Para que esto suceda, el navegador debe realizar solicitudes HTTP al servidor.
El servidor se encarga de recuperar la página solicitada. Entonces, si es necesario cargar 40 archivos, el servidor realizará 40 solicitudes HTTP separadas.
Cuantos más archivos tenga en su sitio web, más solicitudes HTTP tendrá que realizar su servidor.
Beneficios de reducir las solicitudes HTTP
Debe realizar menos solicitudes en su servidor porque reduce el tiempo de respuesta del servidor. Si el servidor tiene que hacer muchas solicitudes HTTP, ralentizará su sitio web.
La configuración predeterminada de la mayoría de los sitios web requiere que el servidor descargue todos los archivos necesarios antes de mostrarlos en el navegador web del usuario.
Algunas solicitudes son de naturaleza "bloqueadora". Esto significa que otras solicitudes no se ejecutarán hasta que se haya completado la solicitud de bloqueo.
Un sitio web lento afecta la experiencia del usuario, lo que puede conducir a una alta tasa de rebote en su sitio web. Además, cuando su tasa de rebote es alta, afectará la clasificación de su sitio en los motores de búsqueda. Por este motivo, debe optimizar la velocidad de su sitio web realizando menos solicitudes HTTP.
Antes de continuar, debe comprender una regla general. Si tiene más archivos en su servidor que deben cargarse, se generarán más solicitudes HTTP. Además, si tiene archivos grandes en su servidor, el tiempo de respuesta será mayor.
Para realizar menos solicitudes HTTP en los sitios de WordPress, debe reducir la cantidad de archivos que procesa el servidor. Pero eso por sí solo puede no optimizar completamente la velocidad de su sitio web. También necesita reducir el tamaño del archivo en su servidor para que pueda procesar las solicitudes a tiempo.
Cómo analizar las solicitudes HTTP de su sitio
Ahora sabe qué son las solicitudes HTTP y los beneficios de reducir la cantidad de solicitudes que procesa su servidor.
Antes de continuar, deberá probar su sitio web para conocer la cantidad de solicitudes que genera actualmente. Saber esto de antemano le permitirá saber si los consejos que aplicará de esta guía tienen un buen impacto en la cantidad de solicitudes que realiza su sitio.
Hay muchas herramientas en línea para probar solicitudes HTTP. Las herramientas de prueba de velocidad GTmetrix y Pingdom pueden analizar los tiempos de carga de su sitio web. Algunas de estas herramientas de prueba también pueden resaltar los archivos que se cargan más lentamente y sugerir posibles soluciones.
Para este ejemplo, utilizaremos la herramienta GTmetrix para analizar un sitio web de prueba. Para comenzar, diríjase al sitio web de GTmetrix e ingrese la dirección de su sitio web. Después de eso, haga clic en Analizar .
La herramienta analizará el rendimiento de su sitio web, incluido el tiempo hasta el primer byte y la velocidad de carga general.
Desplácese hacia abajo hasta la sección "Principales problemas". Verá problemas que afectan el rendimiento de su sitio web y la velocidad de carga. Desde aquí, también puede ver posibles soluciones a los problemas.
Si se desplaza hacia abajo hasta la sección "Detalles de la página", verá la velocidad de carga general de la página y el número total de solicitudes. El sitio web de este ejemplo realiza unas 57 solicitudes al cargar la página. Podemos reducir el número de solicitudes para mejorar el rendimiento del sitio web.
Puede acceder a un informe detallado sobre solicitudes individuales desde la pestaña Cascada .
Aquí podrás ver en detalle el tiempo que tarda en procesarse cada solicitud.
En la siguiente sección, compartiremos consejos sobre cómo hacer menos solicitudes. Después de implementar los consejos, volveremos a analizar este sitio de muestra para ver la mejora que hemos logrado. Empecemos.
Consejos para hacer menos solicitudes HTTP en WordPress
Ahora ya sabe qué son las solicitudes HTTP y cómo analizar la cantidad de solicitudes que realiza su servidor. A continuación, le mostraremos 10 formas de optimizar su sitio web y reducir el tiempo de respuesta del servidor.
- Instalar un complemento de almacenamiento en caché de WordPress
- Minificar archivos CSS y JavaScript
- Combinar recursos CSS y JavaScript
- Optimice sus imágenes (elimine las imágenes innecesarias)
- Habilitar carga diferida
- Usar un CDN
- Reemplace los complementos pesados con otros más ligeros
- Eliminar complementos y temas no utilizados
- Reducir scripts de terceros
- Aplazar JavaScript de bloqueo de procesamiento
Instalar un complemento de almacenamiento en caché de WordPress
Antes de comenzar con las optimizaciones, deberá instalar un complemento de almacenamiento en caché en su sitio web. Con un complemento de almacenamiento en caché, puede implementar la mayoría de los consejos que compartimos en esta guía.
Hay muchos complementos gratuitos y premium disponibles. Los complementos premium como WP Rocket optimizan algunas partes de su sitio web de forma predeterminada. Sin embargo, es una opción premium y no está disponible para principiantes en línea.
Usaremos un complemento gratuito que se acerca mucho en términos de funcionalidad y características. Para seguir los pasos de esta guía, debe instalar el complemento LiteSpeed Cache en su sitio web.
Para esto, inicie sesión en su panel de administración de WordPress y luego vaya a Complementos >> Agregar nuevo . En el cuadro de búsqueda, ingrese 'litespeed cache'.
A continuación, deberá hacer clic en el botón Instalar ahora para comenzar la instalación.
Una vez finalizada la instalación, el botón cambia a "Activar". Haga clic en este botón para activar el complemento.
Minificar archivos CSS y JavaScript
Los archivos CSS y JavaScript son esenciales para embellecer su página web y hacerla interactiva. Sin embargo, estos archivos suelen ser grandes y pueden aumentar el tiempo que tarda su servidor en procesar las solicitudes.
Ofrecer una versión minimizada de los recursos de su sitio reduce en gran medida el tamaño de los archivos. Algunos temas y complementos ya usan scripts minimizados. Pero aún debe habilitar esta opción para optimizar aún más los recursos de su sitio.
Para comenzar, vaya a LiteSpeed Cache >> Optimización de página . Deberá habilitar la opción Minimizar CSS en la pestaña 'Configuración de CSS'.
Además, haga clic en la pestaña Configuración de JS y habilite la opción JS Minify .
Combinar recursos de JavaScript y CSS
Los temas y complementos de WordPress tienen su propia hoja de estilo CSS y archivos JavaScript. Cada vez que carga una página, su servidor tiene que descargar todos los archivos individualmente antes de mostrar la página al usuario.
La cantidad de solicitudes HTTP que su sitio necesita para aumentar a medida que continúa instalando complementos en su sitio web. Para resolver este problema, debe combinar todos los archivos CSS y JavaScript para que su servidor combine varias solicitudes.
En la configuración de optimización de la página de LiteSpeed Cache, vaya a la pestaña Configuración de CSS y habilite la opción que dice "Combinar CSS".
Del mismo modo, vaya a la pestaña Configuración de JS y habilite la opción Combinar de JS .
Nota: Verá una advertencia que dice; “Esta opción puede generar un error de JS o un problema de diseño en las páginas de frontend con ciertos temas/complementos. El error JS se puede encontrar desde la consola del desarrollador del navegador haciendo clic con el botón derecho y eligiendo Inspeccionar . ”
Básicamente, significa que la combinación de archivos JS puede causar problemas de compatibilidad con algunos de sus complementos. Por lo tanto, le recomendamos que visite la interfaz de su sitio web después de guardar los cambios para probar si todo funciona como debería. De lo contrario, puede deshabilitar esta opción y pasar al siguiente consejo de optimización.
Optimizar imágenes (eliminar imágenes innecesarias)
Los archivos multimedia, como imágenes y videos, hacen que los sitios web sean visualmente atractivos. Sin embargo, si no optimiza sus archivos multimedia, afectará su experiencia de usuario.
Cargar imágenes de alta resolución significa que requerirán más espacio de almacenamiento. Y cuando el servidor necesite realizar una solicitud, el tiempo de carga será prolongado. Aquí hay un ejemplo de eso de probar el sitio web de muestra con la herramienta PageSpeed Insights.
Recomendamos comprimir los archivos multimedia para optimizar sus imágenes antes de subirlas a su sitio de WordPress. Herramientas como Compressor.io pueden ser útiles para comprimir archivos de imagen.
También puede usar un complemento de optimización de imágenes para comprimir las imágenes existentes en su sitio web. Para esto, recomendamos usar el complemento Smush.
Después de instalar y activar el complemento en su sitio web, deberá acceder a la página de configuración del complemento a través de Smush >> Bulk Smush . Verá la cantidad de imágenes que deben comprimirse en la sección "Bulk Smush".
Para comenzar a optimizar sus imágenes, deberá hacer clic en el botón Bulk Smush Now .
El complemento puede tardar un tiempo en completar el proceso. Una vez completado, el complemento optimizará las imágenes grandes, reduciendo el tamaño de sus archivos.
El complemento también mostrará la cantidad de espacio de almacenamiento que ha ahorrado al optimizar sus imágenes.
Eliminación de imágenes no utilizadas
Si tiene archivos multimedia que ya no usa en su sitio web, debe eliminarlos de su sitio. Para eliminar una imagen de su sitio, vaya a Medios >> Biblioteca .
A continuación, busque la imagen que desea eliminar, desplace el cursor sobre la imagen y seleccione Eliminar permanentemente .
Habilite la carga diferida para hacer menos solicitudes HTTP
La carga diferida es una técnica que permite que las imágenes web se carguen solo cuando la imagen está en la ventana gráfica del usuario. Esto significa que su servidor cargará otros recursos esenciales y retrasará la carga de imágenes hasta que se necesiten.
Usaremos el complemento Smush para implementar la carga diferida. Para comenzar, vaya a Smush >> Lazy Load , luego haga clic en el botón Activar para habilitar la carga diferida en su sitio web.
Usaremos las opciones predeterminadas seleccionadas por el complemento.
Desplácese hacia abajo y haga clic en Guardar cambios para actualizar sus cambios.
Use un CDN para reducir las solicitudes HTTP
CDN es la abreviatura de Red de entrega de contenido. Es una herramienta de rendimiento web que sirve como intermediario entre su servidor y el navegador del usuario.
Mejoran el rendimiento de su sitio web al ofrecer a los usuarios una versión en caché de su sitio en función de su ubicación.
Además, las CDN pueden procesar solicitudes más rápido gracias a sus múltiples servidores. El navegador del usuario responde más rápido cuando está cerca del servidor.
Hay muchos proveedores de CDN disponibles, como MaxCDN y Cloudflare. Algunos de ellos ofrecen servicios gratuitos para principiantes en línea.
Puede consultar nuestro tutorial para aprender a configurar Cloudflare en WordPress . La guía también explica cómo obtener y configurar SSL gratis usando Cloudflare.
Reemplace complementos pesados con versiones más ligeras
Si usa un complemento que requiere muchos recursos para funcionar, afectará el rendimiento de su sitio web.
Probamos el mismo sitio web para Core Web Vitals utilizando la herramienta PageSpeed de Google. Aquí está la sugerencia de Google.
Google sugiere usar un tema optimizado y complementos para reducir el tiempo de respuesta inicial del servidor.
La mejor manera de resolver esto es buscar un complemento alternativo con un diseño liviano.
Sin embargo, si reemplazar el complemento afectará funciones importantes en su sitio web, continúe usando el complemento y comuníquese con los desarrolladores del complemento para informarles sobre el problema de rendimiento.
Eliminar complementos y temas no utilizados
Aunque están inactivos, algunos de los recursos de los temas y complementos que no está utilizando activamente aún se cargan cuando un usuario visita su sitio web.
Lo ideal es que no dejes archivos inactivos en tu sitio. Además de aumentar las solicitudes HTTP, a menudo ocupan espacio en el servidor y esto puede afectar el tiempo de carga de su sitio web.
Para eliminar un complemento, inicie sesión en su panel de WordPress y luego vaya a Complementos >> Complementos instalados . A continuación, haga clic en la pestaña Inactivo .
Después de eso, haga clic en Eliminar debajo del complemento inactivo para eliminarlo de su sitio web.
Siga el mismo proceso para eliminar otros complementos no utilizados de su sitio web.
Para eliminar un tema de su sitio web, vaya a Apariencia >> Temas para abrir la página de temas. A continuación, desplace el cursor sobre el tema inactivo y seleccione Detalles del tema .
En la página siguiente, haga clic en Eliminar, ubicado en la parte inferior de la página.
Repita el mismo proceso para otros temas inactivos en su tablero.
Reducir scripts de terceros
Las secuencias de comandos de terceros son fragmentos de código que agrega a la etiqueta <head> de su tema para importar funciones desde una secuencia de comandos externa a su sitio web. Estos pueden incluir scripts de Google Analytics, Google Font, Facebook Pixel o redes publicitarias de terceros.
Si los scripts de terceros son pesados, aumentará la cantidad de solicitudes HTTP y el tiempo de carga de su sitio web.
Supongamos que agregó un script a su sitio web para verificar la propiedad del dominio en un servicio web. Una vez que se completa la verificación, debe eliminar estos scripts si no son esenciales para el rendimiento de su sitio web.
Sin embargo, algunos scripts de terceros son cruciales para el rendimiento de su sitio web. La eliminación de estos scripts puede afectar el diseño o la funcionalidad de su sitio web.
Si los scripts son necesarios, hay 2 formas de manejarlos. Puede diferir los recursos de bloqueo de procesamiento o cargar scripts de forma externa mediante Google Tag Manager.
Google Tag Manager proporciona un espacio de almacenamiento para alojar recursos de terceros en lugar de agregarlos directamente a su sitio web. Solo necesita agregar el código de Google Tag Manager a su sitio web.
Después de agregar el código, podrá agregar otros scripts a su cuenta de Google Tag y funcionará perfectamente en su sitio web.
Explicaremos más sobre el aplazamiento de JS en la siguiente sección.
Aplazar secuencias de comandos de bloqueo de procesamiento
Los scripts de bloqueo de procesamiento son recursos como código JavaScript y CSS que evitan que las páginas web se carguen rápidamente. Estos scripts contienen archivos grandes y el servidor debe esperar a que se carguen antes de mostrar la página web.
Una forma de evitar esto es diferir la carga del script en la primera solicitud. El aplazamiento es similar a las imágenes de carga diferida.
Cuando retrasa los scripts de bloqueo de procesamiento, su servidor solo cargará los recursos cuando el usuario comience a interactuar en la página. Esto reducirá la cantidad de solicitudes que realiza su servidor para cargar una página web.
El complemento LiteSpeed Cache tiene esta característica. Para habilitarlo, vaya a LiteSpeed Cache >> Optimización de página . Después de eso, haga clic en la pestaña Configuración de JS y desplácese hacia abajo hasta la sección "Cargar JS diferido".
Recomendamos elegir la opción Retrasado . Esta opción cargará los recursos de bloqueo de procesamiento tan pronto como el usuario comience a desplazarse. De esa manera no afecta el tiempo de carga de la página inicial.
Nota: Verá una advertencia que dice; "Esta opción puede generar un error de JS o un problema de diseño en las páginas frontales con ciertos temas/complementos".
Recomendamos visitar la interfaz de su sitio web después de guardar los cambios para ver si afecta el diseño de su sitio. Si esta configuración es incompatible con su tema, le recomendamos que la desactive, para que no afecte la experiencia de su usuario.
Después de implementar los consejos de esta guía, analice su sitio web nuevamente utilizando la herramienta GTmetrix para ver la cantidad de solicitudes que realiza su servidor. Aquí está el resultado de probar el mismo sitio web con GTmetrix.
Hemos reducido el tamaño de la página y la cantidad total de solicitudes HTTP de 57 a 15. Eso es aproximadamente una disminución del 73 % en la cantidad de solicitudes.
Conclusión
Pequeños cambios en su sitio web pueden tener un gran impacto en la velocidad general de su sitio web. Si los usuarios pasan menos tiempo esperando que se cargue su contenido, se quedarán más tiempo.
En esta guía, explicamos cómo funcionan las solicitudes HTTP y por qué necesita optimizar su sitio web para hacer menos solicitudes. Luego compartimos 10 formas de reducir la cantidad de solicitudes que procesa su servidor.
Hacer menos solicitudes HTTP es una forma de acelerar su sitio. Para obtener más información, consulte nuestra guía de optimización de velocidad de WordPress.