Com fer menys sol·licituds HTTP a WordPress i GTmetrix YSlow

Cal fer menys sol·licituds HTTP al lloc de WordPress?


Això només significa que cal reduir la quantitat de elements (peticions) que es carreguen al vostre lloc.

Feu menys sol·licituds HTTP

La combinació de fitxers CSS i JavaScript pot ajudar-vos, però hi ha altres optimitzacions que poden reduir les sol·licituds HTTP, com la desactivació selectiva de plugins que no cal carregar en pàgines específiques, desactivar scripts i estils de WooCommerce en pàgines que no siguin de comerç electrònic o evitar la CPU alta. connectors que generen un nombre elevat de sol·licituds i alenteixen el vostre lloc.

Menys sol·licituds HTTP és una recomanació a GTmetrix, Pingdom i altres eines de prova de velocitat. Les recomanacions a continuació ajudaran a reduir les sol·licituds i a fer que el vostre lloc sigui més ràpid.

1. Combina fulls d’estils CSS + JavaScript

Combinant fulls d’estils CSS + JavaScript vol dir que necessiteu copiar i enganxar tot el fitxer CSS en un sol fitxer. Això permet als navegadors fer una sola sol·licitud per a un fitxer CSS en lloc de diverses sol·licituds. La majoria dels plugins de memòria cau tenen l’opció de combinar els vostres fitxers CSS + JavaScript.

Pas 1: A la configuració del complement de caché, trobeu l’opció de combinar i minificar CSS + JavaScript.

Pas 2: Habiliteu cada configuració a la vegada i feu els resultats de la prova a GTmetrix.

Minimiteu Combinar fitxers CSS

Minimiteu Combinar fitxers JavaScript

Pas 3: Comproveu si hi ha errors visibles al vostre lloc web. Si veieu errors, visualitzeu el codi font, cerqueu els fitxers problemàtics i exclureu-los de la configuració de minificació CSS ​​o JavaScript. Per exemple, si el control lliscant desapareix en habilitar una configuració determinada, comproveu els fitxers del control lliscant al codi font i exclou el fitxer amb problemes. Si no veieu errors, no caldrà això.

Si us plau, podeu combinar manualment els fitxers CSS a WordPress a l’aparença > Editor de temes. Simplement copiaríeu i enganxaria el contingut de tots els fitxers en un sol fitxer CSS.

Fitxers CSS de WordPress

2. Desactivar selectivament els complements

Hi ha molts plugins que es publiquen a tot el vostre lloc, fins i tot a les pàgines on no són necessaris.

Els formularis de contacte, l’ús compartit social, el fragment ric, el slider i alguns altres complements només s’han de carregar en determinats tipus de contingut. Podeu desactivar-los a qualsevol altre lloc fent servir CleanUp d’actius.

Si desactiveu els complements a les pàgines on no cal carregar-se, es tradueix en menys sol·licituds HTTP. Això no està limitat als plugins; Els scripts i estils també es poden desactivar en determinades pàgines (per exemple, els scripts de WooCommerce, els estils i els fragments de carro es poden desactivar en pàgines que no siguin de comerç electrònic).

Pas 1: Instal·leu Asset CleanUp o Perfmatters (tots dos us permeten desactivar selectivament els complements).

Pas 2: Editeu una pàgina o una publicació, desplaceu-vos cap a la secció CleanUp d’actius i reviseu quins fitxers CSS + JavaScript es carreguen a la pàgina. Poden ser des de plugins, temes o scripts externs.

Desactiva els scripts externs de WordPress

Pas 3: Desactiveu tots els complements i sol·licituds que no necessiteu a la pàgina. Podeu desactivar-les en una sola pàgina, a tot el lloc, per tipus de publicació o utilitzar RegEx (expressions regulars) per inhabilitar-les en patrons d’URL específics. RegEx només s’inclou amb Perfmatters o Asset CleanUp Pro.

3. Desactiveu scripts WooCommerce, estils i fragments del carretó

Els llocs WooCommerce generen naturalment més peticions HTTP.

No només solen requerir més complements, sinó que també carreguen scripts addicionals de WooCommerce, estils, i fragments de carretó. De la mateixa manera que es pot desactivar de manera selectiva els complements al pas anterior, també es pot desactivar de manera selectiva les sol·licituds de WooCommerce per carregar a tot el lloc..

Utilitzant CleanUp o Asset Cleanup (Asset CleanUp), desactiveu-les a les pàgines on no cal carregar-les:

Asset CleanUp WooCommerce

De forma alternativa, Perfmatters permet desactivar-les en un clic:

optimització de negocis supermercats

4. Eviteu els complements d’alta CPU

Els plugins d’alta CPU poden generar un munt de sol·licituds HTTP.

Generalment són compartiments socials, estadístiques (analítiques), lliscants, carteres, creadors de pàgines, calendaris, xat i complements de formularis de contacte. Bàsicament, eviteu qualsevol complement que tiri sol·licituds externes de llocs web externs, executi processos en curs o només trigui molt a carregar-se.

Pas 1: Comproveu si hi ha plugins lents a la cascada GTmetrix o Monitor de consultes.

Lent-WordPress-Plugin

Pas 2: Eviteu els complements coneguts de CPU elevats.

  1. AddThis
  2. Feu clic a AdSense Monitorització de fraus
  3. Calendari d’esdeveniments tot en un
  4. Amic de còpia de seguretat
  5. Castor Constructor
  6. Millors llocs de lloc de Google XML de WordPress
  7. Comprobador d’enllaços trencats (utilitzeu el Dr. Link Check Check)
  8. Contacte constant per a WordPress
  9. Formulari de contacte 7
  10. Mostra tots els 65 complements lents

Pas 3: Substituïu els plugins lents per plugins més ràpids i lleugers. És necessària investigació i proves.

5. Substituïu els complements amb Codi

Podeu evitar molts plugins substituint-los per codi.

Exemples:

  • Google Fonts: allotgeu els vostres tipus de lletra localment
  • Codi de seguiment de Google Analytics: insereix manualment
  • Taula de contingut: dissenyeu-la manualment en HTML + CSS
  • Tuits incrustats o Google Maps: feu una captura de pantalla al seu lloc
  • Giny integrat de Facebook: substituïu per giny real de Facebook

Consolidar plugins també ajuda. Un exemple clàssic és l’ús de WP Rocket, que inclou fonts de hosting, analítica i Facebook Pixel a nivell local, càrregues mandroses + vídeos, neteja de bases de dades, precàrrega, control de batecs cardíacs i integració de Cloudflare i de diversos CDNs. Amb altres plugins de memòria cau (ja que la majoria no tenen aquestes funcions), haureu d’instal·lar 6-7 plugins addicionals per obtenir aquestes optimitzacions de velocitat, quan estiguin integrats a WP Rocket.

6. Eliminar scripts externs

Els scripts externs són qualsevol cosa que tiri peticions de llocs web externs.

Els tipus de lletra de Google es poden combinar en un fitxer. Els vídeos es poden carregar amb mandrosa i l’iframe es substitueix per una imatge prèvia. Es poden optimitzar molts scripts, altres no. A continuació es mostren alguns exemples.

  • Fonts de Google: combinar tipus de lletra i allotjar-los localment amb plugins com WP Rocket, Autoptimize, OMGF, Google Fonts allotjats de forma autònoma i CleanUp d’actius..
  • anàlisis de Google: codi de seguiment de l’amfitrió localment a WP Rocket / CAOS Analytics.
  • Google AdSense: carregueu de manera asíncrona i proveu el Cloudflare Rocket Loader.
  • Google Maps: feu una captura de pantalla del Google Map i inclueu-hi un enllaç a les indicacions de conducció quan la gent faci clic a la imatge (això és tan bo com un mapa)!
  • Gestor d’etiquetes de Google: generalment fa més mal que bé quan intenteu combinar diversos scripts. Només s’ha d’utilitzar per a llocs grans i no optimitzats.
  • Vídeos incrustats: utilitzeu WP Rocket o WP YouTube Lyte per carregar vídeos més mandrosos i substituir el iframe per una imatge prèvia (els vídeos són un element molt pesat).
  • Ginys incrustats i publicacions: fer captures de pantalla en lloc d’incorporar-les.
  • Facebook Pixel: WP Rocket pot afegir la memòria cau del navegador a Facebook Pixel.
  • Gravatars: per a mi no va funcionar res, a més de desactivar Gravatars (el WP Rocket tampoc els utilitza al seu blog). Però podeu provar Harrys, FV o la memòria cau Optimum Gravatar o bé intentar trencar o ocultar comentaris ampliables.
  • Complements de compartició social: genereu infames peticions de Facebook, Twitter i xarxes socials per actualitzar com a comptes. Proveu un complement més ràpid com Pug social, Mashsharer, Institució socialAddToAny, Compartir en WP, o Compartir Social fàcil

7. Combina fonts de Google

Els tipus de lletra de Google es poden combinar per generar una sol·licitud en lloc de diverses sol·licituds.

Google-Fonts-GTmetrix

Els següents complements tenen opcions per optimitzar els tipus de lletra de Google:

  • Coet WP
  • CleanUp d’actius
  • Autoptimitza
  • OMGF

El millor mètode és, però, allotjar fonts de Google localment. Això implica descarregar els vostres tipus de lletra directament des del lloc web de Google Fonts, mentre que el nombre de tipus de lletra i el pes de la lletra són mínims. A continuació, utilitzeu una eina com Transfonter o convertir els tipus de lletra a fitxers de fonts web. Aleshores, pengeu els fitxers de font web nous a la carpeta wp-content / uploads, afegiu el tipus de lletra personalitzat a CSS i provareu el tipus de lletra per assegurar-vos que funciona. Un cop més, consulteu aquest enllaç per obtenir un tutorial complet.

Conversió Transfonter-Google-Font-Font

7. Minimitzar HTML, CSS, JavaScript

La minimació dels fitxers normalment es fa amb el vostre complement de memòria cau (vegeu el pas 1).

Però de vegades, això pot trencar el vostre lloc web. En aquest cas, haureu de provar cada una de les configuracions, comprovar si hi ha fitxers amb problemes al codi font i, a continuació, excloure aquests fitxers de la minificació mitjançant el complement de memòria cau. Si no veieu errors visibles, no cal que ho feu.

8. Optimitzeu el lliurament CSS

Això hauria de solucionar el fitxer recursos de bloqueig de renders element a PageSpeed ​​Insights.

WP Rocket, Autoptimize i altres complements similars haurien de tenir una opció per optimitzar el lliurament CSS. Simplement, aneu a la vostra configuració i assegureu-vos que teniu activada aquesta opció i que haureu de solucionar-la.

Optimitza el lliurament CSS

9. Diferir / carregar fitxers JavaScript combinats de manera asíncrona

JavaScript asíncron significa la càrrega dels fitxers després s’ha acabat de descarregar la pàgina.

Es pot fer mitjançant WP Rocket o Async JavaScript i hauria d’arreglar la elimineu l’element Javascript que bloqueja el render. Async JavaScript us ofereix un control complet de quins scripts cal afegir un atribut “async” o “diferir”, mentre que WP Rocket desafecta automàticament JavaScript amb 1 clic..

Fitxers JavaScript

10. Vídeos de càrrega tranquil·la

Els vídeos incrustats són recursos externs que generen sol·licituds HTTP.

Poden trigar 2+ segons en carregar-se. Si bé no podeu eliminar-los completament, podeu retarda la càrrega dels vídeos fins que els usuaris es desplacin cap avall (càrrega mandrosa) i facin clic al botó de reproducció (light embed).

Aquí teniu un parell d’opcions: podeu utilitzar WP Rocket per permetre la càrrega pereçosa i substituir el iframe de YouTube per la imatge de vista prèvia. Però si no teniu coet WP, podeu provar-ho Plugin WP YouTube Lyte o seguiu això tutorial sobre incrustacions lleugeres de YouTube. Totes dues funcionen bé.

Aquí teniu un exemple (i un excel·lent vídeo a WordPress Speed):

11. Afegir un CDN

Els CDN poden ajudar a fer menys sol·licituds HTTP.

En comptes de fer que el vostre servidor d’origen respongui a una sol·licitud, els centres de dades d’un CDN descarregaran l’amplada de banda al mateix temps que alleugeraran la càrrega al servidor d’origen. La fallada de núvols és gratuïta, per la qual cosa és una idea que no funciona.

CDN múltiples = més centres de dades = lliurament més ràpid de contingut i més descàrrega de recursos. Moltes persones comencen amb Cloudflare i, finalment, busquen StackPath quan utilitzen diversos CDN (actualment els utilitzo tots dos). KeyCDN també és bo. A això s’anomena “cadena” de CDNs.

Configuració de diversos CDN
Amb Cloudflare, s’assignen 2 indicadors de nom que canvieu al vostre registre de domini. Amb altres CDN com StackPath i KeyCDN, t’assignen un URL de CDN que enganxaràs al camp d’URL CDN del complement de la memòria cau (la majoria el tenen) o l’utilitzen CDN Enabler..

CDN múltiples

12. Minimitzar les redireccions

Les redireccions no necessàries poden provocar sol·licituds HTTP addicionals.

Haureu de mirar el vostre informe GTmetrix per veure què causa aquest error. Es genera amb un script o complement extern al vostre lloc? Heu intentat optimitzar aquest script o heu cercat un complement més lleuger? Es deu al fet que heu canviat la versió del vostre domini per no WWW o HTTPS, però no heu actualitzat tots els enllaços / imatges del vostre lloc per reflectir la nova versió?

Minimitzar els errors de redirecció

Causes comunes

  • Connectors incorrectes
  • Scripts externs
  • Hem canviat a WWW i no a WWW, però no han actualitzat els enllaços
  • S’ha canviat a HTTPS vs no HTTPS, però no han actualitzat enllaços

13. Optimitzar les imatges

Per reduir les sol·licituds HTTP causades per imatges, hi ha tres maneres principals d’optimitzar les imatges:

Servir imatges a escala: redimensiona les imatges grans perquè siguin més petites. GTmetrix us indica quines imatges són massa grans i les dimensions correctes han de ser retallades / redimensionades. Proveu de crear un full de trampes de dimensió d’imatge mesurant les dimensions dels vostres botons lliscants, les imatges del bloc d’amplada completa, els ginys i altres àrees del vostre lloc web. A continuació, assegureu-vos de canviar la mida de les imatges a les dimensions correctes abans de penjar-les. Si feu això, mai no haureu d’haver publicat errors d’imatge a escala.

Optimitzar les imatges (compressió sense pèrdues): utilitzeu un complement com ShortPixel (recomanat), Smush o Imagify per comprimir imatges. Tot i que aquests complements diuen sense pèrdues, de vegades podeu notar una petita pèrdua de qualitat. És per això que el millor és fer una còpia de seguretat de les imatges i provar-ne un parell abans d’optimitzar de forma massiva totes les imatges del vostre lloc web, per assegurar-vos que esteu satisfets amb la qualitat.

Especifiqueu les mides: afegiu una amplada + alçada al codi HTML o CSS de la imatge. Això es fa automàticament a l’editor de Visual, però no a HTML personalitzat, a alguns creadors de pàgines i, possiblement, a altres àrees del lloc de WordPress. GTmetrix us mostrarà quines imatges tenen aquests errros i us proporcionaran les seves dimensions correctes. Per solucionar l’error, haureu de localitzar la imatge al tauler de control de WordPress, editeu l’HTML o el CSS, i després afegiu l’amplada + l’altura.

Encara cal fer més peticions HTTP?

Si encara necessiteu ajuda, deixeu-me un comentari. El WordPress Accelera el grup de Facebook també és útil o podeu contractar-nos per a serveis de velocitat de WordPress amb abans + després dels informes de GTmetrix.

WordPress Accelera el grup de Facebook

Preguntes freqüents

&# x1f680; Què causa les sol·licituds HTTP?

Les sol·licituds HTTP són qualsevol cosa que crei una sol·licitud al servidor (per exemple, una sola imatge crea 1 sol·licitud). La pestanya Cascada de GTmetrix us indica totes les sol·licituds que es carreguen en una pàgina.

&# x1f680; Quines són cinc coses per reduir les sol·licituds HTTP?

5 coses fàcils que podeu fer és combinar fitxers CSS + JavaScript, carregar mandrosos i vídeos, evitar la nostra llista de plugins de CPU elevats, desactivar selectivament els complements de determinades pàgines / publicacions amb Perfmatters o Asset CleanUp i optimitzar els vostres tipus de lletra.

&# x1f680; Un complement de memòria cau ajudarà a reduir les sol·licituds HTTP?

Sí, un bon complement de memòria cau hauria d’ajudar a minificar i combinar fitxers, així com a reduir les peticions HTTP quan es configuren correctament. Tinc tutorials per a gairebé tots els complements de memòria cau.

&# x1f680; La fixació d’altres elements de GTmetrix reduirà les peticions HTTP?

Sí, en molts casos sobretot reduirà i combinarà els fitxers, eliminarà els errors de redirecció i l’ús d’un CDN també pot ajudar.

&# x1f680; Quin complement de memòria cau redueix la majoria de sol·licituds HTTP i com configurar-lo?

Us recomano WP Rocket que ha estat classificat amb el número 1 a la majoria de les enquestes de Facebook i que té més funcions d’optimització de la velocitat que la majoria dels plugins de memòria cau, és per això que sol produir puntuacions i temps de càrrega millors a GTmetrix. Consulteu el meu tutorial sobre la configuració del coet WP.

Gràcies per llegir :)

Salutacions,
Tom

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