Poznaj 3 nowe funkcje związane z wydajnością w internecie, które zostały zaprezentowane podczas konferencji I/O 2019.
Podczas prelekcji „Speed at Scale” na konferencji Google I/O 2019 ogłosiliśmy 3 rzeczy, które, jak mamy nadzieję, poprawią wydajność sieci w nadchodzącym roku.
Lighthouse obsługuje teraz budżet wydajności
LightWallet to nowa funkcja w Lighthouse, która dodaje obsługę budżetów wydajności. Budżety wydajności określają standardy wydajności witryny. Co ważniejsze, umożliwiają wykrywanie i naprawianie regresji wydajności przed ich opublikowaniem.
Narzędzie LightWallet jest dostępne 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ć Twoje budżety? Wypróbuj nasz eksperymentalny kalkulator budżetu wydajności, który może wygenerować konfigurację budżetu zgodną z LightWallet.
Leniwe ładowanie obrazów i elementów iframe na poziomie przeglądarki w internecie
Strony internetowe często zawierają dużą liczbę obrazów, które zwiększają użycie danych, rozmiar strony i czas wczytania strony. Wiele z tych obrazów znajduje się poza ekranem, więc użytkownik musi przewinąć stronę, aby je zobaczyć.
Do tej pory leniwe ładowanie obrazów wymagało użycia biblioteki JavaScript, ale wkrótce może się to zmienić. Tego lata Chrome zacznie obsługiwać atrybut loading, który wprowadza do sieci ustandaryzowane leniwe ładowanie elementów <img> i <iframe>.
Atrybut loading umożliwia przeglądarce odłożenie ładowania obrazów i elementów iframe niewyświetlanych na ekranie do momentu, aż użytkownicy przewiną stronę w ich pobliże. loading obsługuje 3 wartości:
lazy: jest dobrym kandydatem do leniwego ładowania.eager: nie jest dobrym kandydatem do leniwego ładowania. Wczytaj od razu.auto: przeglądarka określi, czy zastosować leniwe ładowanie.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
Dokładne heurystyki dotyczące tego, „kiedy użytkownik przewija w pobliżu”, są pozostawione przeglądarce. Ogólnie rzecz biorąc, mamy nadzieję, że przeglądarki zaczną pobierać odroczone obrazy i zawartość elementów iframe na chwilę przed ich pojawieniem się w widocznym obszarze.
Atrybut loading jest implementowany za flagami w Chrome Canary. Możesz wypróbować tę wersję demonstracyjną w Chrome 75 lub nowszej wersji 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 tym artykule.
Google Fonts obsługuje teraz font-display jako parametr zapytania
Ogłosiliśmy, że obsługa font-display jest teraz dostępna w środowisku produkcyjnym 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 będą renderowane czcionki internetowe lub jak będzie wyglądać czcionka zastępcza, w zależności od tego, jak długo trwa ich wczytywanie. Obsługuje szereg wartości, w tym auto, block, swap, fallback i optional.
Wcześniej jedynym sposobem na określenie font-display dla czcionek internetowych z Google Fonts było ich samodzielne hostowanie, ale ta zmiana eliminuje tę konieczność.
Dokumentacja Google Fonts została zaktualizowana i zawiera teraz font-display w domyślnych kodach do umieszczenia (jak poniżej). Mamy nadzieję, że zachęci to więcej deweloperów do wypróbowania tego ciekawego dodatku.
Oto demonstracja w Glitch, która pokazuje, jak używać właściwości display z wieloma rodzinami czcionek. Wypróbuj emulację sieci w Narzędziach deweloperskich, aby zobaczyć, jaki wpływ ma font-display: swap.
Obejrzyj, aby dowiedzieć się więcej
Omówiliśmy też kilka studiów przypadków dotyczących wykorzystania zaawansowanych wzorców wydajności w celu poprawy wrażeń użytkowników. Obejmowały one witryny wykorzystujące sieci CDN do obsługi obrazów, kompresję Brotli, inteligentne wyświetlanie kodu JavaScript i pobieranie z wyprzedzeniem w celu przyspieszenia działania stron. Aby dowiedzieć się więcej, obejrzyj prezentację.