Poznaj 3 nowe narzędzia zwiększające wydajność w internecie wprowadzone podczas konferencji Google I/O 2019.
Podczas rozmowy „Speed at Scale” na Google I/O 2019 zapowiedzieliśmy 3 rzeczy, które w nadchodzącym roku poprawią wydajność sieci.
Lighthouse obsługuje teraz ustalanie budżetu skuteczności
LightWallet to nowa funkcja narzędzia Lighthouse, która zapewnia obsługę budżetów wydajności. Budżety wydajności wyznaczają standardy wydajności witryny. Co ważne, ułatwiają wykrywanie i naprawianie spadków wydajności przed wdrożeniem.
LightWallet jest dostępny w najnowszej wersji interfejsu wiersza poleceń Lighthouse, a jego konfiguracja zajmuje tylko kilka minut. Więcej informacji znajdziesz w tych instrukcjach.
Nie wiesz, jakie powinny być budżety? Wypróbuj nasz eksperymentalny Kalkulator budżetu wydajności, który wygeneruje konfigurację budżetu zgodną z LightWallet.
Leniwe ładowanie obrazów i elementów iframe na poziomie przeglądarki pojawia się w internecie
Strony internetowe często zawierają dużą liczbę obrazów, które przyczyniają się do wykorzystania danych, dużego rozmiaru strony i wolniejszego wczytywania strony. Wiele z tych obrazów znajduje się poza ekranem, co oznacza, że użytkownik musi przewinąć ekran, aby je zobaczyć.
Do tej pory trzeba było rozwiązać problem z leniwym ładowaniem obrazów za pomocą biblioteki JavaScript, ale to może się wkrótce zmienić. Latem tego roku Chrome zacznie obsługiwać atrybut loading, który zapewnia ustandaryzowane leniwe ładowanie <img> i <iframe> w internecie.
Atrybut loading pozwala przeglądarce opóźnić wczytywanie obrazów poza ekranem i elementów iframe, dopóki użytkownicy nie przewiną w pobliżu. loading obsługuje 3 wartości:
lazy: to dobry wybór w przypadku leniwego ładowania.eager: nie jest dobrym kandydatem do leniwego ładowania. Wczytaj od razu.auto: przeglądarka określa, czy wczytywanie ma być leniwe.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
Dokładna odpowiedź heurystyczna „gdy użytkownik przewija stronę w pobliżu” pozostawia przeglądarce. Mamy nadzieję, że przeglądarki zaczną pobierać odroczone obrazy i zawartości iframe trochę, zanim znajdą się w widocznym obszarze.
Atrybut loading jest zaimplementowany za flagami w Chrome Canary. Możesz wypróbować tę wersję demonstracyjną w Chrome w wersji 75 i nowszych z włączonymi flagami about://flags/#enable-lazy-image-loading i about://flags/#enable-lazy-frame-loading.
Dostępny jest opis funkcji leniwego ładowania.
Google Fonts obsługuje teraz parametr font-display jako parametr zapytania
Ogłosiliśmy, że obsługa formatu font-display jest teraz dostępna w wersji produkcyjnej we wszystkich czcionek Google Fonts za pomocą parametru displayowego ciągu zapytania:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Deskryptor font-display pozwala określić, jak czcionki internetowe będą renderowane lub zastępowane w zależności od tego, jak długo trwa ich wczytywanie. Obsługuje wiele wartości, m.in. auto, block, swap, fallback i optional.
Wcześniej jedynym sposobem na określanie atrybutu font-display w przypadku czcionek internetowych z Google Fonts było samodzielne hostowanie tych czcionek, ale ta zmiana eliminuje tę konieczność.
Zaktualizowaliśmy dokumentację Google Fonts, aby uwzględniała ona font-display w domyślnym umieszczonym kodzie (jak poniżej). Mamy nadzieję, że zachęci to innych deweloperów do wypróbowania tej ekscytującej funkcji.
Oto prezentacja o problemach z używaniem wyświetlacza z wieloma rodzinami czcionek. Wypróbuj ją z emulacją sieci w narzędziach deweloperskich, aby zobaczyć wpływ font-display: swap.
Zobacz więcej
W naszej rozmowie omówiliśmy też kilka produkcyjnych studiów przypadków wykorzystania zaawansowanych wzorców wydajności do poprawy komfortu użytkowników. Wśród nich znalazły się witryny korzystające z sieci CDN z obrazami, kompresji Brookli, inteligentnego wyświetlania JavaScriptu i wstępnego pobierania w celu przyspieszenia działania stron. Aby dowiedzieć się więcej, obejrzyj prezentację.