Data publikacji: 10 lutego 2025 r.
Czy kiedykolwiek odkładasz w czasie wdrażanie nowoczesnej funkcji internetowej, ponieważ nie masz pewności, czy przeglądarki użytkowników będą ją obsługiwać? A może trzymasz ciężkie wypełniacze dłużej niż to konieczne? Nie tylko Ty masz ten problem. Baseline daje nam jasne sygnały na temat globalnej obsługi przeglądarek, ale brakuje nam informacji o tym, co Twoi użytkownicy faktycznie obsługują.
Zespół RUMvision rozwiązał ten problem, łącząc dane wyjściowe z danymi z monitorowania rzeczywistych użytkowników (RUM), a wyniki są bardzo interesujące. Okazało się, że zespoły mogły wdrożyć nowoczesne funkcje miesiące wcześniej, niż planowano, a niektóre z nich odkryły, że utrzymują polyfille, których 97% użytkowników wcale nie potrzebuje. Inni odkryli, że warto odłożyć wdrożenie nowych funkcji, ponieważ ich odbiorcy nie byli jeszcze gotowi.
Jak działa obsługa poziomu podstawowego i przeglądarek
Obsługa funkcji internetowej jest powiązana z wersjami przeglądarek: gdy przeglądarki udostępnią funkcję, użytkownicy otrzymają ją po zaktualizowaniu przeglądarki. Wartość domyślna śledzi, kiedy wszystkie główne przeglądarki (Chrome, Edge, Firefox i Safari) wprowadziły daną funkcję, oznaczając ją niebieskim znacznikiem i ustawiając jako „Nowo dostępną”. Po 30 miesięcy ten stan zmienia się na „Dostępne powszechnie”.
Jednak wzorce aktualizacji Twoich użytkowników mogą się znacznie różnić od średnich wartości globalnych. Dzięki śledzeniu rzeczywistych wersji przeglądarek, z których korzystają użytkownicy, RUMvision może dokładnie określić, jaki odsetek odbiorców obsługuje poszczególne funkcje. Dzięki temu podstawa przestaje być ogólnym wskaźnikiem, a staje się praktycznym narzędziem do stosowania w konkretnej sytuacji.
Przyjęcie przeglądarek w internecie
Analizując miliony wyświetleń stron na różnych rynkach (grudzień 2024 r.), RUMvision odkrył wyraźne wzorce dotyczące tego, jak użytkownicy otrzymują aktualizacje przeglądarki:
- Aktualizacje Chrome, Edge i Firefox są szybko wdrażane i często osiągają poziom 95% wsparcie w ciągu około 3 miesięcy.
- Safari potrzebuje na to znacznie więcej czasu – około 19 miesięcy, ponieważ jest to związane z aktualizacjami systemu operacyjnego.
- Chrome ma swoją własną osobliwość – szybko osiąga 95–98%, ale potem spowalnia i dojście do 99% zajmuje mu nawet 23 miesiące.
Podstawa śledzi setki funkcji, ale Ty prawdopodobnie skupiasz się na konkretnych, których chcesz używać. Czas oczekiwania na każdą funkcję zależy od tego, która przeglądarka jako ostatnia ją obsługuje.
Jeśli Chrome był ostatnią przeglądarką, której potrzeba, aby funkcja osiągnęła poziom podstawowy, a Twoja grupa odbiorców używa głównie Chrome, prawdopodobnie będzie ona miała dostęp do tej funkcji w ciągu kilku miesięcy. Jeśli jednak Safari jako ostatnie dodało obsługę, nawet jeśli wszystkie inne przeglądarki były gotowe już lata temu, użytkownicy Safari mogą czekać 19 miesięcy na wymaganą aktualizację systemu operacyjnego.
rzeczywistość wygląda inaczej dla każdego.
Nasze dane wskazują, że poziom obsługi różni się znacznie w zależności od witryny (grudzień 2024 r.):
- Holenderski sprzedawca artykułów domowych:
- Funkcje z punktu odniesienia 2024: 34% wsparcia
- Funkcje z wersji podstawowej z 2023 roku: obsługa na poziomie 76%
- Funkcje dostępne powszechnie: obsługa na poziomie 95%
- Amerykański blog o technologiach:
- Funkcje z punktu odniesienia 2024: obsługa na poziomie 59%
- Funkcje z punktu odniesienia 2023: obsługa na poziomie 89%
- Funkcje dostępne powszechnie: pełna obsługa
- Strona internetowa dotycząca nieruchomości w regionie Bliskiego Wschodu:
- Funkcje z punktu odniesienia 2024: obsługa na poziomie 39%
- Funkcje z punktu odniesienia 2023: obsługa na poziomie 74%
- Funkcje dostępne powszechnie: obsługa na poziomie 95%
Różnice te wynikają z tego, kim są Twoi użytkownicy i jak przeglądają Twoją witrynę:
- Użytkownicy z doświadczeniem technicznym zwykle szybko aktualizują swoje urządzenia, podczas gdy użytkownicy mniej obeznieni z technologią często korzystają z wcześniejszych wersji.
- Różne grupy wiekowe i odbiorcy mają różne nawyki przeglądania i urządzenia.
- Użytkownicy urządzeń mobilnych i komputerów różnią się sposobem uzyskiwania dostępu do Twojej witryny.
- W niektórych regionach preferowany jest system iOS, a w innych Android, co wpływa na dostępność funkcji.
Dlatego ta sama funkcja może być bezpiecznie używana w blogu technologicznym w ciągu kilku miesięcy, ale w przypadku witryny e-commerce przez kolejny rok będzie wymagać korzystania z funkcji zastępczych.
Integracja punktu odniesienia z RUMvision
Zespół RUMvision chciał się upewnić, że integracja spełnia oczekiwania deweloperów i spełnia ich oczekiwania dotyczące sposobu przedstawiania tych informacji.
Podjęli się tymi wynikami z 2 perspektyw:
- Deweloperzy sami muszą znać te informacje.
- Jako twórcy, którzy tworzą dla szerszej społeczności programistów.
Podobnie jak wielu innych programistów, zespół regularnie korzysta z narzędzi takich jak Can I Use i MDN, więc dostosował integrację, aby prezentować informacje w sposób, który usprawni jego własny przepływ pracy, a zarazem zaspokoi potrzeby wszystkich użytkowników RUMvision.
Łączenie wielu źródeł danych
Proces rozpoczyna się od automatycznego importowania nowych danych funkcji internetowych. Te funkcje są następnie dostępne w wyszukiwarce i na liście, którą można filtrować, dla użytkowników RUMvision.
Po kliknięciu funkcji internetowej otworzy się okno z szczegółowymi informacjami o podstawie i harmonogramem obsługi w przeglądarkach. Ten widok jest uzupełniony o dodatkowe statystyki:
- Materiały: linki do stron MDN, Can I Use, W3C, informacji o wersjach przeglądarki, strony Chrome Status oraz artykułów na web.dev.
- Harmonogram wdrażania wersji podstawowej: pokazuje, kiedy każda przeglądarka wdrożyła obsługę danej funkcji.
- Tabela pomocy MDN: dane z browser-compat-data zawierające szczegółowe informacje podobne do standardowych tabel pomocy MDN.
- Znane błędy: wyodrębnione z tego samego zbioru danych, aby uzupełnić dostępne zasoby.
- Pomoc AI: pomaga interpretować statystyki pomocy w głównych przeglądarkach.
Korzystanie z najnowocześniejszych funkcji
Prawdziwa moc łączenia danych z Baseline z danymi o użytkownikach polega też na korzystaniu z nowych funkcji internetowych. W przypadku każdej funkcji możesz zobaczyć poziomy korzystania z niej przez odbiorców i śledzić, jak zmieniają się one z biegiem czasu. Oznacza to, że w odpowiednim momencie zastąpisz skomplikowane rozwiązania JavaScript natywnymi funkcjami przeglądarki. Możesz na przykład przejść z:
- komponenty elastyczne oparte na JavaScript do zapytań kontenerowych;
- Biblioteki JavaScripta do ładowania na żądanie, które korzystają z interfejsu IntersectionObserver API, aby obsługiwać natywny tryb ładowania na żądanie.
- Frameworki z modalami (np. Bootstrap) wbudowanymi w interfejs API okna modalnego.
Zamiast czekać 30 miesięcy na uzyskanie statusu „Dostępne powszechnie” możesz podejmować świadome decyzje na podstawie rzeczywistych danych o korzystaniu. Będziesz dokładnie wiedzieć, kiedy wdrożyć nowe funkcje i jak je skutecznie wdrożyć.
Rzeczywiste przykłady i ich wpływ
Przykładem jest funkcja, która niedawno osiągnęła poziom bazowy: właściwość CSS content-visibility.
- Niektóre witryny były gotowe do natychmiastowego wdrożenia, ponieważ spełniały wymagania w 99%.
- Pozostałe wyniki mieściły się w zakresie 82–89%, co sugeruje potrzebę stosowania rozwiązań alternatywnych.
- Kilka zidentyfikowanych konkretnych segmentów użytkowników, które nadal korzystają ze starszych przeglądarek.
content-visibility oś czasu dla amerykańskiej strony internetowej o technologii i strony internetowej firmy pośredniczącej w sprzedaży nieruchomości w regionie Bliskiego Wschodu.Dane pokazały też, że od lutego do września 2024 r. obsługa obu funkcji w Safari utrzymywała się na poziomie około 20%, co zgadza się z wdrożeniem iOS 18, które zaczęło się we wrześniu 2024 r.
Sukces klienta dzięki własnemu podstawowemu zestawowi danych „Dostępny powszechnie”
Na podstawie informacji z RUM możesz utworzyć własną wartość domyślną, która obejmuje funkcje dostępne w Twojej witrynie w 4 stanach i możliwość ich filtrowania:
- Gotowe do wysyłki (jeśli jest to obsługiwane przez co najmniej 98% użytkowników).
- Wygląda dobrze (obsługa obejmuje 95–98%).
- Uwaga (zasięg od 75% do 95%).
- Nie działaj pochopnie (zasięg poniżej 75%).
Połączenie danych RUM z informacjami podstawowymi dotyczącymi poszczególnych funkcji internetowych pozwoliło użytkownikom osiągnąć już sukces. Strona Informatiebord.nl usunęła 30 KB polyfillów JavaScriptu, gdy odkryła, że 97% użytkowników korzysta z obsługiwanych już funkcji natywnych. Twórca aplikacji, Kevin Meijer, powiedział:
„Dzięki funkcji Baseline możemy podejmować strategiczne decyzje: czy skupić się na zapewnieniu doskonałych wrażeń 97% użytkowników bez kompromisów w zakresie wydajności, czy też zwolnić tempo wprowadzania innowacji, aby dostosować się do potrzeb pozostałych 3%? świadomie wybieramy pierwszą opcję, ponieważ dodatkowe wysiłki w przypadku tych 3% negatywnie wpłynęłyby na komfort większości użytkowników”.
Współtworzenie internetu
Dane bazowe w połączeniu ze statystykami dotyczącymi rzeczywistych użytkowników pomagają nam wszystkim podejmować lepsze decyzje dotyczące obsługi funkcji. Kiedy odrzucić stary kod, kiedy wdrożyć nowe funkcje – te decyzje stają się łatwiejsze, gdy wiesz, czego tak naprawdę chcą użytkownicy.
Zespół RUMvision udostępnia grupie Community WebDX informacje o wzorach wdrażania przeglądarek, aby pomóc w przechodzeniu z stanu „Nowo dostępne” do „Dostępne powszechnie”.