Posljednjih godina sve više platformi za optimizaciju front-end projekata nudi mogućnosti za samostalno hosting ili proxy resurse trećih strana. Akamai vam omogućuje postavljanje za samogenerirane URL-ove. Cloudflare ima tehnologiju Edge Workers. Fasterzine može URL-ove na stranicama tako da upućuju na resurse trećih strana koji se nalaze na glavnoj domeni web-mjesta.
Ako znate da se usluge trećih strana koje se koriste u vašem projektu ne mijenjaju često i da bi se proces njihove isporuke klijentima mogao poboljšati, onda vjerojatno razmišljate o proxyju takvih usluga. Ovim pristupom vrlo dobro možete te resurse približiti svojim korisnicima i dobiti potpuniju kontrolu nad njihovim predmemoriranjem na strani klijenta. To, osim toga, omogućuje zaštitu korisnika od problema uzrokovanih "padom" usluge treće strane ili degradacijom njezine izvedbe.
Dobro: poboljšane performanse
Samostalno hostiranje tuđih resursa poboljšava izvedbu na vrlo očit način. Preglednik ne mora ponovno pristupiti DNS-u, ne mora uspostaviti TCP vezu i izvršiti TLS rukovanje na domeni treće strane. Usporedbom sljedeće dvije brojke možete vidjeti kako samostalno hosting tuđih resursa utječe na performanse.
Resursi trećih strana preuzimaju se iz vanjskih izvora (preuzeto s )
Resursi trećih strana pohranjeni su na istom mjestu kao i ostali materijali stranice (preuzeto s )
Situaciju poboljšava i činjenica da će preglednik koristiti mogućnost multipleksiranja i prioritiziranja podataka iz HTTP/2 veze koja je već uspostavljena s glavnom domenom.
Ako ne hostirate resurse treće strane, budući da će se učitavati s domene koja nije glavna, ne može im se dati prioritet. Zbog toga će se međusobno natjecati za propusnost klijenta. To može dovesti do vremena učitavanja sadržaja kritičnog za izgradnju stranice koje je puno dulje od onoga što bi bilo moguće postići u idealnim okolnostima. razgovor o HTTP/2 prioritizaciji koji sve ovo vrlo dobro objašnjava.
Može se pretpostaviti da korištenje atributa u poveznicama na vanjske resurse preconnect pomoći će u rješavanju problema. Međutim, ako ima previše ovih poveznica na različite domene, to zapravo može preopteretiti komunikacijsku liniju u najvažnijem trenutku.
Ako sami hostirate resurse trećih strana, možete kontrolirati kako se točno ti resursi daju klijentu. Naime, riječ je o sljedećem:
- Možete osigurati da se koristi algoritam kompresije podataka koji najbolje odgovara svakom pregledniku (Brotli/gzip).
- Možete povećati vrijeme predmemoriranja za resurse koji obično nisu osobito dugi, čak i kod najpoznatijih pružatelja usluga (na primjer, odgovarajuća vrijednost za GA oznaku postavljena je na 30 minuta).
Možete čak produžiti TTL za resurs na, recimo, godinu dana uključivanjem relevantnog sadržaja u svoju strategiju upravljanja predmemorijom (URL hashovi, verzije itd.). O tome ćemo govoriti u nastavku.
▍Zaštita od prekida u radu usluga trećih strana ili njihovog gašenja
Još jedan zanimljiv aspekt samostalnog hostinga resursa trećih strana je taj što vam omogućuje ublažavanje rizika povezanih s prekidima usluga trećih strana. Pretpostavimo da je rješenje treće strane za A/B testiranje koje koristite implementirano kao skripta za blokiranje koja se učitava u dijelu stranice zaglavlje. Ova skripta se sporo učitava. Ako se odgovarajuća skripta ne uspije učitati, stranica će biti prazna. Ako učitavanje traje jako dugo, stranica će se pojaviti s velikim kašnjenjem. Ili, pretpostavimo da projekt koristi biblioteku preuzetu s CDN resursa treće strane. Zamislimo da je ovaj resurs doživio kvar ili da je blokiran u određenoj zemlji. Takva situacija dovest će do kršenja logike stranice.
Da biste saznali kako vaša stranica radi kada je neka vanjska usluga nedostupna, možete koristiti odjeljak SPOF na .
SPOF odjeljak na webpagetest.org
▍Što je s problemima s predmemoriranjem materijala u preglednicima? (savjet: to je mit)
Možda mislite da bi korištenje javnih CDN-ova automatski dovelo do boljih performansi resursa, budući da te usluge imaju mreže prilično visoke kvalitete i distribuirane su diljem svijeta. Ali sve je zapravo malo kompliciranije.
Recimo da imamo nekoliko različitih web stranica: website1.com, website2.com, website3.com. Sve te stranice koriste biblioteku jQuery. Povezujemo ga s njima pomoću CDN-a, na primjer - googleapis.com. Možete očekivati da će preglednik jednom preuzeti i spremiti biblioteku u predmemoriju, a zatim je koristiti na sva tri mjesta. To bi moglo smanjiti opterećenje mreže. Možda će vam to omogućiti da negdje uštedite novac i poboljšati učinkovitost resursa. S praktične strane sve izgleda drugačije. Na primjer, Safari ima značajku tzv : Predmemorija koristi dvostruke ključeve na temelju izvora dokumenta i izvora izvora treće strane. dobar članak na ovu temu.
stare studije и , kao i novijeg datuma Paul Calvano, pokazuju da se resursi ne pohranjuju u predmemoriji preglednika onoliko dugo koliko bismo očekivali: “Postoji ozbiljan jaz između vremena predmemoriranja vlastitih resursa projekta i resursa treće strane. Govorimo o CSS-u i web fontovima. Naime, 95% nativnih fontova ima trajanje predmemorije dulje od tjedan dana, dok 50% fontova trećih strana ima trajanje predmemorije kraće od tjedan dana! Ovo daje web programerima uvjerljiv razlog da sami udome datoteke fontova!”
Kao rezultat toga, ako hostirate tuđi sadržaj, nećete primijetiti probleme s performansama uzrokovane predmemorijom preglednika.
Sad kad smo pokrili prednosti samostalnog hostinga treće strane, razgovarajmo o tome kako razlikovati dobru implementaciju ovog pristupa od loše.
Loše: Vrag je u detaljima
Premještanje resursa trećih strana na vašu vlastitu domenu ne može se izvršiti automatski bez osiguranja da su ti resursi pravilno predmemorirani.
Jedan od glavnih problema ovdje je spremanje vremena u predmemoriju. Na primjer, informacije o verziji uključene su u nazive skripti trećih strana poput ovog: jquery-3.4.1.js. Takva se datoteka neće mijenjati u budućnosti, pa kao rezultat toga neće uzrokovati probleme s njezinim pohranjivanjem u predmemoriju.
No, ako se neka shema upravljanja verzijama ne koristi pri radu s datotekama, predmemorirane skripte, čiji se sadržaj mijenja dok naziv datoteke ostaje nepromijenjen, mogu zastarjeti. To može biti ozbiljan problem jer, na primjer, ne dopušta dodavanje automatiziranih sigurnosnih zakrpa skriptama koje klijenti trebaju primiti što je prije moguće. Programer će se morati potruditi ažurirati takve skripte u predmemoriji. Osim toga, to može uzrokovati kvarove aplikacije zbog činjenice da se kod koji se koristi na klijentu iz predmemorije razlikuje od posljednje verzije koda za koji je dizajniran poslužiteljski dio projekta.
Istina, ako govorimo o materijalima koji se često ažuriraju (tag manageri, rješenja za A/B testiranje), onda je njihovo predmemoriranje pomoću CDN alata rješiv zadatak, ali je puno složeniji. Usluge kao što je Commanders Act, rješenje za upravljanje oznakama, koriste web-dojavnike prilikom objavljivanja novih verzija. To vam daje mogućnost prisilnog ispiranja predmemorije na CDN-u ili, još bolje, mogućnost prisilnog ažuriranja hash-a ili URL-a.
▍Prilagodljiva isporuka materijala klijentima
Osim toga, kada govorimo o predmemoriranju, moramo uzeti u obzir činjenicu da postavke predmemoriranja koje se koriste na CDN-u možda nisu prikladne za neke resurse trećih strana. Na primjer, takvi resursi mogu koristiti tehnologiju njuškanja korisničkog agenta (prilagodljivo posluživanje) za posluživanje određenih preglednika s verzijama sadržaja optimiziranim posebno za te preglednike. Ove se tehnologije oslanjaju na regularne izraze ili bazu podataka s informacijama HTTP zaglavlja kako bi se otkrile mogućnosti preglednika. User-Agent. Nakon što saznaju s kojim preglednikom imaju posla, daju mu materijale namijenjene za njega.
Ovdje se možete sjetiti dvije usluge. Prvi je googlefonts.com. Drugi je polyfill.io. Usluga Google Fonts pruža, za određeni resurs, različite CSS kodove, ovisno o mogućnostima preglednika (davanje poveznica na woff2 resurse pomoću unicode-range).
Ovdje su rezultati nekoliko Google Fonts upita napravljenih iz različitih preglednika.
Rezultat upita Google Fonts iz Chromea
Rezultat Google Fonts upita izvršenog iz IE10
Polyfill.io daje pregledniku samo one polifilove koji su mu potrebni. To je učinjeno zbog performansi.
Na primjer, pogledajmo što se događa ako pokrenete sljedeći zahtjev iz različitih preglednika:
Kao odgovor na takav zahtjev izvršen iz IE10, bit će primljeno 34 KB podataka. A odgovor na njega, izvršen iz Chromea, bit će prazan.
Ljut: Neka razmatranja privatnosti
Ova točka je zadnja po redu, ali ne i najmanje važna. Poanta je da samostalno hosting resursa trećih strana na glavnoj domeni projekta ili na njegovoj poddomeni može ugroziti privatnost korisnika i negativno utjecati na glavni web projekt.
Ako vaš CDN sustav nije ispravno konfiguriran, možda ćete poslati kolačiće svoje domene usluzi treće strane. Ako pravilno filtriranje nije organizirano na razini CDN-a, vaši kolačići sesije, koji se obično ne mogu koristiti u JavaScriptu (s httponly), može se poslati stranom domaćinu.
To je upravo ono što se može dogoditi s trackerima kao što su Eulerian ili Criteo. Programi za praćenje treće strane možda su postavili jedinstveni identifikator u kolačić. Ako su bili dio materijala stranice, mogli su čitati identifikator prema vlastitom nahođenju dok je korisnik radio s različitim web resursima.
Ovih dana većina preglednika uključuje zaštitu od ove vrste ponašanja programa za praćenje. Kao rezultat toga, tragači sada koriste tehnologiju , maskirajući se u vlastite scenarije za razne projekte. Naime, trackeri nude vlasnicima stranica da svojim postavkama za određenu domenu dodaju CNAME, čija adresa obično izgleda kao slučajni skup znakova.
Iako se ne preporučuje da kolačići web stranice budu dostupni svim poddomenama (na primjer - *.website.com), mnoge stranice to čine. U tom se slučaju takvi kolačići automatski šalju prikrivenom alatu za praćenje treće strane. Kao rezultat toga, više ne možemo govoriti o bilo kakvoj privatnosti.
Također, ista stvar se događa s HTTP zaglavljima , koji se šalju samo na glavnu domenu, jer se mogu koristiti za kreiranje korisnik. Provjerite filtrira li CDN usluga koju koristite ispravno ta zaglavlja.
Rezultati
Ako planirate uskoro implementirati samostalno hosting resursa trećih strana, dat ću vam nekoliko savjeta:
- Udomite svoje najvažnije JS biblioteke, fontove i CSS datoteke. To će smanjiti rizik od kvara stranice ili degradacije performansi zbog nedostupnosti resursa od vitalnog značaja za stranicu zbog pogreške usluge treće strane.
- Prije nego što resurse treće strane spremite u predmemoriju na CDN-u, provjerite koristi li se neka vrsta sustava za određivanje verzija prilikom imenovanja njihovih datoteka ili možete li upravljati životnim ciklusom tih resursa ručnim ili automatskim poništavanjem predmemorije CDN-a prilikom objavljivanja nove verzije skripta.
- Budite vrlo oprezni s postavkama CDN-a, proxy poslužitelja i predmemorije. To će vam omogućiti da spriječite slanje kolačića vašem projektu ili zaglavljima
Client-Hintsusluge trećih strana.
Dragi čitatelji! Hostate li tuđe materijale na svojim poslužiteljima koji su iznimno važni za rad vaših projekata?
Izvor: www.habr.com