Yn 'e ôfrûne jierren biede mear en mear platfoarms foar it optimalisearjen fan front-end-projekten kânsen foar selshosting of proxy fan boarnen fan tredden. Akamai kinne jo ynstelle foar sels oanmakke URL's. Cloudflare hat Edge Workers technology. Fasterzine kin URL's op siden sadat se ferwize nei boarnen fan tredden op it haaddomein fan 'e side.
As jo witte dat de tsjinsten fan tredden dy't yn jo projekt brûkt wurde net heul faak feroarje, en dat it proses fan it leverjen fan se oan kliïnten kin wurde ferbettere, dan tinke jo wierskynlik oan it proxyjen fan sokke tsjinsten. Mei dizze oanpak kinne jo dizze boarnen tichter by jo brûkers bringe en mear folsleine kontrôle krije oer har caching oan 'e kliïntkant. Dit lit jo ek brûkers beskermje tsjin problemen feroarsake troch de "crash" fan in tsjinst fan tredden of degradaasje fan har prestaasjes.
Goed: Ferbettere prestaasjes
Self-hosting fan boarnen fan in oar ferbetteret prestaasjes op in heul foar de hân lizzende manier. De browser hoecht net wer tagong te krijen ta DNS, it hoecht gjin TCP-ferbining te meitsjen en in TLS-handshake út te fieren op in domein fan tredden. Jo kinne sjen hoe't sels-hosting fan in oar syn boarnen de prestaasjes beynfloedet troch de folgjende twa sifers te fergelykjen.
Boarnen fan tredden wurde ynladen fan eksterne boarnen (nommen út )
Boarnen fan tredden wurde opslein op itselde plak as de rest fan 'e sidematerialen (nommen út )
De situaasje wurdt ek ferbettere troch it feit dat de browser de mooglikheid sil brûke om te multiplexearjen en gegevens te prioritearjen fan 'e HTTP / 2-ferbining dy't al fêststeld is mei it haaddomein.
As jo gjin boarnen fan tredden hostje, dan kinne se, om't se wurde laden fan in domein oars as de wichtichste, laden wurde, se kinne net wurde prioritearre. Dit sil feroarsaakje dat se mei-inoar konkurrearje foar de bânbreedte fan 'e kliïnt. Dit kin resultearje yn laden tiden foar ynhâld kritysk foar it bouwen fan in side dy't folle langer is dan wat ûnder ideale omstannichheden te berikken wêze soe. praat oer HTTP / 2-prioritearring dy't dit alles heul goed ferklearret.
It kin oannommen wurde dat it gebrûk fan attributen yn keppelings nei eksterne boarnen preconnect sil helpe by it oplossen fan it probleem. As d'r lykwols tefolle fan dizze keppelings binne nei ferskate domeinen, kin it de kommunikaasjeline op it meast krúsjale momint feitlik oerladen.
As jo sels boarnen fan tredden hostje, kinne jo kontrolearje hoe krekt dizze boarnen wurde jûn oan de klant. Wy hawwe it nammentlik oer it folgjende:
- Jo kinne derfoar soargje dat it datakompresjealgoritme dat it bêste past by elke browser wurdt brûkt (Brotli / gzip).
- Jo kinne de cachingtiid ferheegje foar boarnen dy't normaal net spesjaal lang binne, sels mei de meast bekende providers (bygelyks is de oerienkommende wearde foar de GA-tag ynsteld op 30 minuten).
Jo kinne sels de TTL útwreidzje foar in boarne nei bygelyks in jier troch relevante ynhâld op te nimmen yn jo cachingbehearstrategy (URL-hashes, ferzjes, ensfh.). Wy sille prate oer dit hjirûnder.
▍Beskerming tsjin ûnderbrekkings yn 'e wurking fan tsjinsten fan tredden of har ôfsluting
In oar nijsgjirrich aspekt fan sels-hosting boarnen fan tredden is dat it jo de risiko's kin ferleegje dy't ferbûn binne mei ûnderbrekken fan tsjinsten fan tredden. Litte wy oannimme dat de A/B-testoplossing fan tredden dy't jo brûke wurdt ymplementearre as in blokkearjend skript dat wurdt laden yn 'e kopseksje fan' e side. Dit skript laadt stadich. As it oerienkommende skript net slagget te laden, sil de side leech wêze. As it in protte tiid duorret om te laden, sil de side mei in lange fertraging ferskine. Of stel dat it projekt in bibleteek brûkt dy't laden is fan in CDN-boarne fan tredden. Lit ús yntinke dat dizze boarne mislearre of waard blokkearre yn in bepaald lân. Sa'n situaasje sil liede ta in ynbreuk op 'e logika fan' e side.
Om út te finen hoe't jo side wurket as guon eksterne tsjinst net beskikber is, kinne jo de SPOF-seksje brûke op .
SPOF seksje op webpagetest.org
▍Hoe sit it mei problemen mei caching fan materialen yn browsers? (hint: it is in myte)
Jo kinne tinke dat it brûken fan iepenbiere CDN's automatysk soe liede ta bettere boarneprestaasjes, om't dizze tsjinsten netwurken fan frij hege kwaliteit hawwe en oer de wrâld ferspraat wurde. Mar alles is eins wat yngewikkelder.
Litte wy sizze dat wy ferskate ferskillende siden hawwe: website1.com, website2.com, website3.com. Al dizze siden brûke de jQuery-bibleteek. Wy ferbine it mei har mei in CDN, bygelyks - googleapis.com. Jo kinne ferwachtsje dat de blêder de bibleteek ien kear ynlade en cache, en dan brûke op alle trije siden. Dit kin de lading op it netwurk ferminderje. Miskien sil dit jo earne jild besparje en helpe om boarneprestaasjes te ferbetterjen. Ut in praktysk eachpunt, alles sjocht der oars. Bygelyks, Safari hat in funksje neamd : De cache brûkt dûbele kaaien basearre op de boarne fan it dokumint en de boarne fan de boarne fan tredden. goed artikel oer dit ûnderwerp.
âlde stúdzjes и , likegoed as mear resinte Paul Calvano, lit sjen dat boarnen net wurde opslein yn browsercaches sa lang as wy kinne ferwachtsje: "D'r is in serieuze gat tusken de cachingtiid fan in projekt eigen boarnen en boarnen fan tredden. Wy hawwe it oer CSS en weblettertypen. Nammentlik, 95% fan native lettertypen hawwe in cache libben fan mear as in wike, wylst 50% fan tredden lettertypen hawwe in cache libben fan minder as in wike! Dit jout webûntwikkelders in twingende reden om lettertypebestannen sels te hostjen! ”
As gefolch, as jo de ynhâld fan oare minsken hostje, sille jo gjin prestaasjeproblemen fernimme feroarsake troch caching fan 'e browser.
No't wy de sterke punten fan selshosting fan tredden hawwe behannele, litte wy prate oer hoe't jo in goede ymplemintaasje fan dizze oanpak kinne fertelle fan in minne.
The Bad: De duvel is yn 'e details
Boarnen fan tredden nei jo eigen domein ferpleatse kin net automatysk dien wurde sûnder te soargjen dat sokke boarnen goed yn it cache binne.
Ien fan 'e wichtichste problemen hjir is caching tiid. Bygelyks, ferzje-ynformaasje is opnommen yn skriptnammen fan tredden lykas dit: jquery-3.4.1.js. Sa'n triem sil net feroarje yn 'e takomst, en as gefolch dat dit gjin problemen mei syn caching.
Mar as guon ferzjesskema net brûkt wurdt by it wurkjen mei bestannen, kinne cache skripts, wêrfan de ynhâld feroaret wylst de triemnamme net feroaret, ferâldere wurde. Dit kin in serieus probleem wêze, om't it bygelyks gjin automatyske befeiligingspatches kin tafoegje oan skripts dy't kliïnten sa gau mooglik ûntfange moatte. De ûntwikkelder sil in poging dwaan moatte om sokke skripts yn 'e cache te aktualisearjen. Dêrnjonken kin dit tapassingsflaters feroarsaakje troch it feit dat de koade brûkt op 'e kliïnt út' e cache ferskilt fan 'e lêste ferzje fan' e koade wêrfoar it serverdiel fan it projekt is ûntwurpen.
Wier, as wy prate oer materialen dy't faak wurde bywurke (tag-managers, oplossingen foar A / B-testen), dan is it cache fan se mei CDN-ark in taak dy't kin wurde oplost, mar is folle komplekser. Tsjinsten lykas Commanders Act, in oplossing foar tagbehear, brûke webhooks by it publisearjen fan nije ferzjes. Dit jout jo de mooglikheid om in cache flush op 'e CDN te twingen, of, noch better, de mooglikheid om in hash- of URL-update te twingen.
▍ Oanpaste levering fan materialen oan kliïnten
Derneist, as wy prate oer caching, moatte wy rekken hâlde mei it feit dat de caching-ynstellingen dy't brûkt wurde op 'e CDN miskien net geskikt binne foar guon boarnen fan tredden. Sokke boarnen kinne bygelyks gebrûk meitsje fan sniffingtechnology foar brûkersagenten (oanpast tsjinje) om spesifike browsers te tsjinjen mei ferzjes fan ynhâld spesifyk foar dy browsers optimalisearre. Dizze technologyen fertrouwe op reguliere útdrukkingen, as in database dy't HTTP-headerynformaasje sammelt, om de mooglikheden fan 'e browser út te finen. User-Agent. As se ienris witte mei hokker browser se te krijen hawwe, jouwe se it materialen dy't dêrfoar ûntworpen binne.
Hjir kinne jo ûnthâlde twa tsjinsten. De earste is googlefonts.com. De twadde is polyfill.io. De tsjinst Google Lettertypen leveret, foar in bepaalde boarne, ferskate CSS-koade, ôfhinklik fan de mooglikheden fan 'e browser (jout keppelings nei woff2-boarnen mei unicode-range).
Hjir binne de resultaten fan in pear Google Fonts-fragen makke fan ferskate browsers.
Google Fonts-fraachresultaat fan Chrome
Google Fonts-fraachresultaat fan IE10
Polyfill.io jout de browser allinich de polyfills dy't it nedich is. Dit wurdt dien foar prestaasjes redenen.
Litte wy bygelyks ris sjen wat der bart as jo it folgjende fersyk útfiere fan ferskate browsers:
As antwurd op sa'n fersyk útfierd fan IE10, sil 34 KB oan gegevens wurde ûntfongen. En it antwurd dêrop, útfierd fan Chrome, sil leech wêze.
Angry: Guon privacy oerwegingen
Dit punt is lêste yn oarder, mar net it minst wichtich. It punt is dat sels-hosting fan boarnen fan tredden op it haaddomein fan it projekt of op syn subdomein de privacy fan brûkers yn gefaar bringe kin en it haadwebprojekt negatyf beynfloedzje.
As jo CDN-systeem net goed is ynsteld, kinne jo úteinlik de cookies fan jo domein stjoere nei in tsjinst fan tredden. As goed filterjen net organisearre is op it CDN-nivo, dan binne jo sesjekoekjes, dy't normaal net kinne wurde brûkt yn JavaScript (mei de httponly), kin stjoerd wurde nei in bûtenlânske host.
Dit is krekt wat kin barre mei trackers lykas Eulerian of Criteo. Trackers fan tredden hawwe mooglik in unike identifier ynsteld yn it koekje. As se diel útmakken fan sidematerialen, koene se de identifier lêze nei eigen goedtinken wylst de brûker mei ferskate webboarnen wurke.
Dizze dagen befetsje de measte browsers beskerming tsjin dit soarte trackergedrach. As gefolch brûke trackers no technology , masquerading as harren eigen skripts foar ferskate projekten. Trackers biede nammentlik side-eigners in CNAME ta te foegjen oan har ynstellings foar in bepaald domein, wêrfan it adres meastentiids liket op in willekeurige set fan tekens.
Hoewol it net oan te rieden is om websidekoekjes beskikber te meitsjen foar alle subdomeinen (bygelyks - *.website.com), dogge in protte siden dit. Yn dit gefal wurde sokke cookies automatysk stjoerd nei in ferklaaide tracker fan tredden. Dêrtroch kinne wy net mear prate oer privacy.
Ek bart itselde ding mei HTTP-headers , dy't allinich nei it haaddomein stjoerd wurde, om't se kinne wurde brûkt om te meitsjen brûker. Soargje derfoar dat de CDN-tsjinst dy't jo brûke dizze kopteksten goed filtert.
Resultaten
As jo fan plan binne om gau sels-hosting fan boarnen fan tredden te ymplementearjen, lit my jo wat tips jaan:
- Host jo wichtichste JS-biblioteken, lettertypen en CSS-bestannen. Dit sil it risiko ferminderje fan sidefalen of prestaasjesdegradaasje fanwegen in boarne fan wêzentlik belang foar de side dy't net beskikber is fanwegen de skuld fan in tsjinst fan tredden.
- Foardat jo boarnen fan tredden op in CDN opslaan, soargje derfoar dat ien of oare ferzjessysteem wurdt brûkt by it beneamen fan har bestannen, of dat jo de libbenssyklus fan dizze boarnen beheare kinne troch de CDN-cache manuell of automatysk werom te setten by it publisearjen fan in nije ferzje fan it skript.
- Wês heul foarsichtich oer jo CDN, proxy-tsjinner, en cache-ynstellingen. Hjirmei kinne jo foarkomme dat jo projekt of kopteksten cookies ferstjoerd wurde
Client-Hintstsjinsten fan tredden.
Dear readers! Host jo materialen fan oaren op jo servers dy't ekstreem wichtich binne foar de wurking fan jo projekten?
Boarne: www.habr.com