Wyeliminuj zasoby blokujące renderowanie. Numer 1 poradnik krok po kroku – Wordpress.
W tym artykule dowiesz się jak przyspieszyć stronę internetową poprzez wyeliminowanie zasobów blokujących renderowanie oraz poznasz narzędzia niezbędne do lokalizacji krytycznego i niekrytycznego kodu JavaScript i CSS.
Podczas przetwarzania kodu witryny przeglądarka analizuje kod HTML, JavaScript i CSS, a następnie na tej podstawie buduje strukturę strony, czyli tak zwany DOM (Document Object Model) i CSSOM (CSS Object Model). Oba modele są reprezentowane jako drzewo, w którym każdy węzeł reprezentuje dany element lub jego style na stronie. Dzięki temu za pomocą języka JavaScript oraz API udostępnionego przez przeglądarkę uzyskujemy dostęp do tych elementów i możemy dokonywać z nimi interakcji.
Niestety niesie to za sobą duże konsekwencje. Gdy na stronie pojawi się źle osadzony kod JavaScript, to budowa drzewa strony zostaje przerwana na czas wykonania kodu!
Podobnie jest w przypadku CSS, osadzone style muszą zostać pobrane i przetworzone, zanim przeglądarka zacznie malować jakikolwiek pixel w oknie. Konsekwencją tego są kolejne opóźnienia.
Zatem jak zlokalizować i wyeliminować zasoby blokujące renderowanie na stronie i czym jest w ogóle krytyczny i niekrytyczny kod?
Krytyczny i niekrytyczny kod JavaScript i CSS
Rozwiązanie jest proste. Trzeba podzielić kod na krytyczny i niekrytyczny, a następnie zastosować na obu z nich odpowiednie metody ładowania.
Krytyczny kod JavaScript i CSS powinien zostać załadowany synchronicznie na samym początku. Jest niezbędny do poprawnego załadowania widocznej części strony (Above The Fold).
Zalecana objętość kodu do wygenerowania treści widocznych dla użytkownika wynosi 14 KB i nie powinna jej przekraczać.
Niekrytyczny kod JavaScript i CSS powinien zostać załadowany asynchronicznie i powinien być przetwarzany dopiero po załadowaniu widocznej części strony.
Lokalizacja krytycznych oraz niekrytycznych zasobów – Coverage Tool
Coverage jest narzędziem, pozwalającym dokładnie zbadać ile z ładowanych zasobów na stronie jest tak naprawdę przez nią wykorzystywane. Pozwala ono również zidentyfikować krytyczne i niekrytyczne zależności. Otrzymane w ten sposób informacje pozwolą na odpowiednie załadowanie zasobów na stronie.
Aby uruchomić narzędzie, otwieramy narzędzia dla deweloperów za pomocą klawisza F12, następnie skrótem CTRL + SHIFT + P otwieramy menu komend, w nim wpisujemy „Coverage”, a z listy wybieramy „Show Coverage”.
Jeżeli po wpisaniu nie wyświetlają się żadne opcje, to trzeba zmienić język na angielski. Można to zrobić, klikając z prawej strony na górze zębatkę, a następnie z listy rozwijanej wybrać język angielski.
Na pasku poniżej pojawi się zakładka „Coverage”. Wystarczy teraz kliknąć przycisk na środku okna, zresetować stronę i przejrzeć witrynę dla różnych wielkości widoków.
UWAGA!
Przejście do innej zakładki spowoduje, że narzędzie na nowo będzie obliczać procentowo użycie kodu.
Te same pliki mogą wykazywać inne wykorzystanie na różnych podstronach. Inaczej mówiąc, stosunek użytego kodu do nieużywanego dotyczący jednego pliku może się zmieniać w zależności od analizowanej podstrony. W celu poprawnego wyodrębnienia krytycznych styli CSS trzeba brać pod uwagę krytyczny kod z każdej podstrony lub wyodrębniać krytyczny CSS dla każdej strony osobno.
Czerwonym przyciskiem na górze z lewej strony kończymy zbieranie danych i możemy przejść do ich szczegółowego analizowania.
Wybierając dany zasób, możemy podejrzeć, które linijki kodu są potrzebne do wygenerowania krytycznej zawartości strony, a które nie.
Kolor zielony (krytyczny CSS lub JS) przedstawia kod wymagany do namalowania strony. Zawierają się w nim niezbędne style, opisujące wygląd strony, który jako pierwszy jest widoczny dla użytkownika.
Kolor czerwony (niekrytyczny CSS lub JS) to kod, który może (zazwyczaj jest w ogóle niewykorzystywany na stronie) mieć znaczenie dla treści od razu niewidocznych dla użytkownika.
Zwróć uwagę na to, że narzędzie pomija style definiowane dla różnych szerokości. Ta wiedza będzie Ci potrzebna do prawidłowego wyodrębnienia krytycznych styli CSS. (Linia 318 i 330)
Wyodrębnienie krytycznego i niekrytycznego kodu CSS (dla zaawansowanych)
Na początek zajmijmy się stylami CSS i zadowolmy tych, którzy oczekują najlepszych efektów. Oczywiście wiadomo, będzie wiązało się to z dużo większą pracą. Dlatego, aby nie zniechęcać wszystkich, to osoby zainteresowane automatyzacją tego procesu zapraszam do kolejnych akapitów tego artykułu.
Krok 1 – wykonaj audyt
Wykonanie audytu może pomóc w lokalizacji zasobów blokujących renderowanie strony.
Krok 2 – zlokalizuj arkusz i przygotuj pliki
Dalej zabieramy się za utworzenie dwóch plików dla danego zapytania. Na moim przykładzie będzie to zapytanie odwołujące się do pliku global.min.css ze względu, że pojawia się w audycie Lighthouse.
Krok 3 – wyodrębnij krytyczny i niekrytyczny CSS
Pliki nazywam global.min.async.css i global.min.sync.css, do pierwszego z nich wrzucam wszystkie linijki kodu oznaczone na czerwono (niekrytyczne), a do drugiego tylko te oznaczone na zielono (krytyczne).
Przypominam!
Zwróć uwagę na style definiowane dla różnych szerokości. Czyli te zaczynające się od „@media”. Jeżeli poniżej pomiędzy nawiasami klamrowymi pojawi się kolor zielony, to wtedy cały ten blok wrzucamy do pliku zakończonego „sync.css”.
Krok 4 – skopiuj atrybut
Następnie przechodzimy do lokalizacji identyfikatora załączonego pliku CSS, który optymalizujemy. Aby to zrobić, użyj skrótu klawiszowego SHIFT + U, a potem LCTRL + F i wpisz nazwę danego arkusza styli. Odszukaj atrybutu „id” i skopiuj tekst znajdujący się obok w cudzysłowie/apostrofach bez końcówki „-css”.
W moim przypadku jest to: „kadence-global”.
Krok 5 – usuń z kolejki
Na tym etapie chcemy wyłączyć ładowanie danego arkusza styli na stronie. W tym celu skorzystaj z poniższego kodu i postępuj analogicznie do mojego przypadku. Umieść go w pliku functions.php znajdującym się w katalogu szablonu na serwerze.
function get_styles_list(){
return [
'kadence-global' => array('/css/global.min.sync.css', null),
'kadence-header' => array('/css/header.min.sync.css', '/css/header.min.async.css')
];
}
function remove_unnecessary_styles() {
$styles = get_styles_list();
foreach($styles as $id => $dir){
wp_dequeue_style($id);
wp_deregister_style($id);
}
}
add_action('wp_print_styles', 'remove_unnecessary_styles');
Krok 6 – dodaj do kolejki krytyczny CSS
Dodaj kod do pliku i podmień go z tym istniejącym na serwerze. Sprawdź, czy dany arkusz przestał się ładować na stronie. Dalej osadzamy krytyczne style CSS za pomocą:
function add_critical_styles() {
$styles = get_styles_list();
$registered = wp_styles()->registered;
foreach($styles as $id => $dir){
$inline_styles = $registered[$id]->extra["after"];
$inline_content = implode('', $inline_styles);
$sync_id = $id. '-sync';
wp_register_style($sync_id, get_stylesheet_directory_uri(). $dir[0]);
wp_enqueue_style($sync_id);
if(!empty($inline_content)){
wp_add_inline_style($sync_id, $inline_content);
}
}
}
add_action('wp_enqueue_scripts', 'add_critical_styles', PHP_INT_MAX);
Krok 7 – umieść plik w odpowiednim miejscu
Aby wszystko działało poprawnie, trzeba jeszcze umieścić plik z końcówką „sync.css” w katalogu szablonu o odpowiedniej ścieżce. Teraz możesz sprawdzić, czy na stronie ładuje się wszystko, tak jak powinno. Jeżeli tak nie jest, to znaczy, że nie wszystkie krytyczne style zostały dodane do pliku.
Spróbuj wrócić jeszcze raz do narzędzia Coverage, wykonaj analizę i upewnij się, czy wszystkie linijki na zielono zostały skopiowane do pliku. Narzędzie to niestety nie jest idealne i może być tak, że bez ręcznych poprawek się nie obejdzie.
Krok 8 – sprawdź czy wszystko ładuje się poprawnie
W moim przypadku wszystko działa. Liczby mówią same za siebie. Plik zmalał pięciokrotnie, a strona nadal wygląda tak samo!
Zobaczmy co jeszcze powie audyt Lighthose. Tak jak mogło by się spodziewać, jeden problem został wyeliminowany.
Krok 1 – wybierz opcję
Zastanówmy się co zrobić z niekrytycznym kodem CSS. Są dwie opcje – załadować lub usunąć.
Aby pomóc Ci zdecydować przetestuj teraz swoją stronę. Sprawdź, czy witryna radzi sobie bez niekrytycznego CSS. Dokonaj najróżniejszych interakcji ze stroną. Sprawdź, czy elementy niewidoczne przy pierwszym ładowaniu są również poprawnie rysowane przez witrynę. W większości przypadków niekrytyczny CSS okazuje się zupełnie niewykorzystywany. W takim przypadku możesz zupełnie się go pozbyć.
W innej sytuacji witryna na pierwszy rzut oka wygląda dobrze. Nie widać, żadnych błędów i wszystko wyświetla się poprawnie. Natomiast w trakcie interakcji ze stroną np. najechania na przycisk, wysunięcia paska bocznego, pojawienia się popup`u elementy zaczynają się rozjeżdżać i nie wyglądają, tak jak powinny. Jest to znak, aby załadować niekrytyczny CSS na stronie.
Jako przykład wykonam optymalizację kolejnej zależności. Tym razem wezmę pod lupę header.min.css. Jest on odpowiedzialny za poprawne wyświetlanie całego nagłówka strony wraz z menu desktop (rozwijana lista) i menu mobile (wysuwany sidebar). Wspominam o tym tylko dlatego, abyś zwrócić Ci uwagę na fakt, że część potrzebnych selektorów CSS będzie należeć do kodu niekrytycznego. Zakładam tak od razu, ponieważ wiem, że nie wszystkie elementy menu są widoczne przy załadowaniu strony. Konsekwencją tego jest to, że w tym przypadku będę musiał załadować niekrytyczny CSS, aby menu działało poprawnie.
Krok 2 – dodaj kod do pliku
Do osadzenia opóźnionych styli niestety nie możemy wykorzystać wbudowanej funkcji Wordpress tak jak to zrobiliśmy wcześniej. W tym celu będziemy musieli posłużyć się pewną sztuczką, omijając standardową kolejkę osadzania skryptów i styli.
Poniższy kod dodany do functions.php pozwoli załączyć style, które zostaną dopiero przetworzone po wstępnym załadowaniu strony:
function get_styles_list(){
return [
'kadence-global' => array('/css/global.min.sync.css', null)
'kadence-header' => array('/css/header.min.sync.css', '/css/header.min.async.css') //dodałem kolejny element do listy
];
}
function add_async_styles(){
$styles = get_styles_list();
foreach($styles as $id => $dir){
if(!empty($dir[1])){
?>
<link rel="stylesheet" href="<?php echo(get_stylesheet_directory_uri(). $dir[1]); ?>" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="<?php echo(get_stylesheet_directory_uri(). $dir[1]); ?>"></noscript>
<?php
}
}
}
add_action( 'wp_head', 'add_async_styles', PHP_INT_MAX);
Krok 3 – umieść plik w odpowiednim miejscu
Aby style mogły zostać poprawnie załadowanie, pamiętaj, że musisz przesłać wcześniej przygotowany plik „…async.css” do odpowiedniego katalogu na serwerze.
Krok 4 – przetestuj stronę
Po wprowadzeniu zmian możesz odświeżyć i przetestować stronę.
Jak widać, style ładują się asynchronicznie. Przeglądarka jest w stanie załadować element na stronie, mimo że header.min.async.css jest ciągle przetwarzane. Audyt również przestał wskazywać dany arkusz jako blokujący ładowanie.
Ceny za stronę internetową zaczynają się już od 499 złotych!
Skorzystaj z darmowej wyceny strony www. W ciągu 48 godzin skontaktuję się z Tobą i przedstawię Ci moją ofertę.
Wyodrębnienie krytycznego i niekrytycznego kodu JavaScript (dla zaawansowanych)
Zapewnienie nam użytkownika gamy różnych funkcjonalności często wiąże się z problemami. Jednym z nich jest blokowanie renderowania strony przez skrypy JavaScript. Niestety rozwiązania, które często lekkomyślnie wykorzystywane są na stronach, zazwyczaj nie są dobrze zoptymalizowane. Warto jest już na etapie projektowania strony przejrzeć dostępne szablony, wtyczki i wybrać najlepiej te lekkie, które są projektowane modularnie. Wszystkie niepotrzebne funkcje można wtedy wyłączyć, a potrzebne zostawić.
Podzielenie plików JavaScript na krytyczne i niekrytyczne jest praktycznie niemożliwe, gdy mówimy o stronach opartych na systemie Wordpress. Szablony i pluginy wykorzystywane na takich witrynach do prawidłowej pracy wgrywają różne biblioteki i inne pliki, które są od siebie zależne. Jakakolwiek ingerencja w ich strukturę może spowodować wystąpienie krytycznych błędów w witrynie.
Mimo wszystko nie musimy się jeszcze poddawać. Może i nie jesteśmy w stanie dokładnie wyodrębnić całego kodu JavaScript, ale za to jesteśmy w stanie załadować asynchronicznie całe pliki, które nie są potrzebne przeglądarce do prawidłowego wyświetlenia strony.
Krok 1 – poznaj sposoby ładowania skryptów
Przeglądarki wspierają natywnie dwa różne sposoby ładowanie kodu JavaScript na stronie. Do dyspozycji mamy dwa atrybuty „async” i „defer”. Pozwalają nam one, w pewnym sensie manipulować tym jak kod JavaScript będzie ładowany i wykonywany.
Metoda z atrybutem „async”
Skrypt z atrybutem „async” są wykonywane natychmiast po zakończeniu pobierania i przed zdarzeniem load. Jest bardzo prawdopodobne, że skrypty nie będą wykonywane w kolejności, w jakiej pojawiają się w kodzie HTML. Metoda ta nie jest najlepsza, ponieważ pobrany plik zostaje uruchomiony, w celu wykonania kodu co może blokować pracę generatora.
Metoda z atrybutem „defer”
Skrypty z atrybutem „defer” są wykonywane po całkowitym zakończeniu generowania strony, ale przed zdarzeniem DOMContentLoaded. Metoda ta gwarantuje, że skrypty będą wykonywane w kolejności, w jakiej pojawiają się w kodzie HTML i nie zablokują generatora strony.
Krok 3 – wykonaj analizę i zlokalizuj niekrytyczny JS
Przed dodaniem dodatkowego kodu przyjrzyjmy się, jak dokładnie wygląda ładowanie skryptów na stronie. Białe paski przedstawiają opóźnienie, zielone oczekiwanie na odpowiedź serwera, a niebieskie pobieranie.
Teraz skupmy się na chwilę na pliku o nazwie „cookie-law-info-public.js”. Jak widać na załączonym obrazku, ładuje się on synchronicznie bez żadnych opóźnień. Jeżeli byśmy mieli, opisać co robi przeglądarka z danym skryptem, to wyglądałoby to tak:
Przeglądarka czyta strukturę strony od góry do dołu, napotyka osadzony skrypt. W tym samym momencie zatrzymuje się, pobiera go i wykonuje zawarte w nim instrukcje.
Krok 4 – upewnij się, że zlokalizowałeś niekrytyczny JS
Takim skryptom warto się przyglądać, ponieważ może nie ma sensu wcale ładować i wykonywać niektórych z nich tak wcześnie. Aby mieć stuprocentową pewność, które skrypty należy opóźnić, wykonaj następujące czynności:
Wejdź w narzędzia dla developerów > odszukaj zakładkę sieć > kliknij prawym przyciskiem myszy na konkretne zapytanie i wybierz z listy > blokuj URL żądania.
Odśwież stronę i sprawdź, czy strona ładuje się poprawnie. Jeżeli tak to trafiłeś w dziesiątkę i możesz przejść do metody asynchronicznego ładowania skryptu.
Ewentualnie wykonaj audyt i sprawdź, które zapytania blokują generowanie strony.
Krok 5 – implementacja metody
Skoro już wiemy co i jak to przejdźmy do implementacji tego rozwiązania na stronie. Skorzystaj z poniższego kodu, aby dodać atrybut „defer” do wybranych skryptów:
function get_scripts_list(){
return ['cookie-law-info-public.js'];
}
function defer_js($url) {
$scripts = get_scripts_list();
if(is_user_logged_in()) return $url;
foreach($scripts as $file){
if(strpos($url, $file)) return str_replace('src', 'defer src', $url);
}
return $url;
}
add_filter('script_loader_tag', 'defer_js');
Krok 6 – przetestuj stronę
Sprawdź, czy wszystko poszło zgodnie z planem, wykonując audyt lub korzystając z narzędzi deweloperskich. Efekt powinien wyglądać następująco. Skrypt powinien zostać ustawiony w kolejce i pobrany dopiero po wstępnym wygenerowaniu strony:
Metodę powtarzaj do momentu opóźnienia wszystkich niekrytycznych skryptów JavaScript.
UWAGA!
Może być tak, że powyższa metoda nie rozwiąże problemu i skrypty znacznie będą opóźniać ładowanie witryny. Warto wtedy pomyśleć o odłożeniu ładowania skryptów do określonego czasu lub interakcji użytkownika ze stroną.
Potrzebujesz pomocy z optymalizacja witryny?
Najlepsze narzędzia i wtyczki Wordpress do automatycznego generowanie krytycznego kodu CSS
Automatyzacja tego procesu jeszcze szczególnie przydatna w witrynach opartych o system Wordpress. Strony oparte o CMS takie jak ten dynamicznie się zmieniają. Wtyczki i szablony wymagają nieraz stałych aktualizacji, właściciele stron wdrażają nowe podstrony, instalują nowe wtyczki albo wprowadzają różne zmiany, na stale rozbudowując witrynę. Każdy taki zabieg bez odpowiedniej automatyzacji wiązałby się z ogromnymi kosztami. Na szczęście jest wiele dostępnych wtyczek i rozwiązań pozwalających na automatyczne wygenerowanie krytycznego CSS i odpowiednie załadowanie niekrytycznych styli.
Najlepszymi z nich są FlyingPress, LiteSpeed Cache i Perfmatters. Osobiście korzystam z ostatniej opcji, ponieważ zapewnia mi ona wszystkie najpotrzebniejsze funkcje. Wtyczki wymienione powyżej dają możliwość wybrania metody osadzania niekrytycznego CSS. Posiadają one znaczną przewagę nad wtyczkami takimi jak WP-Rocket, które domyśle osadzają cały wyodrębniony kod metodą inline, czyli bezpośrednio w kodzie HTML.
Zrzuty z ekranu wyżej wymienionych wtyczek:
Zastosowanie oddzielnych plików jest znacznie szybsze, ponieważ nie zwiększa rozmiarów HTML i wszystkie pliki mogą być przechowywane w pamięci cache – bezpośrednio na urządzeniach użytkowników odwiedzających stronę. Dzięki czemu znacznie skraca czas ładowania strony, jak i ilość wysyłanych zapytań do serwera.
Inne narzędzia online do usuwania nieużywanego kodu CSS
Podsumowując
Budując stronę zawsze wybieraj lekkie szablony oraz wtyczki! Korzystaj z tych projektowanych modularnie. Sprawdzaj czy autorzy wtyczek lub szablonów kładą jawny nacisk na optymalizacje ich oprogramowania. Ogranicz używanie niepotrzebnych wtyczek i zrezygnuj z nadmiarowych funkcjonalności – staraj się uzyskać we wszystkim złoty środek.
Zadbaj o to, aby wyodrębnić możliwe jak najwięcej krytycznego kodu i ładuj go synchronicznie najszybciej jak to tylko możliwe. Niekrytyczny kod usuń lub załaduj asynchronicznie, jeżeli zajdzie taka potrzeba.
W celu ograniczenia kosztów skorzystaj z narzędzi, które pomogą Ci zautomatyzować proces wyodrębniania krytycznych i niekrytycznych zasobów.
Pamiętaj!
Optymalizacja strony internetowej jest to wieloetapowy proces. Jeżeli twoja strona mimo starań nadal działa wolno to zachęcam do zainteresowania się innymi poradami na moim blogu.
