Nta l'ultimi anni, più è più piattaforme per ottimisà i prughjetti front-end offrenu opportunità per self-hosting o proxy risorse di terze parti. Akamai permette di stabilisce per URL autogenerati. Cloudflare hà tecnulugia Edge Workers. Fasterzine pò URL nantu à e pagine in modu chì puntanu à risorse di terze parti situate in u duminiu principale di u situ.
Se sapete chì i servizii di terze parti utilizati in u vostru prughjettu ùn cambianu assai spessu, è chì u prucessu di furnisce à i clienti puderia esse migliuratu, allora probabilmente pensate à proxy tali servizii. Cù questu approcciu, pudete assai bè avvicinassi sti risorse più vicinu à i vostri utilizatori è acquistà un cuntrollu più cumpletu nantu à a so caching in u latu di u cliente. Questu, in più, permette di prutezzione di l'utilizatori da i prublemi causati da u "crash" di un serviziu di terzu o degradazione di u so rendiment.
Bonu: Prestazione mejorata
L'auto-hosting di e risorse di l'altru migliurà u rendiment in una manera assai ovvia. U navigatore ùn hà micca bisognu di accede à DNS di novu, ùn hà micca bisognu di stabilisce una cunnessione TCP è eseguisce un handshake TLS in un duminiu di terzu. Pudete vede cumu l'auto-ospitu e risorse di l'altru affettanu u rendiment paragunendu i seguenti dui figuri.
I risorse di terzu sò scaricati da fonti esterne (pigliate da )
I risorsi di terzu sò almacenati in u stessu locu cum'è u restu di i materiali di u situ (presu da )
A situazione hè ancu migliurata da u fattu chì u navigatore hà da utilizà a capacità di multiplex è di priorità di dati da a cunnessione HTTP / 2 chì hè digià stabilitu cù u duminiu principale.
Se ùn avete micca ospitu risorse di terzu, perchè esse caricate da un duminiu sfarente da u principale, ùn ponu esse priorità. Questu pruvucarà à cumpetenu cù l'altri per a larghezza di banda di u cliente. Questu pò risultatu in i tempi di carica per u cuntenutu criticu per a custruzzione di una pagina chì hè assai più longa di ciò chì puderia esse realizatu in circustanze ideali. parlà nantu à a priorità HTTP / 2 chì spiega tuttu questu assai bè.
Pò esse presumitu chì l'usu di l'attributi in ligami à risorse esterne preconnect aiuterà à risolve u prublema. In ogni casu, s'ellu ci sò troppu di sti ligami à i duminii diffirenti, pò veramente sopracarricà a linea di cumunicazione in u mumentu più cruciale.
Se ospitu risorse di terzu stessu, pudete cuntrollà cumu esattamente queste risorse sò datu à u cliente. Vale à dì, parlemu di i seguenti:
- Pudete assicurà chì l'algoritmu di cumpressione di dati chì si adatta megliu à ogni navigatore hè utilizatu (Brotli/gzip).
- Pudete aumentà u tempu di caching per i risorse chì sò generalmente micca particularmente longu, ancu cù i fornituri più cunnisciuti (per esempiu, u valore currispundente per a tag GA hè stabilitu à 30 minuti).
Pudete ancu allargà u TTL per una risorsa à, per esempiu, un annu incorporendu cuntenutu pertinente in a vostra strategia di gestione di caching (hash URL, versioning, etc.). Avemu da parlà di questu quì sottu.
▍Prutezzione contr'à l'interruzzioni in u funziunamentu di i servizii di terzu o u so chjusu
Un altru aspettu ntirissanti di self-hosting risorsi di terzu partitu hè chì vi permette di mitigate i risichi assuciati incù outages di servizii di terzu-party. Assumimu chì a suluzione di prova A/B di terzu chì site aduprate hè implementata cum'è un script di bloccu chì carica in a sezione di testa di a pagina. Stu script si carica lentamente. Se u script currispundente ùn riesce à carica, a pagina serà viota. S'ellu ci vole assai tempu per carica, a pagina apparirà cun un longu ritardu. Or, supponi chì u prughjettu usa una biblioteca scaricata da una risorsa CDN di terzu. Imaginemu chì sta risorsa hà avutu un fallimentu o hè stata bluccata in un certu paese. Una tale situazione portarà à una violazione di a logica di u situ.
Per sapè cumu u vostru situ funziona quandu qualchì serviziu esternu ùn hè micca dispunibule, pudete aduprà a sezione SPOF .
Sezione SPOF in webpagetest.org
▍E i prublemi cù a caching di materiali in i navigatori? (indicazione: hè un mitu)
Puderete pensà chì l'usu di i CDN publichi portanu automaticamente à un megliu rendimentu di risorsa, postu chì questi servizii anu una rete d'alta qualità è sò distribuiti in u mondu. Ma tuttu hè veramente un pocu più complicatu.
Diciamu chì avemu parechji siti diffirenti: website1.com, website2.com, website3.com. Tutti sti siti utilizanu a biblioteca jQuery. Cunnettamu cun elli cù un CDN, per esempiu - googleapis.com. Pudete aspittà chì u navigatore scarichi è cache a biblioteca una volta, è dopu aduprà in tutti i trè siti. Questu puderia riduce a carica nantu à a reta. Forse questu vi permetterà di risparmià soldi in qualchì locu è aiuta à migliurà u rendiment di risorse. Da un puntu di vista praticu, tuttu pare diversu. Per esempiu, Safari hà una funzione chjamata : A cache usa chjavi duali basatu nantu à a fonte di u documentu è a fonte di a risorsa di terzu. bonu articulu nantu à questu tema.
studii antichi и , è ancu più recenti Paul Calvano, dimustranu chì e risorse ùn sò micca almacenate in i cache di u navigatore per u tempu chì pudemu aspittà: "Ci hè un seriu gap trà u tempu di caching di risorse di un prughjettu propiu è di terzu. Parlemu di CSS è fonts web. Vale à dì, u 95% di i fonti nativi anu una vita di cache di più di una settimana, mentre chì u 50% di i fonti di terzu anu una vita di cache di menu di una settimana! Questu dà à i sviluppatori web una ragione convincente per allughjà i fugliali di fonti stessi!"
In cunsiquenza, se ospitate u cuntenutu di l'altri, ùn avete micca avvistu di prublemi di rendiment causati da a cache di u navigatore.
Avà chì avemu cupertu i punti di forza di l'auto-hosting di terze parti, parlemu di cumu per dì una bona implementazione di questu approcciu da una mala.
U Badu: U diavulu hè in i dettagli
U muvimentu di risorse di terzu in u vostru propiu duminiu ùn pò micca esse fattu automaticamente senza assicurà chì tali risorse sò in cache.
Unu di i prublemi principali quì hè u tempu di cache. Per esempiu, l'infurmazione di versione hè inclusa in nomi di script di terzu partitu cum'è questu: jquery-3.4.1.js. Un tali schedariu ùn cambierà micca in u futuru, è in u risultatu questu ùn pruvucarà micca prublemi cù u so caching.
Ma se qualchì schema di versione ùn hè micca utilizatu quandu travaglia cù i schedari, scripts cached, chì u cuntenutu cambianu mentre u nome di u schedariu ùn hè micca cambiatu, pò esse obsoleti. Questu pò esse un prublema seriu, postu chì, per esempiu, ùn permettenu micca i parche di sicurezza automatizati per esse aghjuntu à i script chì i clienti anu bisognu di riceve u più prestu pussibule. U sviluppatore hà da fà un sforzu per aghjurnà tali script in a cache. Inoltre, questu pò causà fallimenti di l'applicazioni per u fattu chì u codice utilizatu nantu à u cliente da u cache differisce da l'ultima versione di u codice per a quale a parte di u servitore di u prughjettu hè designatu.
True, se parlemu di materiali chì sò aghjurnati freti (tag managers, suluzioni per a prova A / B), allora caching elli cù l'utili CDN hè un compitu chì pò esse risoltu, ma hè assai più cumplessu. I servizii cum'è Commanders Act, una soluzione di gestione di tag, utilizanu webhooks quandu publicanu novi versioni. Questu vi dà a capacità di furzà un flussu di cache nantu à u CDN, o, megliu ancu, a capacità di furzà un hash o l'aghjurnamentu di l'URL.
▍Consegna adattativa di materiali à i clienti
Inoltre, quandu parlemu di caching, avemu bisognu di piglià in contu u fattu chì i paràmetri di caching utilizati nantu à u CDN pò esse micca adattatu per qualchi risorse di terzu. Per esempiu, tali risorse ponu utilizà a tecnulugia di sniffing di l'agente d'utilizatore (serviziu adattatu) per serve navigatori specifichi cù versioni di cuntenutu ottimizzati specificamente per quelli navigatori. Queste tecnulugii s'appoghjanu nantu à espressioni regulare, o una basa di dati di informazioni di l'intestazione HTTP, per capisce e capacità di u navigatore. User-Agent. Una volta chì sanu cù quale navigatore si tratta, li dannu materiali pensati per questu.
Quì pudete ricurdà dui servizii. U primu hè googlefonts.com. U sicondu hè polyfill.io. U serviziu di Google Fonts furnisce, per una certa risorsa, diversi codici CSS, secondu e capacità di u navigatore (dendu ligami à risorse woff2 utilizendu unicode-range).
Eccu i risultati di un paru di dumande di Google Fonts fatti da diversi navigatori.
Google Fonts query risultatu da Chrome
Risultatu di a dumanda di Google Fonts eseguita da IE10
Polyfill.io dà u navigatore solu i polyfills chì hà bisognu. Questu hè fattu per ragioni di rendiment.
Per esempiu, fighjemu un ochju à ciò chì succede se eseguite a seguente dumanda da diversi navigatori:
In risposta à una tale dumanda eseguita da IE10, 34 KB di dati seranu ricevuti. È a risposta à questu, eseguita da Chrome, serà viota.
Arrabbiatu: Alcune considerazioni di privacy
Stu puntu hè l'ultimu in ordine, ma micca menu impurtante. U puntu hè chì l'auto-hosting di risorse di terzu in u duminiu principale di u prugettu o in u so subdominiu pò mette in periculu a privacy di l'utilizatori è affettanu negativamente u prughjettu web principale.
Se u vostru sistema CDN ùn hè micca cunfiguratu bè, pudete finisce per mandà i cookies di u vostru duminiu à un serviziu di terzu. Se u filtru propiu ùn hè micca urganizatu à u livellu CDN, allora i vostri cookies di sessione, chì normalment ùn ponu micca esse aduprati in JavaScript (cù u httponly), pò esse mandatu à un òspite straneru.
Questu hè esattamente ciò chì pò accade cù trackers cum'è Eulerian o Criteo. I trackers di terzu pò avè stabilitu un identificatore unicu in a cookie. S'elli eranu parti di materiali di u situ, puderanu leghje l'identificatore à a so discrezione mentre l'utilizatore travagliava cù diverse risorse web.
In questi ghjorni, a maiò parte di i navigatori includenu prutezzione contru stu tipu di cumpurtamentu di tracker. In u risultatu, i trackers usanu avà a tecnulugia , mascherendu cum'è i so scripti per diversi prughjetti. Vale à dì, i trackers offrenu à i pruprietarii di u situ per aghjunghje un CNAME à i so paràmetri per un certu duminiu, l'indirizzu di u quale di solitu s'assumiglia à un set aleatoriu di caratteri.
Ancu s'ellu ùn hè micca cunsigliatu per fà i cookies di u situ web dispunibuli per tutti i subdominii (per esempiu - *.website.com), parechji siti facenu questu. In questu casu, tali cookies sò automaticamente mandati à un tracker di terzu disguised. In u risultatu, ùn pudemu più parlà di alcuna privacy.
Inoltre, a listessa cosa succede cù l'intestazione HTTP , chì sò mandati solu à u duminiu principale, postu ch'elli ponu esse usatu per creà utilizatore. Assicuratevi chì u serviziu CDN chì utilizate filtri questi intestazioni currettamente.
Risultati
Sè avete intenzione di implementà l'auto-ospitu di risorse di terzu prestu, lasciami dà alcuni cunsiglii:
- Ospita e vostre biblioteche JS più impurtanti, fonti è fugliali CSS. Questu riduce u risicu di fallimentu di u situ o di degradazione di u rendiment per via di una risorsa vitale per u situ chì ùn hè micca dispunibule per a culpa di un serviziu di terzu.
- Prima di mette in cache risorse di terze parti in un CDN, assicuratevi chì un tipu di sistema di versioning hè utilizatu quandu chjamate i so fugliali, o chì pudete gestisce u ciclu di vita di sti risorse resetting manualmente o automaticamente a cache CDN quandu pubblicà una nova versione di u script.
- Fate assai attenti à u vostru CDN, server proxy è paràmetri di cache. Questu permetterà di impedisce u vostru prughjettu o intestazioni da esse mandati cookies
Client-Hintsservizii di terzu parti.
Beni, lettori! Ospitu i materiali di l'altri in i vostri servitori chì sò estremamente impurtanti per u funziunamentu di i vostri prughjetti?
Source: www.habr.com