Cómo reducir las solicitudes HTTP / S en WordPress

Cómo reducir las solicitudes HTTP / S en WordPress

Aquí hay una historia que te encantará si quieres acelerar tu sitio de WordPress.


El otro día construí un sitio web brillante. Hice todo lo posible y agregué WooCommerce, Google Tag Manager, OneSignal, servicio de asistencia, Yoast, radio en vivo (oh sí, lo hice), Aviso de cookies, redes sociales y un montón de otros complementos.

Al igual que usted, estaba decidido a impresionar a mis visitantes, o eso pensaba. Pero luego las cosas se volvieron insoportablemente lentas. Después de mucha angustia, encendí GTMetrix para eliminar el problema.

Para mi consternación, vi esto:

Resultados de la prueba de velocidad gtmetrix

¿Estaba impresionado? ¡Infierno a los nuevos! Quería obtener una A perfecta y reducir el tiempo de carga de la página a menos de dos segundos.

Entonces, presioné el botón de volver a probar, pero ¿adivina qué? Sigue siendo el mismo resultado repugnante. Estaba horrorizado, incluso enojado. Pero no me doy por vencido fácilmente porque ese tipo de cosas es inaceptable.

¿Sabes lo que hice después? Probé el sitio web en Pingdom porque GTMetrix puede chuparlo. Pero, a continuación se muestran los pésimos resultados, una vez más:

resultados de la prueba de velocidad de las herramientas pingdom

Estaba exasperado La espina proverbial en mi carne eran las solicitudes HTTP errantes, ya que podía solucionar muchos de los otros problemas rápidamente.

Para empeorar las cosas, estaba usando un tema de WordPress de comercio electrónico que cargaba un mil millones elementos para construir la página de inicio. En mi defensa, se veía increíble. Algunos usuarios acordaron que el diseño también estaba en su punto, así que no caí solo en el truco ��

Pero el excelente diseño visual y las bajas velocidades no van de la mano. Necesitaba una solución y rápido.

¿Cómo puedo reducir las solicitudes HTTP en mi sitio de WordPress??

Cada vez que visita un sitio web de WordPress, se mueven muchos datos entre su navegador y los servidores del sitio web. En otras palabras, WordPress realiza solicitudes HTTP a varios servidores para construir lo que los usuarios ven cuando cargan su sitio.

Si su sitio de WordPress requiere muchos elementos para cargar, tendrá más solicitudes HTTP y viceversa. Más solicitudes HTTP significan un sitio web lento, una experiencia de usuario deficiente (UX), malos puntajes de SEO y bajas tasas de conversión.

Los sitios web de WordPress suelen ser dinámicos, lo que significa que se necesitan muchas partes diferentes para representar su sitio web en un navegador. La buena noticia es que puede reducir las solicitudes HTTP y acelerar su sitio significativamente.

Y en la publicación de hoy, aprendes exactamente cómo!

Los informes de GTMetrix y Pingdom generalmente le muestran dónde radica el problema. Como tal, pruebe su sitio utilizando ambas herramientas para descubrir las áreas que debe mejorar. Con sus informes listos, aquí le mostramos cómo reducir las solicitudes HTTP / S y acelerar su sitio de WordPress.

Paso 1: ordenar

Chicos, si tienen muchas cosas en su sitio web de WordPress, tendrán demasiadas solicitudes HTTP. Es obvio. El primer paso para reducir las solicitudes HTTP es desorganizar.

Con eso, me refiero a deshacerme de todos los complementos que no necesita. Los complementos de WordPress vienen con muchos archivos, ya sea PHP, CSS o JavaScript (JS). Cada archivo que dispare cada complemento creará una solicitud HTTP.

Si tiene un montón de complementos, definitivamente tendrá más solicitudes HTTP. Cuantos menos complementos, menos solicitudes. Es simplemente simple.

Qué hacer?

Realice una auditoría de sus complementos. ¿Qué complementos debes tener para ejecutar tu sitio web? ¿Hay complementos que no necesita? ¿Tiene complementos que aprovechan los servidores de terceros? ¿Puedes prescindir de estos complementos??

Para reducir las solicitudes HTTP, desinstale todos los complementos que no necesita. Si necesita un complemento ocasionalmente, instálelo solo cuando lo necesite. Luego, desinstale el complemento.

Lo mismo ocurre con los temas y el contenido de WordPress que no usa. Limpia todas esas cosas. Elimina todo lo que no necesites; es bueno para la velocidad y seguridad de su sitio web.

Puede hacer un esfuerzo adicional y cargar complementos de forma selectiva. Por ejemplo, si solo necesita el Formulario de contacto 7 para cargar en su página de contacto, puede evitar que se carguen otros complementos en esa página específica.

Eso sería genial, ¿no estás de acuerdo? Y pensar que solo necesitas el Complemento de limpieza de activos de WordPress.

WP Asset CleanUp WordPress plugin

El complemento es fácil de usar y bastante eficiente. O como dice el desarrollador:

“Limpieza de activos” escanea su página y detecta todos los activos que se cargan. Todo lo que tiene que hacer al editar una página / publicación es solo seleccionar el CSS / JS que no es necesario cargar, de esta manera se reduce la hinchazón.

Limpia tu instalación ya hombre; deshacerse de la basura – comentarios incluidos spam. Ah, sí, elimina los enlaces rotos y optimiza tu base de datos mientras estás en ella. Estas son áreas importantes a considerar en cuanto a aumentar la velocidad de su sitio, pero estoy divagando.

Volvamos a reducir las solicitudes HTTP.

Paso 2: Optimizar imágenes

Un sitio web sin imágenes es, bueno, monótono. Dicen que una imagen dice más que mil palabras, y eso es genial. Pero cada imagen representa una solicitud HTTP. Para agregar sal a las lesiones, las imágenes son las principales entre los elementos que tardan mucho en cargar.

Aún así, no podemos ignorar el hecho de que la mayoría de los temas de WordPress (sitios de lectura) dependen de imágenes, y muchas imágenes para el caso. Entonces, a la luz de esto, ¿cómo puede reducir las solicitudes HTTP optimizando sus imágenes??

Para empezar, deshazte de todas las imágenes que no uses. Sé despiadado; deshazte de toda esa hinchazón, no la necesitas. Después de eso, comprima y optimice las imágenes para eliminar datos de archivo innecesarios.

Complemento de compresión WP

Información y descargaVer la demostración

Si bien hay una serie de complementos para elegir, realmente nos gusta WP Compress. Si bien es un servicio premium, la potente optimización automática de imágenes, la compresión sin pérdidas, el procesamiento en la nube para reducir la carga de su servidor, el soporte de imágenes WebP, el cambio de tamaño automático y más hacen que la inversión valga la pena (consulte nuestra revisión para obtener más información). Además, puedes obtener 100 imágenes gratis, por lo que al menos puedes intentarlo.

La optimización de imágenes no reduce sus solicitudes HTTP per se, pero reduce el tamaño de sus archivos de imagen, lo que se traduce en mejores velocidades de página en el futuro..

Alternativamente para reducir las solicitudes HTTP, aproveche el poder de Sprites de imagen CSS. Para los no iniciados, un sprite es una colección de imágenes puestas en un solo archivo de imagen..

Luego, utilizando trucos CSS, puede elegir qué parte de la imagen mostrar. Pero, ¿cómo reduce esto las solicitudes HTTP? Aquí hay una analogía.

Digamos que necesita cinco imágenes en su página de inicio. Para cargar su sitio, su instalación de WordPress hará cinco viajes al servidor para obtener las imágenes. Ahora, si coloca las cinco imágenes en un solo archivo de imagen (sprite), su instalación de WordPress solo hará un viaje.

¿Ves a dónde voy con esto? Cuantos menos viajes, menores son las solicitudes HTTP. La mejor parte es que no necesita sudar para crear e implementar sprites de imágenes CSS. Puedes usar una herramienta como CSS Sprite Generator. Implementar sprites de imágenes CSS es fácil, siempre que conozcas CSS.

Consejo profesional: Puede olvidarse de los sprites de imágenes CSS si su sitio web utiliza HTTP / 2 que admite la carga asíncrona de imágenes y scripts. GTMetrix no tiene en cuenta HTTP / 2 al calificar el rendimiento, así que no se preocupe si parece que sus imágenes están creando una gran cantidad de solicitudes HTTP.

Pero digo: Si los sprites de imagen CSS pueden reducir significativamente las solicitudes HTTP en su sitio, y sabe cómo implementarlo, hágalo y elimine esos segundos adicionales del tiempo de carga de su página. Si tiene o no HTTP / 2.

Después de todo, un solo archivo de imagen requiere una sola solicitud HTTP. Diez imágenes separadas necesitan 10 solicitudes HTTP, etc. Sé que entiendes la deriva.

Paso 3: combina y minimiza HTML, CSS y JavaScript

La causa principal de muchas solicitudes HTTP en mi sitio web de WordPress fueron archivos externos de CSS y JavaScript. Sí, estaba luchando con 43 scripts JS y 22 archivos CSS. Son 66 solicitudes HTTP increíbles.

De aproximadamente 130 solicitudes HTTP, las solicitudes externas de CSS y JavaScript representaron aproximadamente el 51% del problema! Eso es simplemente ridículo. Gracias, GTMetrix, golpea mi puño.

Si combino y minimizo esos 44 archivos JS y 22 CSS, puedo reducir significativamente mis solicitudes HTTP, el tamaño del sitio web y el tiempo que tarda en cargarse. Pero, ¿de qué se trata este negocio de “combinar” y “minificar”??

De acuerdo a Raelene Morey de Words by Birds (soy un gran admirador ��), la minificación es el proceso de “… eliminar los caracteres innecesarios, como comentarios, formato, espacios en blanco y nuevas líneas de archivos HTML, CSS y JavaScript que no son necesarios para código para ejecutar “.

La reducción reduce el tamaño del archivo al eliminar todos los demás caracteres para dejar solo el código. Pero si tiene más de 66 scripts externos, la minificación no hará mucho para minimizar las solicitudes HTTP. Para eso, debes combinar tus archivos CSS y JavaScript.

De nuevo, Raelene dice:

Mientras tanto, combinar archivos es como suena. Por ejemplo, si su página web carga 5 archivos CSS externos y 5 archivos JavaScript externos, combinando su CSS y JavaScript en un solo archivo separado, cada uno generaría solo 2 solicitudes en lugar de 10.

¿Lo entiendes? Estoy seguro de que sí. La combinación de archivos reduce las solicitudes HTTP. La minificación, por otro lado, reduce el tamaño del archivo. Combina los dos y matarás dos pájaros con la misma piedra..

¿Hay complementos? Sí, por supuesto!

WP Rocket WordPress Cache Plugin

Información y descargaVer la demostración

Hay un montón de complementos de WordPress para combinar y minimizar sus archivos. Un buen ejemplo es el complemento WP Rocket. Básicamente es uno de los mejores complementos de almacenamiento en caché que le ofrece funciones para combinar y minimizar archivos en unos pocos clics..

Otro popular (y gratis) es la opción Optimización automática enchufar.

Por cierto, mientras lo haces, ¿reducir la cantidad de archivos CSS externos y scripts JS? Por ejemplo, y no estamos mencionando nombres aquí, ¿realmente necesita una plataforma de comentarios de terceros? ¿Necesitas un complemento de radio en vivo??

No importa lo que diga, elimine todos los scripts y archivos externos que no necesita.

Paso 4: Ajuste los archivos CSS y JavaScript de bloqueo de procesamiento

En algunos casos, combinar archivos puede no ser una opción, especialmente para archivos y scripts de terceros que cambian con frecuencia. En tales casos, puede aplazar la carga de dichos activos. HTTP / 2 admite la carga asíncrona de archivos, lo que significa que todos los archivos se cargan simultáneamente.

Si no tiene una carga asincrónica por algún motivo (tal vez no esté utilizando HTTP / 2, o los scripts no son asincrónicos), estos archivos pueden ralentizar su sitio web significativamente.

Tenga en cuenta que sus páginas web se cargan de arriba a abajo. Si tiene CSS y JS que bloquean el procesamiento en la parte superior de su página, el navegador dejará de cargarse hasta que los archivos se hayan cargado por completo. Como tal, los usuarios verán una página en blanco hasta que se carguen los scripts, lo que lleva tiempo.

¿Cómo? Mueva todos los scripts de bloqueo de renderizado de arriba a abajo de su página web. Pero ten cuidado aquí; no necesita mover todos los scripts al final. Digo esto ya que su página puede necesitar CSS y JS para ofrecer una experiencia completamente atractiva..

Si difiere algunos archivos CSS o JavaScript, sus usuarios pueden ver una versión distorsionada de su página web hasta que la página se cargue por completo, que es exactamente lo contrario de lo que desea lograr.

Por lo tanto, solo difiere los scripts que no son necesarios para que se cargue la página. De esa forma, sus usuarios no esperarán años para que se cargue su página. ¿Por qué? Porque necesitará menos solicitudes HTTP para entregar su mensaje.

No reduce las solicitudes HTTP per se (porque todos los scripts y archivos se cargarán eventualmente), pero reduce la cantidad de solicitudes HTTP necesarias para representar su página.

Es muy parecido a la carga diferida de imágenes; la imagen solo se carga cuando está en la ventana gráfica, no cuando se carga el resto (y las partes más importantes) de la página.

Por cierto, corregir CSS y JS de bloqueo de renderizado puede revelar archivos y scripts que no necesita para crear una página web.

Por ejemplo, si un script JS externo para compartir en redes sociales tarda mucho en cargarse, puede diferirlo. Además de eso, puede eliminarlo y construir el intercambio social en su tema.

Eliminará las solicitudes HTTP y acelerará su sitio mientras conserva la misma funcionalidad. Entiendo que las funciones de codificación en su tema son difíciles para la mayoría de los principiantes, así que consulte con un usuario o desarrollador avanzado de WP.

Como alternativa, puede usar el complemento WP Rocket para reparar scripts de bloqueo de renderizado, pero tenga cuidado. Lea su documentación porque si arruina las cosas, puede romper su sitio web fácilmente.

¿Hay opciones gratis? Por supuesto! Estamos trabajando con WordPress, ¿recuerdas? Puedes usar el JavaScript asíncrono, entre otros complementos.

Paso 5: use el almacenamiento en caché y CDN

¿Sabía que el almacenamiento en caché y los CDN pueden reducir sus solicitudes HTTP? Al principio no parece ser un hecho, pero cuando considera lo que sucede detrás de escena, puede usar el almacenamiento en caché y CDN para su ventaja.

El almacenamiento en caché implica almacenar archivos estáticos en un navegador para que los usuarios no descarguen los archivos en visitas posteriores. Digamos que tiene un complemento de caché, y el usuario descarga su contenido en caché en su primera visita.

En visitas posteriores, su sitio no realizará solicitudes al servidor. En cambio, servirá los recursos almacenados en caché del navegador, reduciendo las solicitudes HTTP y aumentando la velocidad de su sitio.

Un CDN (o Ca menudo reentrega norteetwork) es una red de servidores ubicados en todo el mundo. Una CDN también utiliza el almacenamiento en caché, pero para velocidades aún más rápidas, el proveedor de CDN sirve a su en caché contenido de un servidor más cercano al visitante.

Las distancias más cortas significan una entrega de contenido más rápida, y el almacenamiento en caché significa que su sitio web no necesita descargar el mismo contenido desde el servidor central nuevamente. Tiene sentido para usted?

Cloudflare CDN Plugin

Y lo mejor de todo es que hay una serie de opciones gratuitas de CDN (o al menos pruebas gratuitas para que pueda ver literalmente la diferencia que hace). En WPExplorer utilizamos y recomendamos CLoudflare, pero elige el CDN que creas que funciona mejor para ti.

Bonificación: asegúrese de que HTTP / 2 sea compatible

Es posible que esté haciendo todo lo posible para reducir las solicitudes HTTP, pero su proveedor de alojamiento web podría ser la causa de sus problemas. No te sorprendas; preguntando y pensando, quién – en este tiempo y edad – usa cualquier cosa menos HTTP / 2?

Probablemente ni siquiera sabes qué HTTP / 2 se trata de. Bueno, para empezar, HTTP / 2 admite la carga asincrónica de archivos, entre otras cosas. Tiene otros beneficios sobre HTTP 1.0, pero esa es una lección para otro día..

Si usa HTTP 1.0 o inferior, notará un número considerable de solicitudes HTTP.

No se apresure a juzgar; He visto proveedores de alojamiento web que todavía usan HTTP 1.0 y versiones anteriores de PHP. Sí, incluso con los beneficios aparentes de HTTP / 2 y PHP 7. Ni siquiera estoy faroleando; algunos de sus clientes acuden a mí cuando algunos de sus complementos no funcionan, y es irritante!

Pero, en serio, ¿por qué? El hecho de que algunos proveedores de alojamiento web no se molesten por el hecho de que PHP 5.6 está en desuso y tiene vulnerabilidades de seguridad es otra cosa. Y si no son compatibles con HTTP / 2, eso es realmente un factor decisivo para el suyo.

Prueba KeyCDN HTTP / 2

Póngase en contacto con su anfitrión o use Herramienta de KeyCDN para verificar si su servidor es compatible con HTTP / 2. El mejor host web admite HTTP / 2 y la última versión de PHP. Si su host está retrasado en ambos casos, pídales que actualicen o elija un mejor host web.

Ultimas palabras

La reducción de las solicitudes HTTP en su sitio de WordPress se trata de eliminar cosas que no necesita. Si tiene muchas cosas en su sitio web de WordPress, tendrá muchas solicitudes HTTP y velocidades de página relativamente lentas.

Para reducir las solicitudes HTTP, organice su sitio, optimice las imágenes, arregle los scripts de bloqueo de renderizado, use el almacenamiento en caché y asegúrese de que su host sea compatible con HTTP / 2. Aparte de eso, intente crear sitios web simples y limpios que no requieran una tonelada de activos para cargar.

Si tiene preguntas, háganos saber en la sección de comentarios a continuación. Saludos a sitios web más rápidos y un gran futuro por delante!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map