Najważniejsze informacje z Chrome Dev Summit 2021

Chrome Dev Summit to coroczne wydarzenie, podczas którego eksperci z Chrome dzielą się najważniejszymi informacjami na temat swoich najnowszych produktów oraz swoją wizją przyszłości Chrome i internetu.

Ten artykuł zawiera najważniejsze informacje z Chrome Dev Summit 2021.

Do najciekawszych zmian ogłoszonych przez zespół Chrome należą:

• Plany ograniczenia ilości informacji w ciągach User-Agent,
• Ogłoszenie nowego wsparcia dla User Flows w Lighthouse i DevTools,
• Przedstawiamy dwie nowe metryki wydajności (kandydaci na Core Web Vitals) oraz
• Nowe funkcje Responsive Design.

Wycofanie plików cookie stron trzecich — wskazówki dotyczące klienta użytkownika

Piaskownica prywatności nadal jest jednym z kluczowych elementów rosnących wysiłków Google, aby stworzyć sieć bardziej ukierunkowaną na prywatność.

Przeglądarka nie ma możliwości określenia, czy używasz plików cookie innych firm w celu uzyskania przydatnych funkcji, takich jak dostosowywanie obsługi, utrzymywanie zalogowanego użytkownika lub śledzenie między witrynami.

źródło: Barb Smith

Dlatego Chrome ma na celu tworzenie specjalnie zaprojektowanych interfejsów API, które pozwalają zachować funkcje (takie jak reklamy, wykrywanie oszustw lub dostarczanie dostosowanych treści) bez potrzeby korzystania z plików cookie innych firm.

Po upewnieniu się, że programiści mają czas na przyjęcie interfejsów API, Chrome bezpiecznie wycofa obsługę plików cookie innych firm.

Nowe technologie i etapy ich rozwoju można zobaczyć na osi czasu piaskownicy prywatności.

Jednym z nowych rozwiązań wprowadzonych w tym roku jest User-Agent Client Hints (UA-CH).

Ciąg User-Agent zawiera wiele informacji o urządzeniu użytkownika i przeglądarce, które można wykorzystać do odcisku palca przeglądarki.

Chrome ma na celu zwalczanie odcisków palców przeglądarki, zmniejszając domyślną ilość informacji w ciągu User-Agent i utrudniając identyfikację poszczególnych użytkowników. Informacje w ciągu będą zawierać tylko:

• markę i wersję przeglądarki,
• Informacje, czy jest to komputer stacjonarny, czy mobilny, oraz
• Platforma, na której działa.

Ciąg User-Agent domyślnie podaje pewne informacje, które mogą obejmować większość przypadków użycia, ale bardziej szczegółowe informacje są dostępne tylko na żądanie w prostym formacie.

źródło: programiści Chrome

Od kwietnia 2022 r. Chrome będzie stopniowo zmniejszać ciągi User-Agent.

Nadal będziesz w stanie uzyskać dodatkowe dane o swoich użytkownikach za pomocą interfejsu User-Agent Client Hints API, ale użytkownicy będą mogli decydować, ile informacji chcą udostępnić.

Aktualizacje narzędzi wydajności

Chrome ogłosił kilka ekscytujących zmian i nowych funkcji służących do mierzenia i analizowania wydajności sieci. Obejmuje:

• Ulepszenie interfejsu użytkownika w PageSpeed ​​Insights,
• Dodanie wsparcia dla User Flows w Lighthouse i DevTools,
• Przedstawiamy dwie nowe metryki eksperymentalne.

Zmiany w interfejsie PageSpeed ​​Insights

W interfejsie PageSpeed ​​Insights wprowadzono aktualizację , która sprawia, że ​​jest on bardziej intuicyjny i poprawia prezentację danych.

Nowy interfejs zawiera wyraźne rozróżnienie między „danymi laboratoryjnymi” opartymi na raporcie Lighthouse a „danymi terenowymi” opartymi na rzeczywistych doświadczeniach użytkowników.

Dodatkowo nowa funkcja o nazwie „Rozwiń widok” dodaje funkcję do sekcji Dane pola. Możesz go użyć, aby wyświetlić szczegółowe informacje dotyczące Core Web Vitals.

Google przeniosło również podsumowanie pochodzenia poniżej pola Dane. Po kliknięciu możesz zobaczyć zagregowany wynik wszystkich stron z tego samego pochodzenia.

Poniżej sekcji danych terenowych i laboratoryjnych można znaleźć dodatkowe, pomocne informacje, w tym:

• Okres zbierania danych,
• czas trwania wizyt,
• Urządzenia,
• Połączenia sieciowe,
• Wielkość próbki,
• Wersje Chrome.

Zmiany nadchodzą również w ocenie Core Web Vitals. Zamiast pojedynczego słowa „zaliczonego” lub „niezaliczonego”, będzie ono dostępne w osobnej podsekcji.

Na koniec obraz strony ładowania zostanie usunięty z sekcji pola. Obraz i miniatury przedstawiające sekwencję ładowania znajdziesz w sekcji danych laboratoryjnych.

Obsługa przepływów użytkowników w Lighthouse

Nowy interfejs Lighthouse API pozwala analizować przepływ użytkowników, symulując kliknięcia linków, przewijanie i ładowanie dodatkowych stron zamiast analizowania wydajności każdej strony osobno.

Lighthouse będzie w stanie rozróżnić i dostarczyć oddzielne raporty dotyczące nawigacji po stronach, wszelkich interakcji użytkownika, które miały miejsce w określonym przedziale czasu, oraz migawek reprezentujących przechwycony stan strony.

źródło: Houssein Djirdeh

Dzięki nowej funkcji możesz lepiej zrozumieć wrażenia użytkownika i wykryć problemy z wydajnością podczas podróży użytkownika w Twojej witrynie.

Nowy panel nagrywania w DevTools

Wsparcie dla analizy przepływów użytkowników zostało również dodane bezpośrednio w DevTools.

Dzięki nowo uruchomionemu panelowi nagrywania w DevTools możesz teraz analizować, rejestrować i eksportować całą podróż użytkownika w swojej witrynie.

Nowe narzędzie umożliwia przeglądanie wszystkich czynności wykonywanych przez użytkowników w Twojej witrynie, takich jak naciśnięcia klawiszy lub kliknięcia linków, bezpośrednio w panelu Wydajność. Ta funkcja ma na celu ułatwienie łatwego zrozumienia i debugowania złożonych interakcji.

Dwie nowe metryki wydajności

Chrome ogłosił dwa nowe wskaźniki wydajności jako potencjalni kandydaci do Core Web Vitals.

Reakcja na coś

Responsywność ma na celu uchwycenie ogólnej responsywności strony.

Obecnie używamy opóźnienia pierwszego wejścia, aby zmierzyć responsywność strony podczas ładowania. FID jest użytecznym wskaźnikiem, ponieważ czas reakcji jest szczególnie niestabilny, gdy przeglądarka musi załadować wiele zasobów, a czas głównego wątku jest bardzo potrzebny.

Ale wszystkie miary FID dotyczą tego, jak szybko przeglądarka jest gotowa do przetworzenia żądania użytkownika. Nie pozwala mierzyć opóźnienia wejściowego przez cały cykl życia danej strony.

Zespół Chrome wciąż pracuje nad konceptualizacją nowej metryki Responsywności. Tutaj możesz dowiedzieć się więcej o wyzwaniach związanych z mierzeniem czasu oczekiwania na dane wejściowe w całym cyklu życia strony.

Gładkość

Płynność ma na celu rozwiązanie problemu „zacinania się” lub „zawieszania się” podczas animacji lub przewijania. Ta nowa metryka ma na celu lepsze zrozumienie, jak często opuszczane są klatki animacji i jak bardzo wpływa to na użytkownika.

Proponowana metryka Procent porzuconych klatek obliczałaby liczbę pominiętych klatek i przedstawiałaby średni wynik, który ma odzwierciedlać płynność animacji z perspektywy użytkownika.

Liczy się: proporcja czasu oczekiwania na ważne aktualizacje. Uważamy, że jest to zgodne z naturalnym sposobem, w jaki użytkownicy doświadczają płynności treści internetowych w praktyce. Do tej pory używaliśmy następujących danych jako początkowego zestawu metryk :

• Średni procent porzuconych: dla wszystkich klatek animacji, które nie są bezczynne na całej osi czasu
• Najgorszy przypadek procentowej utraty ramek: mierzony w ciągu 1 sekundy przesuwnych okien czasowych.
• 95. percentyl procentu porzuconych ramek: mierzony w ciągu 1 sekundy przesuwnych okien czasowych.

źródło: web.dev

Nowy Responsywny

Responsive Design to już nie tylko dostosowywanie witryny do pracy na telefonach komórkowych i komputerach stacjonarnych. To znacznie więcej, a programiści muszą zapewnić każdemu spersonalizowane wrażenia i uwzględnić preferencje użytkownika, takie jak tryb ciemny lub składane urządzenia.

Zmiany w Responsive Design dotyczą funkcji CSS. Niektóre z nowych funkcji obejmują nową specyfikację zapytań kontenerowych, oś czasu przewijania i właściwości koloru akcentu.

Właściwość dopasowania rozmiaru dla typografii

Jedną ze szczególnie ekscytujących funkcji jest właściwość dopasowywania rozmiaru dla typografii. Możesz użyć funkcji dostosowania rozmiaru, aby dostosować domyślną czcionkę do czcionki internetowej, która ma zostać załadowana.

Jest to szczególnie ważne, ponieważ może pomóc w zapobieganiu skumulowanemu przesunięciu układu , zmniejszając przesunięcie spowodowane ładowaniem czcionek internetowych.

Tryb ciemny

Ponadto Chrome pracuje nad funkcją algorytmu automatycznego zaciemniania wspomaganą uczeniem maszynowym. Oznacza to, że przeglądarka może automatycznie generować ciemny motyw, z możliwością rezygnacji z tej funkcjonalności.

Odwiedź stronę programistów Chrome, aby dowiedzieć się więcej o nowej funkcji automatycznego przyciemniania Chrome i przetestować ją na swoim urządzeniu.