Niezależnie od tego, czy korzystasz z biblioteki UI, czy ręcznie tworzysz style, powoduje to znaczne opóźnienia renderowania CSS, ponieważ przeglądarka musi pobrać i przeanalizować pliki CSS, aby wyświetlić stronę.
Ta responsywna galeria lodów została utworzona za pomocą Bootstrap. Biblioteki interfejsu, takie jak Bootstrap, przyspieszają programowanie, ale często kosztem nadmiernego 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 zmniejszeniu i skompresowaniu za pomocą pliku gzip nadal waży on około 20 KB, czyli znacznie przekracza próg 14 KB podczas pierwszej sesji w obie strony.
Critical to narzędzie, które wyodrębnia, zminifikowuje i wstawia w kodzie strony CSS niewidoczny na stronie. Dzięki temu zawartość powyżej pola może zostać wyrenderowana tak szybko, jak to możliwe, nawet jeśli czss dla innych części strony nie został jeszcze załadowany. 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 Symulowany szybki 3G, 4x spowolnienie procesora.
- Zaznacz pole wyboru Wyczyść pamięć podręczną. Gdy ta opcja jest włączona, Lighthouse nie będzie wczytywać zasobów z pamięci podręcznej, co symuluje sposób wyświetlania strony przez użytkowników po raz pierwszy.
- Kliknij Run Audits (Uruchom audyty).
Po przeprowadzeniu kontroli na komputerze dokładne wyniki mogą się różnić, ale w widoku paska zdjęć aplikacja przez dłuższy czas będzie pusta, zanim w końcu zostanie wyrenderowana treść. Dlatego pierwsze wyrenderowanie treści (FCP) ma wysoki wynik, a ogólny wynik skuteczności nie jest zbyt dobry.
Lighthouse pomaga rozwiązywać problemy z wydajnością, więc szukaj rozwiązań w sekcji Możliwości. Możliwość wyeliminowania zasobów blokujących renderowanie to właśnie możliwość.
Optymalizuj
- Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
Aby przyspieszyć proces, w tym ćwiczeniu kodlabu zainstalowano już bibliotekę Critical i 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 to prosty sposób na zmierzenie jej powodzenia za pomocą konsoli.
Konfigurowanie krytycznych
Poniższa tabela zawiera kilka przydatnych opcji krytycznych. 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 | Miejsce docelowe pliku wyjściowego. Jeśli kod CSS jest wbudowany, plikiem wyjściowym jest plik 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 pola. Jeśli masz w CSS zapytania o multimedia, możesz wygenerować kod CSS, który obejmuje różne rozmiary widocznego obszaru. |
inline |
wartość logiczna | Jeśli zasada ma wartość Prawda, wygenerowany krytyczny kod CSS jest wstawiony 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 krytycznego kodu CSS dla wielu rozdzielczości, ponieważ tryb krytyczny automatycznie go minimalizuje, aby uniknąć jego wielokrotnego uwzględnienia. |
Poniżej znajdziesz przykład konfiguracji wyodrębniania krytycznego kodu CSS dla różnych rozdzielczości. Dodaj ją do critical.js lub wypróbuj różne 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 to zarówno plik źródłowy, jak i docelowy, ponieważ opcja inline ma wartość Prawda. Metoda krytyczna najpierw odczytuje plik źródłowy HTML, wyodrębnia krytyczny kod CSS, a następnie zastępuje plik index.html krytycznym kodem CSS wstawionym w obiekcie <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 nie widzisz przycisku terminala, włącz pełny ekran).
Aby wygenerować krytyczny kod CSS, w konsoli uruchom polecenie:
npm run critical
refresh
Teraz w tagu <head> komponentu index.html wygenerowany krytyczny kod CSS jest umieszczony między tagami <style>, a następnie skrypt, który asynchronicznie wczytuje resztę kodu CSS.
Pomiar ponownie
Aby ponownie przeprowadzić audyt wydajności w Lighthouse, wykonaj czynności podane na początku tego ćwiczenia z programowania. Otrzymane wyniki będą wyglądać mniej więcej tak:
