W dzisiejszym konkurencyjnym krajobrazie cyfrowym szybkość witryny ma duże znaczenie, jeśli chodzi o sukces firmy internetowej. Giganci wyszukiwarek, tacy jak Google, traktują priorytetowo strony szybko ładujące się, uznając konieczność zapewnienia bezproblemowego użytkowania.
Według badań szybsze ładowanie strony zwiększa zaangażowanie użytkowników i współczynniki konwersji. W rzeczywistości jednosekundowe opóźnienie w ładowaniu strony może spowodować spadek konwersji klientów o 7%. Biorąc to pod uwagę, oczywiste jest, że właściciele witryn powinni kłaść duży nacisk na wydajność witryny.
Google poważnie traktuje wydajność witryny i bierze ją pod uwagę przy określaniu wyników wyszukiwania. W rezultacie witryny, które ładują się szybko, częściej pojawiają się na pierwszym miejscu w wynikach wyszukiwania, przyciągając więcej odwiedzających i ostatecznie generując większe przychody. Ale jak możesz spełnić wymagania Google i szybko załadować swoją witrynę?
Pozbywasz się zasobów, które mogłyby blokować ładowanie witryny, takich jak pliki CSS i JavaScript.
Jednak usunięcie tych zasobów może być trudne i czasochłonne, zwłaszcza dla osób bez umiejętności technicznych.
W tym artykule wyjaśnimy zasoby blokujące renderowanie i ich wpływ na wydajność witryny oraz przedstawimy przewodnik krok po kroku, jak wyeliminować je z witryny WordPress. Zacznijmy więc optymalizować Twoją witrynę pod kątem szybkości i sukcesu!
Spis treści:
Zasoby blokujące renderowanie
Każdy zasób, który musi zostać załadowany przed wyświetleniem strony internetowej, jest uważany za zasób blokujący renderowanie. Zasoby te wpływają na wydajność i efektywność strony internetowej oraz wydłużają czas ładowania strony.
Plik CSS lub JavaScript można uznać za zasób blokujący renderowanie, jeśli blokuje on renderowanie strony internetowej. Jednak znaczenie ładowania strony może się różnić w zależności od ich natychmiastowej konieczności.
Gdy użytkownik uzyskuje dostęp do strony, przeglądarka najpierw przetwarza kod HTML, aby wyświetlić jej zawartość w części widocznej na ekranie. Kiedy przeglądarka napotyka pliki CSS i JavaScript, również je pobiera i przetwarza. Jeśli pliki zasobów zawierają dodatkowe kody lub niewykorzystane fragmenty, ładowanie strony trwa dłużej.
Rodzaje zasobów blokujących renderowanie
Ogólnie rzecz biorąc, pliki zasobów, takie jak CSS i JavaScript, są uważane za zasoby blokujące renderowanie w WordPress. Przeglądarka postrzega te zasoby jako krytyczne i wymaga załadowania przed wyświetleniem strony. Ale to nie to; istnieje więcej plików zasobów, które blokują renderowanie strony internetowej.
Oto lista zasobów blokujących renderowanie:
Arkusze stylów CSS
Projekt i prezentacja strony internetowej są określane przez arkusze stylów CSS. Plik CSS zostanie uznany za zasób blokujący renderowanie, jeśli zostanie umieszczony w sekcji
strony HTML.Pliki JavaScript w sekcji
JavaScript to język skryptowy, który można wykorzystać do zapewnienia dynamicznego zachowania i interakcji strony internetowej. Plik JavaScript zostanie uznany za zasób blokujący renderowanie, jeśli zostanie umieszczony w sekcji
strony HTML.Czcionki
Teksty na stronie internetowej są wyświetlane przy użyciu różnych czcionek. Czcionki są również uważane za zasoby blokujące renderowanie, jeśli są zawarte w sekcji
strony HTML i ładowane z lokalnego serwera lub sieci CDN.Import HTML
Są to starsze funkcje HTML, które umożliwiają stronom internetowym dołączanie elementów z innych dokumentów HTML. Mimo że importy HTML nie są już tak często używane, nadal mogą być widoczne w niektórych starszych witrynach. Importy HMTL są również uważane za zasoby blokujące renderowanie.
Dlaczego zasoby blokujące renderowanie są okropne dla stron internetowych
Jeśli Twoja witryna WordPress zawiera zasoby blokujące renderowanie, pozostaniesz w tyle w wynikach wyszukiwania. Nawet jeśli jesteś obecnie na pierwszej linii frontu, witryny o lepszych wynikach w końcu cię pokonają.
Witryny z zasobami blokującymi renderowanie będą ładować dodatkowe pliki podczas renderowania witryny. Przed wyświetleniem witryny użytkownicy muszą poczekać, aż pliki zostaną przetworzone. Zasoby te będą miały wpływ na następujące wskaźniki wydajności witryn internetowych:
- Największa zawartość strony: Określa, ile czasu zajmie załadowanie głównej zawartości strony.
- First Contentful Paint: Czas potrzebny przeglądarce na utworzenie pierwszej zawartości modelu obiektowego dokumentu (DOM) w Twojej witrynie.
- Całkowity czas blokowania: ocenia, ile czasu zajmuje od pierwszego treściwego pianina do momentu, w którym strona stanie się całkowicie interaktywna.
Chociaż zasoby blokujące renderowanie nie są konieczne do załadowania, mogą one utrudniać renderowanie witryny lub strony internetowej. Dlatego konieczne jest usunięcie takich zasobów, aby nie utrudniać użytkownikom poruszania się po Twojej witrynie.
Przyjrzyjmy się bliżej, dlaczego blokowanie renderowania jest poważnym problemem dla stron internetowych:
Wolny czas ładowania strony
Zasoby blokujące renderowanie spowodują wolniejsze ładowanie strony, co jest jedną z jej głównych wad. Strona internetowa ładuje się wolno, gdy zawiera pliki zasobów z niepotrzebnymi elementami. Wpłynie to więc na wygląd wyników wyszukiwania, mniejsze zaangażowanie użytkowników i wyższy współczynnik odrzuceń.
Zablokowane renderowanie
Często przeglądarka przestaje renderować stronę internetową, gdy napotka zasoby blokujące renderowanie, ponieważ chce, aby zasoby blokujące renderowanie zostały pobrane i przetworzone.
Ostatecznie użytkownicy będą zirytowani i opuszczą Twoją witrynę z powodu braku odpowiedzi strony lub wolnego renderowania.
Ponadto, jeśli zasób ładuje się powoli, przeglądarka może również zrezygnować i przestać próbować go załadować. Może to prowadzić do uszkodzonych stron lub brakujących informacji.
Zmniejszone zaangażowanie użytkowników
Gdy występują opóźnienia renderowania, wrażenia użytkownika spadają wraz z nimi. Użytkownicy zawsze oczekują szybkiego ładowania i zwykle opuszczają wolno ładującą się witrynę. Tak więc kończą na stronie, która ładuje się szybciej.
Wolno ładujące się strony mają szkodliwy wpływ na zadowolenie konsumentów i reputację marki. Dzięki temu ruch w witrynie i współczynnik konwersji również drastycznie spadają.
Istnieją różne podejścia do usuwania zasobów blokujących renderowanie z WordPress. Wprowadzimy Cię jednak w ręczne metody eliminacji zasobów blokujących renderowanie. Następnie pokażemy, jak możesz to zrobić za pomocą niektórych renomowanych wtyczek w WordPress.
Ręczne eliminowanie zasobów blokujących renderowanie
Możesz uniknąć robienia tego ręcznie, więc nie denerwuj się. Ale przejrzenie tej sekcji z pewnością pomoże ci w nauce niektórych technik optymalizacji wydajności WordPress. Ale najpierw obejrzyj ten film, aby zapoznać się z omawianymi pojęciami.
# 1. Zidentyfikuj zasoby blokujące renderowanie
Musisz najpierw znaleźć zasoby blokujące renderowanie, zanim usuniesz je ze swojej witryny. Po prostu wykonaj następujące kroki, aby znaleźć zasoby blokujące renderowanie w swojej witrynie WordPress:
- Przejdź do Google PageSpeed Insights.
- Wpisz adres URL swojej witryny w pasku wyszukiwania.
- Kliknij przycisk „Analizuj”, aby uzyskać wgląd w swoją witrynę.
- Przewiń w dół i sprawdź sekcję Możliwości.
- Jeśli Twoja strona zawiera zasoby blokujące renderowanie, zostaną one wyświetlone.
#2. Używanie atrybutów „Defer” i „Async” dla JS
Po zidentyfikowaniu zasobów blokujących renderowanie nadszedł czas, aby je wyeliminować, aby uzyskać lepszą wydajność witryny. Spośród różnych metod jednym ze sposobów na to jest użycie metody „odroczenia” lub „asynchronizacji” dla plików JavaScript.
Jeśli chodzi o atrybut „defer”, umożliwia on przeglądarce pobranie pliku JS, a następnie jego wykonanie. Ale dzieje się tak, gdy strona się ładuje i jest gotowa do wyświetlenia swojej zawartości.
Tak więc reszta elementów na stronie może ładować się równolegle z plikiem JavaScript. W efekcie skraca się czas ładowania strony.
Innym podejściem jest atrybut „async”, który pozwala przeglądarce pobrać plik JS, gdy tylko jest dostępny. Dzieje się to bez blokowania innych elementów strony. W rezultacie plik JS może ładować się równolegle z innymi elementami, przyspieszając proces ładowania.
Możesz pozbyć się zasobów blokujących renderowanie i zwiększyć szybkość swojej witryny, korzystając z atrybutu „defer” lub „async”.
#3. Używanie atrybutu „Media” dla warunkowego CSS
Wykorzystanie atrybutów „media” dla warunkowego CSS to kolejne podejście do eliminowania zasobów blokujących renderowanie. Za pomocą tego atrybutu możesz zdefiniować unikalne pliki CSS dla przeglądarek stacjonarnych i mobilnych.
Na przykład możesz dołączyć plik CSS przeznaczony dla urządzeń stacjonarnych i inny plik CSS dostosowany do urządzeń mobilnych. Możesz wskazać przeglądarce, że komputerowy plik CSS zostanie załadowany, gdy uzyskasz do niego dostęp za pośrednictwem urządzenia stacjonarnego.
Podobnie mobilna CSS powinna być ładowana tylko wtedy, gdy uzyskuje się do niej dostęp za pośrednictwem urządzeń mobilnych. Ładując kod CSS specyficzny dla urządzenia dla wyznaczonych urządzeń, możesz zmniejszyć zasoby blokujące renderowanie i przyspieszyć ładowanie witryny.
#4. Odraczanie niekrytycznych CSS
Oprócz wykorzystania atrybutu „media” dla warunkowego CSS, spróbuj odroczyć CSS niekrytyczny. W przypadku tego podejścia należy przede wszystkim załadować niezbędny CSS. Następnie ładujesz resztę CSS podczas ładowania strony.
Na przykład możesz mieć ogromny plik CSS, który zawiera wszystkie style dla Twojej witryny. Jednak tylko niewielka część tego pliku CSS jest wymagana do wyświetlenia treści w części widocznej na ekranie Twojej witryny. Zawartość strony widocznej na ekranie można szybko wyświetlić, opóźniając niekrytyczny CSS, a pozostały CSS można załadować podczas ładowania strony.
#5. Usuwanie nieużywanych CSS i JS
Usuwanie niepotrzebnych plików CSS i JavaScript to kolejna technika usuwania zasobów blokujących renderowanie. Te pliki mogą sprawić, że Twoja strona będzie cięższa i wydłużyć czas ładowania.
Usuwając wszelkie nieużywane pliki CSS i JS, możesz zmniejszyć liczbę zasobów blokujących renderowanie. Możesz łatwo użyć narzędzi, takich jak PurifyCSS lub UnusedCSS, aby usunąć nieużywany plik CSS ze swojej witryny.
#6. Lokalne ładowanie niestandardowych czcionek
Czcionki niestandardowe mogą również zawierać zasoby ograniczające renderowanie. Zamiast polegać na zewnętrznych źródłach, takich jak Google Fonts, powinieneś lokalnie ładować własne niestandardowe czcionki, aby uniknąć konieczności korzystania z tych zasobów.
Możesz zagwarantować, że niestandardowe czcionki ładują się szybko i wydajnie bez spowalniania działania witryny, ładując je lokalnie. Może to prowadzić do szybszej, bardziej responsywnej strony internetowej i poprawy komfortu użytkowania.
#7. Minifikacja JS i CSS
Wreszcie, zmniejszenie plików CSS i JavaScript może pomóc w lepszym funkcjonowaniu witryny. Minifikacja usuwa z kodu niepotrzebne znaki, takie jak spacje i komentarze. W ten sposób zmniejsza się rozmiar Twoich plików, co przyspiesza ich ładowanie.
Aby zminimalizować pliki, możesz użyć narzędzi takich jak MinifyJS lub CSSNano. Zachowaj kopię oryginalnych plików na wypadek konieczności wprowadzenia w nich modyfikacji.
Wyeliminuj zasoby blokujące renderowanie za pomocą wtyczki
W tej sekcji pokażemy, jak możesz wyeliminować zasoby blokujące renderowanie za pomocą wtyczek WordPress. Te wtyczki są znane w WordPressie i mogą szybko usuwać zasoby blokujące renderowanie. Najlepsze jest to, że możesz nawet poprawić wydajność swojej witryny bez specjalistycznej wiedzy.
# 1. Całkowita pamięć podręczna W3
W3 Total Cache (W3TC) poprawia komfort użytkowania witryny WordPress. Eliminuje zasoby blokujące renderowanie i poprawia SEO, podstawowe wskaźniki internetowe i nie tylko. Wtyczka wykorzystuje funkcje, takie jak integracja sieci dostarczania treści, aby wdrożyć najlepsze praktyki.
Aby wyeliminować zasoby blokujące renderowanie, zainstaluj i aktywuj wtyczkę W3 Total Cache i wykonaj następujące kroki:
- Przejdź do sekcji Wydajność na pulpicie nawigacyjnym WordPress i kliknij Ustawienia ogólne.
- Pod nagłówkiem Minify włącz Minify i wybierz Manual jako tryb minimalizacji.
- Teraz kliknij Zapisz wszystkie ustawienia.
- Następnie zbierz wszystkie blokujące renderowanie pliki JavaScript i CSS za pomocą Google PageSpeed Insights.
- Następnie wróć do Wydajność> Minifikuj.
- Teraz w sekcji js najpierw kliknij Włącz dla ustawień JS Minify. Następnie w sekcji Operacje w obszarach wybierz Nieblokowanie przy użyciu typu „odroczenie” dla znacznika Przed .
- Teraz przejdź do zarządzania plikami JS, wybierz aktywowany motyw i kliknij przycisk Dodaj skrypt. Teraz zbierz adresy URL JavaScript, które mają problemy, przeskanowane przez Google PageSpeed Insights. Wklej adresy URL w wyznaczonym polu, jak pokazano na obrazku.
- Teraz przewiń trochę w dół do sekcji CSS. Wybierz swój motyw z rozwijanego menu w sekcji zarządzania plikami CSS i kliknij Dodaj arkusz stylów. Teraz po prostu wykonaj poprzedni krok i skopiuj i wklej adresy URL zebrane z PageSpeed Insight, które mają problemy.
- Ponieważ wszystkie ustawienia są skonfigurowane, kliknij przycisk Zapisz ustawienia i wyczyść, aby wykonać.
#2. Optymalizacja JCH
JCH Optimize poprawia wydajność witryny WordPress mierzoną przez Google PageSpeed Insight. Wtyczka poprawia pierwszą zawartość (FCP), największą zawartość (LCP), indeks prędkości (SI), skumulowaną zmianę układu (CLS), czas do interakcji (TTI) i więcej.
W ten sposób ogólne wrażenia użytkownika i wydajność witryny ulegają znacznej poprawie.
Po zainstalowaniu i aktywacji JCH Optimize postępuj zgodnie z poniższymi procesami, aby wyeliminować zasoby blokujące renderowanie:
- Przejdź do Ustawienia> Optymalizacja JCH, przewiń trochę w dół i przejdź do ustawień podstawowych funkcji.
- Włącz dostarczanie Optimize CSS, aby wyeliminować blokowanie renderowania CSS. Ta funkcja automatycznie określa podstawowy kod CSS wymagany do wyświetlenia treści w części strony widocznej na ekranie na każdej stronie internetowej. Dodatkowo umieszcza go w sekcji treści HTML każdej strony.
- Łącze wstępnego ładowania jest następnie używane do asynchronicznego ładowania połączonych plików CSS.
- Aby usunąć zasoby blokujące renderowanie JavaScript, należy dołączyć atrybuty async lub defer do znacznika