Niezależnie od tego, czy korzystasz z biblioteki UI, czy ręcznie tworzysz style, wyświetlanie strony może znacznie opóźnić renderowanie CSS, ponieważ przeglądarka musi pobrać i przeanalizować pliki CSS, aby wyświetlić stronę.
Ta elastyczna lodziarnia wykorzystuje technologię 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 ma rozmiar 187 KB, a Semantic UI – inna biblioteka UI (interfejs) – po zdekompresowaniu ma aż 730 KB. 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.
Krytyczne to narzędzie, które wyodrębnia, minimalizuje i umieszcza kod CSS w części strony widocznej na ekranie. Dzięki temu zawartość części strony widocznej na ekranie będzie renderowana jak najszybciej, nawet jeśli kod CSS pozostałych części strony nie został jeszcze wczytany. Z tego ćwiczenia w Codelabs dowiesz się, jak korzystać z modułu npm usługi Krytyczne.
Zmierz odległość
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij
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 Skuteczność.
- Wyczyść pozostałe pola wyboru w sekcji Kontrole.
- Kliknij Symulowany szybki 3G, 4x spowolnienie procesora.
- Zaznacz pole wyboru Wyczyść pamięć wewnętrzną. 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ść. Właśnie dlatego wskaźnik First Contentful Paint (FCP) jest wysoki i dlatego ogólny wynik skuteczności nie jest satysfakcjonujący.
Narzędzie Lighthouse pomoże Ci rozwiązać problemy ze skutecznością, dlatego rozwiązania znajdziesz 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ć działanie, w ćwiczeniach z programowania dołączono pusty plik konfiguracji, dlatego w grze jest już zainstalowane oprogramowanie Critical.
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.
Skonfiguruj krytyczne
Poniższa tabela zawiera kilka przydatnych opcji krytycznych. Wszystkie dostępne opcje znajdziesz na GitHubie.
| Opcja | Typ | Wyjaśnienie |
|---|---|---|
base |
ciąg znaków | Podstawowy katalog 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 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 w kodzie CSS masz zapytania o media, możesz dzięki temu wygenerować krytyczny kod CSS obejmujący wiele rozmiarów 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 | Jeśli zasada ma wartość Prawda, Krytyczny minimalizuje wygenerowany krytyczny kod CSS. Można pominąć ten krok podczas wyodrębniania krytycznego kodu CSS dla wielu rozdzielczości, ponieważ automatycznie go zmniejsza, 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. Element krytyczny 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 w przypadku bardzo małych ekranów i 1280 x 720 w przypadku standardowych ekranów 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 do skryptów w języku package.json element „Krytyczny”:
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>, po którym znajduje się 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:
