Kako napraviti manje HTTP zahtjeva u WordPressu i GTmetrix YSlow

Trebate podnijeti manje HTTP zahtjeva na svojoj web stranici WordPress?


To samo znači da trebate smanjiti broj elemenata (zahtjeva) koji se učitavaju na vašoj web lokaciji.

Napravite manje HTTP zahtjeva

Kombinacija CSS i JavaScript datoteka može pomoći, ali postoje i druge optimizacije koje mogu smanjiti HTTP zahtjeve, poput selektivnog isključivanja dodataka koji se ne trebaju učitavati na određene stranice, onemogućavanja WooCommerce skripti i stilova na stranicama koje nisu e-trgovine ili izbjegavanja visokog CPU-a dodaci koji generiraju veliki broj zahtjeva i usporavaju vaše web mjesto.

Upućivanje manje HTTP zahtjeva preporuka je u GTmetrix-u, Pingdom-u i drugim alatima za ispitivanje brzine. Preporuke u nastavku pomoći će u smanjenju zahtjeva i vašoj web lokaciji brže.

1. Kombinirajte CSS tablice stilova + JavaScript

Kombinacija CSS tablica stilova + JavaScript znači da morate kopirati / zalijepiti sve u svojim CSS datotekama u jednu datoteku. To omogućava preglednicima da umjesto CSS datoteke umjesto jednog zahtjeva zatraže jedan jedini zahtjev. Većina predmemorija predmemorije ima mogućnost kombiniranja CSS + JavaScript datoteka.

Korak 1: U postavkama dodatka za predmemoriju pronađite opciju za kombiniranje i minimiziranje CSS + JavaScript.

Korak 2: Omogućite svaku pojedinačnu postavku i rezultate ispitivanja u GTmetrix-u.

Umanjite kombinirajte CSS datoteke

Umanjite kombinirajte JavaScript datoteke

3. korak: Provjerite postoje li vidljive pogreške na vašoj web lokaciji. Ako vidite pogreške, pregledajte izvorni kôd, pronađite problematične datoteke i isključite ih iz postavki za minifikaciju CSS ili JavaScript. Na primjer, ako vaš klizač nestane prilikom omogućavanja određene postavke, provjerite datoteke klizača u izvornom kodu i isključite problematičnu datoteku. Ako ne vidite pogreške, nema potrebe za tim.

Alternativno, možete ručno kombinirati CSS datoteke u programu WordPress pod stavkom Izgled > Urednik tema. Jednostavno bi kopirali i zalijepili sadržaj u sve datoteke u jednu CSS datoteku.

WordPress CSS datoteke

2. Selektivno onemogući dodatke

Mnogi se dodaci prikazuju na cijeloj vašoj web lokaciji, čak i na stranicama na kojima nisu potrebne.

Obrasci kontakata, dijeljenje na društvenim mrežama, bogati isječak, klizač i neki drugi dodaci trebaju se učitati samo na određene vrste sadržaja. Možete ih onemogućiti bilo gdje drugdje koristeći Čišćenje imovine.

Onemogućavanjem dodataka na stranicama na kojima ih nije potrebno učitati, to rezultira sa manje HTTP zahtjeva. To nije ograničenje dodataka; skripte i stilovi mogu se onemogućiti i na određenim stranicama (npr. skripte, stilovi, kolačići WooCommerce mogu se onemogućiti na stranicama koje nisu e-trgovine).

Korak 1: Instalirajte čišćenje sredstava ili Perfmatters (oba vam dozvoljavaju selektivno onemogućavanje dodataka).

Korak 2: Uredite stranicu ili post, pomaknite se prema dolje do odjeljka Čišćenje imovine i pregledajte koje CSS + JavaScript datoteke učitavaju na stranicu. To mogu biti dodaci, teme ili vanjske skripte.

Onemogući WordPress vanjske skripte

3. korak: Onemogućite sve dodatke i zahtjeve koji vam nisu potrebni na toj stranici. Možete ih onemogućiti na jednoj stranici na cijeloj vašoj web lokaciji prema vrsti posta ili ih koristiti RegEx (regularni izrazi) kako biste ih onemogućili na određenim uzorcima URL-a. RegEx isporučuje se samo s Perfmatters ili Asset CleanUp Pro.

3. Onemogućite WooCommerce skripte, stilove, ulomke košarice

Web lokacije WooCommerce prirodno generiraju više HTTP zahtjeva.

Ne samo da obično zahtijevaju više dodataka, već i učitavaju dodatne WooCommerce skripte, stilovi, i ulomci kolica. Baš kao što možete selektivno onemogućiti dodatke u prethodnom koraku, tako možete i selektivno onemogućiti WooCommerce zahtjeve za učitavanje na cijeloj web lokaciji..

Pomoću Asset CleanUp ili Perfmatters onemogućite ih na stranicama na koje ih nije potrebno učitavati:

Aktivnost CleanUp WooCommerce

Perfmatters vam omogućuje onemogućavanje u jednom kliku:

perfmatters optimizacija woocommercea

4. Izbjegavajte visoke CPU dodatke

Visoki CPU dodaci mogu generirati tonu HTTP zahtjeva.

To su obično društvena razmjena, statistika (analitika), klizači, portfelj, izrada stranica, kalendari, chat i dodaci za kontaktne obrasce. U osnovi, izbjegavajte dodatak koji povlači vanjske zahtjeve s vanjskih web stranica, pokreće u tijeku procese ili jednostavno traje dugo vremena za učitavanje.

Korak 1: Provjerite ima li spojnih dodataka u GTmetrix Waterfall ili Monitor upita.

Spora WordPress Plugin

Korak 2: Izbjegavajte poznate dodatke za CPU.

  1. Dodaj Ovo
  2. AdSense klikanje praćenje prijevara
  3. Kalendar događaja “Sve u jednom”
  4. Rezervni prijatelj
  5. Beaver Builder
  6. Bolje WordPress Google XML Sitemapove
  7. Provjera prekida veze (koristi provjeru Dr. Link)
  8. Stalni kontakt za WordPress
  9. Kontakt obrazac 7
  10. Pogledajte svih 65 sporih dodataka

3. korak: Zamijenite spore dodatke bržim i lakšim dodacima. Potrebna su istraživanja i ispitivanja.

5. Zamijenite dodatke s kodom

Mnogo dodataka možete izbjeći zamjenom koda.

Primjeri:

  • Google Fontovi: locirajte svoje fontove lokalno
  • Google Analytics kôd za praćenje: umetnite ručno
  • Sadržaj: ručno ga dizajnirajte u HTML + CSS
  • Ugrađeni tweetovi ili Google karte: umjesto toga napravite snimku zaslona
  • Ugrađeni Facebook widget: zamijenite stvarnim Facebook widgetom

Konsolidiranje dodataka također pomaže. Jedan klasičan primjer je upotreba WP Rocket-a koji dolazi s lokalnim hostingom fontova, analitikom i Facebook Pixel-om, lijenim učitavanjem slika + videozapisa, čišćenjem baze podataka, unaprijed učitavanjem, kontrolom otkucaja srca i integracijom Cloudflare-a i više CDN-ova. S ostalim dodacima za predmemoriju (pošto većina nema te značajke), trebali biste instalirati 6-7 dodatnih dodataka da biste dobili te optimizacije brzine, kada su ugrađeni u WP Rocket.

6. Uklonite vanjske skripte

Vanjske skripte sve su što privlače zahtjeve s vanjskih web stranica.

Google fontovi mogu se kombinirati u jednu datoteku. Videozapisi se mogu lijeno učitati, a iframe zamijeniti pretpregledom slike. Mnoge se skripte mogu optimizirati, a druge ne mogu. Ispod je nekoliko primjera.

  • Google fontovi: kombinirajte fontove i domaćin ih lokalno koristeći dodatke kao što su WP Rocket, Automatski optimizirajte, OMGF, Samoposjedujući Google Fontovi i Asset CleanUp.
  • Google Analytics: kôd za praćenje hosta lokalno u WP Rocket / CAOS Analytics.
  • Google AdSense: učitajte se asinkrono i isprobajte Cloudflare Rocket Loader.
  • Google Maps: napravite scenski snimak Google mape i dodajte vezu na upute za vožnju kada ljudi kliknu na sliku (ovo izgleda jednako dobro kao i Karta)!
  • Google upravitelj oznaka: obično čini više štete nego koristi kada pokušavate kombinirati više skripti. Koristi se samo za velika, neoptimizirana web mjesta.
  • Ugrađeni videozapisi: koristite WP Rocket ili WP YouTube Lyte za lagano učitavanje videozapisa i zamijenite iframe s pretpreglednom slikom (videozapisi su vrlo težak element).
  • Ugrađeni widgeti + postovi: napravite snimke zaslona umjesto da ih umetnete.
  • Facebook Pixel: WP Rocket može dodati predmemoriranje preglednika na Facebook Pixel.
  • Gravatars: ništa mi nije pomoglo osim onemogućivanja Gravatara (WP Rocket ih ni na svom blogu ne koristi). Ali možete isprobati Harrys, FV ili Optimum Gravatar cache ili pokušati razbiti ili sakriti proširive komentare.
  • Dodaci za dijeljenje na društvenim mrežama: zloglasno generiraju zahtjeve od Facebooka, Twittera i društvenih mreža za osvježavanje poput broja. Pokušajte s bržim dodatkom poput Društveni pug, Mashsharer, Društveni SnapAddToAny, WP Društvena razmjena, ili Jednostavan društveni udio

7. Kombinirajte Google fontove

Google fontovi mogu se kombinirati za generiranje 1 zahtjeva umjesto više zahtjeva.

Google Fontovi-GTmetrix

Sljedeći dodaci imaju opcije za optimizaciju Google fontova:

  • WP Raketa
  • Čišćenje imovine
  • Autoptimize
  • OMGF

Najbolji način je ipak lokalno ugostiti Google fontove. To uključuje preuzimanje vaših fontova izravno s web lokacije Google Fontovi, a minimalan je s brojem fontova i težinom fontova. Zatim upotrijebite alat poput Transfonter ili pretvoriti fontove u datoteke s fontom. Zatim ćete prenijeti nove datoteke s web fontom u svoju wp-content / upload mapu, dodati prilagođeni font CSS-u i testirati font kako biste bili sigurni da djeluje. Ponovno pogledajte vezu za cjeloviti vodič.

Transfonter-Google-font-pretvorbe

7. Umanjite HTML, CSS, JavaScript

Miniranje datoteka obično radi pomoću dodatka za predmemoriju (vidi korak 1).

Ali ponekad to može pokvariti vašu web stranicu. U tom ćete slučaju morati testirati svaku postavku jednu po jednu, provjeriti postoje li problematične datoteke u izvornom kodu, a zatim te datoteke izuzeti iz minimizacije pomoću dodatka za predmemoriju. Ako ne vidite vidljive pogreške, ne morate to činiti.

8. Optimizirajte isporuku CSS-a

Ovo bi trebalo popraviti resursi za blokiranje prikazivanja stavka u PageSpeed ​​Insights.

WP Rocket, Autoptimize i ostali slični dodaci trebali bi imati mogućnost optimizacije isporuke CSS-a. Jednostavno uđite u svoje postavke i uvjerite se da je ovo omogućeno i to bi trebalo popraviti.

Optimizirajte isporuku CSS-a

9. Odložite / učitajte kombinirane JavaScript datoteke asinkrono

Asinhroni JavaScript znači učitavanje datoteka nakon stranica je gotova za preuzimanje.

To se može učiniti pomoću WP Rocket ili Async JavaScript i trebali popraviti ukloni JavaScript prikazivanje blokirajući. Async JavaScript vam daje potpunu kontrolu kojim skriptama treba dodati atribut ‘async’ ili ‘defer’, dok WP raketa automatski odlaže JavaScript s jednim klikom.

JavaScript datoteke

10. Lazy Load Videos

Ugrađeni videozapisi vanjski su resursi koji generiraju HTTP zahtjeve.

Za učitavanje im može trebati 2+ sekundi! Mada to ne možete potpuno ukloniti, možete odgoditi učitavanje videozapisa dok se korisnik ne pomakne dolje (lijeni teret) i klikne gumb za reprodukciju (ugradite svjetlo).

Ovdje imate nekoliko opcija: pomoću WP rakete možete omogućiti lagano učitavanje i zamijeniti YouTube iframe s slikom za pregled. Ali ako nemate WP Rocket, možete pokušati WP YouTube Lyte dodatak ili slijedite ovo tutorial o laganim YouTube ugrađenim. Oboje dobro rade.

Evo primjera (i odličan videozapis na WordPress Speed-u):

11. Dodajte CDN

CDN-ovi mogu pomoći u postavljanju manje broja HTTP zahtjeva.

Umjesto da vaš izvorni poslužitelj odgovori na zahtjev, podatkovni centri CDN-a nestat će širinu pojasa dok će posvjetliti učitavanje na izvornom poslužitelju. Cloudflare je besplatan, tako da ne misli.

Više CDN-ova = više podatkovnih centara = brža isporuka sadržaja i više pretovara resursa. Mnogi ljudi započinju s Cloudflareom, a zatim na kraju gledaju u StackPath kada koriste više CDN-ova (trenutno koristim oba). KeyCDN je također dobar. To se naziva “lanac” CDN-ova.

Postavljanje više CDN-ova
Pomoću Cloudflare-a dodjeljuju vam dva imena imena koje mijenjate u registru domena. S drugim CDN-ovima poput StackPath-a i KeyCDN-a, dodjeljuju vam CDN URL koji ćete zalijepiti u polje CDN URL-a u dodatku za predmemoriju (većina ih ima) ili koristiti CDN Enabler.

Više CDN-ova

12. Smanjite preusmjeravanja

Nepotrebna preusmjeravanja mogu uzrokovati dodatne HTTP zahtjeve.

Morat ćete pogledati svoje izvješće GTmetrix da biste vidjeli što uzrokuje ovu pogrešku. Da li ga generira vanjska skripta ili dodatak na vašoj web lokaciji? Jeste li pokušali optimizirati taj skriptu ili tražite lakši dodatak? Je li to zato što ste promijenili verziju svoje domene u ne-WWW ili HTTPS, ali niste ažurirali sve veze / slike na vašoj web lokaciji kako bi odražavale novu verziju?

Umanji pogreške u preusmjeravanju

Česti uzroci

  • Loši dodaci
  • Vanjske skripte
  • Promijenjeno u WWW vs Non-WWW, ali nisu ažurirali veze
  • Promijenjeno na HTTPS u odnosu na ne-HTTPS, ali nisu ažurirali veze

13. Optimizirajte slike

Za smanjenje HTTP zahtjeva uzrokovanih slikama, postoje 3 osnovna načina za optimizaciju slika:

Poslužite umanjene slike: promjena veličine slike kako bi bile manje. GTmetrix vam govori koje su slike prevelike i ispravne dimenzije koje biste trebali obrezati / promijeniti veličinu. Pokušajte stvoriti varalicu za dimenzije slike mjerenjem dimenzija klizača, slika bloga pune širine, widgeta i ostalih područja vaše web stranice. Zatim prije prijenosa promijenite veličinu slika u one ispravne dimenzije. Ako to učinite, nikada ne biste trebali poslužiti umanjene pogreške na slici.

Optimiziranje slika (kompresija bez gubitka): upotrijebite dodatak kao što je ShortPixel (preporučuje se), Smush ili Imagify da biste komprimirali slike. Iako ti dodaci kažu da nema gubitaka, ponekad možete primijetiti mali gubitak u kvaliteti. Zato je najbolje sigurnosno kopirati svoje slike i testirati ih par prije skupne optimizacije svih slika na vašoj web lokaciji kako biste bili zadovoljni kvalitetom.

Navedite Dimenzije slike: dodajte širinu + visinu u HTML ili CSS slike. To se automatski provodi u Visual Editoru, ali ne i prilagođeni HTML, neki proizvođači stranica i eventualno druga područja vaše WordPress web lokacije. GTmetrix će vam pokazati koje slike imaju ove greške i pružiti vam njihove ispravne dimenzije. Da biste riješili pogrešku, morat ćete pronaći sliku na nadzornoj ploči WordPress-a, urediti HTML ili CSS, a zatim dodati širinu + visinu.

Još uvijek trebate činiti manje HTTP zahtjeva?

Ako vam i dalje treba pomoć, ostavite mi komentar. WordPress ubrzava Facebook grupu Također je od pomoći, ili nas možete unajmiti za usluge brzine WordPress-a prije + nakon izvještaja GTmetrix-a.

WordPress ubrzava Facebook grupu

Često postavljana pitanja

&# X1f680; Što uzrokuje HTTP zahtjeve?

HTTP zahtjevi su sve što stvara zahtjev prema poslužitelju (na primjer, jedna slika stvara 1 zahtjev). Kartica Vodopad GTmetrix govori o svim zahtjevima za učitavanje na stranici.

&# X1f680; Koje su 5 stvari koje možete smanjiti za HTTP zahtjeve?

5 jednostavnih stvari koje možete učiniti su kombinirati CSS + JavaScript datoteke, lijene slike i video zapise, izbjegavati popis visokih CPU dodataka, selektivno onemogućiti dodatke s određenih stranica / postova pomoću Perfmatters ili Asset CleanUp i optimizirati fontove..

&# X1f680; Hoće li dodatak za predmemoriju pomoći u smanjenju HTTP zahtjeva?

Da, dobar dodatak za predmemoriju trebao bi pomoći u skraćivanju i kombiniranju datoteka, kao i smanjenju HTTP zahtjeva ako su ispravno konfigurirani. Imam udžbenike za gotovo svaki dodatak za predmemoriju.

&# X1f680; Popravljanje drugih stavki GTmetrix-a smanjuje HTTP zahtjeve?

Da, u mnogim slučajevima to će posebno pomoći kombiniranju i kombiniranju datoteka, uklanjanju pogrešaka u preusmjeravanju, a korištenje CDN-a također može pomoći.

&# X1f680; Koji dodatak predmemorije najviše smanjuje HTTP zahtjeve i kako to konfigurirati?

Preporučujem WP Rocket koji je u većini Facebook anketa ocijenjen brojem 1 i ima veće mogućnosti optimizacije brzine od većine predmemorira predmemoriranja, zbog čega obično daje bolje rezultate i vrijeme učitavanja u GTmetrixu. Pogledajte moj vodič o konfiguriranju postavki WP Rocket-a.

Hvala na čitanju :)

Živjeli,
mužjak nekih malih životinja

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