CSS dla wskaźników internetowych

Techniki optymalizacji wskaźników internetowych związanych z CSS

Katie Hempenius
Katie Hempenius
X
Una Kravets

Sposób pisania stylów i układów tworzenia 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 koloru treści (LCP).

W tym artykule omawiamy związane z usługami porównywania cen techniki optymalizacji wskaźników internetowych. Te optymalizacje są podzielone według różnych aspektów strony: układu, obrazów, czcionek, animacji i wczytywania. W międzyczasie sprawdzimy, jak ulepszyć przykładową stronę:

Zrzut ekranu przedstawiający przykładową stronę

Układ

Wstawianie treści do DOM

Wstawienie treści na stronie już po wczytaniu zawartości otaczającej stronę powoduje wypchnięcie całej reszty strony w dół. Powoduje to przesunięcia układu.

Częstym przykładem problemu są Powiadomienia o plikach cookie, zwłaszcza te umieszczone u góry strony. Inne elementy strony, które często powodują takie zmiany układu po wczytaniu, to reklamy i umieszczone elementy.

Identyfikacja

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

Audyt narzędzia Lighthouse „Unikaj dużych przesunięcia układu”

Powiadomienie o plikach cookie nie jest wymienione w tych wynikach, ponieważ powiadomienie o plikach cookie nie zmienia się podczas wczytywania. Powoduje on natomiast przesuwanie się elementów znajdujących się pod nią na stronie (czyli div.hero i article). Więcej informacji o identyfikowaniu i rozwiązywaniu problemów z przesunięciami układu znajdziesz w artykule Debugowanie zmian układu.

Napraw

Umieść informację o plikach cookie u dołu strony w pozycji bezwzględnej lub stałej.

Informacje o plikach cookie wyświetlane na dole strony

Przed:

.banner {
  position: sticky;
  top: 0;
}

Po:

.banner {
  position: fixed;
  bottom: 0;
}

Innym sposobem na rozwiązanie tego problemu 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.

zdjęcia;

Obrazy i największe wyrenderowanie treści (LCP)

Obrazy to zwykle największe wyrenderowanie treści (LCP) na stronie. Inne elementy strony, które mogą być elementami LCP, to bloki tekstu i obrazy plakatów wideo. Czas wczytywania elementu LCP określa wartość LCP.

Pamiętaj, że element LCP strony może się zmieniać w zależności od jej wczytania do jej wczytania. Zależy to od treści, która jest widoczna dla użytkownika przy pierwszym wyświetleniu. Na przykład: tło powiadomienia o plikach cookie, baner powitalny i tekst artykułu to niektóre z potencjalnych elementów LCP.

Diagram przedstawiający element LCP strony w różnych sytuacjach.

W przykładowej witrynie obraz tła powiadomienia o plikach cookie jest w rzeczywistości duży obraz. Aby poprawić wskaźnik LCP, możesz pomalować gradient w CSS, zamiast wczytywać obraz.

Napraw

Zmień CSS .banner tak, aby 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ślić rozmiar obrazu dopiero po jego załadowaniu. Jeśli wczytanie obrazu nastąpi po wyrenderowaniu strony, ale nie ma na niego miejsca, w momencie wyświetlenia obrazu nastąpi przesunięcie układu. W wersji demonstracyjnej baner powitalny powoduje przesunięcie układu podczas wczytywania.

Identyfikacja

Aby zidentyfikować obrazy, które nie mają wyraźnych wartości width i height, użyj audytu Lighthouse „Elementy graficzne wyraźnie określają szerokość i wysokość”.

Audyt „Elementy graficzne” w Lighthouse ma wyraźną szerokość i wysokość

W tym przykładzie zarówno baner powitalny, jak i obraz artykułu nie mają atrybutów width i height.

Napraw

Ustaw atrybuty width i height na tych obrazach, 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 zostanie wczytany bez powodu przesunięcia układu.

Czcionki

Czcionki mogą opóźniać renderowanie tekstu i powodować przesunięcia 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 wczytane. Zapobiega to „przebłyskowi tekstu bez stylu” (FOUT). W wielu sytuacjach powoduje to opóźnienie pierwszego wyrenderowania treści (FCP). W niektórych sytuacjach może to opóźniać największą część treści (LCP).

Przesunięcia układu

Zamiana czcionek świetnie sprawdza się w szybkim wyświetlaniu treści użytkownikowi, ale może powodować przesunięcia układu. Dzieje się tak, gdy czcionka internetowa i jej czcionka zastępcza zajmują różne miejsce na stronie. Użycie czcionek o podobnych proporcjach zminimalizuje wielkość tych przesunięć układu.

Diagram przedstawiający przesunięcie układu spowodowane przez zamianę czcionki
W tym przykładzie zamiana czcionek spowodowała przesunięcie elementów strony w górę o 5 pikseli.

Identyfikacja

Aby zobaczyć czcionki ładowane na danej stronie, otwórz kartę Sieć w Narzędziach deweloperskich i przefiltruj według czcionki. Czcionki mogą być duże pliki, więc mniejsza liczba czcionek zwiększa wydajność.

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

Aby sprawdzić, ile czasu zajmuje wysłanie żądania czcionki, kliknij kartę Czas. Im szybciej otrzymasz żądanie czcionki, tym szybciej będzie się ona ładować i używać.

Zrzut ekranu karty „Czas” w Narzędziach deweloperskich

Aby zobaczyć łańcuch żądań czcionki, kliknij kartę Inicjator. Ogólnie rzecz biorąc, im krótszy łańcuch żądań, tym szybciej można zażądać czcionki.

Zrzut ekranu przedstawiający kartę „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 wskazówkę dotyczącą zasobu preconnect. Powinno to przyspieszyć dostarczanie arkusza stylów niż przy użyciu wersji @import.

Ogólnie wskazówki dotyczące zasobów mogą stanowić dla przeglądarki wskazówkę, że musi skonfigurować konkretne połączenie lub pobrać konkretny zasób. W efekcie przeglądarka traktuje te działania priorytetowo. Korzystając ze wskazówek dotyczących zasobów, pamiętaj, że określenie priorytetów dla konkretnego działania powoduje, że zasoby przeglądarki są niedostępne dla innych działań. Z tego względu wskazówki dotyczące zasobów należy wykorzystywać w sposób przemyślany, nie do wszystkiego. Więcej informacji znajdziesz w artykule o nawiązywaniu połączeń sieciowych odpowiednio wcześnie, aby poprawić widoczność strony.

Usuń z arkusza stylów tę instrukcję @import:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

Dodaj te tagi <link> do elementu <head> dokumentu:

<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 link nakazują przeglądarce wcześniejsze nawiązanie połączenia ze źródłami używanymi przez Google Fonts i załadowanie arkusza stylów zawierającego deklarację dotyczącą czcionek dla Montserrat i Roboto. Te tagi <link> należy umieścić jak najszybciej w elemencie <head>.

Animacje

Głównym sposobem wpływu animacji na wskaźniki internetowe jest to, że powodują one zmiany układu. Są 2 rodzaje animacji, których należy unikać: animacje wywołujące układ i efekty „animowane”, które poruszają elementy strony. Zwykle można je zastąpić skuteczniejszymi odpowiednikami, korzystając z właściwości CSS takich jak transform, opacity i filter. Więcej informacji znajdziesz w artykule Jak tworzyć skuteczne animacje CSS.

Identyfikacja

Do wykrywania niedziałających animacji może pomóc audyt Lighthouse „Unikaj nieskomponowanych animacji”.

Audyt narzędzia Lighthouse „Unikaj nieskomponowanych animacji”

Napraw

Zmień sekwencję animacji slideIn tak, aby używała transform: translateX() zamiast przenoszenia 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 CSS

Arkusze stylów blokują renderowanie. Oznacza to, że przeglądarka napotka arkusz stylów i przestanie pobierać inne zasoby do czasu pobrania i przeanalizowania arkusza stylów. Może to opóźnić LCP. Aby poprawić wydajność, rozważ usunięcie nieużywanego kodu CSS, wbudowanie newralgicznego kodu CSS i opóźnienie niekrytycznego kodu CSS.

Podsumowanie

Chociaż można jeszcze bardziej ulepszyć tę witrynę, np. użyć kompresji obrazów, aby szybciej wyświetlać obrazy, zmiany te znacznie poprawiły wskaźniki internetowe tej witryny. Gdyby to była prawdziwa witryna, kolejnym krokiem byłoby zebranie danych o skuteczności od rzeczywistych użytkowników, co pozwoliło ocenić, czy w przypadku większości użytkowników przekracza ona progi wskaźników internetowych. Więcej informacji o wskaźnikach internetowych znajdziesz w tym artykule.