Sådan foretages færre HTTP-anmodninger i WordPress & GTmetrix YSlow

Brug for at foretage færre HTTP-anmodninger på dit WordPress-sted?


Dette betyder bare, at du er nødt til at reducere, hvor mange elementer (anmodninger), der indlæses på dit websted.

Foretag færre HTTP-anmodninger

Det kan hjælpe at kombinere CSS- og JavaScript-filer, men der er andre optimeringer, der kan reducere HTTP-anmodninger, som selektiv deaktivering af plugins, der ikke behøver at indlæses på specifikke sider, deaktivere WooCommerce-scripts og -stilarter på sider, der ikke er e-handel, eller undgå høj CPU plugins, der genererer stort antal anmodninger og bremser dit websted.

Foretag færre HTTP-anmodninger er en anbefaling i GTmetrix, Pingdom og andre hastighedstestværktøjer. Nedenstående anbefalinger hjælper med at reducere anmodninger og gøre dit websted hurtigere.

1. Kombiner CSS Stylesheets + JavaScript

Kombination af CSS-stilark + JavaScript betyder, at du skal kopiere / indsætte alt i dine CSS-filer i en enkelt fil. Dette gør det muligt for browsere at fremsætte 1 enkelt anmodning om en CSS-fil i stedet for flere anmodninger. De fleste cache-plugins har en mulighed for at kombinere dine CSS + JavaScript-filer.

Trin 1: I dine cache-plugin-indstillinger skal du finde muligheden for at kombinere og minimere CSS + JavaScript.

Trin 2: Aktivér hver indstilling én ad gangen og testresultater i GTmetrix.

Komprimer Kombiner CSS-filer

Komprimer Kombiner JavaScript-filer

Trin 3: Kontroller, om der er synlige fejl på dit websted. Hvis du ser fejl, kan du se kildekoden, finde de problematiske filer og ekskludere dem fra dine CSS- eller JavaScript-minifikationsindstillinger. Hvis din skyderen f.eks. Forsvinder, når du aktiverer en bestemt indstilling, skal du kontrollere dine skyderfiler i kildekoden og ekskludere den problematiske fil. Hvis du ikke kan se fejl, er der ikke behov for dette.

Alternativt kan du manuelt kombinere dine CSS-filer i WordPress under Udseende > Temaeditor. Du ville blot kopiere og indsætte indholdet i alle filer i en enkelt CSS-fil.

WordPress CSS-filer

2. Deaktiver selektivt plugins

Mange plugins kører på hele dit websted, også på sider, hvor de ikke er nødvendige.

Kontaktformularer, social deling, rig uddrag, skyderen og nogle andre plugins behøver kun at indlæses på bestemte indholdstyper. Du kan deaktivere dem overalt ellers ved hjælp af Asset CleanUp.

Ved at deaktivere plugins på sider, hvor de ikke behøver at blive indlæst, resulterer dette i færre HTTP-anmodninger. Dette er ikke begrænset til plugins; scripts og stilarter kan også deaktiveres på bestemte sider (f.eks. WooCommerce-scripts, stilarter, vognfragmenter kan deaktiveres på sider, der ikke er e-handel).

Trin 1: Installer Asset CleanUp eller Perfmatters (begge giver dig mulighed for selektiv at deaktivere plugins).

Trin 2: Rediger en side eller et indlæg, rulle ned til afsnittet Asset CleanUp, og gennemgå hvilke CSS + JavaScript-filer, der indlæses på siden. Disse kan være fra plugins, temaer eller eksterne scripts.

Deaktiver eksterne WordPress-scripts

Trin 3: Deaktiver alle plugins og anmodninger, du ikke har brug for på den side. Du kan deaktivere dem på 1 enkelt side på tværs af hele dit websted, efter indlægstype, eller bruge RegEx (almindelige udtryk) til at deaktivere dem på specifikke URL-mønstre. RegEx er kun inkluderet i Perfmatters eller Asset CleanUp Pro.

3. Deaktiver WooCommerce-scripts, stilarter, vognfragmenter

WooCommerce-websteder genererer naturligvis flere HTTP-anmodninger.

Ikke kun kræver de typisk flere plugins, men de indlæser også ekstra WooCommerce-scripts, stilarter, og vogn fragmenter. Ligesom du selektivt kan deaktivere plugins i det tidligere trin, kan du også selektivt deaktivere WooCommerce-anmodninger, der indlæses på hele dit websted.

Brug Asset CleanUp eller Perfmatters til at deaktivere disse på sider, hvor de ikke behøver at indlæse:

Asset CleanUp WooCommerce

Alternativt lader Perfmatters dig deaktivere disse i 1-klik:

perfmatters woocommerce optimering

4. Undgå høje CPU-plugins

Høj CPU-plugins kan generere et ton HTTP-anmodninger.

Dette er normalt social deling, statistik (analyse), skyder, porteføljer, sidebygere, kalendere, chat og kontaktformular plugins. Grundlæggende skal du undgå enhver plugin, der trækker eksterne anmodninger fra eksterne websteder, kører igangværende processer eller bare tager lang tid at indlæse.

Trin 1: Kontroller, om der er langsomme plugins i GTmetrix Waterfall eller Forespørgselsmonitor.

Slow-WordPress-plugin

Trin 2: Undgå kendte plugins med høj CPU.

  1. AddThis
  2. AdSense-kliksvigovervågning
  3. Alt-i-én-arrangementskalender
  4. Backup Buddy
  5. Beaver Builder
  6. Bedre WordPress Google XML-sitemaps
  7. Brudt Link-checker (brug Dr. Link Check)
  8. Konstant kontakt til WordPress
  9. Kontaktformular 7
  10. Se alle 65 langsomme plugins

Trin 3: Udskift langsomme plugins med hurtigere, lette plugins. Forskning og test er påkrævet.

5. Udskift plugins med kode

Du kan undgå mange plugins ved at erstatte dem med kode.

Eksempler:

  • Google-skrifttyper: vært for dine skrifttyper lokalt
  • Google Analytics-sporingskode: indsæt manuelt
  • Indholdsfortegnelse: design det manuelt i HTML + CSS
  • Indlejrede tweets eller Google Maps: tag et skærmbillede i stedet
  • Indbygget Facebook-widget: erstattes med den faktiske Facebook-widget

Konsolidering af plugins hjælper også. Et klassisk eksempel er at bruge WP Rocket, som kommer med hosting-skrifttyper, analyser og Facebook Pixel lokalt, doven indlæsning af billeder + videoer, databaseoprydning, forudindladning, hjerteslagskontrol og integration af både Cloudflare og flere CDN’er. Med andre cache-plugins (da de fleste af dem ikke har disse funktioner), skal du installere 6-7 ekstra plugins for at få disse hastighedsoptimeringer, når de er indbygget i WP Rocket.

6. Fjern eksterne scripts

Eksterne scripts er alt, hvad der trækker anmodninger fra eksterne websteder.

Google-skrifttyper kan kombineres til 1 fil. Videoer kan lades ladet, og iframe erstattes med et eksempelbillede. Mange scripts kan optimeres, andre kan ikke. Nedenfor er nogle eksempler.

  • Google-skrifttyper: Kombiner skrifttyper og host dem lokalt ved hjælp af plugins som WP Rocket, Autoptimize, OMGF, Google Host-self-Host og Asset CleanUp.
  • Google Analytics: vært sporingskode lokalt i WP Rocket / CAOS Analytics.
  • Google AdSense: indlæse asynkront og prøv Cloudflare Rocket Loader.
  • Google kort: tag etbillede af Google Map og inkluder et link til kørselsvejledning, når folk klikker på billedet (dette ser lige så godt ud som et kort)!
  • Google Tag Manager: gør normalt mere skade end gavn, når du prøver at kombinere flere scripts. Bør kun bruges til store, ikke-optimerede websteder.
  • Indlejrede videoer: Brug WP Rocket eller WP YouTube Lyte til at dovne indlæse videoer og erstatte iframe med et eksempelbillede (videoer er et meget tungt element).
  • Embedded Widgets + Posts: tag skærmbilleder i stedet for at integrere dem.
  • Facebook Pixel: WP Rocket kan tilføje browser-cache til Facebook Pixel.
  • Gravatars: Intet fungerede for mig ud over at deaktivere Gravatars (WP Rocket bruger heller ikke dem på deres blog). Men du kan prøve Harrys, FV eller den optimale Gravatar-cache, eller prøve at bryde eller skjule udvidelige kommentarer.
  • Plugins til social deling: genererer fortroligt forespørgsler fra Facebook, Twitter og sociale netværk for at opdatere som tællinger. Prøv en hurtigere plugin som Socialt mops, Mashsharer, Social snapAddToAny, WP Social Sharing, eller Nem social andel

7. Kombiner Google-skrifttyper

Google-skrifttyper kan kombineres til at generere 1 anmodning i stedet for flere anmodninger.

Google-Skrifttyper-GTmetrix

Følgende plugins har muligheder for at optimere Google-skrifttyper:

  • WP-raket
  • Asset CleanUp
  • Autoptimize
  • OMGF

Den bedste metode er dog at være vært for Google-skrifttyper lokalt. Dette indebærer, at du downloader dine skrifttyper direkte fra Google Font-webstedet, mens det er minimalt med antallet af skrifttyper og fontvægte. Brug derefter et værktøj som Transfonter eller konverter skrifttyperne til webfontfiler. Du vil derefter uploade de nye webfontfiler til din wp-content / uploads-mappe, tilføje den brugerdefinerede skrifttype til CSS og teste skrifttypen for at sikre, at den fungerer. Igen, se dette link for en fuld tutorial.

Transfonter-Google-Font-konvertering

7. Komprimer HTML, CSS, JavaScript

Minificering af filer udføres normalt af dit cache-plugin (se trin 1).

Men nogle gange kan dette ødelægge dit websted. I dette tilfælde er du nødt til at teste hver indstilling én efter én, kontrollere for problematiske filer i kildekoden og derefter ekskludere disse filer fra minificering ved hjælp af dit cache-plugin. Hvis du ikke kan se synlige fejl, behøver du ikke gøre dette.

8. Optimer CSS-levering

Dette skal løse render-blokerende ressourcer element i PageSpeed ​​Insights.

WP Rocket, Autoptimize og andre lignende plugins skal have en mulighed for at optimere CSS-levering. Gå blot ind på dine indstillinger, og sørg for, at du har aktiveret dette, og det skal løse det.

Optimer CSS-levering

9. Udskud / indlæs kombinerede JavaScript-filer asynkront

Asynkron JavaScript betyder, at filerne indlæses efter siden er færdig med at downloade.

Dette kan gøres ved hjælp af WP Rocket eller Async JavaScript og bør ordne fjern gengivelsesblokerende Javascript-element. Async JavaScript giver dig fuld kontrol over hvilke scripts der skal tilføjes en ‘async’ eller ‘udsæt’ attribut til, mens WP Rocket afgrænser JavaScript automatisk med 1 klik.

JavaScript-filer

10. Lazy Load Videos

Indlejrede videoer er en ekstern ressource, der genererer HTTP-anmodninger.

Det kan tage 2+ sekunder at indlæse! Selvom du ikke helt kan fjerne disse, kan du det udsæt indlæsningen af ​​videoer indtil brugere ruller ned (doven belastning) og klikker på afspilningsknappen (lysindlejring).

Du har et par muligheder her: du kan bruge WP Rocket til at aktivere doven indlæsning og erstatte YouTube iframe med preview-billedet. Men hvis du ikke har WP Rocket, kan du enten prøve det WP YouTube Lyte-plugin eller følg dette tutorial på lette YouTube-indlejringer. Begge fungerer godt.

Her er et eksempel (og en fantastisk video om WordPress Speed):

11. Tilføj et CDN

CDN’er kan hjælpe med at foretage færre HTTP-anmodninger.

I stedet for at få din originalserver til at svare på en anmodning, vil et CDNs datacentre downloade båndbredde, mens belastningen på originalserveren bliver lettere. Cloudflare er gratis, så det er en no-brainer.

Flere CDN’er = flere datacentre = hurtigere levering af indhold og mere nedladning af ressourcer. Mange mennesker starter med Cloudflare og ser efterhånden i StackPath, når de bruger flere CDN’er (jeg bruger i øjeblikket begge). KeyCDN er også god. Dette kaldes en “kæde” af CDN’er.

Opsætning af flere CDN’er
Med Cloudflare tildeler de dig 2 navneændere, som du ændrer i dit domæneregister. Med andre CDN’er som StackPath og KeyCDN tildeler de dig en CDN URL, som du indsætter i feltet CDN URL i dit cache-plugin (de fleste har dem) eller bruger CDN Enabler.

Flere CDN'er

12. Minimer omdirigeringer

Unødvendige omdirigeringer kan forårsage ekstra HTTP-anmodninger.

Du skal se på din GTmetrix-rapport for at se, hvad der forårsager denne fejl. Genereres det af et eksternt script eller plugin på dit websted? Har du prøvet at optimere dette script eller kigge efter en mere let plugin? Er det fordi du ændrede din domæneversion til ikke-WWW eller HTTPS, men ikke har opdateret alle links / billeder på dit websted for at afspejle den nye version?

Minimer omdirigeringsfejl

Almindelige årsager

  • Dårlige plugins
  • Eksterne scripts
  • Skiftet til WWW vs Ikke-WWW, men har ikke opdaterede links
  • Ændret til HTTPS versus ikke-HTTPS, men har ikke opdaterede links

13. Optimer billeder

For at reducere HTTP-anmodninger forårsaget af billeder er der 3 primære måder at optimere billeder på:

Server skaleret billeder: ændre størrelse på store billeder for at være mindre. GTmetrix fortæller dig, hvilke billeder der er for store og de rigtige dimensioner, de skal beskæres / ændres til. Prøv at oprette et snedeblad med billeddimension ved at måle dimensionerne på dine skyder, blogbilleder i fuld bredde, widgets og andre områder på dit websted. Sørg derefter for at ændre størrelsen på billederne til de korrekte dimensioner, før du uploader. Hvis du gør dette, skal du aldrig have vist skaleret billedfejl.

Optimer billeder (Løsfri komprimering): Brug et plugin som ShortPixel (anbefales), Smush eller Imagify til at komprimere billeder. Selvom disse plugins siger tabt, kan du undertiden bemærke et lille tab i kvalitet. Derfor er det bedst at tage backup af dine billeder og teste et par af dem, før du bulkoptimerer alle billeder på dit websted for at sikre dig, at du er tilfreds med kvaliteten.

Angiv billeddimensioner: tilføj en bredde + højde til billedets HTML eller CSS. Dette gøres automatisk i Visual Editor, men ikke brugerdefineret HTML, nogle sidebygere og muligvis andre områder på dit WordPress-sted. GTmetrix viser dig, hvilke billeder der har disse fejl, og giver dig de korrekte dimensioner. For at ordne fejlen skal du finde billedet i dit WordPress-betjeningspanel, redigere HTML eller CSS og derefter tilføje bredden + højden.

Stadig nødt til at stille færre HTTP-anmodninger?

Hvis du stadig har brug for hjælp, så lad mig en kommentar. Det WordPress fremskynder Facebook-gruppen er også nyttigt, eller du kan ansætte os til WordPress-hastighedstjenester med før + efter GTmetrix-rapporter.

WordPress fremskynder Facebook-gruppen

Ofte stillede spørgsmål

&# X1f680; Hvad der forårsager HTTP-anmodninger?

HTTP-anmodninger er alt, hvad der skaber en anmodning til serveren (f.eks. Opretter et enkelt billede 1 anmodning). GTmetrix’s fane Vandfald fortæller dig alle anmodninger, der indlæses på en side.

&# X1f680; Hvad er 5 ting, du kan reducere HTTP-anmodninger?

5 enkle ting, du kan gøre, er at kombinere CSS + JavaScript-filer, dovne indlæsning af billeder og videoer, undgå vores liste over høje CPU-plugins, selektiv deaktivere plugins fra bestemte sider / indlæg med Perfmatters eller Asset CleanUp og optimere dine skrifttyper.

&# X1f680; Vil et cache-plugin hjælpe med at reducere HTTP-anmodninger?

Ja, et godt cache-plugin skal hjælpe med at minimere og kombinere filer samt reducere HTTP-anmodninger, når de er konfigureret korrekt. Jeg har selvstudier til næsten alle cache-plugin.

&# X1f680; Vil fixing af andre GTmetrix-emner reducere HTTP-anmodninger?

Ja, i mange tilfælde vil det især minimere og kombinere filer, fjerne omdirigeringsfejl og bruge et CDN kan også hjælpe.

&# X1f680; Hvilket cache-plugin reducerer HTTP-anmodninger mest, og hvordan man konfigurerer det?

Jeg anbefaler WP Rocket, der blev bedømt som nr. 1 i de fleste Facebook-afstemninger og har flere hastighedsoptimeringsfunktioner end de fleste cache-plugins, hvorfor det normalt giver bedre scoringer og belastningstider i GTmetrix. Se min tutorial om konfiguration af WP Rocket-indstillinger.

Tak for at have læst :)

Skål,
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