Post Top Ad

Your Ad Spot

sábado, 1 de agosto de 2020

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 rindo fácilmente porque ese tipo de cosas es inaceptable.
¿Sabes lo que hice después? Probé el sitio web en Pingdom porque GTMetrix puede ser un asco. 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 mil millones de elementos para crear 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 un gran diseño visual y velocidades lentas 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 la desorganización.
Con eso, me refiero a deshacerse 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 muy 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 para pensar que solo necesita el complemento Asset CleanUp WordPress .
WP Asset CleanUp Plugin de WordPress
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 seleccionar los CSS / JS que no es necesario cargar, de esta forma se reduce la hinchazón.
Limpia tu instalación ya hombre; deshacerse de la basura - comentarios spam incluidos. Ah, sí, elimine los enlaces rotos y optimice su base de datos mientras está en ello. 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 están entre los elementos que tardan más en cargarse.
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
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 los sprites de imágenes 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 hará solo 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. Puede usar una herramienta como CSS Sprite Generator . Implementar sprites de imágenes CSS es fácil, siempre y cuando 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 un montón 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. Eso es la friolera de 66 solicitudes HTTP.
¡De alrededor de 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"?
Según Raelene Morey de Words by Birds (soy una gran fan fan), 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" t necesario para que el código se ejecute ".
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
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.
Otra opción popular (y  gratuita ) es el complemento Autoptimize .
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 significativamente su sitio web.
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 es necesario 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 manera, 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? Puede 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. Supongamos que tiene un complemento de caché y el usuario descarga su contenido en caché en su primera visita.
En visitas posteriores, su sitio no hará solicitudes al servidor. En cambio, servirá los recursos almacenados en caché desde el navegador, reduciendo las solicitudes HTTP y aumentando la velocidad de su sitio.
A CDN (o C ONTENIDO  D elivery  N RED) es una red de servidores colocan alrededor del mundo. Un CDN también usa el almacenamiento en caché, pero para velocidades aún más rápidas, el proveedor de CDN sirve su  contenido almacenado en caché desde 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 varias 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 elija el CDN que considere que funciona mejor para usted.

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 esta época, usa algo más que HTTP / 2?
Probablemente ni siquiera sepa de qué se trata HTTP / 2 . 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 aparentes beneficios 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 host o use la herramienta 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

Reducir 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!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas