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 zminimalizowaniu i skompresowaniu do formatu gzip biblioteka Bootstrap zajmuje około 20 KB, czyli znacznie przekracza wartość progową 14 KB dla pierwszego połączenia 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 jak najszybciej, 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 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 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 jest jednym z najważniejszych elementów.
Optymalizuj
- Kliknij Remix to Edit (Zmiksuj 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 stanu 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 to prosty sposób na zmierzenie jej powodzenia za pomocą 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 kod CSS jest wbudowany, plikiem wyjściowym jest plik HTML. W przeciwnym razie wynikiem jest 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. Obiekty te reprezentują widoczne obszary, na które chcesz kierować reklamy za pomocą kodu CSS części strony widocznej na ekranie. 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 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. Najpierw odczytuje plik źródłowy HTML, wyodrębni krytyczny kod CSS, a potem nadpisze index.html za pomocą kodu <head> wbudowanego w <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ż ustawienie Krytyczne automatycznie minimalizuje wyodrębniony kod CSS w przypadku określonych 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:
