V posledních letech stále více platforem pro optimalizaci front-endových projektů nabízí možnosti vlastního hostování nebo proxy zdrojů třetích stran. Akamai umožňuje nastavit для самостоятельно создаваемых URL. У Cloudflare есть технология Edge Workers. Fasterzine может Adresy URL na stránkách tak, aby odkazovaly na zdroje třetích stran umístěné na hlavní doméně webu.
Pokud víte, že služby třetích stran používané ve vašem projektu se příliš často nemění a že proces jejich poskytování klientům by se dal zlepšit, pak pravděpodobně uvažujete o proxy takových služeb. S tímto přístupem můžete tyto prostředky velmi dobře přiblížit svým uživatelům a získat úplnější kontrolu nad jejich ukládáním do mezipaměti na straně klienta. To vám navíc umožňuje chránit uživatele před problémy způsobenými „pádem“ služby třetí strany nebo snížením jejího výkonu.
Dobrý: Lepší výkon
Vlastní hostování zdrojů někoho jiného zlepšuje výkon velmi zjevným způsobem. Prohlížeč nepotřebuje znovu přistupovat k DNS, nemusí navazovat TCP spojení a provádět TLS handshake na doméně třetí strany. Na porovnání následujících dvou obrázků můžete vidět, jak vlastní hostování zdrojů někoho jiného ovlivňuje výkon.
Zdroje třetích stran se stahují z externích zdrojů (převzaty z )
Сторонние ресурсы хранятся там же, где и остальные материалы сайта (взято )
Ситуацию улучшает ещё и то, что браузер будет использовать возможности по мультиплексированию и приоритизации данных HTTP/2-соединения, которое уже установлено с основным доменом.
Pokud nehostíte zdroje třetích stran, nelze je upřednostnit, protože budou načteny z jiné domény, než je ta hlavní. To způsobí, že budou mezi sebou soutěžit o šířku pásma klienta. To může mít za následek načítání obsahu kritického pro vytvoření stránky, které je mnohem delší, než by bylo možné dosáhnout za ideálních okolností. mluvit o prioritizaci HTTP/2, která to vše velmi dobře vysvětluje.
Lze předpokládat, že použití atributů v odkazech na externí zdroje preconnect поможет в решении проблемы. Однако если таких ссылок на различные домены будет слишком много, это может, на самом деле, перегрузить линию связи в самый ответственный момент.
Pokud sami hostíte zdroje třetích stran, můžete řídit, jak přesně jsou tyto prostředky klientovi poskytovány. Konkrétně mluvíme o následujícím:
- Можно обеспечить применение алгоритма сжатия данных, наилучшим образом подходящего для каждого браузера (Brotli/gzip).
- Можно увеличить время кэширования ресурсов, которые обычно, даже у наиболее известных провайдеров, не особенно велико (например, соответствующее значение для тега GA установлено в 30 минут).
Можно даже расширить показатель TTL для ресурса, например, до года, включив соответствующие материалы в свою стратегию управления кэшированием (URL-хэши, версионирование и так далее). Об этом мы поговорим ниже.
▍Ochrana před přerušením provozu služeb třetích stran nebo jejich vypnutím
Ещё один интересный аспект самостоятельного хостинга сторонних ресурсов заключается в том, что это позволяет смягчить риски, связанные с перебоями в работе сторонних сервисов. Предположим, что используемое вами стороннее решение для проведения A/B-тестирования реализовано в виде блокирующего скрипта, загружаемого в заголовочном разделе страницы. Этот скрипт загружается медленно. Если соответствующий скрипт загрузить не удастся — будет пустой и страница. Если на его загрузку потребуется очень много времени — страница появится с большой задержкой. Или, предположим, в проекте используется библиотека, загружаемая со стороннего CDN-ресурса. Представим, что этот ресурс испытал сбой или был заблокирован в некоей стране. Подобная ситуация приведёт к нарушению логики работы сайта.
Chcete-li zjistit, jak váš web funguje, když některá externí služba není dostupná, můžete použít sekci SPOF na .
Раздел SPOF на webpagetest.org
▍A co problémy s ukládáním materiálů do mezipaměti v prohlížečích? (nápověda: je to mýtus)
Можно подумать, что использование общедоступных CDN автоматически приведёт к лучшей производительности ресурсов, так как эти службы обладают достаточно качественными сетями и распределены по всему миру. Но всё, на самом деле, немного сложнее.
Предположим, у нас имеется несколько разных сайтов: website1.com, website2.com, website3.com. На всех этих сайтах используется библиотека jQuery. Мы её к ним подключаем, пользуясь CDN, например — googleapis.com. Можно ожидать, что браузер один раз загрузит и кэширует библиотеку, а потом будет использовать её при работе со всеми тремя сайтами. Это могло бы уменьшить нагрузку на сеть. Возможно, это позволит где-то сэкономить и поможет улучшить производительность ресурсов. С практической же точки зрения всё выглядит иначе. Например, в Safari реализована возможность, называемая : Mezipaměť používá duální klíče na základě zdroje dokumentu a zdroje zdroje třetí strany. dobrý článek na toto téma.
staré studie и , а так же более свежее Paul Calvano, ukazují, že prostředky nejsou uloženy v mezipaměti prohlížeče tak dlouho, jak bychom mohli očekávat: „Mezi dobou ukládání do mezipaměti vlastních zdrojů projektu a zdrojů třetích stran je vážná propast. Mluvíme o CSS a webových fontech. Konkrétně 95 % nativních písem má životnost mezipaměti delší než týden, zatímco 50 % písem třetích stran má životnost mezipaměti kratší než týden! To dává webovým vývojářům pádný důvod k tomu, aby sami hostovali soubory písem!“
В результате, если вы будете хостить у себя чужие материалы, то не заметите проблем с производительностью, вызванных браузерным кэшированием.
Nyní, když jsme pokryli silné stránky self-hostingu třetích stran, pojďme si promluvit o tom, jak rozeznat dobrou implementaci tohoto přístupu od špatné.
The Bad: Ďábel je v detailech
Перемещение сторонних ресурсов на собственный домен нельзя выполнить автоматически, не позаботившись о правильном кэшировании таких ресурсов.
Jedním z hlavních problémů je zde čas ukládání do mezipaměti. Například informace o verzi jsou zahrnuty v názvech skriptů třetích stran, jako je tento: jquery-3.4.1.js. Takový soubor se v budoucnu nezmění a ve výsledku to nezpůsobí žádné problémy s jeho ukládáním do mezipaměti.
Pokud se však při práci se soubory nepoužívá nějaké schéma verzování, skripty uložené v mezipaměti, jejichž obsah se mění, zatímco název souboru zůstává nezměněn, mohou být zastaralé. To může být vážný problém, protože například neumožňuje přidávat automatické bezpečnostní záplaty do skriptů, které klienti potřebují co nejrychleji obdržet. Vývojář se bude muset snažit aktualizovat takové skripty v mezipaměti. Navíc to může způsobit selhání aplikace kvůli skutečnosti, že kód použitý na klientovi z mezipaměti se liší od nejnovější verze kódu, pro kterou je serverová část projektu určena.
Правда, если говорить о материалах, которые обновляются часто (менеджеры тегов, решения для A/B-тестирования), то их кэширование средствам CDN — задача хотя и решаемая, но уже гораздо более сложная. Сервисы вроде Commanders Act, решения для управления тегами, при публикации новых версий используют веб-хуки. Это даёт возможность организовать сброс кэша на CDN, или, что ещё лучше, возможность вызова обновления хэша или версии URL.
▍Adaptivní doručování materiálů klientům
Kromě toho, když mluvíme o ukládání do mezipaměti, musíme vzít v úvahu skutečnost, že nastavení mezipaměti používané na CDN nemusí být vhodné pro některé zdroje třetích stran. Takové zdroje mohou například využívat technologii sniffování uživatelských agentů (adaptivní poskytování) k poskytování konkrétních prohlížečů s verzemi obsahu optimalizovanými speciálně pro tyto prohlížeče. Tyto technologie spoléhají na regulární výrazy nebo databázi informací z hlavičky HTTP, aby zjistily možnosti prohlížeče. User-Agent. Jakmile vědí, se kterým prohlížečem mají co do činění, dají mu materiály pro něj určené.
Zde si můžete připomenout dvě služby. První z nich je googlefonts.com. Druhým je polyfill.io. Služba Google Fonts poskytuje pro určitý zdroj různé CSS kódy v závislosti na možnostech prohlížeče (poskytování odkazů na zdroje woff2 pomocí unicode-range).
Zde jsou výsledky několika dotazů Google Fonts z různých prohlížečů.
Результат запроса к Google Fonts, выполненный из Chrome
Výsledek dotazu Google Fonts spuštěného z IE10
Polyfill.io выдаёт браузеру только те полифиллы, которые ему нужны. Делается это из соображений производительности.
Podívejme se například, co se stane, když spustíte následující požadavek z různých prohlížečů:
В ответ на такой запрос, выполненный из IE10, придёт 34 Кб данных. А ответ на него, выполненный из Chrome, будет пустым.
Angry: Některé aspekty ochrany osobních údajů
Tento bod je poslední v pořadí, ale v neposlední řadě důležitý. Jde o to, že self-hosting zdrojů třetích stran na hlavní doméně projektu nebo na jeho subdoméně může ohrozit soukromí uživatelů a negativně ovlivnit hlavní webový projekt.
Pokud váš systém CDN není správně nakonfigurován, můžete skončit odesíláním souborů cookie vaší domény do služby třetí strany. Pokud není správné filtrování organizováno na úrovni CDN, pak vaše soubory cookie relace, které normálně nelze použít v JavaScriptu (s httponly), mohou být zaslány zahraničnímu hostiteli.
Přesně to se může stát s trackery jako Eulerian nebo Criteo. Sledovací nástroje třetích stran mohou mít v souboru cookie nastaven jedinečný identifikátor. Pokud by byly součástí materiálů webu, mohly si identifikátor přečíst podle svého uvážení, zatímco uživatel pracoval s různými webovými zdroji.
V dnešní době většina prohlížečů obsahuje ochranu proti tomuto typu chování trackeru. V důsledku toho nyní sledovači využívají technologii , vydávající se za vlastní scénáře pro různé projekty. Trackery totiž majitelům stránek nabízejí přidat CNAME do jejich nastavení pro určitou doménu, jejíž adresa obvykle vypadá jako náhodná sada znaků.
Ačkoli se nedoporučuje zpřístupňovat soubory cookie webových stránek pro všechny subdomény (například - *.website.com), mnoho webů to dělá. V takovém případě se takové soubory cookie automaticky odesílají do skrytého sledovacího zařízení třetí strany. Tím pádem už nemůžeme mluvit o žádném soukromí.
Totéž se děje s HTTP hlavičkami , которые отправляются лишь главному домену, так как они могут быть использованы для создания uživatel. Ujistěte se, že služba CDN, kterou používáte, tato záhlaví správně filtruje.
Výsledky
Pokud plánujete brzy implementovat vlastní hostování zdrojů třetích stran, dovolte mi, abych vám poradil:
- Hostujte své nejdůležitější knihovny JS, fonty a soubory CSS. Tím se sníží riziko selhání webu nebo snížení výkonu kvůli nedostupnosti zdroje životně důležitého pro web z důvodu chyby služby třetí strany.
- Než uložíte prostředky třetích stran do mezipaměti na CDN, ujistěte se, že se při pojmenovávání jejich souborů používá nějaký druh verzovacího systému, nebo že můžete spravovat životní cyklus těchto zdrojů ručním nebo automatickým resetováním mezipaměti CDN při publikování nové verze scénář.
- Buďte velmi opatrní ohledně nastavení CDN, proxy serveru a mezipaměti. To vám umožní zabránit odesílání souborů cookie vašeho projektu nebo záhlaví
Client-Hintsslužby třetích stran.
Vážení čtenáři! Hostujete na svých serverech materiály jiných lidí, které jsou nesmírně důležité pro chod vašich projektů?
Zdroj: www.habr.com