Kilka zagadnień z optymalizacji WordPressa

Witam,
zajmuję się obecnie optymalizacją mojego serwisu zbudowanego na platformie WordPress. Mam kilka zagadnień/problemów, które nie mam pojęcia skąd wynikają i dlaczego występują akurat na moim serwisie.
Z góry zaznaczę, że:

• wszystko mam aktualne na serwisie tj. wszystkie pluginy i silnik WP (wersja 5.3),
• motyw jest customowy (ale pisany przez profesjonalną firmę z mega rekomendacjami i nigdy nie było z nim problemów),
• wtyczki na serwisie mam ograniczone do minimum (i są to tylko najpopularniejsze wtyczki – takie +1mln aktywnych instalacji),
• nie posiadam żadnych wymagających skryptów czy innych wydziwnień.

Przejdę do rzeczy:
Problem nr 1: Podczas robienia audytu Lighthouse w Chrome zauważyłem, że mam podpinaną na froncie strony następującą bibliotekę:

Wygląda mi to na coś związanego z tym całym Gutenbergiem, ale ja z niego nie korzystam – mam zainstalowany plugin Classic Editor.
Po co mi ta biblioteka na froncie strony, skoro skórka jest dedykowana i z tego nie korzysta? Jak to najprościej wyrzucić?

Problem nr 2: Również podczas wykonywania audytu Lighthouse (czy to do wersji mobile czy desktop) – zauważyłem, że coś wpływa obciążająco na wynik w zakładce Performance. W sugestiach pojawia mi się informacja: Eliminate render-blocking resources i zwraca uwagę na 2 biblioteki WordPressa: jQuery: 1.12.4 i jQuery Migrate 1.4.1. Domyślam się, że to już jest potrzebne, żeby on sobie funkcjonował, ale dlaczego dwie te biblioteki, a nie jedna? Jak to zmienić, ograniczyć, wyrzucić?

Zagadnienie nr 3: Tak jak problem nr 2 z tym, że tyczy się to moich stylów i skryptów (w sensie tych ładowanych przez mój motyw), a podpięte są one w pliku functions.php i sprawdzałem – zrobione jest to zgodnie ze sztuką.
Dalej w sugestiach mam: Eliminate render-blocking resources i coś z tam z asynchronicznym ładowaniem. Da radę to jakoś poprawić?
Mam nadzieję że wszystko opisałem jasno i liczę na Waszą pomoc 🙂

Najlepsze odpowiedzi

Problem 1
Tak – plik o którym mówisz dotyczy Gutenberga, jego blików itp. Jeśli nie korzystasz z niego i masz własny motyw tym bardziej możesz się go pozbyć. Najprostsze rozwiązanie znalezione w necie – dodaj poniższy kod w pliku functions.php w katalogu Twojego motywu:

add_action( 'wp_print_styles', 'wdm_deregister_styles', 100 );
function wdm_deregister_styles() {
    wp_dequeue_style( 'wp-block-library' );
}

Problem 2
Jquery Migrate jest wrzucana, aby przestarzałe funkcje i zachowania działały poprawnie w obecnej wersji jQuery. Niemniej jednak jeśli masz aktualny motyw/silnik/wtyczki nie ma konieczności implementowania tej biblioteki, a wpłynie to pozytywnie na obciążanie witryny. Polecam jednak po odpięciu sprawdzić czy wszystko działa poprawnie.
Jeśli chodzi o samo odpięcie to są oczywiście do tego wtyczki (np.Remove jQuery Migrate) albo wyrzucenie manualne np. za pomocą gotowego kodu znalezionego w necie, który jak w przypadku problemu nr 1 należy umieścić w pliku z Twoimi funkcjami:

function remove_jquery_migrate( $scripts ) {
if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) {
   $script = $scripts->registered['jquery'];
       if ( $script->deps ) { 
           $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );
       }
   }
}
add_action( 'wp_default_scripts', 'remove_jquery_migrate' );

Zagadnienie nr 3
Co do asynchronicznego ładowania JS-ów czy przesuwanie/dzielenie plików css, które blokują renderowanie najlepszym sposobem będzie skorzystanie np. z wtyczki Autoptimize co przy odpowiedniej konfiguracji powinno rozwiązać te zagadnienia optymalizacyjne. Uważaj jednak podczas implementacji takich pluginów – często (nie z ich winy) wynikają konflikty pomiędzy innymi wtyczkami a wtyczkami optymalizującymi. Gdybyś chciał sam chciał przy tym dłubać to podsyłam link do fajnego gotowca ze stackoverflow (odpowiedź brasofilo z największą ilością łapek):
https://stackoverflow.com/questions/18944027/how-do-i-defer-or-async-this-wordpress-javascript-snippet-to-load-lastly-for-fas
Sprawdzałem – rozwiązanie działa poprawnie.

Label

{} [+]

Imię*

E-mail

Pole nie wymagane

Label

{} [+]

Imię*

E-mail

Pole nie wymagane

3 komentarzy

Inline Feedbacks

View all comments

Artex

Dzisiaj właśnie widziałem reklamę Gutenberga 7.1 i podobno jakieś fajne rozwiązania optymalizacyjne w nim wprowadzili 🙂

Odpowiedz

Gutenpierd

Dzisiaj zajrzałem do siebie i nie widziałem wcześniej tej biblioteki cssów od Gutenberga. Bez jaj, musiało to dojść przy którymś updejcie. Pierwsze primo wrzuciłem Twój kodzik i śmiga – jest gitara.
Drugie primo to zastanawiam się co na to twórcy WordPressa? Dodają ten śmieszny edytorek – okej, ale po co na froncie ładować cssy nawet jeśli ktoś nie korzysta z ich „cuda”?
Byłem pewien że plugin Classic Editor to również przewidzi i dogłębnie zastąpi Gutenpierda.
No ale widzę że jednak trzeba WP pilnować od dziś dokładniej 😀 Jeszcze raz thx

Odpowiedz

Achtung

Autoptimize świetnie sobie poradzi z casem o który pytasz. Natomiast przed włączeniem tej wtyczki polecam zrobić listę wszystkich ładowanych na serwisie cssów i jsów przez inne pluginy, wyklucznie ich początkowo z auto optymalizacji i robienie tego na zasadzie: zdejmuję wykluczenie w Autoptimize – sprawdzasz czy wszystko działa z danego pluginu i na serwisie i dopiero następny. Sama wtyczka zajeb…. ale czasem potrafi nie ze swojej winy zrobić „KUKU” 😀 😀 😀

Odpowiedz