Niezależnie od tego, czy używasz biblioteki interfejsu użytkownika, czy tworzysz style ręcznie, wysyłanie znacznej ilości kodu CSS opóźnia renderowanie, ponieważ przeglądarka musi pobrać i przeanalizować pliki CSS, zanim będzie mogła wyświetlić stronę.
Ta responsywna galeria lodów została utworzona za pomocą Bootstrap. Biblioteki interfejsu użytkownika, takie jak Bootstrap, przyspieszają rozwój, ale często kosztem rozbudowanego i niepotrzebnego kodu CSS, który może wydłużać czas wczytywania. Bootstrap 4 zajmuje 187 KB, a Semantic UI, kolejna biblioteka interfejsu użytkownika, zajmuje aż 730 KB w nieskompresowanej wersji. Nawet po zminimalizowaniu i skompresowaniu do formatu gzip biblioteka Bootstrap zajmuje nadal około 20 KB, czyli znacznie przekracza wartość progową 14 KB dla pierwszego przesyłania w obie strony.
Critical to narzędzie, które wyodrębnia, kompresuje i wbudowuje w kodzie strony CSS niewidoczny na ekranie. Dzięki temu zawartość powyżej pola widzenia może zostać wyrenderowana tak szybko, jak to możliwe, nawet jeśli czss dla innych części strony nie zostało jeszcze załadowane. Z tego ćwiczenia w Codelab dowiesz się, jak korzystać z modułu npm Critical.
Zmierz odległość
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran
.
Aby przeprowadzić audyt Lighthouse w tej witrynie:
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Lighthouse.
- Kliknij Mobilne.
- Zaznacz pole wyboru Wydajność.
- Odznacz pozostałe pola wyboru w sekcji Audyt.
- Kliknij Symulowana szybka sieć 3G, 4-krotne spowolnienie CPU.
- Zaznacz pole wyboru Wyczyść pamięć podręczną. Gdy ta opcja jest zaznaczona, Lighthouse nie wczytuje zasobów z pamięci podręcznej, co symuluje działanie strony dla nowych użytkowników.
- Kliknij Uruchom audyt.
Gdy przeprowadzisz audyt na swoim urządzeniu, wyniki mogą się różnić, ale w widoku taśmy filmowej zauważysz, że przez pewien czas ekran aplikacji jest pusty, zanim w końcu wyświetli się treść. Dlatego pierwsze wyrenderowanie treści (FCP) ma wysoki wynik, a ogólna ocena skuteczności nie jest wysoka.
Lighthouse pomaga rozwiązywać problemy z wydajnością, więc szukaj rozwiązań w sekcji Możliwości. Wyeliminuj zasoby blokujące renderowanie jest wymienione jako możliwość, a to jest to, w czym specjalizuje się Critical.
Optymalizuj
- Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
Aby przyspieszyć proces, w tym przypadku usługa Critical jest już zainstalowana, a w ramach laboratorium kodowania dołączono pusty plik konfiguracji.
W pliku konfiguracji critical.js dodaj odwołanie do Critical, a następnie wywołaj funkcję critical.generate(). Ta funkcja przyjmuje obiekt zawierający konfigurację.
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
Obsługa błędów nie jest obowiązkowa, ale ułatwia sprawdzanie skuteczności operacji w konsoli.
Konfigurowanie krytycznych
Tabela poniżej zawiera przydatne opcje krytyczne. Wszystkie dostępne opcje znajdziesz na GitHubie.
| Opcja | Typ | Wyjaśnienie |
|---|---|---|
base |
ciąg znaków | Katalog bazowy plików. |
src |
ciąg znaków | Plik źródłowy HTML. |
dest |
ciąg znaków | Docelowy plik wyjściowy. Jeśli CSS jest wbudowany, plik wyjściowy jest w formacie HTML. W przeciwnym razie wyjściem będzie plik CSS. |
width, height |
numery | Szerokość i wysokość widocznego obszaru w pikselach. |
dimensions |
tablica | Zawiera obiekty z właściwościami szerokości i wysokości. Te obiekty reprezentują widok, który chcesz kierować za pomocą CSS powyżej karty. Jeśli masz w CSS zapytania o multimedia, możesz wygenerować kod CSS, który obejmuje różne rozmiary widocznego obszaru. |
inline |
wartość logiczna | Gdy ta opcja ma wartość Prawda, wygenerowany kluczowy plik CSS jest wstawiany w pliku źródłowym HTML. |
minify |
wartość logiczna | Gdy ma wartość Prawda, minifikuje wygenerowany kod CSS krytyczny. Można go pominąć podczas wyodrębniania kluczowego arkusza CSS dla wielu rozdzielczości, ponieważ kluczowy arkusz automatycznie go minimalizuje, aby uniknąć powielania reguł. |
Poniżej znajdziesz przykład konfiguracji do wyodrębniania kluczowych plików CSS dla wielu rozdzielczości. Dodaj go do critical.js lub poeksperymentuj z dostępnymi opcjami.
critical.generate({
base: 'public/',
src: './index.html',
dest: './index.html',
inline: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 720,
width: 1280,
},
]
}, (err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
W tym przykładzie plik index.html jest plikiem źródłowym i docelowym, ponieważ opcja inline ma wartość „PRAWDA”. Najpierw odczytuje plik źródłowy HTML, wyodrębni krytyczny kod CSS, a potem nadpisze index.html kodem CSS wbudowanym w pliku <head>.
Tablica dimensions ma określone 2 rozmiary widocznego obszaru: 300 x 500 na bardzo małe ekrany i 1280 x 720 na standardowe ekrany laptopów.
Opcja minify jest pomijana, ponieważ Critical automatycznie minimalizuje wyodrębniony kod CSS, gdy określono kilka rozmiarów widocznego obszaru.
Uruchom krytyczne
Dodaj krytyczne informacje do skryptów w package.json:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, być może trzeba będzie użyć opcji Pełny ekran).
Aby wygenerować kluczowy kod CSS, w konsoli uruchom:
npm run critical
refresh
Teraz w tagu <head> w elementach index.html wygenerowany krytyczny kod CSS jest umieszczany między tagami <style>, a następnie uruchamia się skrypt, który asynchronicznie wczytuje pozostałą część kodu CSS.
Pomiar ponownie
Aby ponownie uruchomić audyt wydajności Lighthouse, wykonaj czynności opisane na początku tego ćwiczenia. Wyniki będą wyglądać mniej więcej tak:
