Cómo hacer menos solicitudes HTTP en WordPress (11 consejos)

Para mostrar su sitio web, el navegador de un usuario enviará solicitudes HTTP a su servidor. Sin embargo, si tiene varios archivos sin optimizar, el servidor debe procesar muchas solicitudes. Dado que estos pueden aumentar significativamente los tiempos de carga de su página, querrá que su sitio web realice menos solicitudes HTTP.

Afortunadamente, es posible reducirlos, que es de lo que trata esta publicación.

Una introducción a las solicitudes HTTP

Cada vez que un usuario visita su sitio web, su navegador tiene que descargar recursos de su servidor. Para comunicarse con él, el navegador envía solicitudes con HTTP (Protocolo de transferencia de hipertexto).

Los sitios web comprenden diferentes formas de datos, y los archivos para HTML, CSS, imágenes y videos se almacenan en un servidor; la representación de este contenido en un navegador requiere solicitudes HTTP.

Estos son los pasos necesarios cuando alguien navega por Internet:

Es importante tener en cuenta que representar un sitio web no requiere solo una solicitud HTTP. Cada archivo de imagen individual, hoja de estilo de complemento, secuencia de comandos de JavaScript, fuente web, etc., generalmente tendrá su propio archivo. Por lo tanto, si su sitio no está optimizado, podría afectar negativamente los tiempos de carga.

Por qué es posible que desee que su sitio de WordPress realice menos solicitudes HTTP

A medida que crea un sitio web, es importante minimizar los archivos innecesarios. Entonces, el navegador de un visitante no tiene que solicitar tantos recursos del servidor. Dado que su sitio hará menos solicitudes HTTP, se cargará mucho más rápido.

Como regla general, una mayor cantidad de solicitudes HTTP conduce a velocidades de página más lentas. Si hay más recursos para descargar antes de renderizar la página, los usuarios tendrán que esperar mucho tiempo para ver el contenido.

Por ejemplo, un sitio web con solo 50 solicitudes generalmente se cargará más rápido que uno con 70 solicitudes. Esto se debe a que hay menos recursos para procesar y descargar.

La historia real es un poco más compleja, ya que no todas las solicitudes HTTP se crean de la misma manera. Una solicitud HTTP grande y de carga lenta podría tener un efecto mayor que cinco solicitudes HTTP pequeñas de carga rápida. Pero como regla general, menos solicitudes HTTP = sitio web de carga más rápida .

Al reducir las solicitudes HTTP en su sitio web, mejorará su Core Web Vitals, especialmente su puntaje de pintura de contenido más grande (LCP). A su vez, esto puede mejorar la experiencia del usuario (UX) ya que los visitantes verán el contenido más rápidamente.

Cómo probar las solicitudes HTTP de su sitio web

Como mencionamos anteriormente, las solicitudes HTTP son parte de la representación. Sin embargo, no todas las solicitudes HTTP son iguales. Antes de comenzar a reducirlos en su sitio web, deberá saber exactamente a cuáles dirigirse.

Para hacer esto, puede usar una herramienta de análisis de rendimiento como GTmetrix. Comience ingresando la URL de su sitio web y presione Probar su sitio :

Recibirá un informe de rendimiento que contiene información sobre el tamaño de su página y el número total de solicitudes. Para ver estos datos, desplácese hacia abajo hasta Detalles de la página :

También puede ver solicitudes individuales haciendo clic en la pestaña Cascada . Esto le mostrará cuánto tiempo tardó en descargarse cada archivo:

Con este gráfico de cascada, puede identificar qué elementos de su sitio generan solicitudes HTTP innecesarias. Una vez que encuentre el problema, puede implementar la solución correcta y acelerar su sitio web.

Como puede ver en el gráfico anterior, cada solicitud HTTP tiene un tamaño diferente y tarda una cantidad diferente de tiempo en cargarse.

Si desea obtener el mayor rendimiento de sus esfuerzos, intente concentrarse en eliminar las solicitudes HTTP más grandes y lentas.

También debe concentrarse en eliminar las solicitudes HTTP de terceros ( recursos que su sitio carga desde el servidor de otra persona, como los scripts de Google Analytics ). Estas solicitudes de terceros requieren búsquedas de DNS adicionales y tienen otras desventajas de rendimiento.

Cómo hacer menos solicitudes HTTP en WordPress y acelerar tu sitio (11 consejos)

Una vez que haya probado su sitio web, es hora de reducir sus solicitudes HTTP.

A continuación, repasaremos 11 formas diferentes de realizar menos solicitudes HTTP y optimizar las solicitudes HTTP restantes. Algunos de estos consejos no eliminarán necesariamente las solicitudes HTTP, pero optimizarán las solicitudes para que se carguen más rápido, lo que sigue siendo importante para acelerar su sitio.

1. ELIMINAR COMPLEMENTOS INNECESARIOS
2. APLAZAR JAVASCRIPT DE BLOQUEO DE RENDER Y/O RETRASAR LA EJECUCIÓN DE JAVASCRIPT
3. CARGAR GUIONES CONDICIONALMENTE
4. MINIMIZAR LAS SOLICITUDES DE TERCEROS
5. OPTIMIZA TUS IMÁGENES
6. IMPLEMENTAR LAZY LOADING
7. UTILICE UNA PILA DE FUENTES DEL SISTEMA
8. COMBINA CSS Y JAVASCRIPT
9. UTILIZAR SPRITES CSS PARA COMBINAR IMÁGENES
10. MINIFICE EL CÓDIGO DE SU SITIO
11. DESACTIVAR EMOJIS

1. Eliminar complementos innecesarios

Es posible que tenga varios complementos instalados en su sitio web. Incluso cuando no los esté utilizando activamente, los complementos innecesarios pueden aumentar las solicitudes HTTP y ralentizar sus páginas web.

Para analizar sus solicitudes de complementos, busque "complementos" en el informe GTmetrix Waterfall. Esto solo mostrará las solicitudes HTTP que se originan en su carpeta wp-content/plugins :

Verá qué complemento creó la solicitud al pasar el mouse sobre un resultado. Para optimizar su sitio, revise la lista y busque complementos innecesarios. Si una determinada herramienta no está contribuyendo activamente a su sitio web, considere eliminarla.

2. Aplazar JavaScript que bloquea el renderizado y/o retrasar la ejecución de JavaScript

Si desea realizar menos solicitudes HTTP y optimizar sus solicitudes HTTP, centrarse en JavaScript es otra gran táctica.

Hay dos formas principales de optimizar la carga de JavaScript de su sitio:

1. Aplazar JavaScript de bloqueo de procesamiento
2. Retrasar la ejecución de JavaScript

Aplazar JavaScript de bloqueo de procesamiento

Aplazar JavaScript que bloquea la representación no eliminará las solicitudes HTTP por sí mismo, pero se asegurará de que la carga de JavaScript de su sitio no bloquee solicitudes HTTP más importantes.

Durante el proceso de carga, un navegador puede encontrarse con un recurso que bloquea el renderizado. Estos archivos CSS o JavaScript pausan la representación hasta que se procesa el recurso. Si tiene estos archivos innecesarios, podrían alargar el tiempo para mostrar su contenido.

Agregar atributos diferidos o asíncronos a estos archivos informará al navegador para que los ejecute más tarde. Con los atributos diferidos, los scripts se descargan durante el análisis de HTML y luego se ejecutan. Los atributos asíncronos ejecutarán el script tan pronto como esté disponible.

Para implementar esto, puede usar un complemento específico de funciones como el complemento Async JavaScript gratuito.

O bien, muchos complementos generales de rendimiento/caché también ofrecen esta función, incluidos WP Rocket y FlyingPress.

También puede configurar esto manualmente en el código de su sitio, si se siente cómodo haciéndolo.

Para implementar un atributo diferido, simplemente necesitará abrir su archivo functions.php y encontrar la etiqueta <script> para el recurso. Aquí, inserte un atributo diferido:

 <script src="resource.js" defer></script>

Así es como se ve un atributo asíncrono:

 <script src="resource.js" async></script>

En general, es mejor usar atributos asíncronos. Sin embargo, deberá usar atributos diferidos cuando la secuencia de comandos se base en otra secuencia de comandos.

Retrasar la ejecución de JavaScript

Si desea realizar menos solicitudes HTTP para la carga inicial de la página, otra táctica popular es retrasar parte o la totalidad de la ejecución de JavaScript de su sitio hasta la interacción del usuario.

Cuando configure esto, su sitio esperará para cargar los archivos hasta que un usuario realice alguna interacción, como hacer clic, desplazarse, etc.

Al mover estas solicitudes HTTP a una parte posterior de la visita, puede realizar menos solicitudes HTTP para la carga inicial y acelerar en gran medida las métricas centradas en la experiencia del usuario, como la pintura más grande con contenido.

Para configurar esto, puede usar uno de estos complementos de rendimiento:

• Cohete WP
• Prensa voladora
• Materias de rendimiento

Así es como se ve en FlyingPress: puede retrasar todos sus guiones excepto los guiones seleccionados o solo retrasar los guiones seleccionados:

3. Cargar secuencias de comandos condicionalmente

Algunos complementos cargan secuencias de comandos innecesariamente en todo su sitio. Por ejemplo, un complemento solo puede manejar los formularios en su página Contáctenos pero agregar scripts a otra área. En este caso, recomendamos cargar condicionalmente los scripts del complemento.

Para cargar condicionalmente sus complementos, considere instalar una herramienta como Perfmatters. Viene con un administrador de secuencias de comandos incorporado para deshabilitar complementos o secuencias de comandos individuales en páginas o publicaciones específicas:

Para una opción gratuita, también puede considerar el complemento Asset CleanUp.

Cargue condicionalmente sus complementos y luego vuelva a ejecutar su sitio web a través de GTmetrix. Si aún nota un exceso de solicitudes HTTP, es hora de continuar con el siguiente método.

4. Minimiza las solicitudes de terceros

A medida que se carga su sitio web, es posible que el navegador de un visitante necesite extraer datos de una plataforma de terceros, lo que requiere solicitudes HTTP adicionales. Además, dado que depende de un servidor de terceros, estas solicitudes pueden ralentizar significativamente su sitio web.

Estos son algunos ejemplos de scripts de terceros:

• Vídeos de YouTube incrustados
• Scripts de seguimiento de Google Analytics
• Fuentes de Google
• Anuncios de terceros

Al igual que los recursos de bloqueo de procesamiento, puede aplicar atributos asíncronos o diferidos a los scripts de terceros.

Para servicios como Google Analytics y Google Fonts, también puede considerar alojarlos localmente usando complementos como estos:

• OMGF: aloje Google Fonts localmente.
• CAOS: aloje Google Analytics localmente.

5. Optimiza tus imágenes

Al igual que con los complementos, es importante eliminar las imágenes innecesarias de su sitio web. Dado que cada imagen requiere su propia solicitud HTTP, querrá minimizar la cantidad de fotos en su sitio.

Luego, todas sus imágenes deben optimizarse. Aunque esto no disminuirá la cantidad de solicitudes HTTP, reducirá su tamaño. Esto puede mejorar efectivamente el tiempo de carga de la página.

Uno de los mejores optimizadores de imagen es Optimole. Este complemento freemium ofrece un conjunto todo en uno de funciones de optimización de imágenes que incluyen:

• Sirviendo imágenes adaptables que están optimizadas para el dispositivo de cada usuario.
• Comprimir imágenes.
• Cambiar el tamaño de las imágenes.
• Conversión de imágenes a formatos óptimos.
• Servicio de imágenes a través de su red de entrega de contenido (CDN) integrada.

A medida que cargue nuevas imágenes, Optimole las comprimirá y cambiará su tamaño. Por lo tanto, no tendrá que preocuparse por los archivos de imágenes de gran tamaño que requieren recursos excesivos.

6. Implementar la carga diferida

También es una buena idea implementar la carga diferida. Esto evita que se carguen imágenes y videos debajo de la página hasta que un visitante se desplace hacia abajo en la página.

Esto mueve esas solicitudes HTTP a una etapa posterior de la visita del usuario, lo que le permite realizar menos solicitudes HTTP para la carga inicial y acelerar su mayor tiempo de pintura con contenido.

WordPress 5.5 agregó carga diferida incorporada para imágenes usando la carga diferida del navegador nativo.

Sin embargo, no todos los navegadores admiten la carga diferida nativa todavía. Además, el uso de un complemento de carga diferida dedicado le brinda más control sobre la funcionalidad de carga diferida en su sitio.

Por ejemplo, es posible que desee excluir las primeras imágenes de la carga diferida para evitar que afecte negativamente a los tiempos de mayor pintura con contenido.

Si usa el complemento Optimole de la sección anterior, también incluye una función integrada para cargar de forma diferida las imágenes de su sitio de manera óptima.

También puede ajustar aún más el comportamiento de carga diferida desde la configuración del complemento.

7. Usa una pila de fuentes del sistema

Puede usar una variedad de fuentes personalizadas para hacer que su sitio web sea único. Sin embargo, cada fuente nueva agregará otra solicitud HTTP a medida que se cargue su sitio.

Por esta razón, es mejor limitar la cantidad de fuentes personalizadas que usa.

Alternativamente, puede ceñirse a una pila de fuentes del sistema, que utiliza las fuentes nativas del sistema operativo de un visitante.

Ciertos temas, como Neve, GeneratePress o Astra, le permiten volver a las fuentes del sistema. Sin embargo, también puede cambiar su pila de fuentes con CSS.

8. Combina CSS y JavaScript

Otra forma de hacer menos solicitudes HTTP para archivos CSS y JavaScript es combinar archivos CSS y JavaScript separados en una sola hoja de estilo o archivo.

Con el complemento Autoptimize, podrá agregar archivos del sitio fácilmente en solo unos pocos pasos:

En Configuración > Optimización automática , habilite el complemento para optimizar el código JavaScript y CSS. Luego, marque las casillas junto a Archivos JS agregados y Archivos CSS agregados :

Esto compilará su CSS en un archivo y JavaScript en otro. En lugar de enviar muchas solicitudes de varios archivos, Autoptimize permite que su sitio realice menos solicitudes HTTP.

Nota : si bien la combinación de CSS y JavaScript es una forma segura de reducir las solicitudes HTTP, es posible que no tenga ningún impacto en el rendimiento del mundo real dependiendo de su proveedor de alojamiento web.

Si su host usa HTTP/2 o posterior (que es lo que hacen la mayoría de los hosts hoy en día), en realidad puede ser mejor no combinar archivos porque HTTP/2 admite la multiplexación (lo que significa que puede descargar varios archivos del servidor sin múltiples solicitudes del servidor).

Si no está seguro de si su host usa HTTP/2, puede comunicarse con soporte.

9. Usa sprites CSS para combinar imágenes

En un sitio típico de WordPress, cada imagen es un archivo individual. Si hay varias fotos en una página, el navegador envía varias solicitudes HTTP. Sin embargo, un sprite CSS combinará estas imágenes en un solo archivo.

La herramienta CSS Sprites es un software gratuito para crear y personalizar sprites CSS. Para comenzar, suelte sus imágenes en el cuadro de carga:

Una vez que haya generado el sprite CSS, agréguelo a la biblioteca multimedia de WordPress. Luego, puede usar el código HTML y CSS generado para colocar cada imagen en su sitio web.

10. Minifica el código de tu sitio

Minimizar los archivos de su sitio no lo ayudará a realizar menos solicitudes HTTP, pero lo ayudará a optimizar las inevitables solicitudes HTTP para el código HTML, CSS y JavaScript de su sitio.

Mientras escribe el código, puede incluir caracteres y espacios en blanco que mejoren la legibilidad. Dado que no son necesarios para procesar una solicitud, puede eliminarlos.

La forma más fácil de minimizar el código de su sitio de WordPress es con un complemento como el complemento Autoptimize que mencionamos anteriormente.

La mayoría de los complementos de almacenamiento en caché de WordPress también incluyen funciones de minificación de código, incluidos WP Rocket, FlyingPress, WP Fastest Cache y más.

O, si está utilizando la CDN de Cloudflare, también puede hacer que Cloudflare minimice su código por usted.

Una vez que haya minimizado los archivos de su sitio, las solicitudes HTTP tendrán tiempos de ejecución más rápidos. Con un código más ligero, acelerará su sitio web y minimizará las solicitudes voluminosas.

11. Deshabilitar emojis

De forma predeterminada, los emojis de WordPress agregan una solicitud HTTP adicional a su sitio. Para deshacerse de una solicitud HTTP más , puede deshabilitar los emojis de WordPress.

Para la opción más simple, puede instalar el complemento ligero Deshabilitar Emojis.

Alternativamente, puede agregar este código al archivo functions.php de su tema secundario o un complemento de administrador de código como Code Snippets:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

Después de implementar todos estos consejos, ¡debería tener un sitio con menos solicitudes HTTP!

Haz menos solicitudes HTTP en tu sitio web 🎯

Como regla general, cuantas más solicitudes HTTP tenga su sitio web, más lento se cargará. Esto puede afectar negativamente la experiencia del usuario (UX) de su sitio, lo que hace que los visitantes se vayan sin leer su contenido o comprar un producto.

Para acelerar su sitio web, desea eliminar tantas solicitudes HTTP como sea posible y optimizar las solicitudes HTTP restantes para que se carguen lo más rápido posible.

Con los consejos de esta publicación, puede realizar ambos trabajos y crear un sitio de carga rápida para sus visitantes.

👉 Sin embargo, recuerda que optimizar las solicitudes HTTP de tu sitio es solo una parte del rompecabezas de rendimiento. También necesitará un alojamiento de WordPress de calidad si desea que su sitio se cargue rápido: consulte nuestro mejor resumen de alojamiento de WordPress para ver las mejores opciones.

¿Tiene alguna pregunta sobre cómo reducir la cantidad de solicitudes HTTP en WordPress? ¡Pregúntenos en la sección de comentarios a continuación!