Sådan reduceres HTTP / S-anmodninger i WordPress

Sådan reduceres HTTP / S-anmodninger i WordPress

Her er en historie, du vil elske, hvis du vil fremskynde dit WordPress-sted.


Den anden dag byggede jeg et skinnende websted. Jeg gik helt ud og tilføjede WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, live radio (åh ja, det gjorde jeg), cookie-meddelelse, sociale medier og en masse andre plugins.

Ligesom dig var jeg tilbøjelig til at imponere mine besøgende, eller sådan tænkte jeg. Men så blev tingene uudholdeligt langsomt. Efter meget kvaler fyrede jeg op GTMetrix at skylle problemet ud.

Til min forfærdelse så jeg dette:

resultater for gtmetrixhastighed

Var jeg imponeret? Helvede til NAW! Jeg ønskede at score en perfekt A og reducere sideindlæsningstiden til under to sekunder.

Så jeg ramte re-test-knappen, men gæt hvad? Stadigvis det samme lidende resultat. Jeg var forfærdet, vred selv. Men jeg giver ikke let op, fordi den slags ting er uacceptabelt.

Ved du hvad jeg gjorde næste? Jeg testede hjemmesiden på Pingdom fordi GTMetrix kan sutte det. Men nedenfor er de dystre resultater igen:

resultater for pingdom værktøjer hastighedstest

Jeg blev bedrøvet. Den ordsprægede torn i mit kød var de forkerte HTTP-anmodninger, da jeg kunne løse mange af de andre problemer hurtigt.

For at gøre tingene værre, brugte jeg et WordPress-tema med e-handel, der indlæste en milliard elementer til opbygning af hjemmesiden. Til mit forsvar så det utroligt ud. Nogle brugere var enige om, at designet også var på udkig, så yay, jeg faldt ikke for kun tricket ��

Men fantastisk visuelt design og langsomme hastigheder går ikke hånd i hånd. Jeg havde brug for en løsning og hurtigt.

Hvordan kan jeg reducere HTTP-anmodninger på mit WordPress-sted?

Hver gang du besøger et WordPress-websted, flyttes en masse data mellem din browser og webstedets servere. Med andre ord fremsætter WordPress HTTP-anmodninger til forskellige servere for at opbygge, hvad brugerne ser, når de indlæser dit websted.

Hvis dit WordPress-websted kræver en masse elementer at indlæse, har du flere HTTP-anmodninger og vice versa. Flere HTTP-anmodninger betyder en langsom webside, dårlig brugeroplevelse (UX), dårlige SEO-scoringer og lave konverteringsfrekvenser.

WordPress-websteder er normalt dynamiske, hvilket betyder, at det kræver en masse forskellige dele at gengive dit websted i en browser. Den gode nyhed er, at du kan reducere HTTP-anmodninger og fremskynde dit websted betydeligt.

Og i dagens indlæg lærer du nøjagtigt hvordan!

Rapporter fra GTMetrix og Pingdom viser normalt, hvor problemet ligger. Som sådan kan du teste dit websted ved hjælp af begge værktøjer til at finde ud af, hvilke områder du skal forbedre. Med dine rapporter klar, kan du her reducere HTTP / S-anmodninger og fremskynde dit WordPress-sted.

Trin 1: Declutter

Fyrene, hvis du har en masse ting på dit WordPress-websted, har du for mange HTTP-anmodninger. Det er ingen hjerner. Det første trin til at reducere HTTP-anmodninger er decluttering.

Med det mener jeg at slippe af med alle de plugins, du ikke har brug for. WordPress-plugins leveres med masser af filer, hvad enten det er PHP, CSS eller JavaScript (JS). Hver fil, som hvert plugin udløser, opretter en HTTP-anmodning.

Hvis du har et væld af plugins, har du helt sikkert flere HTTP-anmodninger. Jo færre plugins, desto færre er anmodningerne. Det er helt enkelt.

Hvad skal man gøre?

Foretag en revision af dine plugins. Hvilke plugins skal du have for at køre dit websted? Er der plugins, du ikke har brug for? Har du plugins, der tilsluttes tredjepartsservere? Kan du undvære disse plugins?

For at reducere HTTP-anmodninger skal du afinstallere alle de plugins, du ikke har brug for. Hvis du har brug for et plugin lejlighedsvist, skal du kun installere det, når du har brug for det. Afinstaller derefter plugin.

Det samme gælder WordPress-temaer og indhold, som du ikke bruger. Rens alle de ting ud. Fjern alt, hvad du ikke har brug for; det er godt for dit websteds hastighed og sikkerhed.

Du kan gå den ekstra kilometer og indlæse plugins selektivt. Hvis du f.eks. Kun har brug for Kontaktformular 7 for at indlæse på din kontaktside, kan du forhindre, at andre plugins indlæses på den specifikke side.

Det ville være fantastisk, er du ikke enig? Og at tro, at du kun har brug for Asset CleanUp WordPress-plugin.

WP Asset CleanUp WordPress-plugin

Plugin er let at bruge og ganske effektiv. Eller som udvikleren udtrykker det:

“Asset CleanUp” scanner din side og registrerer alle de aktiver, der er indlæst. Alt hvad du skal gøre, når du redigerer en side / et indlæg, er bare at vælge den CSS / JS, der ikke er nødvendigt at indlæse, og på denne måde reducerer oppustningen.

Rens din installation allerede hombre; slippe af med uønsket – inkluderet kommentar-spam. Åh ja, fjern ødelagte links og optimer din database, mens du også er der. Dette er vigtige områder, der skal tages i betragtning, når det gælder at øge dit websteds hastighed, men jeg forringer.

Lad os vende tilbage til at reducere HTTP-anmodninger.

Trin 2: Optimer billeder

Et websted uden billeder er, vel, trist. De siger, at et billede taler tusind ord, og det er sejt. Men hvert billede tegner sig for en HTTP-anmodning. For at tilføje salt til skader er billeder top blandt elementer, der tager lang tid at indlæse.

Vi kan stadig ikke ignorere det faktum, at de fleste WordPress-temaer (læste sider) er afhængige af billeder og mange billeder for den sags skyld. Så i lyset af dette, hvordan kan du reducere HTTP-anmodninger ved at optimere dine billeder?

For det første skal du slippe af med alle de billeder, du ikke bruger. Vær hensynsløs; slippe af med al den oppustethed – du behøver det ikke. Derefter komprimeres og optimer billeder for at fjerne unødvendige fildata.

WP-komprimeringsplugin

Info & downloadSe demonstrationen

Mens der er et antal plugins at vælge imellem, kan vi godt lide WP Compress. Selvom det er en premiumtjeneste, gør den kraftige autooptimering af billeder, tabsfri komprimering, cloud-behandling for at reducere din serverbelastning, WebP-billedsupport, automatisk ændring af størrelse og mere, investeringen vel værd (se vores gennemgang for at lære mere). Derudover kan du få angivet med 100 billeder gratis – så du i det mindste kan prøve det.

Optimering af billeder reducerer ikke dine HTTP-anmodninger i sig selv, men det reducerer størrelsen på dine billedfiler, som oversættes til bedre sidehastigheder nede på linjen.

Alternativt for at reducere HTTP-anmodninger skal du udnytte kraften i CSS-billedsprites. For de uindviede er en sprite en samling af billeder, der er lagt i en enkelt billedfil.

Derefter ved hjælp af CSS-tricks, kan du vælge, hvilken del af billedet skal vises. Men hvordan reducerer dette HTTP-anmodninger? Her er en analogi.

Sig, at du havde brug for fem billeder på din startside. For at indlæse dit websted foretager din WordPress-installation fem ture til serveren for at hente billederne. Hvis du nu lægger alle de fem billeder i en enkelt billedfil (sprite), foretager din WordPress-installation kun en tur.

Ser du, hvor jeg skal hen med dette? Jo færre ture, jo mindre HTTP-anmodninger. Den bedste del er, at du ikke behøver at svede for at oprette og implementere CSS-billedsprites. Du kan bruge et værktøj som f.eks CSS Sprite Generator. Implementering af CSS-billedsprites er let, forudsat at du kender din vej omkring CSS.

Pro Tip: Du kan glemme alt om CSS-billedsprites, hvis dit websted bruger HTTP / 2, der understøtter asynkron indlæsning af billeder og scripts. GTMetrix tager ikke højde for HTTP / 2, når du scorer resultater, så du skal ikke bekymre dig, hvis det ser ud til, at dine billeder skaber et væld af HTTP-anmodninger.

Men jeg siger: Hvis CSS-billedsprites kan reducere HTTP-anmodninger markant på dit websted, og du ved, hvordan du implementerer det samme, skal du gå til det og slå de ekstra sekunder fra din sideindlæsningstid. Hvorvidt du har HTTP / 2 eller ej.

Når alt kommer til alt kræver en enkelt billedfil en enkelt HTTP-anmodning. Ti separate billeder har brug for 10 HTTP-anmodninger og så videre. Jeg ved, du får driften.

Trin 3: Kombiner & Minificer HTML, CSS & JavaScript

Den største årsag til mange HTTP-anmodninger på mit WordPress-websted var eksterne CSS- og JavaScript-filer. Jepp, jeg kæmpede med 43 JS-scripts og 22 CSS-filer. Det er en kæmpe 66 HTTP-anmodninger.

Ud af ca. 130 HTTP-anmodninger tegnede eksterne CSS- og JavaScript-anmodninger sig for ca. 51% af problemet! Det er bare latterligt. Tak, GTMetrix, stød min knytnæve.

Hvis jeg kombinerer og minimerer disse 44 JS- og 22 CSS-filer, kan jeg reducere mine HTTP-anmodninger markant, størrelsen på webstedet og den tid det tager at indlæse. Men hvad drejer det sig om at “kombinere” og “minificere” forretningen?

Ifølge Raelene Morey af ord af Birds (jeg er en stor fan ��), minifikation er processen med “… at fjerne unødvendige tegn, som kommentarer, formatering, hvid plads og nye linjer fra HTML-, CSS- og JavaScript-filer, der ikke er nødvendige for kode, der skal udføres. ”

Minifying reducerer filstørrelsen ved at fjerne alle andre tegn for kun at efterlade koden. Men hvis du har 66+ eksterne scripts, gør minificering ikke meget for at minimere HTTP-anmodninger. Til det skal du kombinere dine CSS- og JavaScript-filer.

Igen siger Raelene:

At kombinere filer er i mellemtiden ligesom det lyder. For eksempel, hvis din webside indlæser 5 eksterne CSS-filer og 5 eksterne JavaScript-filer, kombinerer du din CSS og JavaScript til en enkelt separat fil, vil hver resultere i kun 2 anmodninger i stedet for 10.

Forstår du? Det håber jeg bestemt. Kombination af filer reducerer HTTP-anmodninger. Minifikation reducerer på den anden side filstørrelsen. Kombiner de to, så dræber du to fugle med den samme sten.

Er der plugins? Ja selvfølgelig!

WP Rocket WordPress Cache Plugin

Info & DownloadSe demoen

Der er masser af WordPress-plugins til at kombinere og minimere dine filer. Et godt eksempel er WP Rocket-plugin. Det er dybest set en af ​​de bedste cache-plugins, der tilbyder dig funktioner til at kombinere og minimere filer med et par klik.

En anden populær (og gratis) indstillingen er Autoptimize plugin.

Forresten, mens du er ved det, reducerer du antallet af eksterne CSS-filer og JS-scripts? For eksempel, og vi nævner ikke navne her, har du virkelig brug for en kommentarplatform fra tredjepart? Har du brug for et live radio plugin?

Det betyder ikke noget, hvad jeg siger, fjern alle eksterne scripts og filer, du ikke har brug for.

Trin 4: Juster gengivelsesblokerende CSS- og JavaScript-filer

I nogle tilfælde er kombination af filer muligvis ikke en mulighed, især for tredjepartsfiler og scripts, der ofte ændres. I sådanne tilfælde kan du udsætte indlæsningen af ​​sådanne aktiver. HTTP / 2 understøtter asynkron indlæsning af filer, hvilket betyder, at alle filer indlæses samtidig.

Hvis du af en eller anden grund ikke har asynkron indlæsning (måske bruger du ikke HTTP / 2, eller manuskripterne er ikke asynkrone), kan disse filer nedsætte dit websted betydeligt.

Husk, at dine websider indlæses fra top til bund. Hvis du har gengivelsesblokerende CSS og JS øverst på din side, stopper browseren indlæsning, indtil filerne er indlæst fuldt ud. Som sådan vil brugerne se en tom side, indtil scripts indlæses, hvilket tager tid.

Hvordan? Flyt alle render-blokerende scripts fra toppen til bunden af ​​din webside. Men vær forsigtig her; behøver du ikke at flytte alle scripts til bunden. Jeg siger dette, da din side muligvis har brug for CSS og JS for at levere en grundigt spændende oplevelse.

Hvis du udsætter nogle CSS- eller JavaScript-filer, kan dine brugere muligvis se en forvrænget version af din webside, indtil siden indlæses fuldt, hvilket er nøjagtigt det modsatte af det, du vil opnå.

Så udskyd kun scripts, der ikke er nødvendigt for at indlæse siden. På den måde venter dine brugere ikke aldre på, at din side indlæses. Hvorfor? Fordi du har brug for færre HTTP-anmodninger for at levere din besked.

Det reducerer ikke HTTP-anmodninger i sig selv (fordi alle scripts og filer indlæses i sidste ende), men det reducerer antallet af HTTP-anmodninger, der er nødvendige for at gengive din side.

Det ligner meget doven indlæsning af billeder; billedet indlæses kun, når det er i visningen, ikke når resten (og de vigtigste dele) af siden indlæses.

Forresten kan fixing af render-blokerende CSS & JS muligvis afsløre filer og scripts, som du ikke behøver at oprette en webside.

Hvis det f.eks. Tager lang tid at indlæse nogle eksterne sociale delings-JS-script, kan du udsætte det. Desuden kan du fjerne det og opbygge social deling i dit tema.

Du fjerner HTTP-anmodninger og fremskynder dit websted, mens du bevarer den samme funktionalitet. Jeg forstår, at kodningsfunktioner i dit tema er en lang rækkefølge for de fleste begyndere, så tjek med en avanceret WP-bruger eller -udvikler.

Som et alternativ kan du bruge WP Rocket-plugin til at reparere render-blokerende scripts, men vær forsigtig. Læs deres dokumentation, fordi hvis du rodet tingene sammen, kan du nemt bryde dit websted.

Er der gratis muligheder? Selvfølgelig! Vi arbejder med WordPress, kan du huske? Du kan bruge Async JavaScript, blandt andre plugins.

Trin 5: Brug cache og CDN

Vidste du, at cache og CDN’er kan reducere dine HTTP-anmodninger? Det ser ikke ud til at være en kendsgerning i starten, men når du overvejer, hvad der sker bag kulisserne, kan du bruge cache og CDN til din fordel.

Cache involverer at gemme statiske filer i en browser, så brugerne ikke downloader filerne ved efterfølgende besøg. Lad os sige, at du har et cache-plugin, og brugeren downloader dit cache-indhold ved deres første besøg.

Ved efterfølgende besøg fremsætter dit websted ikke anmodninger til serveren. I stedet vil det tjene cache-ressourcer fra browseren, reducere HTTP-anmodninger og øge dit websteds hastighed.

En CDN (eller CIndholdsproduktion Delivery Network) er et netværk af servere placeret over hele verden. En CDN bruger også cache, men til endnu hurtigere hastigheder betjener CDN-udbyderen din cached indhold fra en server, der er tættest på besøgende.

Kortere afstande betyder hurtigere levering af indhold, og cache betyder, at dit websted ikke behøver at downloade det samme indhold fra den centrale server igen. Er det fornuftigt for dig?

Cloudflare CDN-plugin

Og bedst af alt er der et antal gratis CDN-indstillinger (eller i det mindste gratis forsøg, så du helt bogstaveligt kan se forskellen, det gør). Hos WPExplorer bruger vi og anbefaler CLoudflare, men vælg det CDN, du synes fungerer bedst for dig.

Bonus: Sørg for, at HTTP / 2 understøttes

Du gør muligvis alt for at reducere HTTP-anmodninger, men din webhost kan være årsagen til dine ondt. Bliv ikke overrasket; spørger og tænker, hvem – i denne tid og alder – bruger alt andet end HTTP / 2?

Du ved sandsynligvis ikke engang hvad HTTP / 2 handler om. For det første understøtter HTTP / 2 asynkron indlæsning af filer blandt andet. Det har andre fordele i forhold til HTTP 1.0, men det er en lektion til en anden dag.

Hvis du bruger HTTP 1.0 eller lavere, vil du bemærke et betydeligt antal HTTP-anmodninger.

Vær ikke hurtig til at dømme; Jeg har set webhostingudbydere, der stadig bruger HTTP 1.0 og ældre versioner af PHP. Ja, selv med de tilsyneladende fordele ved HTTP / 2 og PHP 7. Jeg bluffer ikke engang; nogle af deres kunder kommer til mig, når nogle af deres plugins ikke fungerer, og det er irriterende!

Men, hvorfor? Det faktum, at nogle web-hosting-udbydere ikke er generet af det faktum, at PHP 5.6 udskrives og har sikkerhedssårbarheder, er bare noget andet. Og hvis de ikke understøtter HTTP / 2, er det en aftale for dig.

KeyCDN HTTP / 2-test

Kontakt din vært eller brug KeyCDNs værktøj for at kontrollere, om din server understøtter HTTP / 2. Den bedste webhost understøtter HTTP / 2 og den nyeste version af PHP. Hvis din vært halter i begge tilfælde, bed dem om at opgradere eller vælge en bedre webhost.

Afsluttende ord

At reducere HTTP-anmodninger på dit WordPress-websted handler om at fjerne ting, som du ikke har brug for. Hvis du har en masse ting på dit WordPress-websted, vil du have en masse HTTP-anmodninger og relativt langsomme sidehastigheder.

For at reducere HTTP-anmodninger skal du declutter dit websted, optimere billeder, rette render-blokerende scripts, bruge cache og sikre, at din vært understøtter HTTP / 2. Bortset fra det, bestræb dig på at oprette enkle og rene websteder, der ikke kræver et ton af aktiver til at indlæse.

Hvis du har spørgsmål, så lad os vide det i kommentarafsnittet nedenfor. Skål til hurtigere websteder og en stor fremtid forude!

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