Nan dènye ane yo, pi plis ak plis platfòm pou optimize pwojè front-end ofri opòtinite pou oto-hosting oswa proxy resous twazyèm pati. Akamai pèmèt ou mete pou URL pwòp tèt ou pwodwi yo. Cloudflare gen teknoloji Edge Workers. Fasterzine kapab URL sou paj pou yo montre resous twazyèm pati ki sitiye sou domèn prensipal sit la.
Si ou konnen ke sèvis twazyèm pati yo itilize nan pwojè ou a pa chanje trè souvan, e ke pwosesis la nan livrezon yo bay kliyan yo ta ka amelyore, Lè sa a, pwobableman ou ap panse sou proxy sèvis sa yo. Avèk apwòch sa a, ou ka trè byen pote resous sa yo pi pre itilizatè ou yo ak jwenn plis kontwòl konplè sou kachèt yo sou bò kliyan an. Sa a, anplis, pèmèt ou pwoteje itilizatè yo kont pwoblèm ki te koze pa "aksidan an" nan yon sèvis twazyèm pati oswa degradasyon nan pèfòmans li yo.
Bon: Pèfòmans amelyore
Oto-hosting resous yon lòt moun amelyore pèfòmans nan yon fason trè evidan. Navigatè a pa bezwen jwenn aksè nan DNS ankò, li pa bezwen etabli yon koneksyon TCP ak fè yon lanmen TLS sou yon domèn twazyèm pati. Ou ka wè ki jan pwòp tèt ou-hébergement resous yon lòt moun afekte pèfòmans lè w konpare de figi sa yo.
Resous twazyèm pati yo telechaje nan sous ekstèn (yo pran nan )
Resous twazyèm pati yo estoke nan menm kote ak rès materyèl sit la (yo pran nan )
Sitiyasyon an amelyore tou pa lefèt ke navigatè a pral sèvi ak kapasite nan multiplex ak priyorite done ki soti nan koneksyon an HTTP/2 ki te deja etabli ak domèn prensipal la.
Si ou pa òganize resous twazyèm pati, Lè sa a, depi yo pral chaje soti nan yon domèn diferan de youn prensipal la, yo pa ka priyorite. Sa a pral lakòz yo fè konpetisyon youn ak lòt pou Pleasant kliyan an. Sa a ka lakòz tan chaje pou kontni kritik pou bati yon paj ki pi long pase sa ki ta ka reyalize nan sikonstans ideyal. pale sou HTTP/2 priyorite ki eksplike tout bagay sa yo trè byen.
Li ka sipoze ke itilize nan atribi nan lyen ki mennen nan resous ekstèn preconnect pral ede nan rezoud pwoblèm nan. Sepandan, si gen twòp nan lyen sa yo nan domèn diferan, li ka aktyèlman surcharge liy kominikasyon an nan moman ki pi enpòtan an.
Si ou òganize resous twazyèm pati tèt ou, ou ka kontwole ki jan egzakteman resous sa yo bay kliyan an. Savwa, nou ap pale de bagay sa yo:
- Ou ka asire ke yo itilize algorithm konpresyon done ki pi byen adapte chak navigatè (Brotli/gzip).
- Ou ka ogmante tan an kachèt pou resous ki anjeneral pa patikilyèman long, menm ak founisè ki pi byen koni yo (pa egzanp, valè ki koresponn lan pou tag GA a mete sou 30 minit).
Ou ka menm pwolonje TTL pou yon resous pou, di, yon ane lè w enkòpore kontni ki enpòtan nan estrateji jesyon kachèt ou a (hash URL, vèsyon, elatriye). Nou pral pale sou sa anba a.
▍Pwoteksyon kont entèripsyon nan operasyon an nan sèvis twazyèm pati oswa fèmen yo
Yon lòt aspè enteresan nan oto-hosting resous twazyèm-pati se ke li pèmèt ou bese risk ki asosye ak pann nan sèvis twazyèm-pati. Ann sipoze ke solisyon tès A/B twazyèm pati w ap itilize a aplike kòm yon script bloke ki chaje nan seksyon tèt paj la. Script sa a chaje dousman. Si script korespondan an pa chaje, paj la ap vid. Si li pran anpil tan pou chaje, paj la ap parèt ak yon reta long. Oswa, sipoze pwojè a sèvi ak yon bibliyotèk telechaje nan yon resous CDN yon twazyèm pati. Ann imajine ke resous sa a te fè eksperyans yon echèk oswa yo te bloke nan yon sèten peyi. Yon sitiyasyon konsa ap mennen nan yon vyolasyon lojik sit la.
Pou chèche konnen ki jan sit ou a ap travay lè kèk sèvis ekstèn pa disponib, ou ka itilize seksyon SPOF sou .
Seksyon SPOF sou webpagetest.org
▍Ki sa ki sou pwoblèm ak kachèt nan materyèl nan navigatè? (Allusion: se yon mit)
Ou ta ka panse ke lè l sèvi avèk CDN piblik yo ta otomatikman mennen nan pi bon pèfòmans resous, paske sèvis sa yo gen jistis bon jan kalite rezo epi yo distribye atravè mond lan. Men, tout bagay se aktyèlman yon ti kras pi konplike.
Ann di nou gen plizyè sit diferan: website1.com, website2.com, website3.com. Tout sit sa yo sèvi ak bibliyotèk jQuery. Nou konekte li ak yo lè l sèvi avèk yon CDN, pou egzanp - googleapis.com. Ou ka atann navigatè a telechaje ak kachèt bibliyotèk la yon fwa, epi sèvi ak li atravè tout twa sit. Sa a ka diminye chaj la sou rezo a. Petèt sa a pral pèmèt ou ekonomize lajan yon kote epi ede amelyore pèfòmans resous yo. Soti nan yon pwen de vi pratik, tout bagay sanble diferan. Pou egzanp, Safari gen yon karakteristik ki rele : Kachèt la sèvi ak kle doub ki baze sou sous dokiman an ak sous resous twazyèm pati a. bon atik sou sijè sa a.
ansyen etid и , osi byen ke pi resan Paul Calvano, montre ke resous yo pa estoke nan kachèt navigatè pou osi lontan ke nou ta ka espere: "Gen yon diferans grav ant tan an kachèt nan pwòp yon pwojè ak resous yon twazyèm pati. Nou ap pale de CSS ak polis entènèt. Savwa, 95% nan polis natif natal yo gen yon lavi kachèt ki gen plis pase yon semèn, pandan y ap 50% nan polis twazyèm-pati gen yon lavi kachèt nan mwens pase yon semèn! Sa a bay devlopè entènèt yo yon rezon konvenkan pou yo òganize dosye font tèt yo!"
Kòm yon rezilta, si ou òganize kontni lòt moun, ou pa pral remake okenn pwoblèm pèfòmans ki te koze pa kachèt navigatè a.
Kounye a ke nou te kouvri fòs yo nan twazyèm pati pwòp tèt ou-hébergement, an n pale sou ki jan yo di yon aplikasyon bon nan apwòch sa a soti nan yon move.
Move a: Dyab la se nan detay yo
Deplase resous twazyèm-pati yo nan domèn pwòp ou a pa ka fè otomatikman san yo pa asire ke resous sa yo byen nan kachèt.
Youn nan pwoblèm prensipal yo isit la se tan kachèt. Pou egzanp, enfòmasyon vèsyon yo enkli nan non script twazyèm pati tankou sa a: jquery-3.4.1.js. Fichye sa a pa pral chanje nan lavni, e kòm yon rezilta sa a pa pral lakòz okenn pwoblèm ak kachèt li yo.
Men, si gen kèk konplo vèsyon yo pa itilize lè w ap travay ak dosye, scripts nan kachèt, sa ki chanje pandan non fichye a rete san chanjman, ka vin demode. Sa a kapab yon pwoblèm grav, paske li, pou egzanp, pa pèmèt plak sekirite otomatik yo dwe ajoute nan scripts ke kliyan bezwen resevwa pi vit ke posib. Pwomotè a pral oblije fè yon efò pou mete ajou scripts sa yo nan kachèt la. Anplis de sa, sa ka lakòz echèk aplikasyon akòz lefèt ke kòd la itilize sou kliyan an soti nan kachèt la diferan de vèsyon an dènye nan kòd la pou ki pati nan sèvè nan pwojè a fèt.
Se vre, si nou pale sou materyèl ki mete ajou souvan (manadjè tag, solisyon pou tès A/B), Lè sa a, kachèt yo lè l sèvi avèk zouti CDN se yon travay ki ka rezoud, men li pi konplèks. Sèvis tankou Commanders Act, yon solisyon jesyon tag, itilize webhooks lè yo pibliye nouvo vèsyon. Sa a ba ou kapasite pou fòse yon kole kachèt sou CDN a, oswa, pi bon toujou, kapasite pou fòse yon hash oswa URL aktyalizasyon.
▍Livrezon adaptab nan materyèl bay kliyan yo
Anplis de sa, lè nou pale sou kachèt, nou bezwen pran an kont lefèt ke anviwònman yo kachèt yo itilize sou CDN a ka pa apwopriye pou kèk resous twazyèm-pati. Pou egzanp, resous sa yo ka itilize teknoloji sniffing ajan itilizatè (sèvi adaptasyon) pou sèvi navigatè espesifik ak vèsyon kontni optimize espesyalman pou navigatè sa yo. Teknoloji sa yo konte sou ekspresyon regilye, oswa yon baz done enfòmasyon sou header HTTP, pou konnen kapasite navigatè a. User-Agent. Yon fwa yo konnen ki navigatè yo ap fè fas ak, yo ba li materyèl ki fèt pou li.
Isit la ou ka sonje de sèvis. Premye a se googlefonts.com. Dezyèm lan se polyfill.io. Sèvis Google Fonts bay, pou yon sèten resous, divès kòd CSS, depann sou kapasite navigatè a (bay lyen ki mennen nan resous woff2 lè l sèvi avèk unicode-range).
Isit la yo se rezilta yo nan yon koup nan rechèch Google Polis ki fèt nan navigatè diferan.
Rezilta rechèch Google Fonts soti nan Chrome
Rezilta rechèch Google Fonts egzekite soti nan IE10
Polyfill.io bay navigatè a sèlman polyfills li bezwen yo. Sa a se fè pou rezon pèfòmans.
Pou egzanp, ann gade sa k ap pase si ou kouri demann sa a nan diferan navigatè:
An repons a yon demann sa yo egzekite soti nan IE10, 34 KB nan done yo pral resevwa. Ak repons lan nan li, egzekite soti nan Chrome, yo pral vid.
Fache: Gen kèk konsiderasyon sou vi prive
Pwen sa a se dènye nan lòd, men se pa pi piti enpòtan. Pwen an se ke oto-hosting nan resous twazyèm-pati sou domèn prensipal la nan pwojè a oswa sou subdomain li yo ka mete an danje vi prive itilizatè yo ak afekte negatif pwojè entènèt prensipal la.
Si sistèm CDN ou a pa konfigirasyon kòrèkteman, ou ka fini voye bonbon domèn ou a nan yon sèvis twazyèm pati. Si filtraj apwopriye pa òganize nan nivo CDN, lè sa a bonbon sesyon ou, ki nòmalman pa ka itilize nan JavaScript (avèk la httponly), yo ka voye bay yon lame etranje.
Sa a se egzakteman sa ki ka rive ak trackers tankou Eulerian oswa Criteo. Trackers twazyèm pati yo ka mete yon idantifyan inik nan bonbon an. Si yo te fè pati materyèl sit, yo te kapab li idantifyan an nan diskresyon yo pandan itilizatè a t ap travay ak resous entènèt diferan.
Jou sa yo, pifò navigatè gen ladan pwoteksyon kont sa a kalite konpòtman tracker. Kòm yon rezilta, trackers kounye a itilize teknoloji , Masquerading kòm pwòp scripts yo pou plizyè pwojè. Savwa, trackers ofri pwopriyetè sit yo ajoute yon CNAME nan anviwònman yo pou yon domèn sèten, adrès ki anjeneral sanble ak yon seri karaktè o aza.
Malgre ke li pa rekòmande pou fè bonbon sit entènèt disponib nan tout subdomains (pa egzanp - *.website.com), anpil sit fè sa. Nan ka sa a, bonbon sa yo otomatikman voye nan yon tracker twazyèm pati degize. Kòm yon rezilta, nou pa ka pale sou okenn vi prive ankò.
Epitou, menm bagay la rive ak headers HTTP , ki voye sèlman nan domèn prensipal la, depi yo ka itilize yo kreye itilizatè. Asire w ke sèvis CDN ou itilize a filtre tèt sa yo kòrèkteman.
Rezilta
Si w ap planifye pou aplike oto-hosting nan resous twazyèm pati byento, kite m 'ba ou kèk konsèy:
- Akomode bibliyotèk JS, polis ak dosye CSS ki pi enpòtan ou yo. Sa a pral redwi risk pou echèk sit la oswa degradasyon pèfòmans akòz yon resous enpòtan anpil pou sit la pa disponib akòz fay yon sèvis twazyèm pati.
- Anvan ou kache resous twazyèm pati yo sou yon CDN, asire w ke yo itilize yon kalite sistèm vèsyon lè w ap bay non fichye yo, oswa ou ka jere sik lavi resous sa yo lè w reinitialize kachèt CDN a manyèlman oswa otomatikman lè w ap pibliye yon nouvo vèsyon. script la.
- Pran anpil prekosyon sou CDN ou, sèvè proxy, ak anviwònman kachèt ou. Sa ap pèmèt ou anpeche pwojè w la oswa en-tête yo voye bonbon
Client-Hintssèvis twazyèm pati.
Chè lektè! Èske ou òganize materyèl lòt moun sou serveurs ou yo ki trè enpòtan pou operasyon pwojè ou yo?
Sous: www.habr.com