Poznaj 3 nowe funkcje poprawiające skuteczność stron internetowych, które zostały zaprezentowane podczas konferencji Google I/O 2019.
Podczas wykładu „Szybkość na dużą skalę” na konferencji Google I/O 2019 ogłosiliśmy 3 funkcje, które, jak mamy nadzieję, poprawią wydajność stron internetowych w przyszłym roku.
Lighthouse obsługuje teraz budżet wydajności
LightWallet to nowa funkcja Lighthouse, która umożliwia obsługę budżetów wydajności. Budżety wydajności określają standardy wydajności witryny. Co ważniejsze, ułatwiają wykrywanie i naprawianie regresji wydajności przed wdrożeniem.
LightWallet jest dostępny w najnowszej wersji wiersza poleceń Lighthouse. Jego konfiguracja zajmuje tylko kilka minut. Więcej informacji znajdziesz w tych instrukcjach.
Nie wiesz, jaką wysokość budżetów wybrać? Wypróbuj nasz eksperymentalny kalkulator budżetu, który może wygenerować konfigurację budżetu zgodną z LightWallet.
Leniwe ładowanie obrazów i iframe na poziomie przeglądarki dostępne w internecie
Strony internetowe często zawierają dużą liczbę obrazów, co przyczynia się do wykorzystania danych, page-bloat i wolniejszego wczytywania stron. Wiele z nich znajduje się poza ekranem, więc użytkownik musi przewinąć stronę, aby je zobaczyć.
Do tej pory ładowanie opóźnione obrazów należało rozwiązać za pomocą biblioteki JavaScript, ale wkrótce może się to zmienić. Latem w Chrome uruchomimy obsługę atrybutu loading, który wprowadza do sieci standardowe <img> i <iframe> ładowanie opóźnione.
Atrybut loading pozwala przeglądarce opóźniać wczytywanie obrazów poza ekranem i elementów iframe do momentu, gdy użytkownik przewinie stronę w pobliżu. Funkcja loading obsługuje trzy wartości:
lazy: można stosować leniwe ładowanie.eager: nie jest dobrym kandydatem do ładowania opóźnionego. wczytują się od razu.auto: przeglądarka sama zdecyduje, czy wczytać element z opóźnieniem.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
Dokładne heurystyki dotyczące „gdy użytkownik przewija w pobliżu” są pozostawione domyślnie w nawigatorze. Liczymy, że przeglądarki zaczną pobierać odroczone obrazy i zawartość iframe trochę, zanim trafią one do widocznego obszaru.
Atrybut loading jest implementowany za pomocą flag w Chrome Canary. Możesz wypróbować tę wersję demonstracyjną w Chrome 75 i nowszych z włączonymi flagami about://flags/#enable-lazy-image-loading i about://flags/#enable-lazy-frame-loading.
Więcej informacji o funkcji leniwego ładowania znajdziesz w artykule.
Google Fonts obsługuje teraz parametr font-display
Ogłosiliśmy, że obsługa parametru font-display jest teraz dostępna w wersji produkcyjnej dla wszystkich czcionek Google za pomocą parametru ciągu zapytania display:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Deskryptor font-display pozwala określić, jak mają być renderowane czcionki internetowe lub jak mają być zastępowane, w zależności od czasu ich wczytywania. Obsługuje on wiele wartości, w tym auto, block, swap, fallback i optional.
Wcześniej jedynym sposobem określenia font-display w przypadku czcionek internetowych z Google Fonts było hostowanie ich na własnym serwerze, ale ta zmiana nie jest już konieczna.
Dokumentacja Google Fonts została zaktualizowana, aby uwzględnić font-display w domyślnych kodach umieszczanych w ramach. Mamy nadzieję, że zachęci to więcej deweloperów do wypróbowania tej ekscytującej funkcji.
Oto prezentacja na Glitch, która pokazuje, jak używać wyświetlacza z wieloma rodzinami czcionek. Wypróbuj to za pomocą emulacji sieci w Narzędziach deweloperskich, aby sprawdzić wpływ font-display: swap.
więcej informacji
W naszej prezentacji omówiliśmy także studia przypadków wykorzystania zaawansowanych wzorców wydajności do poprawy wrażeń użytkowników w środowisku produkcyjnym. Obejmują one witryny wykorzystujące sieci CDN związane z obrazami, kompresję Brutli, inteligentne wyświetlanie JavaScriptu i wstępne pobieranie w celu przyspieszenia działania stron. Obejrzyj wykład, aby dowiedzieć się więcej :)