W dzisiejszym, niezwykle konkurencyjnym świecie cyfrowym, szybkość działania witryny internetowej odgrywa kluczową rolę w osiągnięciu sukcesu przez firmy działające online. Wiodące wyszukiwarki, takie jak Google, priorytetowo traktują witryny, które wczytują się z dużą prędkością, doceniając w ten sposób potrzebę zapewnienia użytkownikom komfortu przeglądania.
Badania pokazują, że szybsze ładowanie stron internetowych prowadzi do wzrostu zaangażowania użytkowników oraz lepszych wskaźników konwersji. Co ciekawe, już jednosekundowe opóźnienie w ładowaniu witryny może skutkować obniżeniem konwersji aż o 7%. Z tych danych wynika jednoznacznie, że właściciele stron internetowych powinni przywiązywać dużą wagę do optymalizacji wydajności swoich witryn.
Google traktuje szybkość działania witryn bardzo poważnie, uwzględniając ją jako czynnik rankingowy w wynikach wyszukiwania. Oznacza to, że strony, które wczytują się szybko, mają większe szanse na pojawienie się na wyższych pozycjach, co naturalnie przekłada się na większą liczbę odwiedzin i w konsekwencji – wyższe dochody. Jak więc spełnić wymagania Google i zapewnić, że Twoja strona będzie działała z optymalną prędkością?
Jednym z rozwiązań jest eliminacja zasobów, które mogą spowalniać ładowanie strony, takich jak pliki CSS i JavaScript.
Usunięcie tych zasobów może być jednak zadaniem trudnym i czasochłonnym, zwłaszcza dla osób, które nie posiadają zaawansowanych umiejętności technicznych.
W niniejszym artykule dokładnie omówimy, czym są zasoby blokujące renderowanie, jaki mają wpływ na wydajność strony, a także przedstawimy krok po kroku, jak skutecznie wyeliminować je z witryny opartej na platformie WordPress. Przystąpmy zatem do optymalizacji Twojej strony, aby zapewnić jej szybkość i sukces!
Zasoby blokujące renderowanie
Każdy element, który musi zostać całkowicie załadowany przed pełnym wyświetleniem strony, jest klasyfikowany jako zasób blokujący renderowanie. Te zasoby mają bezpośredni wpływ na wydajność i efektywność strony internetowej, a ich obecność wydłuża czas potrzebny na załadowanie witryny.
Pliki CSS i JavaScript mogą być uznane za zasoby blokujące renderowanie, jeżeli ich ładowanie blokuje proces wyświetlania strony. Jednakże, stopień, w jakim wpływają one na szybkość wczytywania strony, zależy od tego, jak pilne jest ich natychmiastowe załadowanie.
Gdy użytkownik próbuje odwiedzić stronę internetową, przeglądarka w pierwszej kolejności analizuje kod HTML, aby wyświetlić zawartość widoczną na ekranie. W momencie, gdy przeglądarka natrafi na pliki CSS oraz JavaScript, rozpoczyna ich pobieranie i przetwarzanie. Jeżeli wspomniane pliki zawierają nadmiarowy kod lub nieużywane fragmenty, czas ładowania strony ulega wydłużeniu.
Rodzaje zasobów blokujących renderowanie
Zasadniczo, pliki takie jak CSS i JavaScript są traktowane jako zasoby blokujące renderowanie w środowisku WordPress. Przeglądarka uznaje je za elementy krytyczne i wymaga ich załadowania przed wyświetleniem zawartości. To jednak nie wszystko; istnieje szereg innych zasobów, które mogą blokować proces renderowania strony.
Poniżej znajduje się lista zasobów, które mogą blokować renderowanie:
Arkusze stylów CSS
Za wygląd i prezentację strony internetowej odpowiadają arkusze stylów CSS. Plik CSS jest klasyfikowany jako zasób blokujący renderowanie, jeżeli znajduje się w sekcji <head> kodu HTML.
Pliki JavaScript w sekcji <head>
JavaScript jest językiem skryptowym, który umożliwia dynamiczne zachowanie i interakcje na stronie internetowej. Plik JavaScript jest uznawany za zasób blokujący renderowanie, jeśli umieszczony jest w sekcji <head> kodu HTML.
Czcionki
Teksty na stronach internetowych są wyświetlane przy użyciu różnorodnych czcionek. Czcionki te są również traktowane jako zasoby blokujące renderowanie, jeżeli znajdują się w sekcji <head> kodu HTML i są ładowane z serwera lokalnego lub sieci CDN.
Import HTML
To starsze elementy HTML, które umożliwiają stronom internetowym włączenie elementów z innych dokumentów HTML. Mimo że importy HTML nie są już tak powszechne, można je jeszcze spotkać na niektórych starszych witrynach. Importy HTML również stanowią zasoby blokujące renderowanie.
Dlaczego zasoby blokujące renderowanie są szkodliwe dla stron internetowych
Jeżeli Twoja strona oparta na WordPressie zawiera zasoby blokujące renderowanie, może to negatywnie wpłynąć na jej pozycję w wynikach wyszukiwania. Nawet jeśli obecnie plasujesz się wysoko, strony z lepszymi wynikami prędzej czy później Cię wyprzedzą.
Witryny, które posiadają zasoby blokujące renderowanie, podczas swojego renderowania będą ładować dodatkowe pliki. Użytkownicy będą zmuszeni czekać, aż pliki zostaną przetworzone, zanim strona stanie się w pełni dostępna. Te zasoby będą miały negatywny wpływ na następujące wskaźniki wydajności stron internetowych:
- Największe wyrenderowanie treści (LCP): określa, ile czasu upływa zanim główna treść strony zostanie załadowana.
- Pierwsze wyrenderowanie treści (FCP): mierzy czas, w którym przeglądarka po raz pierwszy wyświetliła zawartość DOM na Twojej stronie.
- Całkowity czas blokowania (TBT): ocenia czas między pierwszym wyrenderowaniem treści a momentem, w którym strona staje się w pełni interaktywna.
Mimo, że zasoby blokujące renderowanie nie są konieczne do załadowania, mogą one utrudniać prawidłowe wyświetlanie strony. Dlatego też, ich eliminacja jest kluczowa, aby zapewnić użytkownikom komfortowe przeglądanie Twojej witryny.
Przyjrzyjmy się bliżej, dlaczego blokowanie renderowania jest poważnym problemem dla witryn internetowych:
Wolny czas ładowania strony
Zasoby blokujące renderowanie są główną przyczyną wolniejszego ładowania strony. Dzieje się tak, ponieważ strona zawiera pliki zasobów z niepotrzebnymi elementami. W efekcie, wpływa to negatywnie na pozycje w wynikach wyszukiwania, skutkuje mniejszym zaangażowaniem użytkowników oraz podwyższa współczynnik odrzuceń.
Zablokowane renderowanie
Często zdarza się, że przeglądarka wstrzymuje proces renderowania strony w momencie napotkania zasobów blokujących, ponieważ musi najpierw pobrać i przetworzyć te zasoby.
Ostatecznie, użytkownicy będą sfrustrowani i opuszczą Twoją witrynę ze względu na jej brak responsywności lub powolne renderowanie.
Ponadto, jeżeli jakiś zasób ładuje się powoli, przeglądarka może zrezygnować z jego ładowania. Może to prowadzić do niekompletnego wyświetlenia strony lub brakujących informacji.
Zmniejszone zaangażowanie użytkowników
Opóźnienia w renderowaniu prowadzą do pogorszenia wrażeń użytkownika. Internauci oczekują natychmiastowego ładowania stron i zazwyczaj rezygnują z tych, które ładują się zbyt wolno, przenosząc się do tych, które działają sprawniej.
Powolne ładowanie stron ma negatywny wpływ na satysfakcję konsumentów oraz reputację marki. Skutkuje to drastycznym spadkiem ruchu na stronie i zmniejszeniem wskaźników konwersji.
Istnieje wiele metod usuwania zasobów blokujących renderowanie w WordPress. W tym artykule skupimy się na metodach ręcznych, a następnie przedstawimy, jak można tego dokonać przy użyciu popularnych wtyczek do WordPress.
Ręczne eliminowanie zasobów blokujących renderowanie
Nie musisz wykonywać tego procesu ręcznie, więc nie martw się. Przeanalizowanie tej sekcji z pewnością pomoże Ci lepiej zrozumieć techniki optymalizacji wydajności WordPress. Na początek, obejrzyj film, aby zapoznać się z omawianymi pojęciami.
#1. Zidentyfikuj zasoby blokujące renderowanie
Pierwszym krokiem jest zlokalizowanie zasobów blokujących renderowanie na Twojej stronie. Aby to zrobić, wykonaj następujące czynności:
- Odwiedź stronę Google PageSpeed Insights.
- Wprowadź adres URL Twojej strony w polu wyszukiwania.
- Kliknij przycisk „Analizuj”, aby uzyskać informacje o swojej witrynie.
- Przewiń w dół do sekcji „Możliwości”.
- Jeżeli Twoja strona posiada zasoby blokujące renderowanie, zostaną one tutaj wymienione.
#2. Użycie atrybutów „defer” i „async” dla JS
Po zlokalizowaniu zasobów blokujących renderowanie, możesz przystąpić do ich eliminacji, aby poprawić wydajność swojej strony. Jedną z metod jest zastosowanie atrybutów „defer” lub „async” dla plików JavaScript.
Atrybut „defer” umożliwia przeglądarce pobranie pliku JS, a następnie jego wykonanie, ale dopiero po załadowaniu strony i gdy jest ona gotowa do wyświetlenia swojej zawartości.
W rezultacie, pozostałe elementy na stronie mogą ładować się równolegle z plikiem JavaScript. Skraca to czas potrzebny na załadowanie całej strony.
Atrybut „async” z kolei, pozwala przeglądarce na pobranie pliku JS, gdy tylko stanie się on dostępny, bez blokowania ładowania innych elementów strony. Dzięki temu, plik JS może ładować się jednocześnie z innymi elementami, przyspieszając cały proces.
Wykorzystując atrybuty „defer” lub „async”, możesz skutecznie pozbyć się zasobów blokujących renderowanie i zwiększyć prędkość swojej witryny.
#3. Użycie atrybutu „media” dla warunkowego CSS
Wykorzystanie atrybutu „media” dla warunkowego CSS to kolejne podejście do eliminowania zasobów blokujących renderowanie. Atrybut ten pozwala na zdefiniowanie unikalnych plików CSS dla urządzeń stacjonarnych i mobilnych.
Przykładowo, można dołączyć osobny plik CSS dla komputerów stacjonarnych i inny dla urządzeń mobilnych. Dzięki temu, przeglądarka będzie ładować plik CSS przeznaczony dla komputerów, tylko gdy użytkownik odwiedzi stronę za pośrednictwem komputera. Podobnie, mobilny CSS powinien być ładowany jedynie, gdy strona jest przeglądana na urządzeniu mobilnym. Ładując kod CSS dedykowany dla konkretnych urządzeń, ograniczamy zasoby blokujące renderowanie i przyspieszamy ładowanie strony.
#4. Odroczenie niekrytycznych CSS
Oprócz wykorzystania atrybutu „media”, warto również odroczyć niekrytyczny CSS. W tej metodzie, kluczowe jest najpierw załadowanie niezbędnego CSS, a następnie pozostałej części CSS, gdy strona jest już w trakcie ładowania.
Przykładowo, jeśli masz obszerny plik CSS, który zawiera style dla całej strony, tylko mała jego część jest potrzebna do wyświetlenia zawartości widocznej na ekranie. Opóźniając ładowanie niekrytycznego CSS, możesz szybko wyświetlić widoczną część strony, a resztę CSS załadować w trakcie ładowania.
#5. Usunięcie nieużywanych CSS i JS
Usuwanie niepotrzebnych plików CSS i JavaScript jest kolejną metodą eliminacji zasobów blokujących renderowanie. Pliki te mogą powodować, że strona staje się cięższa i dłużej się ładuje.
Usuwając nieużywane pliki CSS i JS, zmniejszasz liczbę zasobów blokujących renderowanie. W tym celu można wykorzystać narzędzia takie jak PurifyCSS lub UnusedCSS, które pomagają usunąć nieużywany CSS ze strony.
#6. Lokalne ładowanie niestandardowych czcionek
Niestandardowe czcionki również mogą generować zasoby blokujące renderowanie. Zamiast polegać na zewnętrznych źródłach, takich jak Google Fonts, lepiej ładować własne, niestandardowe czcionki lokalnie, aby uniknąć korzystania z tych zewnętrznych zasobów.
Ładując czcionki lokalnie, masz pewność, że będą one wczytywane szybko i sprawnie, bez spowalniania strony. Przekłada się to na szybsze i bardziej responsywne strony internetowe, co poprawia komfort korzystania z witryny.
#7. Minifikacja JS i CSS
Ostatnim krokiem jest minifikacja plików CSS i JavaScript, co pomaga w lepszym działaniu witryny. Minifikacja usuwa z kodu niepotrzebne znaki, takie jak spacje i komentarze, zmniejszając w ten sposób rozmiar plików i przyspieszając ich ładowanie.
Do minifikacji można wykorzystać narzędzia takie jak MinifyJS lub CSSNano. Pamiętaj o zachowaniu kopii oryginalnych plików, na wypadek konieczności wprowadzenia zmian.
Wyeliminuj zasoby blokujące renderowanie za pomocą wtyczki
W tej części artykułu przedstawimy, jak można wyeliminować zasoby blokujące renderowanie przy użyciu wtyczek do WordPress. Są to popularne wtyczki, które potrafią szybko usunąć zasoby blokujące renderowanie. Najlepsze jest to, że możesz poprawić wydajność swojej strony bez zaawansowanej wiedzy technicznej.
#1. W3 Total Cache
W3 Total Cache (W3TC) poprawia jakość korzystania z witryny WordPress. Eliminuje zasoby blokujące renderowanie i optymalizuje SEO, podstawowe wskaźniki internetowe i wiele innych. Wtyczka wykorzystuje takie funkcje jak integracja sieci CDN, aby wdrożyć najlepsze praktyki.
Aby usunąć zasoby blokujące renderowanie, zainstaluj i aktywuj wtyczkę W3 Total Cache i wykonaj poniższe kroki:
- Przejdź do sekcji „Wydajność” w panelu WordPress i kliknij „Ustawienia ogólne”.
- W sekcji „Minify” włącz opcję „Minify” i wybierz „Ręcznie” jako tryb minimalizacji.
- Kliknij „Zapisz wszystkie ustawienia”.
- Następnie, przy pomocy Google PageSpeed Insights, zlokalizuj wszystkie pliki JavaScript i CSS blokujące renderowanie.
- Wróć do „Wydajność” > „Minifikuj”.
- W sekcji „js”, włącz opcję „JS Minify”. Następnie, w sekcji „Operacje”, w obszarach wybierz „Nieblokujące za pomocą typu defer dla znacznika Przed
- Przejdź do zarządzania plikami JS, wybierz aktywny motyw i kliknij „Dodaj skrypt”. Teraz, wprowadź adresy URL JavaScript, które zostały zidentyfikowane przez Google PageSpeed Insights. Wklej adresy URL w odpowiednim polu, jak pokazano na ilustracji.
- Przewiń w dół do sekcji CSS. Wybierz swój motyw z rozwijanego menu w sekcji „Zarządzanie plikami CSS” i kliknij „Dodaj arkusz stylów”. Następnie, wykonaj kroki opisane powyżej i wklej adresy URL z PageSpeed Insights, które wskazują na problematyczne pliki.
- Po skonfigurowaniu wszystkich ustawień, kliknij przycisk „Zapisz ustawienia i wyczyść”, aby wprowadzić zmiany.
#2. JCH Optimize
JCH Optimize poprawia wydajność stron WordPress, mierzona przez Google PageSpeed Insight. Wtyczka optymalizuje pierwsze wyrenderowanie (FCP), największe wyrenderowanie (LCP), wskaźnik szybkości (SI), skumulowaną zmianę układu (CLS), czas do interaktywności (TTI) i wiele innych.
W ten sposób ogólne wrażenia użytkownika i wydajność witryny ulegają znacznemu polepszeniu.
Po zainstalowaniu i aktywowaniu JCH Optimize, postępuj zgodnie z poniższymi instrukcjami, aby usunąć zasoby blokujące renderowanie:
- Przejdź do „Ustawienia” > „JCH Optimize”, przewiń w dół i przejdź do ustawień podstawowych funkcji.
- Włącz opcję „Optimize CSS delivery”, aby usunąć blokowanie renderowania CSS. Ta funkcja automatycznie identyfikuje podstawowy kod CSS potrzebny do wyświetlenia zawartości widocznej na ekranie na każdej stronie internetowej, i umieszcza go w sekcji <head> kodu HTML każdej strony.
- Łącze wstępnego ładowania jest następnie wykorzystywane do asynchronicznego ładowania połączonych plików CSS.
- Aby usunąć zasoby blokujące renderowanie JavaScript, dodaj atrybuty „async” lub „defer” do tagu <script>. Jeżeli występują jakieś zależności między plikami, kolejność ładowania JavaScript może się zmienić.
- W panelu JCH Optimize, przejdź do sekcji „Ustawienia automatycznego łączenia plików”.
- Kliknij „Optimum”, co automatycznie włączy „JavaScript Defer/Async”.
- Włączenie ustawienia „Optimum” opóźnia lub ładuje JavaScript asynchronicznie.
- Jeżeli pliki JavaScript są ładowane dynamicznie, nie można ich odroczyć.
#3. Speed Booster Pack
Speed Booster Pack to kolejna świetna wtyczka do WordPress, która poprawia wydajność i użyteczność witryny. Twoja strona będzie zajmowała wyższą pozycję w wynikach wyszukiwania, takich jak Google. Dzięki tej wtyczce zyskasz większy ruch i bardzo dużą prędkość ładowania strony.
Po zainstalowaniu i aktywacji Speed Boostera, wykonaj następujące kroki:
- Przejdź do „Speed Booster Pack” w panelu WordPress.
- Aby usunąć zasoby blokujące renderowanie JavaScript, kliknij „Zasoby” i przewiń w dół. Przejdź do opcji „Optymalizuj JavaScript”. Możesz odłożyć wszystkie pliki JS i wbudowany JS, klikając „Wszystko” lub wybrać opcję „Dostosuj”, aby uwzględnić wybrane skrypty JS.
- Następnie włącz „Przenieś JavaScript do stopki”. Spowoduje to przeniesienie wszystkich plików JS i wbudowanego JS na dół kodu strony.
- Teraz kliknij opcję „Optymalizuj CSS”, aby usunąć zasoby blokujące renderowanie CSS.
- Możesz włączyć „Critical CSS”, która optymalizuje dostarczanie CSS zgodnie z zaleceniami Google. Ta opcja opóźni wszystkie pliki CSS i wstawi styl Twojej treści nad zakładką.
Możesz także włączyć opcję „Inline all CSS”, aby umieścić wszystkie pliki CSS w kodzie HTML. Dostępna jest też opcja „Minify all inline CSS”, która zminimalizuje wbudowany CSS.
- Po skonfigurowaniu wtyczki, kliknij „Zapisz wszystkie ustawienia”, aby usunąć zasoby blokujące renderowanie.
#4. Autoptimize
Autoptimize to kolejna wtyczka, która ułatwia optymalizację i eliminację zasobów blokujących renderowanie. Wtyczka upraszcza skrypty JS i style CSS, przenosząc je do stopki, agregując, minimalizując i buforując.
Optymalizuje CSS, wstrzykując go do nagłówka strony, wstawiając krytyczny CSS i odwołując się do pełnego zagregowanego CSS. Dodatkowo, automatycznie minimalizuje kod HTML w celu lepszej optymalizacji.
Zainstaluj i aktywuj wtyczkę Autoptimize, a następnie postępuj zgodnie z poniższymi instrukcjami, aby usunąć zasoby blokujące renderowanie:
- Przejdź do „Ustawienia” > „Autoptimize” w panelu WordPress.
- W sekcji „Opcje Javascript”, zaznacz pole „Optymalizuj kod JavaScript?”.
- W sekcji „Opcje CSS”, zaznacz pole „Optymalizuj kod CSS?”.
- Kliknij „Zapisz zmiany i opróżnij pamięć podręczną”.
Zwykle, te ustawienia wystarczają do rozwiązania problemów z zasobami blokującymi renderowanie. Jednakże, ostateczny wynik może się różnić w zależności od motywu i wtyczek zainstalowanych na Twojej witrynie WordPress. Aby upewnić się, czy problem został rozwiązany, ponownie przeskanuj swoją stronę za pomocą PageSpeed Insights. W celu dalszej optymalizacji, wykonaj poniższe kroki:
- Po poprzednich krokach, w opcjach Javascript i CSS dostępnych jest wiele dodatkowych możliwości.
- Możesz również włączyć agregację plików CSS i agregację plików JS.
- Na koniec, kliknij „Zapisz zmiany”.
#5. WP Rocket
WP Rocket to popularna wtyczka WordPress (w wersji premium) do optymalizacji wydajności buforowania. Jest czymś więcej niż zwykłą wtyczką do buforowania. Służy m.in. do usuwania zasobów blokujących renderowanie na Twojej stronie. Dzięki temu, wydajność strony znacznie się poprawia, co przekłada się na lepsze wyniki PageSpeed Insights.
Po zainstalowaniu i aktywacji wtyczki WP Rocket, wyeliminuj zasoby blokujące renderowanie, wykonując poniższe kroki:
- Kliknij „WP Rocket”, przejdź do zakładki „Optymalizacja plików” i przejdź do sekcji plików CSS.
- Włącz opcję „Optymalizuj dostarczanie CSS”.
- Przejdź do sekcji plików JavaScript i wybierz opcję „Załaduj odroczony JavaScript”. Możesz również wypróbować opcję „Tryb awaryjny dla Jquery”, ale jeżeli spowoduje ona nieprawidłowe wyświetlanie strony, możesz ją wyłączyć.
- Zapisz wszystkie zmiany, klikając „Zapisz zmiany”.
Korzyści z usunięcia zasobów blokujących renderowanie ze strony internetowej
Szybszy czas ładowania strony ma istotny wpływ na SEO witryny. Google preferuje strony, które ładują się szybko i działają sprawnie. Strony, które uzyskują wynik powyżej 90, zawsze mają wyższy priorytet w wynikach wyszukiwania. Wykorzystując wspomniane wtyczki, możesz uzyskać następujące wyniki w PageSpeed:
Krótszy czas ładowania strony przekłada się na większe zaangażowanie użytkowników, ponieważ chętniej pozostają oni na stronach, które ładują się szybko. Dzięki temu użytkownicy mogą swobodnie przeglądać stronę i dokonywać zakupów.
Usunięcie zasobów blokujących renderowanie znacznie poprawia komfort korzystania z witryny na urządzeniach mobilnych. Użytkownicy mobilni często korzystają z wolniejszych sieci z ograniczoną ilością danych.
Podsumowanie
Przedstawiliśmy metody ręczne oraz automatyczne (wtyczki) usuwania zasobów blokujących renderowanie. Jeżeli zależy Ci na optymalizacji wydajności strony pod każdym względem, możesz zrobić to ręcznie. Jeżeli chcesz jednak zminimalizować trudności i od razu osiągnąć lepszy wynik w PageSpeed, wypróbuj wspomniane wtyczki.
Zaobserwowaliśmy już imponujące wyniki wydajności na wielu stronach internetowych. Teraz Twoja kolej, aby kontynuować optymalizację swojej strony WordPress przy minimalnej wiedzy technicznej i zapewnić użytkownikom wyjątkowe doświadczenie.
Możesz również zapoznać się z innymi sposobami, które pozwolą Ci błyskawicznie przyspieszyć ładowanie strony.
newsblog.pl
Maciej – redaktor, pasjonat technologii i samozwańczy pogromca błędów w systemie Windows. Zna Linuxa lepiej niż własną lodówkę, a kawa to jego główne źródło zasilania. Pisze, testuje, naprawia – i czasem nawet wyłącza i włącza ponownie. W wolnych chwilach udaje, że odpoczywa, ale i tak kończy z laptopem na kolanach.