Kilka zagadnień z optymalizacji WordPressa
5 (100%) 2 ocen

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ę:
Optymalizacja WordPressa screen 1
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.

Forum dla programistów, wordpressowców - obrazek poglądowy

3
Dodaj komentarz

avatar
najnowszy najstarszy
Artex
Artex

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

Gutenpierd
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

Achtung
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” 😀 😀 😀

Ta strona korzysta z ciasteczek. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close