Addy Osmani

Zasoby innych firm (np. elementy umieszczone na stronie i skrypty) są obecnie intensywnie używane w internecie. Oferują gotowe rozwiązania do umieszczania mediów społecznościowych, filmów, statystyk, czatu na żywo, reklamy, testów A/B, personalizacji i innych. Umieszczanie na stronach innych firm jest niezbędnym elementem nowoczesnych witryn, który pozwala właścicielom witryn skupić się na ich głównych kompetencjach, a jednocześnie udostępniać dostawcom zewnętrznym standardowe, ale kluczowe funkcje.

Kiedy zarówno własne, jak i firmy zewnętrzne współpracują w ramach strony internetowej, możliwe jest, że strona będzie wygodna w obsłudze. Wymaga to jednak znacznego nakładu pracy zarówno ze strony inżynierów, jak i zespołów biznesowych, dlatego często pomija się to, co skutkuje mniejszą wydajnością stron internetowych i negatywnym wpływem na dane dotyczące użytkowników, takie jak podstawowe wskaźniki internetowe. Jest to szkodliwe dla obu stron i tworzy stracone szanse w firmach. Czy możemy tu być lepiej?

W przyszłości mamy wizję sieci, w której skrypty i zasoby innych firm zapewnią odpowiednią wartość biznesową przy minimalnej regresji w zakresie wydajności i wygody użytkowników witryn używających ich w przeglądarce. Dzięki temu strony szybciej się wczytują.

W ubiegłym roku przeanalizowaliśmy, omówiliśmy i przetestowaliśmy wiele możliwości, które mogą potencjalnie chronić wygodę użytkowników przed negatywnym wpływem skryptów innych firm bez uszczerbku dla ich wartości biznesowej dla właścicieli witryn.

W tym poście chcemy podzielić się informacjami o niektórych z naszych eksperymentów. Mamy nadzieję, że będzie to początek procesu, który zwiększy przejrzystość i widoczność między klientami użytkownika, firmami i dostawcami zewnętrznymi oraz przełoży się na szybsze działanie sieci.

Bliższe spojrzenie na firmy zewnętrzne

Zasób zewnętrzny to zasób udostępniany przez dostawcę spoza witryny. Właściciele witryn nie mają nad nimi bezpośredniej kontroli, ale muszą uzyskać ich zgodę. Zasoby firm zewnętrznych są następujące:

• Hostowane w udostępnionym i publicznym źródle, które jest inne niż główna witryna źródłowa.
• nie są tworzone przez poszczególnych właścicieli witryn ani nie mają na nie wpływu;
• Używana w różnych witrynach.

Firmy zewnętrzne pomagają realizować wiele różnych celów biznesowych – od pomagania w generowaniu przychodów (przez reklamy) po zapewnianie lepszych możliwości marketingowych (umieszczone w mediach społecznościowych). Oto najczęstsze kategorie firm zewnętrznych:

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

Skrypty i biblioteki innych firm pozwalają programistom stron internetowych na korzystanie z wypróbowanych i przetestowanych rozwiązań w celu implementacji standardowych funkcji zamiast wymyślania własnych opcji. W ten sposób firmy zewnętrzne skracają czas programowania i pomagają firmom szybciej wprowadzać i uaktualniać produkty. Nic więc dziwnego, że ponad 94% wszystkich witryn na komputerach i urządzeniach mobilnych korzysta z usług firm zewnętrznych.

Jaki wpływ na wydajność mają firmy zewnętrzne?

W idealnej sytuacji programiści z innych firm są ekspertami w zakresie konkretnych funkcji, jakie oferują. Większość popularnych firm zewnętrznych przeszła kilka iteracji i można oczekiwać, że ich kod będzie zoptymalizowany pod kątem własnych celów biznesowych, co może, ale nie musi, obejmować wydajność korzystających z nich stron. Wiemy jednak, że nawet najlepiej zoptymalizowane urządzenia zewnętrzne wpływają na wydajność. Oto główne przyczyny tej zmiany:

1. Koszty rozmiaru i wykonania skryptów: firmy zewnętrzne często dążą do zapewnienia istotnych funkcji „tylko” poprzez umieszczenie elementu <script> lub <iframe> na stronie. Elementy te pobierają następnie skrypty i zasoby o znacznym rozmiarze, których pobieranie i wykonywanie trwa dłużej. Zbyt duża ilość kodu JavaScript sprawia, że wątek główny jest zajęty dłużej, blokuje renderowanie i opóźnia interakcje użytkowników. Niektóre z czołowych firm zewnętrznych blokują wątek główny od 42 ms do 1,6 s w ponad 50% przeanalizowanych witryn. Zablokowanie wątku głównego skutkuje wysokim całkowitym czasem blokowania (TBT), który jest jednym z danych wpływających na wynik wydajności witryny. Poza tym opóźnia on reagowanie na interakcje użytkowników i zmniejsza wartość danych interakcji z kolejnym wyrenderowaniem (INP), które są używane do pomiaru responsywności witryn. Z tego względu koszty wykonywania skryptu mają znaczący wpływ na wydajność.

2. Liczba: na urządzeniach mobilnych i w przeglądarce strony korzystają średnio z 21 różnych firm zewnętrznych. Tagi usług zewnętrznych są często dodawane za pomocą narzędzi do zarządzania tagami, które nie są bezpośrednio kontrolowane przez zespoły techniczne lub programistyczne. Niewymagane tagi mogą zostać dodane przez inne zespoły bez weryfikacji i nigdy nie zostaną usunięte. Może to znacząco wpłynąć na wygodę użytkowników, wagę strony lub wykorzystanie procesora. Ustanowienie procesu nadzoru pozwala zapobiegać takim sytuacjom i umożliwia deweloperom sprawdzenie wpływu działań poszczególnych dostawców. Dobrze byłoby, gdyby deweloperzy mieli dostęp do danych dla wszystkich firm zewnętrznych, które pełnią określoną funkcję, i przedstawiłyby ich wpływ na wydajność oraz związane z nimi korzyści i zalety w celu porównania. Innym problemem jest to, że w przypadku wielu witryn tagi innych firm działają tylko w środowisku produkcyjnym, a nie w środowisku programistycznym, co utrudnia programistom ich testowanie.

3. Sieć: witryny firm zewnętrznych mają różne źródła, dlatego przeglądarki muszą nawiązać z nimi więcej połączeń, aby pobrać z nich treści. Różne połączenia nie mogą koordynować pobierania na podstawie priorytetu, co powoduje rywalizację o sieć. Może to opóźnić wczytanie strony, jeśli nie zostaną uwzględnione odpowiednie optymalizacje.

4. Sekwencjonowanie: inne firmy mogą blokować wątek główny i rywalizować o większą przepustowość zasobów, które mają większe znaczenie. Jednak w niektórych przypadkach kluczowe zasoby potrzebne do renderowania strony są niezbędne do renderowania. Optymalna sekwencjonowanie zasobów własnych i zewnętrznych staje się niezbędna, gdy witryny korzystają z usług wielu firm zewnętrznych. Programiści stron internetowych powinni znać różne opcje optymalizacji sekwencjonowania.

W efekcie osoby trzecie mogą wpływać na niektóre lub wszystkie elementy podstawowych wskaźników internetowych. Większość innych firm ma negatywny wpływ na największe wyrenderowanie treści (LCP) i opóźnienie przy pierwszym działaniu (FID). Umieszczone strony YouTube blokują wątek główny na 4,5 sekundy w 10% witryn na urządzeniach mobilnych i co najmniej 1,6 sekundy w przypadku 50% badanych witryn. Wyobraź sobie, że zdenerwował użytkownika, który natrafił na stronę z 20 takimi skryptami i powolnym połączeniem. Wizualizacja z narzędzia thirdpartyweb.today przedstawia firmy zewnętrzne, które w chwili obecnej mają największy wpływ na wydajność.

„W około 4 milionach witryn około 2700 źródeł stanowi ok. 57% czasu wykonywania skryptów, przy czym 50 najlepszych podmiotów odpowiada już za ok. 47%”. - internet zewnętrzny

Strony, które szybko się wczytują i stają się interaktywne w rozsądnym terminie, są kluczowe dla wygody użytkowników, mierzonej przez podstawowe wskaźniki internetowe. Dobry UX często przekłada się na dobrą obsługę witryn, a co za tym idzie – dla firm zewnętrznych. Współpraca na rzecz zmniejszenia wpływu innych firm może być korzystna dla wszystkich członków sieci.

Zdajemy sobie sprawę, że Google udostępnia wiele popularnych skryptów zewnętrznych, m.in. Menedżera tagów Google, umieszczanie filmów na stronach w YouTube czy mechanizm ReCaptcha. Zdajemy sobie sprawę, że wiele naszych skryptów może mieć mniejszy wpływ na podstawowe wskaźniki internetowe, i pracujemy nad sposobami poprawy ich skutków, jeśli będzie to możliwe.

Jak Chrome może pomóc?

Dla deweloperów zbyt mało wydajne zasoby zewnętrzne często stanowią wyzwanie i wymagają stopniowej zmiany w dynamice ekosystemu. Chrome chce zbadać ten obszar, aby osiągnąć te wyniki:

1. Znajdź lepsze sposoby wczytywania zasobów zewnętrznych w internecie bez pogarszania wygody użytkowników lub wyników biznesowych.

   Wiemy, że nie uda się nam osiągnąć dalekich działań, jeśli nie będziemy współpracować z partnerami, firmami, firmami zewnętrznymi i deweloperami. Chcemy stworzyć otwarte pole do dyskusji na temat możliwości i wymiany pomysłów w ramach publicznych wyjaśnień i specyfikacji. Deweloperzy będą mieli czas na przekazanie opinii i przetestowanie wpływu wielu z tych ofert.

2. Zapewnij użytkownikom skryptów innych firm lepszą atrybucję kosztów związanych z oprogramowaniem i w terenie, utwardzonymi ścieżkami użytkowania i lepszymi zachętami podczas tworzenia, które zapewnią ich optymalne działanie.

   Chcemy ulepszyć wszystkie warstwy, takie jak klienty użytkownika, platformy i skrypty innych firm, aby ograniczyć wpływ działania innych firm na wydajność. Zamierzamy też udostępniać wystarczającą ilość statystyk, aby właściciele witryn stosować sprawdzone metody dotyczące każdego umieszczonego skryptu, w tym szybsze rozwiązania alternatywne.

Proponowane podejście

Sugerujemy 3-etapowe podejście do osiągnięcia tych wyników...

1. **Daj programistom dokładniejsze dane o wpływie firm zewnętrznych za pomocą RUM i narzędzi dla programistów Chrome.**

   RUM to rzeczywiste dane o użytkownikach (nazywane też danymi zgromadzonymi) dostępne w interfejsach API do monitorowania wydajności sieci. Narzędzia deweloperskie w Chrome obejmują Lighthouse, Narzędzia deweloperskie w Chrome i Raport na temat użytkowania Chrome. Proponujemy ulepszenie dostępnych interfejsów API i narzędzi, aby programiści witryn mogli lepiej zrozumieć wpływ wszystkich firm zewnętrznych używanych na każdej stronie. Uczestnicy poznają też działania, które można podjąć, aby ograniczyć skutki (np. odroczenie lub korzystanie z fasad), a także zapoznać się z innymi potencjalnymi rozwiązaniami (inne firmy zewnętrzne lub „zrób to sam)”. W przypadku interfejsów API do monitorowania wydajności sieci badamy sposoby, w jakie rozszerzymy zasięg ich zasobów z różnych domen bez naruszania prywatności i bezpieczeństwa naszych użytkowników.

2. **Zapewnij firmom dobrze oświetloną ścieżkę wydajnego wczytywania zasobów zewnętrznych.**

   Chcemy przedstawić nowe standardy zachęcające przeglądarek do bardziej efektywnego kompromisu między sposobem wczytywania zasobów własnych i zewnętrznych w celu zwiększenia wygody użytkowników. Później omówimy niektóre z tych propozycji, takie jak domyślne leniwe ładowanie elementów umieszczonych na stronach innych firm czy zastosowanie różnych priorytetów zasobów innych firm, które mogą nie być tak istotne dla początkowych treści, które mogą być najbardziej interesujące dla użytkowników. To tylko kilka pomysłów, które analizujemy na tym stanowisku. Chętnie nawiążemy współpracę z ekspertami ds. wydajności w internecie i szerszą społecznością przy kształtowaniu tych prac.

   Podobne problemy chcielibyśmy rozwiązać w stosownych przypadkach w przypadku platform JavaScript i systemów zarządzania treścią (CMS). Projekty takie jak Aurora i WordPress Performance Team nauczyły nas, jak ważne są wbudowane ustawienia domyślne, które rozwiązują znane problemy z wczytywaniem. Domyślne ustawienia wbudowane w platformy i CMS pomagają firmom przejść przez dobrze oświetloną ścieżkę. Mogą być również przydatne dla klienta użytkownika (np. Chrome) jako wskazówki umożliwiające zastosowanie heurystyki do optymalizacji wczytywania strony i CWV. Takie wskazówki pomagają klientowi użytkownika podjąć decyzję o tym, kiedy i w jaki sposób określone aplikacje zewnętrzne powinny wczytywać się w cyklu życia strony. Na przykład komponent skryptu Next.js ma wbudowane domyślne skrypty, które ładują zewnętrzne skrypty, gdy strona stanie się interaktywna.

3. **Zachęcaj osoby trzecie do zmniejszania swojego wpływu na skuteczność przez zwiększenie przejrzystości.**

   Deweloperzy zewnętrzni nie mają obecnie widoczności niezbędnej do zrozumienia wpływu ich skryptów na ogół witryn. Planujemy rozwiązać ten problem i wyposażyć tych dostawców w narzędzia umożliwiające analizę ich wpływu i porównanie go z innymi produktami na rynku, które mają taką samą wartość. Chcemy też pomóc w wykorzystywaniu tych danych do diagnozowania przyczyn wpływu, a następnie łagodzenia ich skutków. Aby odnieść sukces, będziemy musieli zaangażować wszystkie firmy zewnętrzne, w tym te opracowane przez Google.

Wyzwania

Przed tak szerokim wysiłkiem musi liczyć się z wyzwaniami. Oto niektóre z najważniejszych wyzwań, które musimy wziąć pod uwagę.

• Zewnętrzni dostawcy to problem obejmujący reklamy, analitykę, zarządzanie tagami, narzędzia itp. Każdy obszar wymaga uwzględnienia innego zestawu wymagań i zalet. Na przykład:
  • Decyzja o optymalizacji wczytywania reklam zależy od kompromisu między przychodami a wygodą użytkowników. Zbyt wcześnie blokują cenne treści, bo za późno, użytkownik ich nie zobaczy.
  • Skrypty Analytics zwiększają wagę strony, ale dostarczają też cennych danych o działaniach użytkowników,

Mamy nadzieję na współpracę z różnymi kategoriami osób trzecich, zrozumienie niuansów, rozwiązywanie kompromisów i opracowanie zachęt, które będą skuteczne dla wszystkich. Zdajemy sobie sprawę, że aby nasza strategia była skuteczna, musimy współpracować osobno z podmiotami w każdym obszarze. Dotyczy to też naszych partnerów wewnętrznych, takich jak Menedżer tagów Google, Google Ads czy YouTube.

1. Chcemy zapewnić bardziej szczegółowe informacje zarówno deweloperom witryn, jak i deweloperom z innych firm. Wymaga to przemyślanych działań, w których określamy, które dane są najistotniejsze w pomiarze wpływu, dokładnie i dokładnie przypisujemy ich wartość oraz wskazujemy właściwą drogę. W ostatecznym rozrachunku obliczenia skuteczności danej firmy zewnętrznej w porównaniu z konkurencją powinny być przejrzyste dla wszystkich.

2. Proponujemy ulepszenie Chrome, dzięki czemu można w nim stosować optymalizacje, które pomagają znaleźć odpowiednią równowagę między ładowaniem zasobów własnych a zasobów innych firm. Cenna zmiana staje się standardem we wszystkich przeglądarkach, ale trzeba na to trochę czasu. Na przykład atrybut loading elementów <img> i <iframe> jest dostępny w Chrome/Edge od 2019 roku, ale dopiero w 2022 r. w Safari. Do czasu ustandaryzowania danej funkcji użytkownicy zasobów innych firm muszą zadbać o to, aby przeprowadzili optymalizację również pod kątem innych przeglądarek. W razie potrzeby wyróżnimy to w naszych wskazówkach.

3. W realizacji tego projektu będziemy musieli współpracować z partnerami i programistami, którzy pomogą nam nie tylko zrozumieć konkretne wymagania, ale także testować rozwiązania eksperymentalne na dużą skalę, przekazywać opinie, iterować i improwizować zależnie od potrzeb. Zmiany będą musiały zostać zaplanowane, tak aby dało się to w rozsądnym czasie na testowanie i oceny.

Propozycje standardów początkowych

Przeprowadziliśmy kilka wstępnych eksperymentów, aby opracować funkcje, które można włączyć w celu optymalizacji procesu wczytywania przez firmę zewnętrzną. Jesteśmy zadowoleni z wyników. Możemy teraz omówić 2 z tych funkcji.

LazyEmbeds

Użytkownicy wersji uproszczonej Chrome wcześniej leniwie ładować elementy <img> i <iframe>. Można ją rozszerzyć na wszystkich użytkowników, aby opóźnić wczytywanie elementów <iframe> uznanych za umieszczone przez inne firmy do momentu, gdy użytkownik przewinie stronę w pobliżu. Może to przyspieszyć wczytywanie innych części strony, poprawić podstawowe wskaźniki internetowe, zmniejszyć użycie pamięci i zmniejszyć ilość danych.

Oto przykład użycia leniwego ładowania filmów z YouTube na stronie przy użyciu LazyEmbeds. Pojedyncze umieszczenie filmu z YouTube na stronie zwykle umieszcza 500–600 KB kodu JavaScriptu. Staraliśmy się zoptymalizować posta na blogu, dodając 14 takich filmów umieszczonych na stronie za pomocą LazyEmbeds. Wyniki były obiecujące, jeśli chodzi o czas wczytywania strony i oszczędność danych.

Więcej informacji na ten temat znajdziesz w wątku „intent-to-experiment” (w języku angielskim) i w rozszerzeniu do eksperymentu na stronie blink-dev.

Ograniczanie dostępu innej firmy

Skrypty innych firm są często dodawane przez różne zespoły bez holistycznego nadzoru. Zespół inżynierów z The Telegraph stwierdził, że „każdy chce używać tego tagu na stronie, która ma przynieść organizacji zyski”. Może to stale zwiększyć obciążenie związane z zarządzaniem wpływem na skuteczność.

Ukierunkowane ograniczanie skryptów innych firm ma na celu ograniczenie działania bardzo konkretnych rodzajów oprogramowania zewnętrznych w celu zniwelowania skutków takiego działania. Dzięki temu przeglądarki będą mogły wczytywać najważniejsze treści i kluczowe inne firmy na wczesnym etapie, a te, które mogą zostać wczytane w późniejszym czasie, zostaną ograniczone.

Ulepszanie interfejsów API RUM

Rozważamy również rozszerzenie interfejsów API RUM, tak aby zawierały informacje przydatne przy ocenie skuteczności działań firm zewnętrznych. Są to m.in.:

1. Raportowanie <iframe> – pracujemy nad rozwiązaniami, które będą mogły korzystać z interfejsu API Performance Timeline na potrzeby raportowania obejmującego wiele ram. Pozwoli to autorom stron najwyższego poziomu zbadać dane o wydajności współpracującego z nią zewnętrznego elementu iframe umieszczonego na stronie.

2. Atrybucja długich zadań: Long Tasks API w RUM pomaga właścicielom witryn identyfikować długie zadania, które łączą wątek główny na dłuższy czas i opóźniają interakcję.

Dalsze aktualizacje

Nadal testujemy wiele takich pomysłów i mamy nadzieję, że w miarę postępów w usłudze GitHub pojawią się objaśnienia i wersje specyfikacji zmian. Inne firmy i właściciele witryn, którzy chcą nawiązać z nami współpracę lub przekazać nam swoją opinię, mogą wziąć udział w dyskusjach w ramach tych formularzy. Firmy zewnętrzne mogą też zacząć skupiać się na optymalizacji pod kątem podstawowych wskaźników internetowych i wskaźników INP, aby mieć pewność, że nie będą do nich przypisywane niskie wartości INP. Na razie osoby aktywnie szukające aktualizacji mogą zapoznać się z postami na grupie blink-dev.

Chętnie będziemy dalej badać ten problem i kontaktować się z członkami społeczności, aby wyciągać wnioski.

Szczególne podziękowania należą się Leena Sohoni-Kasture, Jeremy Wagner, Gilberto Cocchi, Kenji Baheux, Kouhei Ueno, Kentaro Hara, Alex N. Jose, Melissa Mitchell, Yoav Weiss, Shunya Shishido i Minoru Chikamune za ich opinie i współpracę.