CSS dla wskaźników internetowych

Techniki optymalizacji wskaźników internetowych związane z usługami porównywania cen

Katie Hempenius
Katie Hempenius
X
Una Kravets

Sposób pisania stylów i tworzenia układów może mieć duży wpływ na podstawowe wskaźniki internetowe. Dotyczy to zwłaszcza skumulowanego przesunięcia układu (CLS) i największego wyrenderowania treści (LCP).

W tym artykule omawiamy techniki związane z usługami porównywania cen, które pomagają optymalizować wskaźniki internetowe. Te optymalizacje dzielą się na różne aspekty danej 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 tym, jak wczytano już treści otaczające, powoduje przesunięcie wszystkich pozostałych 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 umieszczone elementy.

Identyfikacja

Audyt Lighthouse „Unikaj dużych przesunięć układu” wskazuje elementy strony, które się przesunęły. W tym przykładzie wyniki wyglądają tak:

Audyt dotyczący funkcji „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.hero i article). Więcej informacji o identyfikowaniu i naprawianiu przesunięć układu znajdziesz w artykule Debugowanie przesunięć układu.

Napraw

Umieść informację o plikach cookie na dole strony, stosując pozycjonowanie bezwzględne lub stałe.

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 poprawienie tego przesunięcia układu jest zarezerwowanie miejsca na informacje o plikach cookie u góry ekranu. To podejście jest równie skuteczne. Więcej informacji znajdziesz w artykule Sprawdzone metody dotyczące 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. Innymi elementami strony, które mogą być elementem LCP są bloki tekstu i obrazy plakatów filmu. Czas wczytywania elementu LCP określa wartość 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.

Na przykładowej stronie obraz tła powiadomienia o plikach cookie jest w rzeczywistości duży. Aby poprawić LCP, możesz pomalować gradient w CSS, zamiast ładować obraz.

Napraw

Zmień kod CSS .banner, by używać 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ślać rozmiar obrazu dopiero po jego załadowaniu. 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 wersji demonstracyjnej baner powitalny powoduje przesunięcie 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ść”.

Audyt Lighthouse „Elementy graficzne mają wyraźnie określoną szerokość i wysokość”

W tym przykładzie ani w przypadku banera powitalnego, ani obrazu artykułu brakuje atrybutów width i height.

Napraw

Ustaw atrybuty width i height dla tych obrazów, aby uniknąć przesunięcia układu.

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. W związku z tym ważne jest szybkie dostarczanie czcionek.

Opóźnione renderowanie tekstu

Domyślnie przeglądarka nie renderuje od razu elementu tekstowego, jeśli powiązane z nią czcionki internetowe nie zostały jeszcze wczytane. 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ększy obrazek treści (LCP).

Przesunięcia układu

Zamienianie czcionek, choć świetnie nadaje się do szybkiego wyświetlania treści użytkownikom, może powodować przesunięcia układu. Takie przesunięcia występują, gdy czcionka internetowa i czcionka zastępcza zajmują różną ilość miejsca na stronie. Użycie czcionek o podobnych proporcjach pozwoli zminimalizować zmiany układu.

Diagram przedstawiający przesunięcie układu spowodowane zmianą 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 konkretnej stronie, otwórz kartę Sieć w Narzędziach deweloperskich i wyfiltruj według kolumny Czcionka. Czcionki mogą być dużymi plikami, więc mniejsza liczba czcionek zwykle zwiększa wydajność.

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

Aby sprawdzić, jak długo trwa wysyłanie żądania czcionki, kliknij kartę Czas. Im szybciej zażądana jest czcionka, tym szybciej będzie można ją załadować 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 zażądać czcionki.

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

Napraw

Ta wersja demonstracyjna wykorzystuje interfejs 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. Powinno to przyspieszyć przesyłanie arkusza stylów niż w przypadku wersji @import.

Ogólnie rzecz biorąc, wskazówki dotyczące zasobów to sposób na zasugerowanie przeglądarce, że musi ona skonfigurować określone połączenie lub pobrać określony zasób. 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 podpowiedzi dotyczących zasobów należy używać rozsądnie i nie do wszystkiego. 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">

Tagi te instruują przeglądarkę, aby nawiązała wczesne połączenie ze źródłem używanym przez Google Fonts i wczytała arkusz stylów z deklaracją czcionek dla Montserrat i Roboto. Tagi <link> należy umieścić jak najwcześniej w elemencie <head>.

Animacje

Główny sposób, w jaki animacje wpływają na wskaźniki Web Vitals, to gdy powodują zmiany układu. Są 2 rodzaje animacji, których nie należy używać: animacji uruchamiających układ oraz „animowanych”, które przesuwają elementy strony. Zazwyczaj te animacje można zastąpić ich wydajniejszymi odpowiednikami za pomocą właściwości CSS, takich jak transform, opacity i filter. Więcej informacji znajdziesz w artykule Jak tworzyć skuteczne 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 tak, by zamiast przenoszenia właściwości margin-left używać transform: translateX().

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

Arkusze stylów blokują renderowanie. Oznacza to, że przeglądarka napotka arkusz stylów i zatrzyma pobieranie innych zasobów do czasu pobrania i przeanalizowania tego arkusza. Może to opóźnić LCP. Aby poprawić wydajność, usuń nieużywany kod CSS, wbuduj w stronę krytyczny kod CSS i opóźnij mniej istotny kod CSS.

Podsumowanie

Chociaż można by jeszcze udoskonalić (np. zastosować kompresję obrazów, by szybciej przesyłać obrazy), to zmiany te znacznie poprawiły wskaźniki internetowe 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.