Łańcuch krytycznych żądań to seria żądań, które są od siebie zależne i mają kluczowe znaczenie dla ładowania strony. Podąża on za Critical Rendering Path, który określa kolejność przetwarzania i wykonywania żądań.
Długie łańcuchy krytycznych żądań, zwłaszcza te zawierające istotne zasoby, mogą znacząco spowolnić ładowanie strony, ponieważ blokują renderowanie. Zmniejszenie liczby takich łańcuchów obniża opóźnienia i przyspiesza ładowanie strony.
- Łączenie krytycznych żądań może prowadzić do wolniejszego ładowania i gorszych czasów odpowiedzi witryny.
- Wszystkie istotne zasoby są renderowane w kolejności określonej w kodzie HTML, co — w zależności od rozmiaru zasobów i długości łańcucha — może opóźnić pierwsze wyświetlenie treści na ekranach odwiedzających.
Ten przewodnik przedstawia różne metody unikania łączenia krytycznych żądań na Twojej witrynie. Zacznijmy od podstaw.
Jak łańcuchy krytycznych żądań wpływają na szybkość witryny
Na początku procesu ładowania strony przeglądarka czyta kod HTML i obsługuje krytyczne żądania według ich priorytetów. Zazwyczaj najpierw priorytetowo traktowany jest HTML, a następnie CSS, obrazy i JavaScript.
Długie łańcuchy krytycznych żądań mogą spowalniać witrynę, zwiększając opóźnienia i wydłużając czas ładowania. Łączne opóźnienie to suma czasu potrzebnego na pobranie wszystkich zasobów w najdłuższym łańcuchu krytycznych żądań.
- Możesz poprawić wydajność witryny i komfort użytkowników, zmniejszając liczbę takich krytycznych zasobów.
- Można to zrobić, opóźniając ich pobieranie, usuwając je całkowicie lub skracając długość ścieżek krytycznych.
Zrozumienie krytycznych żądań: perspektywa Lighthouse
Krytyczne żądanie dotyczy każdego zasobu niezbędnego do wyrenderowania strony. Lighthouse definiuje krytyczne żądanie jako:
- Niewczytane wstępnie
- Blokujące renderowanie
- Zadeklarowane z priorytetem średnim, wysokim lub bardzo wysokim.
Takie żądania często obejmują elementy, np. nagłówek wpisu na blogu lub obrazy w hero bannerze, które powinny od razu pojawić się na ekranie odwiedzającego.
Analiza krytycznych żądań w GTmetrix
GTmetrix opisuje krytyczne żądanie jako:
- Blokujące renderowanie
- Niewczytane wstępnie
- Zadeklarowane z priorytetem średnim, wysokim lub bardzo wysokim.
Gdy istnieje co najmniej jeden taki łańcuch, GTmetrix uruchamia audyt. Następnie wyświetla najdłuższy łańcuch krytycznych żądań, prezentując szczegóły każdego z nich i maksymalne opóźnienie ścieżki krytycznej.
Jak uniknąć łączenia krytycznych żądań
Aby poprawić wydajność witryny i uniknąć łączenia żądań, możesz zastosować metodę wstępnego ładowania kluczowych żądań. Ta technika wskazuje, które pliki powinny być załadowane wcześnie w procesie ładowania, ponieważ są kluczowe dla wyrenderowania widocznej części strony.
Oto jak skutecznie ją wdrożyć:
Uwaga: Przed wprowadzeniem zmian warto zrobić kopię zapasową swojej witryny. Jeśli coś pójdzie nie tak, możesz szybko przywrócić witrynę do poprzedniego stanu*. Możesz skorzystać z WP Staging, aby łatwo wykonywać automatyczne kopie zapasowe. Sprawdź przewodnik dotyczący kopii zapasowych i przywracania, aby uzyskać więcej pomocy.*
Wstępne ładowanie kluczowych żądań
Zidentyfikuj najbardziej krytyczne zasoby, które wpływają na ładowanie strony. Często należą do nich pliki CSS, JavaScript, czcionki i obrazy "above the fold".
Użyj atrybutu rel= "preload" w sekcji <head> kodu HTML, aby polecić przeglądarce wczesne załadowanie tych zasobów. Jest to kluczowe dla CSS i JavaScript, które blokują renderowanie.
Określ poprawnie typ wczytywanej wstępnie zawartości za pomocą atrybutu as (np. as= "script" dla JavaScript). Pomaga to przeglądarce skutecznie ustalać priorytety zasobów.
Plan B: użyj WP Rocket do wstępnego ładowania
Jeśli wolisz prostsze podejście oparte na wtyczce, WP Rocket to bardzo polecane narzędzie do automatyzacji wstępnego ładowania kluczowych żądań.
WP Rocket ułatwia wstępne ładowanie czcionek i innych krytycznych zasobów bezpośrednio z Twojej domeny, dzięki czemu są one ładowane szybko i zmniejszają blokowanie renderowania.
Dodatkowo WP Rocket oferuje funkcje takie jak optymalizacja dostarczania CSS, w tym opcje usuwania nieużywanego CSS i ładowania CSS asynchronicznie. To dodatkowo poprawia wydajność witryny, zmniejszając wpływ CSS blokującego renderowanie.
Zmniejsz liczbę krytycznych zasobów
Przyspiesz swoją witrynę, minimalizując kluczowe CSS i JavaScript potrzebne dla treści "above the fold". Zoptymalizuj ładowanie, opóźniając niekrytyczne CSS i JavaScript lub usuwając je w całości. Ta strategia pomaga przeglądarce szybciej załadować ważne treści, eliminując zbędne zasoby, takie jak nieużywane CSS i JS.
Aby zmniejszyć liczbę krytycznych zasobów na witrynie za pomocą wtyczki WP Rocket, wykonaj poniższe kroki, aby włączyć wybrane opcje optymalizacji w karcie "File Optimization":
- Minify CSS Files: Zaznacz tę opcję, aby skompresować pliki CSS, usuwając zbędne spacje i komentarze. Zmniejsza to rozmiar plików i przyspiesza ładowanie.
- Optimize CSS Delivery: Wybierz tę opcję, aby wyeliminować z witryny CSS blokujący renderowanie, co przyspiesza renderowanie stron. Pamiętaj, że w ustawieniach optymalizacji CSS można wybrać tylko jedną metodę.
- Minify JavaScript Files: Włącz tę opcję, aby skompresować pliki JavaScript poprzez usunięcie spacji i komentarzy.
- Combine JavaScript Files: Jeśli Twoja witryna nie korzysta z HTTP/2, rozważ łączenie wewnętrznych i zewnętrznych plików JavaScript, aby zmniejszyć liczbę żądań HTTP.
- Load JavaScript Deferred: Zaznacz tę opcję, aby odroczyć ładowanie plików JavaScript do czasu zakończenia parsowania HTML, co może znacząco poprawić czas ładowania.
Unikaj łańcuchowych żądań dzięki ’font-display’
Aby uniknąć łańcuchowych żądań i poprawić wydajność witryny, możesz użyć właściwości font-display, aby kontrolować sposób wyświetlania czcionek internetowych podczas ładowania. Oto kroki i wartości, których możesz użyć:
Zdefiniuj wartości font-display:
- Auto: Używa domyślnej strategii przeglądarki.
- Block: Wyświetla niewidoczny element zastępczy do czasu załadowania czcionki.
- Swap: Używa czcionki zastępczej do czasu załadowania czcionki internetowej, a następnie ją podmienia.
- Fallback: Krótko ukrywa tekst, a następnie używa czcionki zastępczej do czasu załadowania czcionki internetowej.
- Optional: Podobne do fallback, ale przeglądarka może zdecydować, że nie użyje czcionki internetowej.
W większości nowoczesnych przeglądarek zalecane jest użycie font-display: swap;, ponieważ zapobiega to efektowi Flash of Invisible Text (FOIT).
- Wdrażanie font-display: Dodaj właściwość font-display do swoich reguł @font-face w CSS:
@font-face {
font-family: 'Your Font';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}- Wstępne ładowanie czcionek: Użyj tagu
<link rel="preload">w sekcji<head>HTML, aby zapewnić wczesne załadowanie czcionek w procesie renderowania:
<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">Wstępne ładowanie czcionek za pomocą WP Rocket
Szybkie ładowanie czcionek jest ważne, aby uniknąć przesunięć układu na stronie. WP Rocket, popularna wtyczka do WordPressa, pomaga w tym. Oto jak wstępnie ładować czcionki:
Kliknij kartę "Preload", aby przejść do ustawień związanych ze wstępnym ładowaniem czcionek.
Przewiń w dół do sekcji "Preload Fonts". Wklej w odpowiednim polu wcześniej zidentyfikowane adresy URL czcionek, upewniając się, że każdy URL znajduje się w nowej linii. Następnie kliknij przycisk "Save Changes".
Wstępne ładowanie czcionek za pomocą WP Rocket pomaga witrynie ładować się płynniej, zmniejszając CLS i poprawiając wrażenia użytkownika.
Podsumowanie
- Zrozumienie i ograniczenie wpływu łączenia krytycznych żądań ma kluczowe znaczenie dla zwiększenia wydajności witryny.
- Rozwiązanie tych problemów może znacząco przyspieszyć ładowanie i zapewnić płynniejsze, bardziej responsywne wrażenia użytkownika.
- Poprawia to zadowolenie użytkowników i pozytywnie wpływa na pozycje SEO, czyniąc witrynę bardziej przyjazną dla wyszukiwarek.
Powiązane artykuły
- Jak naprawić błąd „Sidebar Not Appearing” w WordPress
- Dlaczego WordPress jest wolny + Jak to naprawić
- Dlaczego kopia zapasowa i odzyskiwanie po awarii są konieczne dla WordPressa?
- Jak naprawić i zoptymalizować bazę danych WordPressa
- Jak cofać zmiany w WordPress (wersje, autozapisy, snapshoty)
