Addy Osmani

Zasoby zewnętrzne (np. wbudowane treści i skrypty) są obecnie szeroko wykorzystywane w internecie. Dostępne są gotowe rozwiązania do umieszczania w witrynie treści z mediów społecznościowych, filmów, funkcji analitycznych, czatu na żywo, reklam, testów A/B, personalizacji itp. Elementy osadzenia pochodzące od innych firm są niezbędną częścią nowoczesnych witryn, która pozwala właścicielom witryn skupić się na ich głównych kompetencjach, a jednocześnie przekazać zewnętrznym dostawcom standardowe, ale kluczowe funkcje.

Gdy dane własne i dane pochodzące od innych firm współpracują ze sobą, strona może zapewniać użytkownikom wygodę. Wymaga to jednak znacznego wysiłku zarówno ze strony zespołów inżynieryjnych, jak i zespołów biznesowych, a często jest pomijane, co powoduje, że strony internetowe działają mniej wydajnie i mają negatywny wpływ na dane dotyczące użytkowników, np. na podstawowe wskaźniki internetowe. Jest to szkodliwe dla obu stron i powoduje utratę możliwości biznesowych. Czy możemy coś zrobić lepiej?

Naszą wizją internetu jest przyszłość, w której skrypty i zasoby firm zewnętrznych zapewniają zamierzoną wartość biznesową przy minimalnym spadku wydajności lub komfortu korzystania z witryn, które ich używają w przeglądarce. Dzięki temu użytkownicy będą mogli szybciej wczytywać strony.

W ciągu ostatniego roku rozważaliśmy, omawialiśmy i testowaliśmy wiele możliwości, które mogą chronić użytkowników przed szkodliwym wpływem skryptów innych firm, nie zmniejszając przy tym wartości biznesowej tych skryptów dla właścicieli witryn.

W tym poście chcemy przekazać informacje o kilku naszych eksperymentach. Mamy nadzieję, że jest to początek procesu, który zachęca do przejrzystości i widoczności między agentami użytkownika, firmami i dostawcami zewnętrznymi oraz otwiera drogę do szybszego internetu.

Więcej informacji o firmach zewnętrznych

Zasoby zewnętrzne to zasoby dostarczane przez dostawcę zewnętrznego. Nie są one bezpośrednio kontrolowane przez właścicieli witryn, ale są wyświetlane za ich zgodą. Zasoby zewnętrzne to:

• hostowane na publicznym serwerze, który różni się od serwera głównej witryny;
• nie zostały stworzone przez właściciela witryny ani nie zostały przez niego zmodyfikowane;
• szeroko używany przez różne witryny;

Firmy zewnętrzne pomagają w generowaniu przychodów (za pomocą reklam) i stwarzaniu lepszych możliwości marketingowych (zamieszczanie w mediach społecznościowych), a także realizują wiele innych celów biznesowych. Do najczęstszych kategorii stron trzecich należą:

Źródło: firmy zewnętrzne według kategorii.

Te skrypty i biblioteki innych firm umożliwiają deweloperom stron internetowych korzystanie z sprawdzonych rozwiązań do implementowania standardowych funkcji zamiast wymyślania koła na nowo. Dzięki temu firmy zewnętrzne skracają czas rozwoju i pomagają firmom szybciej wprowadzać na rynek lub ulepszać produkty. Nic więc dziwnego, że ponad 94% wszystkich witryn na komputery i urządzenia mobilne korzysta z usług zewnętrznych.

Jak firmy zewnętrzne wpływają na skuteczność?

W idealnej sytuacji deweloperzy zewnętrzni są ekspertami w zakresie funkcji, które udostępniają. Większość popularnych usług zewnętrznych przeszła już kilka iteracji, więc można oczekiwać, że ich kod jest zoptymalizowany pod kątem celów biznesowych ich właścicieli, co może, ale nie musi, obejmować skuteczność stron, które je wykorzystują. Wiemy jednak, że nawet dobrze zoptymalizowane zewnętrzne źródła reklam wpływają na skuteczność. Oto główne przyczyny tych zmian:

1. Rozmiar i koszty wykonywania skryptów: osoby trzecie często oferują znaczące funkcje, „tylko” umieszczając na stronie element <script> lub <iframe>. Następnie te elementy pobierają skrypty i zasoby, które są duże i pobranie oraz wykonanie których zajmuje więcej czasu. Zbyt dużo kodu JavaScriptu sprawia, że wątek główny jest zajęty dłużej, blokuje renderowanie i opóźnia interakcje użytkownika. Niektóre z najpopularniejszych usług innych firm blokują wątek główny przez 42 ms do 1,6 s w przypadku ponad 50% analizowanych witryn. Zablokowany wątek główny powoduje wysoki czas całkowitego blokowania (TBT), który jest jednym z danych wpływających na ocenę wydajności witryny. Opóźnia też reakcję na interakcje użytkowników i pogarsza wartość interakcji do kolejnego wyrenderowania (INP), która służy do pomiaru responsywności witryn. Dlatego koszty wykonania skryptu mają znaczący wpływ na wydajność.

2. Liczba: średnio witryny korzystają z 21 różnych usług zewnętrznych w internecie i na urządzeniach mobilnych. Tagi innych firm są często dodawane przez narzędzia do zarządzania tagami, które nie są bezpośrednio kontrolowane przez zespoły techniczne lub programistyczne. Tagi, które nie są wymagane, mogą być dodawane przez inne zespoły bez procesu sprawdzania i nigdy nie są usuwane. Mogą one znacząco wpłynąć na wygodę użytkownika, rozmiar strony lub wykorzystanie procesora. W takich sytuacjach można zastosować proces zarządzania, który pozwoli deweloperom sprawdzić wpływ każdego dostawcy. Deweloperom pomogłoby, gdyby mieli gotowe dane o wszystkich zewnętrznych usługach, które zapewniają określoną funkcję, wraz z ich wpływem na wydajność, korzyściami i niedogodnościami, które można porównać. Kolejnym wyzwaniem jest to, że w przypadku wielu witryn tagi firm zewnętrznych działają tylko w środowisku produkcyjnym, a nie w środowiskach programistycznych, co utrudnia ich testowanie.

3. Sieć: ponieważ firmy zewnętrzne są hostowane w różnych źródłach, przeglądarki muszą nawiązywać więcej połączeń, aby pobierać z nich treści. Różne połączenia nie mogą koordynować pobierania na podstawie priorytetu, co powoduje konflikty sieciowe. Może to jeszcze bardziej opóźnić wczytywanie strony, jeśli nie zostaną uwzględnione odpowiednie optymalizacje.

4. Sekwencja: strony trzecie mogą blokować główny wątek i konkurować o przepustowość w celu uzyskania dostępu do bardziej krytycznych zasobów. W niektórych przypadkach jednak zasoby zewnętrzne są niezbędne do renderowania strony. Gdy witryny korzystają z usług wielu firm zewnętrznych, konieczne staje się optymalne uporządkowanie zasobów własnych i zewnętrznych. Deweloperzy powinni znać różne opcje dostępne do optymalizacji sekwencji.

W konsekwencji tego zewnętrzne komponenty mogą wpływać na wszystkie lub niektóre komponenty Core Web Vitals. Większość usług innych firm negatywnie wpływa na największe wyrenderowanie treści (LCP) i opóźnienie przy pierwszym działaniu (FID). W 10% witryn mobilnych wtyczki YouTube blokują główny wątek przez 4,5 sekundy, a w 50% badanych witryn – przez co najmniej 1,6 sekundy. Wyobraź sobie, jak frustrujący może być dla użytkownika widok 20 takich skryptów na stronie przy wolnym połączeniu. Poniższa wizualizacja z witryny thirdpartyweb.today przedstawia firmy zewnętrzne, które obecnie mają największy wpływ na wydajność.

„W przypadku około 4 mln witryn z najlepszymi wynikami około 2700 źródeł odpowiada za około 57% całego czasu wykonywania skryptu, a 50 najlepszych elementów odpowiada za około 47%”. – third-party-web

Strony, które renderują się szybko i stają się interaktywne w rozsądnym czasie, są niezbędne do zapewnienia dobrych wrażeń użytkowników, mierzonych za pomocą podstawowych wskaźników internetowych. Dobra użyteczność często przekłada się na dobre wyniki witryn, co może oznaczać dobre wyniki dla firm zewnętrznych. Współpraca nad ograniczeniem wpływu stron trzecich może przynieść korzyści wszystkim uczestnikom łańcucha.

Google sprzedaje wiele powszechnie używanych skryptów firm zewnętrznych, takich jak Google Tag Manager, wstawianie filmów z YouTube czy ReCaptcha. Zdajemy sobie sprawę, że niektóre z naszych skryptów mogą mieć mniejszy wpływ na wydajność w przypadku podstawowych wskaźników internetowych. Staramy się znaleźć sposoby na poprawę tego wpływu, o ile to możliwe.

W jaki sposób Chrome może Ci pomóc?

Zasobów zewnętrznych o niskiej skuteczności jest coraz więcej, co stanowi wyzwanie dla programistów i wymaga stopniowej zmiany dynamiki ekosystemu. Chrome chce zbadać tę przestrzeń, aby osiągnąć następujące cele:

1. Znajdź lepsze sposoby wczytywania zasobów innych firm w internecie, nie pogarszając przy tym wygody użytkowników ani wyników biznesowych.

   Wiemy, że nie uda nam się osiągnąć znaczących postępów w tym zakresie, jeśli nie będziemy współpracować z partnerami, firmami, podmiotami zewnętrznymi i programistami. Chcemy stworzyć otwartą przestrzeń do dyskusji na temat możliwości i wymiany pomysłów za pomocą publicznych wyjaśnień i specyfikacji. Deweloperzy będą mieli czas na przekazanie opinii i sprawdzenie wpływu wielu z tych propozycji.

2. Umożliwienie użytkownikom skryptów innych firm korzystania z lepszego przypisywania kosztów narzędzi i usług, przejrzystych i dobrze opracowanych ścieżek ich użycia oraz lepszych zachęt podczas tworzenia, aby zapewnić ich optymalizację domyślnie.

   Chcemy ulepszać wszystkie warstwy, takie jak identyfikatory użytkownika, frameworki i skrypty innych firm, aby zmniejszyć wpływ innych firm na wydajność. Chcemy też zapewnić właścicielom witryn wystarczające informacje, aby mogli stosować sprawdzone metody dotyczące każdego wbudowanego skryptu, w tym szybsze alternatywy, jeśli to możliwe.

Proponowane podejście

Aby osiągnąć te cele, proponujemy 3 podejście:

1. **Zapewnij programistom większą kontrolę nad wpływem plików cookie innych firm za pomocą RUM i narzędzi dla programistów w Chrome.**

   RUM to dane o rzeczywistych użytkownikach (znane też jako dane zgromadzone), dostępne za pomocą interfejsów API do monitorowania wydajności witryny. Narzędzia programistyczne Chrome obejmują Lighthouse, Chrome DevTools i Raport na temat użytkowania Chrome. Proponujemy udoskonalenie dostępnych interfejsów API i narzędzi, aby deweloperzy witryn mogli lepiej rozumieć wpływ każdej zewnętrznej usługi na każdą stronę. Narzędzia te będą też zawierać informacje o działaniach, które mogą podjąć, aby ograniczyć wpływ zmian (np. opóźnienie lub użycie komponentu fasadowego), oraz o innych potencjalnych rozwiązaniach (innych usługach zewnętrznych lub rozwiązaniach typu „zrób to sam”) z ich zaletami i wadami. W przypadku interfejsów API do monitorowania wydajności witryny szukamy sposobów na rozszerzenie ich zasięgu na zasoby z różnych źródeł bez naruszania prywatności i bezpieczeństwa użytkowników.

2. **Zapewnij firmom optymalne warunki do efektywnego wczytywania zasobów zewnętrznych.**

   Chcemy zaproponować nowe standardy, które zachęcą przeglądarki do bardziej inteligentnego rozwiązywania konfliktów między sposobem wczytywania zasobów własnych i zewnętrznych, co ma na celu poprawę czasu wczytywania. Wkrótce omówimy niektóre z tych propozycji, np. domyślne ładowanie elementów zewnętrznych z opóźnieniem lub stosowanie innej kolejności priorytetów zasobów zewnętrznych, które mogą nie być tak ważne dla początkowych treści, na których najbardziej zależy użytkownikom. To tylko kilka z wielu pomysłów, które rozważamy w tym zakresie. Chcielibyśmy współpracować z ekspertami ds. wydajności stron internetowych i z szerszą społecznością nad tymi rozwiązaniami.

   Chcemy też rozwiązywać takie problemy w ramkach JavaScript i systemach zarządzania treścią (CMS), gdy jest to bardziej odpowiednie. Dzięki projektom takim jak Aurora i WordPress Performance Team dowiedzieliśmy się, jak ważne są wbudowane wartości domyślne, które rozwiązują znane problemy z wczytywaniem. Domyślne wartości wbudowane w ramy i systemy CMS pomagają firmom w łatwym prowadzeniu działań. Mogą one też być przydatne dla identyfikatora użytkownika (np. Chrome) jako wskazówki, które umożliwiają mu stosowanie heurystyki w celu optymalizacji wczytywania strony i CWV. Takie wskazówki mogą pomóc klientowi użytkownika w określeniu, kiedy i jak mają się wczytywać określone zasoby innych firm w cyklu życia strony. (np. komponent skryptu Next.js ma wbudowane domyślne wczytywanie skryptów innych firm po tym, jak strona staje się interaktywna).

3. **Zachęcaj firmy zewnętrzne do zwiększania przejrzystości, aby ograniczyć ich wpływ na skuteczność reklam.**

   Deweloperzy zewnętrzni nie mają obecnie możliwości, aby sprawdzić wpływ swoich skryptów na ogólną liczbę witryn. Planujemy rozwiązać ten problem i zapewnić dostawcom narzędzia do analizowania ich wpływu i porównywania go z innymi produktami na rynku, które zapewniają tę samą wartość. Chcemy też pomóc im w użyciu danych do zdiagnozowania przyczyny wpływu, aby mogli go ograniczyć na wcześniejszym etapie. Aby to zrobić, musimy uwzględnić wszystkie strony trzecie, w tym te należące do Google.

Wyzwania

Takie przedsięwzięcie nie jest pozbawione wyzwań. Oto kilka najważniejszych wyzwań, które musimy wziąć pod uwagę:

• Firmy zewnętrzne to problem obejmujący reklamy, analitykę, zarządzanie tagami, narzędzia i wiele innych kwestii. Każda z nich wymaga uwzględnienia unikalnego zestawu wymagań i ustępstw. Na przykład:
  • Decyzja o optymalizacji wczytywania reklam zależy od kompromisu między przychodami a wrażeniami użytkowników. Jeśli za wcześnie, blokują cenne treści; jeśli za późno, użytkownik ich nie zobaczy.
  • Skrypty Analytics zwiększają wagę strony, ale dostarczają firmie cennych danych o działaniach użytkowników.

Mamy nadzieję na współpracę z różnymi kategoriami firm zewnętrznych, zrozumienie niuansów, znalezienie kompromisów i opracowanie zachęt, które będą korzystne dla wszystkich. Zdajemy sobie sprawę, że aby nasza strategia była skuteczna, musimy współpracować z osobami z różnych obszarów. Dotyczy to naszych partnerów wewnętrznych, takich jak Menedżer tagów Google, Google Ads czy YouTube.

1. Chcemy zapewnić bardziej szczegółowe informacje o przypisaniu zarówno deweloperom witryn, jak i zewnętrznym deweloperom. Wymaga to świadomego wysiłku, aby określić, które dane są najbardziej przydatne do pomiaru wpływu, przypisać je dokładnie i szczegółowo oraz wskazać właściwy kierunek dalszych działań. Ostatecznie obliczenia dotyczące tego, jak dany podmiot zewnętrzny wypada na tle konkurencji, powinny być jawne dla wszystkich.

2. Proponujemy udoskonalenie Chrome, aby można było stosować w nim optymalizacje, które pomogą zachować odpowiednią równowagę w przyznawaniu priorytetów wczytywaniu zasobów własnych i zasobów innych firm. Cenna zmiana staje się standardem we wszystkich przeglądarkach, ale wymaga czasu. Na przykład atrybut loading elementów <img> i <iframe> jest dostępny w Chrome i Edge od 2019 roku, ale w Safari dopiero od 2022 roku. Dopóki funkcja nie zostanie ujednolicona, użytkownicy zasobów zewnętrznych będą musieli zadbać o to, aby była ona zoptymalizowana również pod kątem innych przeglądarek. Pomożemy Ci w tej kwestii, wskazując to w naszych wskazówkach, gdy będzie to stosowne.

3. Aby zrealizować ten projekt, musimy współpracować z partnerami i deweloperami, którzy pomogą nam zrozumieć konkretne wymagania, a także przetestować eksperymentalne rozwiązania na dużą skalę, przekazać opinie oraz w razie potrzeby wprowadzić zmiany i improwizować. Zmiany muszą być zaplanowane z uwzględnieniem odpowiedniego czasu na przetestowanie i ocena.

Wstępne propozycje standardów

Przeprowadziliśmy kilka wstępnych eksperymentów, aby opracować funkcje, które można włączyć w celu optymalizacji procesu wczytywania z usług zewnętrznych. Jesteśmy zadowoleni z otrzymanych wyników i możemy omówić 2 z tych funkcji.

LazyEmbeds

Wcześniej Chrome ładował z opóźnieniem elementy <img> i <iframe>, które nie były widoczne na ekranie, w przypadku użytkowników korzystających z trybu Lite. Funkcję tę można rozszerzyć na wszystkich użytkowników, aby opóźnić wczytywanie elementów <iframe> określonych jako elementy osadzone pochodzące od innych firm, dopóki użytkownik nie przewinie strony w ich pobliżu. Może to przyspieszyć wczytywanie innych części strony, poprawić podstawowe wskaźniki internetowe, zmniejszyć użycie pamięci i zaoszczędzić dane.

Oto wersja demonstracyjna, w której zastosowano LazyEmbeds do wczytywania filmów z YouTube na stronie. Pojedynczy film wbudowany z YouTube zwykle zwiększa rozmiar kodu JavaScript na stronie o 500–600 KB. Spróbowaliśmy zoptymalizować wpis na blogu, który zawierał 14 takich wstawionych filmów, za pomocą LazyEmbeds. Wyniki dotyczące czasu wczytywania stron i oszczędności danych były obiecujące.

Więcej informacji o tych działaniach znajdziesz w treściach na temat zamiarów eksperymentowania i na forum blink-dev oraz w rozszerzeniu eksperymentu.

Kierowane ograniczanie przepustowości przez zewnętrznych dostawców

Skrypty innych firm są często dodawane przez różne zespoły bez całościowych procesów nadzoru. Zespół inżynierów z The Telegraph stwierdził, że „każdy chce mieć ten tag na stronie, która przynosi organizacji pieniądze”. Może to stale zwiększać obciążenie związane z zarządzaniem wpływem na wydajność.

Docelowe ograniczanie skryptów firm zewnętrznych polega na ograniczeniu działania bardzo konkretnych rodzajów firm zewnętrznych w celu zminimalizowania ich wpływu. Pozwoliłoby to przeglądarkom wczesne wczytywanie kluczowych treści i zasobów innych firm, które są niezbędne, a późniejsze wczytywanie tych, które można wczytać później.

Ulepszanie interfejsów RUM API

Rozważamy też rozszerzenie interfejsów RUM API o informacje, które będą przydatne przy ocenie skuteczności zewnętrznych usług. Wprowadziliśmy następujące udoskonalenia:

1. <iframe>raportowanie: pracujemy nad rozwiązaniami, które mogą korzystać z interfejsu Performance Timeline API do raportowania danych z różnych ram. Pozwoliłoby to autorom strony najwyższego poziomu na sprawdzanie danych o skuteczności elementu iframe należącego do współpracującej firmy zewnętrznej, który jest umieszczony na stronie.

2. Przypisywanie zadań długotrwałych: interfejs API Long Tasks w RUM pomoże właścicielom witryn identyfikować długie zadania, które przez długi czas zajmują wątek główny i opóźniają interakcję.

Dalsze informacje

Nadal eksperymentujemy z wielu takimi pomysłami i mamy nadzieję, że w miarę ich wdrażania będziemy publikować na GitHubie wyjaśnienia i projekty specyfikacji. Osoby trzecie i właściciele witryn, które chcą nawiązać z nami współpracę lub zostawić opinię, mogą brać udział w dyskusjach za pomocą tych narzędzi. Firmy zewnętrzne mogą też zacząć skupiać się na optymalizacji pod kątem podstawowych wskaźników internetowych i wartości INP, aby mieć pewność, że nie zostaną im przypisane złe dane dotyczące podstawowych wskaźników internetowych lub INP. Osoby, które aktywnie szukają informacji o aktualizacjach, mogą na razie zapoznać się z postami w grupie blink-dev.

Z niecierpliwością czekamy na dalsze badania tego problemu i możliwość podzielenia się z Wami naszymi spostrzeżeniami.

Szczególne podziękowania dla Leeny Sohoni-Kasture, Jeremy’ego Wagnera, Gilberto Cocchiego, Kenjiego Baheuxa, Kouheia Ueno, Kentaro Hary i Alexa N. Jose, Melissa Mitchell, Yoav Weiss, Shunya Shishido i Minoru Chikamune za opinie i wkład.