Poslednjih godina, sve više platformi za optimizaciju front-end projekata nudi mogućnosti za samostalno hostovanje ili proxy resurse trećih strana. Akamai vam omogućava postavljanje za sami generirane URL-ove. Cloudflare ima tehnologiju Edge Workers. Fasterzine može URL-ovi na stranicama tako da upućuju na resurse trećih strana koji se nalaze na glavnoj domeni stranice.
Ako znate da se usluge trećih strana koje se koriste u vašem projektu ne mijenjaju često i da bi se proces njihovog dostavljanja klijentima mogao poboljšati, onda vjerojatno razmišljate o proxy-u takvih usluga. Ovim pristupom možete vrlo dobro približiti ove resurse svojim korisnicima i steći potpuniju kontrolu nad njihovim keširanjem na strani klijenta. Ovo vam, osim toga, omogućava da zaštitite korisnike od problema uzrokovanih „slomom“ usluge treće strane ili degradacijom njenih performansi.
Dobro: Poboljšane performanse
Samohostovanje tuđih resursa poboljšava performanse na vrlo očigledan način. Pregledač ne mora ponovo pristupiti DNS-u, ne treba uspostaviti TCP vezu i izvršiti TLS rukovanje na domeni treće strane. Možete vidjeti kako samo-hostovanje tuđih resursa utiče na performanse upoređujući sljedeće dvije brojke.
Resursi trećih strana preuzimaju se iz vanjskih izvora (preuzeti sa )
Resursi trećih strana pohranjuju se na istom mjestu kao i ostali materijali web lokacije (preuzeti sa )
Situaciju popravlja i činjenica da će pretraživač koristiti mogućnost multipleksiranja i prioritetizacije podataka sa HTTP/2 veze koja je već uspostavljena sa glavnim domenom.
Ako ne hostirate resurse trećih strana, budući da će se oni učitavati s domene različite od glavne, ne može im se dati prioritet. To će uzrokovati da se međusobno takmiče za propusni opseg klijenta. To može rezultirati vremenom učitavanja sadržaja koji je kritičan za izgradnju stranice koje je mnogo duže od onoga što bi se moglo postići u idealnim okolnostima. razgovarajte o HTTP/2 prioritetima koji sve ovo vrlo dobro objašnjava.
Može se pretpostaviti da je upotreba atributa vezana za eksterne resurse preconnect pomoći će u rješavanju problema. Međutim, ako ima previše ovih veza na različite domene, to zapravo može preopteretiti komunikacijsku liniju u najvažnijem trenutku.
Ako sami hostujete resurse treće strane, možete kontrolirati kako se točno ti resursi daju klijentu. Naime, govorimo o sledećem:
- Možete osigurati da se koristi algoritam kompresije podataka koji najbolje odgovara svakom pretraživaču (Brotli/gzip).
- Možete povećati vrijeme keširanja za resurse koji obično nisu posebno dugi, čak i kod najpoznatijih dobavljača (na primjer, odgovarajuća vrijednost za GA oznaku je postavljena na 30 minuta).
Možete čak i produžiti TTL za resurs na, recimo, godinu dana ugradnjom relevantnog sadržaja u svoju strategiju upravljanja keširanjem (URL hash, verzija verzija, itd.). O tome ćemo razgovarati u nastavku.
▍Zaštita od prekida u radu usluga trećih strana ili njihovog gašenja
Još jedan zanimljiv aspekt resursa trećih strana koji sami hostuju je to što vam omogućava da ublažite rizike povezane sa prekidima usluga trećih strana. Pretpostavimo da je rješenje za A/B testiranje treće strane koje koristite implementirano kao skripta za blokiranje koja se učitava u glavnom dijelu stranice. Ova skripta se učitava sporo. Ako se odgovarajuća skripta ne učita, stranica će biti prazna. Ako učitavanje traje jako dugo, stranica će se pojaviti sa velikim zakašnjenjem. Ili, pretpostavimo da projekat koristi biblioteku preuzetu sa CDN resursa treće strane. Zamislimo da je ovaj resurs doživio neuspjeh ili je bio blokiran u određenoj zemlji. Takva situacija će dovesti do kršenja logike stranice.
Da biste saznali kako vaša stranica radi kada neka vanjska usluga nije dostupna, možete koristiti SPOF odjeljak na .
SPOF odjeljak na webpagetest.org
▍Šta je sa problemima sa keširanjem materijala u pretraživačima? (nagoveštaj: to je mit)
Možda mislite da bi korištenje javnih CDN-ova automatski dovelo do boljih performansi resursa, budući da ove usluge imaju mreže prilično visokog kvaliteta i distribuirane su širom svijeta. Ali sve je zapravo malo komplikovanije.
Recimo da imamo nekoliko različitih stranica: website1.com, website2.com, website3.com. Sve ove stranice koriste jQuery biblioteku. Povezujemo ga s njima pomoću CDN-a, na primjer - googleapis.com. Možete očekivati da će pretraživač jednom preuzeti i keširati biblioteku, a zatim je koristiti na sve tri lokacije. Ovo bi moglo smanjiti opterećenje mreže. Možda će vam to omogućiti da negdje uštedite novac i poboljšate performanse resursa. Sa praktične tačke gledišta, sve izgleda drugačije. Na primjer, Safari ima funkciju pod nazivom : Keš memorija koristi dvostruke ključeve na osnovu izvora dokumenta i izvora izvora treće strane. dobar clanak na ovu temu.
stare studije и , kao i novijeg datuma Paul Calvano, pokazuju da se resursi ne pohranjuju u keš pretraživača onoliko dugo koliko bismo očekivali: „Postoji ozbiljan jaz između vremena keširanja vlastitih resursa projekta i resursa trećih strana. Govorimo o CSS-u i web fontovima. Naime, 95% izvornih fontova ima vek trajanja keš memorije duži od nedelju dana, dok 50% fontova trećih strana ima vek trajanja keš memorije kraći od nedelju dana! Ovo web programerima daje uvjerljiv razlog da sami hostuju fajlove fontova!”
Kao rezultat toga, ako hostirate sadržaj drugih ljudi, nećete primijetiti nikakve probleme s performansama uzrokovane keširanjem pretraživača.
Sada kada smo pokrili prednosti samostalnog hostinga treće strane, hajde da razgovaramo o tome kako razlikovati dobru implementaciju ovog pristupa od lošeg.
Loš: Đavo 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 keširani.
Jedan od glavnih problema ovdje je vrijeme keširanja. Na primjer, informacije o verziji su uključene u nazive skripti trećih strana poput ove: jquery-3.4.1.js. Takva datoteka se neće mijenjati u budućnosti i kao rezultat toga neće uzrokovati probleme s njenim keširanjem.
Ali ako se neka šema verzioniranja ne koristi pri radu s datotekama, keširane skripte, čiji se sadržaj mijenja dok naziv datoteke ostaje nepromijenjen, mogu postati zastarjeli. Ovo može biti ozbiljan problem, jer, na primjer, ne dozvoljava da se automatske sigurnosne zakrpe dodaju skriptama koje klijenti trebaju primiti što je prije moguće. Programer će se morati potruditi da ažurira takve skripte u kešu. Osim toga, to može uzrokovati kvarove aplikacije zbog činjenice da se kod koji se koristi na klijentu iz keša razlikuje od najnovije verzije koda za koji je dizajniran serverski dio projekta.
Istina, ako govorimo o materijalima koji se često ažuriraju (tag manageri, rješenja za A/B testiranje), onda je njihovo keširanje pomoću CDN alata zadatak koji se može riješiti, ali je mnogo složeniji. Usluge kao što je Commanders Act, rješenje za upravljanje oznakama, koriste webhookove kada objavljuju nove verzije. Ovo vam daje mogućnost prisilnog čišćenja 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 keširanju, moramo uzeti u obzir činjenicu da postavke keširanja koje se koriste na CDN-u možda nisu prikladne za neke resurse treće strane. Na primjer, takvi resursi mogu koristiti tehnologiju njuškanja korisničkog agenta (prilagodljivo posluživanje) kako bi poslužili određene pretraživače sa verzijama sadržaja optimizovanim posebno za te pretraživače. Ove tehnologije se oslanjaju na regularne izraze, ili bazu podataka koja prikuplja informacije HTTP zaglavlja, da bi otkrila mogućnosti pretraživača. User-Agent. Kada znaju s kojim pretraživačem imaju posla, daju mu materijale dizajnirane za to.
Ovdje možete zapamtiti dvije usluge. Prvi je googlefonts.com. Drugi je polyfill.io. Usluga Google Fontovi obezbjeđuje, za određeni resurs, različite CSS kodove, ovisno o mogućnostima preglednika (davanje linkova na woff2 resurse koristeći unicode-range).
Evo rezultata nekoliko upita za Google Fontove napravljene iz različitih pretraživača.
Rezultat upita za Google fontove iz Chromea
Rezultat upita za Google Fontove izvršen iz IE10
Polyfill.io daje pretraživaču samo polifile koji su mu potrebni. Ovo se radi iz razloga performansi.
Na primjer, pogledajmo šta se dešava ako pokrenete sljedeći zahtjev iz različitih pretraživača:
Kao odgovor na takav zahtjev koji se izvršava iz IE10, bit će primljeno 34 KB podataka. A odgovor na njega, izvršen iz Chromea, bit će prazan.
Ljut: Neka razmatranja privatnosti
Ova tačka je posljednja po redu, ali ne i najmanje važna. Poenta je da samohostovanje resursa trećih strana na glavnom domenu projekta ili na njegovoj poddomeni može ugroziti privatnost korisnika i negativno uticati na glavni web projekat.
Ako vaš CDN sistem nije ispravno konfigurisan, možda ćete završiti slanjem kolačića vaše domene servisu treće strane. Ako pravilno filtriranje nije organizirano na nivou CDN-a, tada vaši kolačići sesije, koji se obično ne mogu koristiti u JavaScript-u (sa 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. Tragači trećih strana su možda postavili jedinstveni identifikator u kolačić. Ako su bili dio materijala web stranice, mogli su čitati identifikator po svom nahođenju dok korisnik radi s različitim web resursima.
Ovih dana većina pretraživača uključuje zaštitu od ove vrste ponašanja tragača. Kao rezultat toga, tragači sada koriste tehnologiju , maskirani u vlastite skripte za različite projekte. Naime, trekeri nude vlasnicima sajtova da u svoje postavke dodaju CNAME za određenu domenu, čija adresa obično izgleda kao nasumični skup znakova.
Iako se ne preporučuje da kolačići web stranice budu dostupni svim poddomenama (na primjer - *.website.com), mnoge web stranice to rade. U tom slučaju, takvi kolačići se automatski šalju na prikriveni tragač treće strane. Kao rezultat toga, više ne možemo govoriti ni o kakvoj privatnosti.
Takođe, ista stvar se dešava sa HTTP zaglavljima , koji se šalju samo na glavni domen, jer se mogu koristiti za kreiranje korisnik. Provjerite da li CDN usluga koju koristite ispravno filtrira ova zaglavlja.
Ishodi
Ako uskoro planirate implementirati samo-hostovanje resursa trećih strana, dozvolite mi da vam dam nekoliko savjeta:
- Hostujte svoje najvažnije JS biblioteke, fontove i CSS datoteke. Ovo će smanjiti rizik od kvara lokacije ili degradacije performansi zbog nedostupnosti resursa od vitalnog značaja za lokaciju zbog greške usluge treće strane.
- Prije nego što keširate resurse trećih strana na CDN-u, uvjerite se da se koristi neka vrsta sistema za utvrđivanje verzija prilikom imenovanja njihovih datoteka ili da možete upravljati životnim ciklusom ovih resursa ručnim ili automatskim resetiranjem CDN keš memorije prilikom objavljivanja nove verzije skripta.
- Budite veoma oprezni u vezi sa vašim CDN, proxy serverom i postavkama keša. Ovo će vam omogućiti da spriječite slanje kolačića vašem projektu ili zaglavljima
Client-Hintsusluge treće strane.
Dragi čitaoci! Da li na svojim serverima hostujete materijale drugih ljudi koji su izuzetno važni za rad vaših projekata?
izvor: www.habr.com