Niezależnie od tego, czy korzystasz z biblioteki interfejsu użytkownika, czy samodzielnie tworzysz style, znaczne opóźnienia renderowania CSS, ponieważ przeglądarka musi pobrać i przeanalizować pliki CSS, zanim będzie mogła wyświetlić stronę.
Ta elastyczna lodziarnia powstała przy użyciu narzędzia Bootstrap. Biblioteki UI, takie jak Bootstrap, przyspieszają programowanie, ale często kosztują nadmiarowe i niepotrzebne pliki CSS, które mogą spowolnić wczytywanie. Plik rozruchowy 4 ma 187 KB, a interfejs semantyczny, czyli inna biblioteka interfejsu, ma aż 730 KB po zdekompresowaniu. Nawet po zmniejszeniu i skompresowaniu gzip bootstrap nadal waży około 20 KB, czyli znacznie powyżej progu 14 KB w przypadku pierwszej sesji w obie strony.
Krytyczne to narzędzie, które wyodrębnia, minifikuje i umieszcza kod CSS w części strony widocznej na ekranie. Umożliwia to szybsze wyrenderowanie części strony widocznej na ekranie, nawet jeśli kod CSS innych części strony nie został jeszcze wczytany. Z tego ćwiczenia w programowaniu dowiesz się, jak korzystać z modułu npm usługi krytycznej.
Zmierz odległość
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran
.
Aby przeprowadzić audyt Lighthouse w tej witrynie:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Kliknij Urządzenia mobilne.
- Zaznacz pole wyboru Wydajność.
- Odznacz pozostałe pola wyboru w sekcji Audyty.
- Kliknij Symuld Fast 3G, 4x CPU Spowolnienie.
- Zaznacz pole wyboru Wyczyść pamięć wewnętrzną. Jeśli wybierzesz tę opcję, Lighthouse nie będzie wczytywać zasobów z pamięci podręcznej, co symuluje działanie strony po raz pierwszy.
- Kliknij Przeprowadź audyty.
Po przeprowadzeniu kontroli na komputerze dokładne wyniki mogą się różnić, ale w widoku taśmy filmowej zauważysz, że aplikacja jest przez dłuższy czas pusta przed wyrenderowaniem treści. Dlatego właśnie wskaźnik pierwszego wyrenderowania treści (FCP) jest wysoki i dlaczego ogólny wynik skuteczności jest słaby.
Narzędzie Lighthouse pomoże Ci rozwiązać problemy z wydajnością. Poszukaj rozwiązań w sekcji Możliwości. Wyeliminuj zasoby blokujące renderowanie, które są wymienione jako możliwość. Właśnie tu kluczowa jest krytyczne.
Optymalizuj
- Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
Aby przyspieszyć działanie, zadanie krytyczne jest już zainstalowane, a ćwiczenia z programowania zawierają pusty plik konfiguracji.
W pliku konfiguracji critical.js dodaj odniesienie do wartości krytyczne, a następnie wywołaj funkcję critical.generate(). Ta funkcja akceptuje 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 jest to prosty sposób na zmierzenie powodzenia operacji w konsoli.
Skonfiguruj krytyczne
Poniższa tabela zawiera kilka przydatnych opcji krytycznych. Wszystkie dostępne opcje znajdziesz na GitHubie.
| Option | Typ | Wyjaśnienie |
|---|---|---|
base |
string, | Katalog podstawowy plików. |
src |
string, | Plik źródłowy HTML. |
dest |
string, | Cel pliku wyjściowego. Jeśli CSS jest wbudowany, plik wyjściowy będzie HTML. W przeciwnym razie wynikiem będzie plik CSS. |
width, height |
numery | Szerokość i wysokość widocznego obszaru w pikselach. |
dimensions |
tablica | Zawiera obiekty o właściwościach szerokości i wysokości. Obiekty te reprezentują widoczne obszary, na które chcesz kierować reklamy za pomocą kodu CSS wyświetlanego w części strony widocznej na ekranie. Jeśli w CSS masz zapytania o media, możesz wygenerować krytyczny kod CSS obejmujący wiele rozmiarów widocznego obszaru. |
inline |
boolean | Jeśli zasada ma wartość Prawda, wygenerowany krytyczny kod CSS jest wbudowany w źródłowy plik HTML. |
minify |
boolean | Gdy ma wartość Prawda, krytyczna minifikuje wygenerowany krytyczny kod CSS. Można ją pominąć przy wyodrębnianiu krytycznego kodu CSS dla wielu rozdzielczości, ponieważ ustawienia krytyczne są automatycznie minimalizowane, co zapobiega uwzględnianiu zduplikowanej reguły. |
Poniżej znajdziesz przykład konfiguracji wyodrębniania kluczowego kodu CSS w przypadku wielu rozdzielczości. Dodaj ją do critical.js lub wypróbuj i zmień opcje.
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 index.html jest zarówno plikiem źródłowym, jak i docelowym, ponieważ opcja inline ma wartość Prawda. Krytyczne odczytuje najpierw plik źródłowy HTML, wyodrębnia krytyczny kod CSS, a następnie zastępuje index.html z krytycznym kodem CSS wstawionym w elemencie <head>.
W tablicy dimensions określono 2 rozmiary widocznego obszaru: 300 x 500 w przypadku dodatkowych małych ekranów i 1280 x 720 w przypadku standardowych ekranów laptopów.
Opcja minify jest pomijana, ponieważ wartość Krytyczna automatycznie minimalizuje wyodrębniony kod CSS, gdy określono wiele rozmiarów widocznego obszaru.
Uruchom krytycznie
Dodaj do skryptów w aplikacji package.json kartę krytyczne:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- Kliknij Terminal (uwaga: jeśli nie widać przycisku terminala, może być konieczne użycie opcji pełnego ekranu).
Aby wygenerować krytyczny kod CSS, w konsoli uruchom polecenie:
npm run critical
refresh
Teraz w tagu <head> elementu index.html wygenerowany krytyczny kod CSS jest umieszczony między tagami <style>, po którym następuje skrypt, który asynchronicznie wczytuje pozostałą część kodu CSS.
Przeprowadź pomiar ponownie
Wykonaj instrukcje podane na początku ćwiczenia z programowania, aby ponownie uruchomić kontrolę wydajności w Lighthouse. Wyniki będą podobne do tych:
