Techniki związane z CSS do optymalizacji wskaźników Web Vitals
Sposób, w jaki definiujesz style i tworzysz układy, może mieć duży wpływ na wskaźniki Core Web Vitals. Dotyczy to zwłaszcza skumulowanego przesunięcia układu (CLS) i największego wyrenderowania treści (LCP).
Z tego artykułu dowiesz się, jak optymalizować wskaźniki Web Vitals za pomocą technik związanych z CSS. Te optymalizacje są podzielone na różne aspekty strony: układ, obrazy, czcionki, animacje i wczytywanie. W trakcie tego procesu przyjrzymy się ulepszeniu przykładowej strony:
Układ
Wstawianie treści do DOM
Wstawianie treści na stronie po załadowaniu treści otaczającej powoduje przesunięcie wszystkich innych elementów na stronie w dół. Powoduje to zmiany układu.
Powiadomienia o plikach cookie, zwłaszcza te umieszczone u góry strony, to typowy przykład tego problemu. Inne elementy strony, które często powodują tego typu przesunięcie układu podczas wczytywania, to reklamy i elementy osadzone.
Identyfikacja
Audyt Lighthouse „Unikaj dużych przesunięć układu” wskazuje elementy strony, które się przesunęły. W tym pokazie wyniki wyglądają tak:
Powiadomienie o plikach cookie nie jest wymienione w tych wynikach, ponieważ samo powiadomienie nie przesuwa się podczas wczytywania. Zamiast tego powoduje przesunięcie elementów znajdujących się na stronie poniżej (czyli div.hero i article). Więcej informacji o identyfikowaniu i naprawianiu przesunięć układu znajdziesz w artykule Debugowanie przesunięć układu.
Napraw
Umieść powiadomienie o plikach cookie u dołu strony, używając pozycjonowania bezwzględnego lub stałego.
Przed:
.banner {
position: sticky;
top: 0;
}
Po:
.banner {
position: fixed;
bottom: 0;
}
Innym sposobem na rozwiązanie tego problemu jest zarezerwowanie miejsca na powiadomienie o plikach cookie u góry ekranu. To podejście jest równie skuteczne. Więcej informacji znajdziesz w artykule o sprawdzonych metodach dotyczących powiadomień o plikach cookie.
Obrazy
Obrazy i największe wyrenderowanie treści (LCP)
Obrazy są zwykle elementem największego wyrenderowania treści (LCP) na stronie. Inne elementy strony, które mogą być elementem LCP, to bloki tekstu i obrazy plakatu filmowego. Czas wczytania elementu LCP określa LCP.
Pamiętaj, że element LCP strony może się zmieniać przy każdym wczytaniu strony w zależności od treści widocznych dla użytkownika przy pierwszym wyświetleniu strony. Na przykład w tym pokazie tło powiadomienia o plikach cookie, obraz nagłówka i tekst artykułu to potencjalne elementy LCP.
W przypadku tej witryny obraz tła powiadomienia o plikach cookie jest duży. Aby poprawić LCP, możesz zamiast tego namalować gradient za pomocą CSS zamiast ładować obraz, aby uzyskać ten efekt.
Napraw
Zmień kod CSS .banner, aby użyć gradientu CSS zamiast obrazu:
Przed:
background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
Po:
background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
Obrazy i przesunięcia układu
Przeglądarki mogą określić rozmiar obrazu dopiero po jego wczytaniu. Jeśli obraz wczytuje się po renderowaniu strony, ale nie zarezerwowano dla niego miejsca, po jego wyświetleniu nastąpi przesunięcie układu. W tym przykładzie obraz bohatera powoduje zmianę układu podczas wczytywania.
Identyfikacja
Aby zidentyfikować obrazy bez atrybutów width i height, użyj audytu Lighthouse „Elementy graficzne mają wyraźnie określoną szerokość i wysokość”.
W tym przykładzie zarówno obraz główny, jak i obraz artykułu nie mają atrybutów width i height.
Napraw
Aby uniknąć przesunięć układu, ustaw w tych obrazach atrybuty width i height.
Przed:
<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
Po:
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
Czcionki
Czcionki mogą opóźniać renderowanie tekstu i powodować zmiany układu. Dlatego ważne jest, aby czcionki były dostarczane szybko.
Opóźnione renderowanie tekstu
Domyślnie przeglądarka nie renderuje od razu elementu tekstowego, jeśli powiązane z nim czcionki internetowe nie zostały jeszcze załadowane. Ma to na celu zapobieganie „błyskawicznemu wyświetlaniu niesformatowanego tekstu” (FOUT). W wielu sytuacjach powoduje to opóźnienie pierwszego wyrenderowania treści (FCP). W niektórych sytuacjach może to opóźnić największe wyrenderowanie treści (LCP).
Przesunięcia układu
Wymiana czcionek, choć jest świetnym sposobem na szybkie wyświetlanie treści użytkownikowi, może powodować przesunięcia układu. Te zmiany układu występują, gdy czcionka internetowa i jej czcionka zastępcza zajmują na stronie różne ilości miejsca. Użycie czcionek o podobnych proporcjach pozwoli zminimalizować zmiany układu.
Identyfikacja
Aby zobaczyć czcionki wczytywane na danej stronie, otwórz kartę Sieć w Narzędziach deweloperskich i wyfiltruj według kolumny Czcionka. Czcionki mogą być dużymi plikami, więc stosowanie mniejszej liczby czcionek jest zazwyczaj korzystne dla wydajności.
Aby sprawdzić, ile czasu zajmuje przesłanie żądania dotyczącego czcionki, kliknij kartę Czas. Im wcześniej czcionka zostanie zażądana, tym szybciej można ją wczytać i używać.
Aby zobaczyć łańcuch próśb dotyczących czcionki, kliknij kartę Inicjator. Ogólnie rzecz biorąc, im krótszy łańcuch żądań, tym szybciej można poprosić o czcionkę.
Napraw
Ta wersja demonstracyjna korzysta z interfejsu Google Fonts API. Google Fonts umożliwia wczytywanie czcionek za pomocą tagów <link> lub instrukcji @import. Fragment kodu <link> zawiera podpowiedź dotyczącą zasobu preconnect. Powinna ona zapewnić szybsze dostarczanie arkuszy stylów niż wersja @import.
Ogólnie rzecz biorąc, wskazówki dotyczące zasobów to sposób na przekazanie przeglądarce informacji o konieczności skonfigurowania określonego połączenia lub pobrania określonego zasobu. W związku z tym przeglądarka będzie nadawać priorytety tym działaniom. Pamiętaj, że korzystanie z wskazówek dotyczących zasobów powoduje, że przeglądarka poświęca zasoby innym działaniom. Dlatego wskazówki dotyczące zasobów należy stosować rozważnie i nie w przypadku każdego zasobu. Więcej informacji znajdziesz w artykule Wczesna konfiguracja połączeń sieciowych w celu poprawy postrzeganej szybkości strony.
Usuń z arkusza stylów to oświadczenie @import:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
Dodaj do <head> dokumentu te tagi <link>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
Te tagi linków instruują przeglądarkę, aby nawiązała wczesne połączenie z usługami źródłowymi używanymi przez Google Fonts, i wczytała arkusz stylów, który zawiera deklarację czcionek Montserrat i Roboto. Te tagi <link> należy umieszczać jak najwcześniej w <head>.
Animacje
Główny sposób, w jaki animacje wpływają na wskaźniki Web Vitals, to zmiany układu. Są 2 rodzaje animacji, których należy unikać:
animacje, które powodują zmianę układu, oraz efekty „podobne do animacji”, które powodują przesuwanie elementów strony. Zazwyczaj te animacje można zastąpić bardziej wydajnymi odpowiednikami za pomocą właściwości CSS, takich jak transform, opacity i filter. Więcej informacji znajdziesz w artykule Jak tworzyć wydajne animacje CSS.
Identyfikacja
Audyt Lighthouse „Unikaj nieskomponowanych animacji” może być pomocny w identyfikowaniu nieskutecznych animacji.
Napraw
Zmień sekwencję animacji slideIn, aby używać właściwości transform: translateX() zamiast przechodzenia do właściwości margin-left.
Przed:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
Po:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
Krytyczny kod CSS
Pliki .css blokują renderowanie. Oznacza to, że gdy przeglądarka napotka arkusz stylów, przestanie pobierać inne zasoby, dopóki nie pobierze i przeanalizuje arkusza stylów. Może to opóźnić LCP. Aby poprawić wydajność, rozważ usunięcie nieużywanych elementów kodu CSS, wbudowanie w stronę krytycznego kodu CSS oraz opóźnienie mniej istotnego kodu CSS.
Podsumowanie
Chociaż nadal istnieje możliwość dalszej poprawy (np. za pomocą kompresji obrazów, aby szybciej przesyłać obrazy), te zmiany znacznie poprawiły parametry Web Vitals tej witryny. Gdyby to była prawdziwa witryna, następnym krokiem byłoby zbieranie danych o wydajności pochodzących od prawdziwych użytkowników, aby sprawdzić, czy spełnia ona wartości progowe podstawowych wskaźników internetowych dla większości użytkowników. Więcej informacji o wskaźnikach internetowych znajdziesz w artykule Więcej informacji o wskaźnikach internetowych.