Poznaj 3 nowe funkcje dotyczące wydajności stron internetowych, które zostały zaprezentowane na konferencji I/O 2019.
Podczas prezentacji „Szybkość na dużą skalę” na konferencji Google I/O 2019 ogłosiliśmy 3 funkcje, które, jak mamy nadzieję, poprawią wydajność witryn 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 na potrzeby skuteczności, który może wygenerować konfigurację budżetu zgodną z LightWallet.
Leniwe ładowanie obrazów i elementów iframe na poziomie przeglądarki dostępne w internecie
Strony internetowe często zawierają dużą liczbę obrazów, co zwiększa wykorzystanie danych, obciąża stronę i spowalnia jej wczytywanie. 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 odłożyć wczytywanie obrazów i iframe’ów niewyświetlanych na ekranie do momentu, gdy użytkownik przewinie stronę w ich pobliżu. loading
obsługuje 3 wartości:
lazy
: dobry kandydat do ładowania opóźnionego.eager
: nie jest dobrym kandydatem do ładowania opóźnionego. wczytują się od razu.auto
: przeglądarka sama zdecyduje, czy wczytywać 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. Ogólnie mamy nadzieję, że przeglądarki zaczną pobierać opóźnione obrazy i zawartość iframe nieco wcześniej, zanim pojawią się one w widoku.
Atrybut loading
jest implementowany za pomocą flag w Chrome Canary. Możesz wypróbować to demo w Chrome 75+ 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.
Czcionki Google obsługują teraz font-display jako parametr zapytania
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 na określenie font-display
dla czcionek internetowych z Google Fonts było ich hostowanie na własnym serwerze, ale ta zmiana eliminuje tę potrzebę.
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. Aby sprawdzić wpływ font-display: swap
, spróbuj użyć narzędzi deweloperskich do emulacji sieci.
więcej informacji
W naszym wystąpieniu omówiliśmy też kilka przykładów zastosowania zaawansowanych wzorców działania w produkcji w celu poprawy wrażeń użytkowników. Należą do nich witryny korzystające z CDN-ów obrazów, kompresji Brotli oraz inteligentnego serwowania i pobierania wstępnego kodu JavaScript, aby przyspieszyć działanie stron. Obejrzyj wykład, aby dowiedzieć się więcej :)