CSS dla wskaźników internetowych

Techniki związane z CSS do optymalizacji wskaźników Web Vitals

Katie Hempenius
Katie Hempenius

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

Zrzut ekranu przykładowej witryny

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:

Audyt „Unikaj dużych przesunięć układu” w Lighthouse

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.heroarticle). 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.

Powiadomienie o plikach cookie wyświetlane u dołu strony

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.

Diagram pokazujący element LCP strony w różnych scenariuszach

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 widthheight, użyj audytu Lighthouse „Elementy graficzne mają wyraźnie określoną szerokość i wysokość”.

Audyt 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 widthheight.

Napraw

Aby uniknąć przesunięć układu, ustaw w tych obrazach atrybuty widthheight.

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">
Obraz wczytuje się teraz bez zmiany układu.

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.

Diagram pokazujący zmianę układu spowodowaną wymianą czcionki
W tym przykładzie zamiana czcionki spowodowała przesunięcie elementów strony o 5 pikseli w górę.

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.

Zrzut ekranu przedstawiający czcionkę wyświetlaną w Narzędziach deweloperskich

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ć.

Zrzut ekranu przedstawiający kartę „Czas” w Narzędziach deweloperskich

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ę.

Zrzut ekranu z kartą „Initiator” (Inicjator) w Narzędziach deweloperskich

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.

Weryfikacja „Unikaj nieskomponowanych animacji” w Lighthouse

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.