Podsumowanie najważniejszych wiadomości i aktualności ogłoszonych podczas 3-dniowego wydarzenia online dla społeczności online oraz przypomnienie o nadchodzących wydarzeniach regionalnych.
Właśnie zakończyliśmy trzydniowe wydarzenie web.dev LIVE, podczas którego część społeczności programistów stron internetowych spotkała się online, aby porozmawiać o stanie rozwoju sieci. Każdy dzień zaczynaliśmy w innej strefie czasowej, a pracownicy Google dzielili się aktualnościami, wiadomościami i wskazówkami, aby pomóc deweloperom w utrzymaniu stabilności, wydajności i dostępności sieci za pomocą narzędzi i wskazówek.
Jeśli nie udało Ci się obejrzeć części transmisji na żywo, wszystkie sesje są nagrywane i możesz je obejrzeć na YouTube. Wkrótce odbędą się też wydarzenia regionalne na całym świecie, które są organizowane przez Google Developer Groups i będą obejmować szczegółowe omówienia tematów związanych z tym, co omówiliśmy podczas web.dev LIVE.
Przyjrzyjmy się niektórym wiadomościom i aktualizacjom, które zostały udostępnione podczas tych 3 dni.
wskaźniki internetowe
Zespół Chrome ogłosił inicjatywę Web Vitals, której celem jest dostarczanie ujednoliconych wskazówek, wskaźników i narzędzi, aby pomóc deweloperom w tworzeniu witryn, które zapewnią użytkownikom doskonałe wrażenia. Zespół wyszukiwarki Google ogłosił niedawno, że jakość strony będzie oceniana jako kryterium rankingu i będzie obejmować dane podstawowych wskaźników internetowych jako podstawę.
3 filary podstawowych wskaźników internetowych z 2020 r. to wczytywanie, interaktywność i stabilność wizualna treści strony, które są mierzone za pomocą tych danych:
- Największe wyrenderowanie treści mierzy postrzeganą szybkość wczytywania i oznacza na osi czasu wczytywania strony moment, w którym prawdopodobnie załadowano jej główną zawartość.
- Opóźnienie przy pierwszym działaniu mierzy responsywność i określa wrażenia użytkowników, gdy po raz pierwszy próbują wejść w interakcję ze stroną.
- Skumulowane przesunięcie układu mierzy stabilność wizualną i określa ilość nieoczekiwanego ruchu treści na stronie.
Podczas web.dev LIVE udostępniliśmy sprawdzone metody optymalizacji pod kątem podstawowych wskaźników internetowych oraz korzystania z Narzędzi deweloperskich w Chrome do sprawdzania wartości wskaźników witryny. Udostępniliśmy też wiele innych prezentacji dotyczących wydajności, które znajdziesz na stronie web.dev/live w harmonogramie dnia 1.
tooling.report
Tworzenie aplikacji na tak szeroką platformę jak internet może być trudne. Narzędzia do kompilacji często stanowią podstawę projektu tworzenia stron internetowych i odgrywają kluczową rolę w zarządzaniu cyklem życia dewelopera i produktu.
Wszyscy widzieliśmy nieporęczne pliki konfiguracji kompilacji, dlatego aby pomóc programistom stron internetowych i autorom narzędzi w opanowaniu złożoności sieci, stworzyliśmy tooling.report. To witryna, która pomaga wybrać odpowiednie narzędzie do kompilacji dla następnego projektu, zdecydować, czy warto przejść z jednego narzędzia na inne, lub dowiedzieć się, jak wdrożyć sprawdzone metody w konfiguracji narzędzi i bazie kodu.
Opracowaliśmy zestaw testów, aby określić, które narzędzia do kompilacji pozwalają stosować sprawdzone metody tworzenia stron internetowych. Współpracowaliśmy z twórcami narzędzi do kompilacji, aby upewnić się, że używamy ich narzędzi prawidłowo i że przedstawiamy je w uczciwy sposób.
Pierwsza wersja tooling.report obejmuje webpack v4, Rollup v2, Parcel v2 i Browserify z Gulp, które wydają się obecnie najpopularniejszymi narzędziami do kompilacji. Stworzyliśmy tooling.report z myślą o elastyczności, która pozwala na dodawanie kolejnych narzędzi do kompilacji i dodatkowych testów z pomocą społeczności.
Jeśli brakuje nam sprawdzonej metody, którą należy przetestować, zaproponuj ją w zgłoszeniu na GitHubie. Jeśli chcesz napisać test lub dodać nowe narzędzie, którego nie uwzględniliśmy w początkowym zestawie, zachęcamy do przesłania swojego wkładu.
W międzyczasie możesz dowiedzieć się więcej o naszym podejściu do tworzenia tooling.report i obejrzeć naszą sesję z web.dev LIVE.
Prywatność i bezpieczeństwo w internecie
Chrome wierzy w otwartą sieć, która szanuje prywatność użytkowników i utrzymuje kluczowe przypadki użycia, dzięki którym internet działa dla wszystkich.
W 2019 r. zespół Chrome zaproponował aktualizację standardu plików cookie, aby domyślnie ograniczyć pliki cookie do kontekstu własnego i wymagać, aby pliki cookie w kontekście innych firm były wyraźnie oznaczone jako takie. Zapewnia to ochronę przed atakami typu Cross-Site Request Forgery. Propozycja jest obecnie wdrażana w Chrome, Firefoksie, Edge i innych przeglądarkach.
Chociaż w związku z COVID-19 Chrome zdecydował się tymczasowo wycofać te zmiany, niestety w czasie kryzysu, gdy ludzie są najbardziej narażeni, liczba tego typu ataków wzrasta. W związku z tym wraz ze stabilną wersją Chrome 84 (połowa lipca 2020 r.) zmiany zaczną być ponownie wdrażane we wszystkich wersjach Chrome od 80 wzwyż. Więcej informacji znajdziesz w wytycznych dotyczących plików cookie z atrybutem SameSite oraz w sesji web.dev LIVE.
Ponadto w ramach Piaskownicy prywatności Chrome wprowadza szereg propozycji standardów, które mają na celu obsługę przypadków użycia umożliwiających zarabianie na platformie internetowej, ale w sposób, który lepiej chroni prywatność użytkowników. Chrome aktywnie zbiera opinie na temat tych propozycji i uczestniczy w otwartych forach W3C, aby omawiać propozycje własne oraz te przesłane przez inne strony. Więcej informacji o tej inicjatywie znajdziesz w sesji Bezpieczeństwo i prywatność w otwartej sieci.
Jeśli chodzi o bezpieczeństwo użytkowników, Spectre to luka, która umożliwiała szkodliwemu kodowi działającemu w jednym procesie przeglądarki odczytywanie dowolnych danych powiązanych z tym procesem, nawet jeśli pochodziły z innego źródła. Jednym ze sposobów na złagodzenie tego problemu jest izolacja witryn, czyli umieszczanie każdej witryny w osobnym procesie. Więcej informacji znajdziesz w sesji web.dev LIVE na temat nowych zasad dotyczących otwierania i osadzania zasobów z innych domen (COOP i COEP).
Tworzenie internetu o zaawansowanych możliwościach
Chrome chce, abyś mógł swobodnie tworzyć aplikacje internetowe najwyższej jakości, które zapewnią Ci największy zasięg wśród użytkowników na różnych urządzeniach. Łącząc możliwość instalacji i niezawodność PWA z projektem możliwości (Project Fugu), Chrome skupia się na 3 aspektach, aby zmniejszyć różnicę między aplikacjami na konkretne platformy a internetem i pomóc Ci tworzyć i dostarczać świetne rozwiązania.
Po pierwsze, zespoły Chrome ciężko pracują nad tym, aby zapewnić programistom stron internetowych i użytkownikom większą kontrolę nad procesem instalacji, dodając promocję instalacji do omniboksu i nie tylko. Mimo powszechności internetu dla niektórych firm nadal ważne jest, aby ich aplikacja była dostępna w sklepie. Aby pomóc, Chrome wprowadził Bubblewrap, bibliotekę i interfejs wiersza poleceń, które ułatwiają umieszczenie PWA w Sklepie Play. W rzeczywistości PWABuilder.com wykorzystuje teraz Bubblewrap. Wystarczy kilka kliknięć, aby wygenerować plik APK i przesłać aplikację PWA do Sklepu Play, o ile spełniasz kryteria.
Po drugie, Chrome zapewnia ściślejszą integrację z systemem operacyjnym, np. możliwość udostępniania zdjęć, utworów i innych treści przez wywołanie usługi udostępniania na poziomie systemu za pomocą interfejsu Web Share API lub możliwość odbierania treści udostępnionych z innej aplikacji instalowanej. Możesz informować użytkowników na bieżąco lub subtelnie powiadamiać ich o nowej aktywności za pomocą plakietek aplikacji. Użytkownicy mogą też łatwiej i szybciej rozpocząć działanie, korzystając ze skrótów aplikacji, które pojawią się w Chrome 84 (w połowie lipca 2020 r.).
Wreszcie, Chrome pracuje nad nowymi funkcjami, które umożliwiają nowe scenariusze, które wcześniej nie były możliwe, takie jak edytory, które odczytują i zapisują pliki w lokalnym systemie plików użytkownika, lub pobierają listę lokalnie zainstalowanych czcionek, aby użytkownicy mogli ich używać w swoich projektach.
Podczas web.dev LIVE omówiliśmy wiele innych funkcji i możliwości, które pozwalają zapewnić takie same wrażenia i funkcje jak aplikacje na konkretne platformy. Wszystkie sesje znajdziesz na stronie web.dev/live w harmonogramie dnia 2.
Nowości w Narzędziach deweloperskich w Chrome i Lighthouse 6.0
Narzędzia deweloperskie w Chrome: nowa karta Problemy, emulator zaburzeń rozpoznawania barw i obsługa Web Vitals
Jedną z najbardziej przydatnych funkcji Narzędzi deweloperskich w Chrome jest możliwość wykrywania problemów na stronie internetowej i zwracania na nie uwagi dewelopera. Jest to szczególnie istotne, gdy przechodzimy do kolejnego etapu sieci skoncentrowanej na ochronie prywatności. Aby ograniczyć liczbę powiadomień i uporządkować konsolę, w Narzędziach deweloperskich w Chrome wprowadziliśmy kartę Problemy, która na początek skupia się na 3 typach problemów krytycznych: problemach z plikami cookie, treściach mieszanych i problemach z COEP. Aby rozpocząć, obejrzyj sesję web.dev LIVE na temat znajdowania i rozwiązywania problemów za pomocą karty Problemy.
Ponadto, ponieważ Core Web Vitals stają się jednym z najważniejszych zestawów wskaźników, które programiści stron internetowych powinni śledzić i mierzyć, chcemy, aby w Narzędziach deweloperskich mogli oni łatwo sprawdzać, jak ich strony wypadają na tle tych progów. Te 3 wskaźniki są teraz dostępne w panelu Wydajność w Narzędziach deweloperskich w Chrome.
Wreszcie, ponieważ coraz więcej deweloperów skupia się na ułatwieniach dostępu, w Narzędziach deweloperskich wprowadziliśmy też emulator zaburzeń rozpoznawania barw, który pozwala deweloperom emulować niewyraźne widzenie i inne rodzaje zaburzeń widzenia. Więcej informacji o tej i wielu innych funkcjach znajdziesz podczas sesji Co nowego w Narzędziach deweloperskich.
Lighthouse 6.0: nowe dane, pomiary laboratoryjne Core Web Vitals, zaktualizowany wynik wydajności i nowe kontrole
Lighthouse to automatyczne narzędzie typu open source, które pomaga deweloperom poprawić wydajność witryny. W najnowszej wersji zespół Lighthouse skupił się na dostarczaniu statystyk opartych na danych, które dają zrównoważony obraz jakości wrażeń użytkowników w odniesieniu do kluczowych wymiarów.
Aby zapewnić spójność, Lighthouse dodało obsługę Core Web Vitals: LCP, TBT (zastępuje FID, ponieważ Lighthouse jest narzędziem laboratoryjnym, a FID można mierzyć tylko w terenie) i CLS. Z Lighthouse usunięto też 3 stare dane: pierwsze wyrenderowanie treści, pierwszy stan bezczynności procesora i maksymalne potencjalne opóźnienie przy pierwszym działaniu. Usunięcie tych danych wynika z takich czynników jak zmienność danych i nowe dane, które lepiej odzwierciedlają część wrażeń użytkownika, które Lighthouse próbuje zmierzyć. Dodatkowo na podstawie opinii użytkowników wprowadziliśmy w Lighthouse pewne zmiany dotyczące tego, w jakim stopniu poszczególne dane wpływają na ogólny wynik wydajności.
W Lighthouse dodano też kalkulator wyników, który pomaga analizować wyniki wydajności, porównując wyniki z wersji 5 i 6. Gdy przeprowadzasz kontrolę za pomocą Lighthouse 6.0, raport zawiera link do kalkulatora z wynikami.
Na koniec: w Lighthouse dodano wiele nowych kontroli, które skupiają się na analizie JavaScriptu i ułatwieniach dostępu.
Więcej informacji znajdziesz w sesji Nowości w narzędziach do pomiaru szybkości.
Więcej informacji
Dziękujemy wszystkim członkom społeczności, którzy dołączyli do nas, aby omówić możliwości i wyzwania związane z platformą internetową.
W tym poście podsumowaliśmy niektóre z najważniejszych wydarzeń, ale było ich znacznie więcej. Zapoznaj się ze wszystkimi sesjami i zasubskrybuj newsletter web.dev, jeśli chcesz otrzymywać więcej treści bezpośrednio na skrzynkę odbiorczą. Odwiedź też sekcję Wydarzenia regionalne na web.dev/live, aby znaleźć nadchodzące wydarzenie społeczności w Twojej strefie czasowej.