Në vitet e fundit, gjithnjë e më shumë platforma për optimizimin e projekteve frontend ofrojnë mundësi për hostimin e pavarur ose proxy të burimeve të palëve të treta. Akamai lejon përcaktimin e për URL-të e krijuara vetë. Cloudflare ka teknologjinë Edge Workers. Fasterzine mund të URL-të në faqet në mënyrë që ato të tregojnë për burime të palëve të treta, që ndodhen në domenin kryesor të faqes.
Nëse dihet se shërbimet e palëve të treta që përdoren në projektin tuaj nuk ndryshojnë shumë shpesh dhe se procesi i dorëzimit të tyre tek klientët mund të përmirësohet, atëherë për siguri po mendoni për proksimin e këtyre shërbimeve. Me këtë qasje, ju mund ta "afroni" këto burime me përdoruesit dhe të fitoni kontroll më të plotë mbi këshillimin e tyre në anën e klientit. Kjo, për më tepër, mbron përdoruesit nga ndonjë shqetësim që mund të shkaktohet nga "rënia" e shërbimit të palëve të treta ose degradimi i performancës së tij.
I mirë: Rritja e performancës
Hostimi i pavarur i burimeve të huaja përmirëson performancën në një mënyrë mjaft të dukshme. Shfletuesi nuk ka nevojë të kontaktojë disa herë për DNS, nuk i nevojitet të krijojë një lidhje TCP dhe të kryejë një dorëzim TLS në një domen të palëve të treta. Si e ndikon hostimi i pavarur i burimeve të huaja në performancë mund të shihet duke krahasuar dy imazhet e mëposhtme.
Burimet e palëve të treta ngarkohen nga burime të jashtme (marrë )
Burimet e palëve të treta ruhen aty ku ndodhen edhe materialet e tjera të faqes (marrë )
Situatën e përmirëson dhe fakti që shfletuesi do të përdorë mundësitë për shumëfishimin dhe prioritizimin e të dhënave në lidhjet HTTP/2, të cilat tashmë janë krijuar me domenin kryesor.
Nëse burimet e palëve të treta nuk ruhen në faqen tuaj, ato do të ngarkohet nga një domen tjetër, që do të thotë se nuk mund të prioritizohen. Kjo do të çojë në një garë ndërmjet tyre për bandën e klientit. Kjo mund të rezultojë në një kohë ngarkimi për materialet që janë kritikisht të rëndësishme për formimin e faqes, që do të jetë shumë më e gjatë se koha që mund të arrihet në rrethana ideale. një fjalim mbi HTTP/2-prioritizimin, ku e gjithë kjo shpjegohet shumë mirë.
Mund të supozohet se përdorimi i atributeve në lidhjet me burime të jashtme preconnect do të ndihmojë në zgjidhjen e problemit. Megjithatë, nëse ka shumë lidhje me domains të ndryshme, kjo mund, në të vërtetë, të mbingarkojë linjën e komunikimit në momentin më të rëndësishëm.
Nëse hostoni burimet e jashtme vetë, mund të kontrolloni se si saktësisht këto burime i jepen klientit. Ishte fjala për këtë:
- Mund të sigurohet për aplikimin e algoritmit të kompresimit të të dhënave, që i përshtatet më së miri çdo shfletuesi (Brotli/gzip).
- Mund të rritet koha e caching të burimeve, që zakonisht, madje edhe te ofruesit më të njohur, nuk është veçanërisht e madhe (për shembull, vlera për etiketën GA është vendosur në 30 minuta).
Mund të zgjasni madje treguesin TTL për burimin, për shembull, deri në një vit, duke përfshirë materialet përkatëse në strategjinë tuaj të menaxhimit të caching (hash-et e URL-ve, versionimi dhe kështu me radhë). Rreth kësaj do të flasim më poshtë.
âMbrojtja nga ndĂ«rprerjet e funksionimit tĂ« shĂ«rbimeve tĂ« jashtme ose nga çaktivizimi i tyre
Një aspekt tjetër interesant i hostimit të burimeve të jashtme është se kjo lejon të zbuten rreziqet që lidhen me ndërprerjet e shërbimeve të jashtme. Supozoni se zgjidhja e jashtme që po përdorni për testimin A/B është realizuar në formën e një skripti bllokues, i ngarkuar në seksionin e kokës së faqes. Ky skript ngarkohet ngadalë. Nëse ngarkimi i skriptit përkatës dështon, faqja do të jetë bosh. Nëse ngarkimi i saj do të marrë shumë kohë, faqja do të shfaqet me një vonesë të madhe. Apo, supozoni se projekti përdor një bibliotekë, e cila ngarkohet nga një burim CDN i jashtëm. Supozojmë se ky burim ka pësuar një dështim ose është bllokuar në një vend të caktuar. Një situatë e tillë do të çonte në prishjen e logjikës së punës së faqes.
Për të mësuar se si funksionon faqja juaj në kushte të papërshtatshme të një shërbimi të jashtëm, mund të përdorni seksionin SPOF në .
Seksioni SPOF në webpagetest.org
âĂfarĂ« mendoni pĂ«r problemet me cache-in e materialeve nĂ« shfletues? (kĂ«shillĂ«: ky Ă«shtĂ« njĂ« mit)
Mund t'i dukej se përdorimi i CDN-ve publik do të çonte automatikisht në performancë më të mirë të burimeve, pasi këto shërbime kanë rrjeta mjaft cilësore dhe janë të shpërndara në të gjithë botën. Por, në të vërtetë, gjithçka është pak më e komplikuar.
Le tĂ« supozojmĂ« se kemi disa faqe tĂ« ndryshme: website1.com, website2.com, website3.com. TĂ« gjitha kĂ«to faqe pĂ«rdorin bibliotekĂ«n jQuery. Ne e lidhim atĂ« me to, duke pĂ«rdorur CDN, pĂ«r shembull â googleapis.com. Mund tĂ« pritet qĂ« shfletuesi ta ngarkojĂ« njĂ« herĂ« dhe ta ruajĂ« nĂ« cache bibliotekĂ«n, e mĂ« pas ta pĂ«rdorĂ« atĂ« gjatĂ« punĂ«s me tĂ« tre faqet. Kjo mund tĂ« zvogĂ«lojĂ« ngarkesĂ«n nĂ« rrjet. Ndoshta, kjo do tĂ« ndihmojĂ« pĂ«r tĂ« kursyer diku dhe tĂ« ndihmojĂ« nĂ« pĂ«rmirĂ«simin e performancĂ«s sĂ« burimeve. MegjithatĂ«, nga njĂ« pikĂ«pamje praktike, gjithçka duket ndryshe. PĂ«r shembull, nĂ« Safari Ă«shtĂ« zbatuar njĂ« funksion i quajtur : nĂ« cache pĂ«rdoren çelĂ«sa dyfishtĂ«, qĂ« bazohen nĂ« burimin e dokumentit dhe nĂ« burimin e burimeve tĂ« jashtme. njĂ« artikull i mirĂ« nĂ« kĂ«tĂ« temĂ«.
Studime të vjetra dhe , si dhe më të reja Pola Calvano, tregojnë se burimet nuk ruhen në cache-t e shfletuesit aq gjatë sa mund të presim: "Ekziston një diferencë e rëndësishme midis kohës së cache-it të burimeve të veta dhe atyre të jashtme të projektit. Këtu flasim për CSS dhe për fontet në web. Saktësisht, koha e cache-it për 95% të fontëve të vet është mbi një javë, ndërsa koha e cache-it për 50% të fontëve të jashtëm është më pak se një javë! Kjo u jep zhvilluesve të web-it arsye të forta për të mbajtur ndarë skedarët e fontëve!".
Si rezultat, nëse do të mbani materiale të huaja, nuk do të vini re probleme me performancën, të shkaktuara nga cache-imi në shfletues.
Tani, kur kemi shqyrtuar pikat e forta të hostimit të burimeve të jashtme, le të flasim për atë se si të dallojmë një zbatim të mirë të këtij qasjeje nga një të keqe.
E keqe: djalli fshihet në detaje
Kërcimi i burimeve të jashtme në domenin tuaj nuk mund të bëhet automatikisht, pa u kujdesur për cache-imin e duhur të këtyre burimeve.
Një nga problemet kryesore këtu është koha e cache-it. Për shembull, informacionet për versionet përfshihen në emrat e skripteve të jashtme më ose pak si kjo: jquery-3.4.1.js. Një skedar i tillë në të ardhmen nuk do të ndryshojë, si rezultat, kjo nuk do të shkaktojë ndonjë problem me memorizimin e tij.
Por nëse nuk zbatohet një skemë versionimi për punën me skedarët, skriptet e memorizuara, përmbajtja e të cilave ndryshon me emrin e skedarit të pandryshuar, mund të bëhen të vjetruara. Kjo mund të bëhet një problem serioz, pasi, për shembull, nuk lejon që ndryshimet e sigurisë të futen automatikisht në skriptet, të cilat klientët duhet t'i marrin sa më shpejt. Zhvilluesi do të duhet të përpiqet të përditësojë këto skripte në memorie. Për më tepër, kjo mund të shkaktojë dështime në funksionimin e aplikacionit, të shkaktuara nga fakti se kodi i përdorur nga klienti nga memorie është i ndryshëm nga versioni i ri të kodit, për të cilin është menduar pjesa serverike e projektit.
Megjithatë, nëse flasim për materiale që përditësohen shpesh (menaxherët e etiketimeve, zgjidhjet për testimin A/B), atëherë memorizimi i tyre nga mjetet CDN është një detyrë, e cila, megjithatë, është shumë më e komplikuar. Shërbime si Commanders Act, zgjidhjet për menaxhimin e etiketimeve, kur publikojnë versione të reja, përdorin web-hooks. Kjo jep mundësinë për të organizuar një pastrim të memorie në CDN, ose, edhe më mirë, mundësinë për të thirrur përditësimin e hash-it ose versionit të URL-të.
âShpĂ«rndarja adaptuese e materialeve pĂ«r klientĂ«t
Për më tepër, kur flasim për memorizimin, duhet të marrim parasysh edhe faktin se cilësimet e memorizimit të përdorura në CDN mund të mos jenë të përshtatshme për disa burime të jashtme. Për shembull, këto burime mund të përdorin teknologjinë e sniffing të agjentëve të përdoruesve (user agent sniffing, adaptive serving) për të ofruar versione të materialeve të optimizuara veçanërisht për këto shfletues. Këto teknologji, për të zbuluar kapacitë e shfletuesit, mbështeten në shprehje të rregullta, ose në një bazë të dhënash, e cila përmban informacion rreth titujve HTTP. User-Agent. Duke mësuar se me cilin shfletues kanë të bëjnë, ata u japin atyre materialet e përshtatura për ta.
KĂ«tu mund tĂ« pĂ«rmendim dy shĂ«rbime. I pari â googlefonts.com. I dyti â polyfill.io. ShĂ«rbimi Google Fonts ofron, pĂ«r njĂ« burim tĂ« caktuar, kodin e ndryshĂ«m CSS, i cili varet nga mundĂ«sitĂ« e shfletuesit (duke dhĂ«nĂ« lidhje pĂ«r burimet woff2, duke pĂ«rdorur unicode-range).
Ja rezultatet e disa kërkesave ndaj Google Fonts, të kryera nga shfletues të ndryshëm.
Rezultati i kërkesës në Google Fonts, e kryer nga Chrome
Rezultati i kërkesës në Google Fonts, e kryer nga IE10
Polyfill.io i jep vetëm polifill-at që i nevojiten shfletuesit. Kjo bëhet për arsye të performancës.
Për shembull, le t'i hedhim një sy asaj që do të ndodhë nëse kryejmë këtë kërkesë nga shfletues të ndryshëm:
Në përgjigje të një kërkese të tillë, të kryer nga IE10, do të vijë 34 Kb të dhëna. Ndërsa përgjigjja nga Chrome do të jetë bosh.
E keqe: disa konsiderata për privatësinë
Ky pikë është i fundit në rend, por jo në rëndësi. Bëhet fjalë se hostimi i pavarur i burimeve të tretë në domenin kryesor të projektit ose në subdomenin e tij mund të dëmtojë privatësinë e përdoruesve dhe të ndikojë negativisht në projektin kryesor të uebit.
Nëse sistemi juaj CDN është konfiguruar keq, gjithçka mund të përfundojë me dërgimin e cookie-ve të domenit tuaj në një shërbim të tretë. Nëse në nivelin e CDN nuk do të organizohet një filtrimi i duhur, atëherë cookie-t tuaj të sesionit, të cilat në kushte normale nuk mund të përdoren në JavaScript (me atributin httponly), mund të dërgohen në një host të jashtëm.
Kjo mund të ndodhi me ndjekës si Eulerian ose Criteo. Ndjekës të jashtëm mund të vendosin një identifikues unik në cookie. Nëse ishin pjesë e materialeve të faqeve, ata mund të lexojnë identifikuesin sipas dëshirës gjatë punës së përdoruesit me burime të ndryshme të uebit.
Në ditët e sotme, shumica e shfletuesve përfshijnë mbrojtje nga sjellja e tillë e ndjekësve. Si rezultat, tani ndjekësit përdorin teknologjinë , duke u maskuar si skenar të tyre të ndryshëm. Në veçanti, ndjekësit i ofrojnë pronarëve të faqeve të shtojnë në konfigurimet e tyre CNAME për një domain, adresën e të cilit zakonisht duket si një grup rastësor simbolesh.
MegjithĂ«se nuk rekomandohet tĂ« bĂ«het qĂ« cookie-t e uebfaqes tĂ« jenĂ« tĂ« qasshme pĂ«r tĂ« gjitha subdomenet (pĂ«r shembull â *.website.com), kjo bĂ«het nĂ« shumĂ« faqe. NĂ« kĂ«tĂ« rast, cookie-t e tilla automatikisht dĂ«rgohen nĂ« njĂ« ndjekĂ«s tĂ« jashtĂ«m tĂ« maskuar. Si rezultat, privacy-nĂ«n as qĂ« mund tĂ« flasim.
Për më tepër, e njëjta gjë ndodh edhe me titujt HTTP , të cilat dërgohen vetëm në domenin kryesor, pasi ato mund të përdoren për krijimin e . Sigurohuni që shërbimi juaj CDN të filtrojë siç duhet këto tituj.
PĂ«rfundime
NĂ«se planifikoni tĂ« implementoni shĂ«rbim hostimi pĂ«r burime tĂ« jashtme sĂ« shpejti â lejoni qĂ« t'ju jap disa kĂ«shilla:
- Hostoni bibliotekat tuaja më të rëndësishme të JS, fontet dhe skedarët CSS vetë. Kjo do të reduktojë rrezikun e dështimit të faqes ose uljes së performancës për shkak se një burim jetik për funksionimin e faqes është bërë i paaksesueshëm për shkak të një shërbimi të jashtëm.
- Para se të ruani burime të jashtme në CDN, sigurohuni që sistemi i emrave të skedarëve të përdorë një sistem versionimi, ose që mund të menaxhoni ciklin e jetës së këtyre burimeve duke zbrazur manualisht ose automatikisht cache-n e CDN kur publikohet një version i ri i skriptit.
- Kujdesuni shumë me konfigurimet e CDN, serverit proxy, dhe cache-it. Kjo do të parandalojë dërgimin e cookie-ve të projektit tuaj ose titujve
Client-Hintsnë shërbime të jashtme.
Të nderuar lexues! A shpërndani materiale të huaja në serverat tuaj që janë jashtëzakonisht të rëndësishme për funksionimin e projekteve tuaja?
Burimi: habr.com
