Szybkość na dużą skalę: co nowego w dziedzinie wydajności witryn?

Poznaj 3 nowe funkcje dotyczące wydajności stron internetowych, które zostały zaprezentowane na konferencji I/O 2019.

Katie Hempenius
Katie Hempenius

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.

Raport LightWallet pokazujący, które komponenty przekraczają budżet rozmiaru pliku.

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><iframe> ładowanie opóźnione.

Leniwe ładowanie na poziomie przeglądarki z podświetleniem treści poza ekranem wczytywanych na żądanie

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-loadingabout://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, fallbackoptional.

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.

kod do umieszczania czcionek Google z parametrem font-display w adresie URL jako parametr zapytania

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 :)