Zasoby blokujące renderowanie
Silktide sprawdza arkusze stylów i skrypty, które przeglądarka musi w pełni pobrać, zanim będzie mogła wyświetlić cokolwiek na stronie. Każdy z nich sprawia, że odwiedzający patrzą na pusty ekran nieco dłużej.
Domyślnie arkusz stylów lub skrypt umieszczony w pobliżu początku strony blokuje renderowanie: przeglądarka nie wyświetli niczego, dopóki plik nie zostanie pobrany, ponieważ może on zmienić wygląd lub działanie wszystkiego.
Dlaczego to ma znaczenie
Puste chwile przed pierwszym wyświetleniem strony to moment, w którym odwiedzający decydują, czy czekać. Każdy plik blokujący renderowanie dodaje kolejną podróż w obie strony przez sieć do tego czasu oczekiwania, a opóźnienia szybko się kumulują przy połączeniach mobilnych — kilka blokujących plików może utrzymywać białą stronę przez sekundy, mimo że w innych warunkach ładuje się szybko.
Większość tego blokowania jest niepotrzebna. Zazwyczaj tylko niewielka część strony jest potrzebna do wyświetlenia pierwszego ekranu, a większość kodu nie musi zostać uruchomiona przed pojawieniem się strony.
Jak to naprawić
- Ładuj skrypty bez blokowania, dodając
defer(lubasyncw przypadku niezależnych skryptów, takich jak analityczne):
<!-- Problem: blokuje renderowanie do czasu pobrania i uruchomienia -->
<script src="app.js"></script>
<!-- Naprawione: pobiera równolegle, uruchamia po przeanalizowaniu strony -->
<script src="app.js" defer></script>
- Umieść niewielką ilość CSS potrzebną dla pierwszego ekranu bezpośrednio na stronie, a pełne arkusze stylów ładuj bez blokowania.
- Nadaj arkuszom stylów, które mają zastosowanie tylko w określonych sytuacjach, atrybut
media(na przykładmedia="print"), aby przestały blokować renderowanie w pozostałych przypadkach. - Ogranicz liczbę elementów blokujących: usuń nieużywane style i skrypty, a pozostałe utrzymuj w niewielkim rozmiarze — zobacz Minifikacja CSS i Zminifikowany JavaScript.
Jak Silktide to testuje
- Załaduj stronę w rzeczywistej przeglądarce, używając typu urządzenia, szybkości połączenia i lokalizacji testowej skonfigurowanych dla testów szybkości.
- Zidentyfikuj każdy arkusz stylów i skrypt, które zablokowały pierwsze renderowanie strony.
- Oszacuj czas, przez jaki każdy z nich wstrzymywał renderowanie, i zgłoś każdy plik wraz z szacowaną oszczędnością.
- Oceń stronę na podstawie łącznego czasu, który można zaoszczędzić: około 100 milisekund obniża ocenę, a 200 milisekund lub więcej jest oceniane jako słabo.
Rozwiązywanie problemów
Czy CSS nie musi blokować renderowania?
Arkusz stylów odpowiadający za pierwszy ekran musi — tak zaprojektowano to celowo, aby odwiedzający nigdy nie widzieli treści bez stylów. Rozwiązaniem nie jest usunięcie CSS, lecz ograniczenie tego, co blokuje: umieść krytyczną część bezpośrednio na stronie, a resztę ładuj w sposób nieblokujący.
Blokujący plik jest skryptem innej firmy
Menedżery tagów, czcionki i widżety czatu są częstymi winowajcami. Większość działa poprawnie z defer lub async — sprawdź aktualne instrukcje osadzania dostawcy, które często już to uwzględniają.