173 - Przydatne narzędzia: Wtyczka Query Monitor

Cześć, z tej strony Maciej Kuchnik. Witam Cię w podcaście Rób WordPressa. Jeśli korzystasz z WordPressa, to na pewno znajdziesz tu coś dla siebie. Cześć, witam Cię w 173 odcinku podcastu Rób WordPressa. W dzisiejszym odcinku zajmiemy się wtyczką, która pomogła mi ostatnio rozwiązać kilka problemów na stronie, która dosyć wolno działała. W zasadzie to nie sama strona, a panel administracyjny. I ta wtyczka to Query Monitor. Zanim przejdziemy do tematu podcastu, to chwila dla partnera mojego podcastu, czyli marki Cyberfolks. Cyberfolks dostarcza domen i hosting pod wasze WordPressy.

Jeśli jesteście zainteresowani zakupem hostingu pod WordPressa, to z kodem podcast pisanym przez C możecie uzyskać 20% rabat na usługę hostingu WordPress. Oprócz hostingu zapraszam Was również na bloga CyberForce i na webinary, które są organizowane co jakiś czas, bo jest to doskonałe źródło wiedzy nie tylko o WordPressie, ale o różnych rzeczach związanych z biznesem w internecie, ze sprzedażą, z e-commercem, także na pewno znajdziecie coś dla siebie. A teraz przejdźmy do tematu odcinka, czyli do wtyczki Query Monitor. Jeśli robisz WordPressy już od jakiegoś czasu, to bardzo możliwe, że kiedyś korzystałeś z takiego narzędzia przeglądarkowego jak narzędzia deweloperskie, popularne DevTools.

I to jest taki, można powiedzieć, pakiet narzędzi, dzięki którym możesz zbadać pewne rzeczy na swojej stronie, posprawdzać jakieś rzeczy związane choćby z CSS, JavaScript, sprawdzić kwestie wydajności, ciastka jakie zapisuje dana strona. No ale to wszystko co widzisz w DevToolsach no to odnosi się raczej do frontendu strony i do tej części przeglądarkowej. Oczywiście no możesz podejrzeć jakieś tam połączenia, które lecą do serwera, parametry, nagłówki i tak dalej. Natomiast nie ma tam za bardzo informacji o tym, co się dzieje na serwerze. I jeśli miałbym tak w dwóch zdaniach powiedzieć, czym jest wtyczka Query Monitor, no to wtyczka Query Monitor to takie DevToolsy, które możemy zainstalować w swoim WordPressie, z tą różnicą, że pokazują nam sporo informacji związanych z backendem naszej strony, czyli z wszystkim tym, co dzieje się po stronie serwera.

Podczas wczytania strony, niezależnie czy jest to front czy jest to panel administracyjny, nasz WordPress wykonuje ileś tam różnych zapytań do bazy danych. I akurat w moim przypadku, o którym wspominałem na samym początku, Było tak, że za to wolne działanie panelu administracyjnego była odpowiedzialna w zasadzie jedna kwerenda do bazy danych, jedno zapytanie do bazy danych, które w skrajnych momentach potrafiło się wykonywać nawet około 30-35 sekund. I było to związane raz z rozmiarem bazy danych, a dwa z tym, że zapytania oparte o wiele pól postmeta Są bardzo nieefektywne jeśli chodzi o wydajność bazy danych, ale to myślę jest temat na inny odcinek podcastu.

Natomiast dzięki temu, że tutaj w tej zakładce miałem zgromadzone wszystkie te zapytania i co więcej też mogłem sobie posortować je po czasie wykonania. Wręcz ta wtyczka nawet sama oznacza pewne zapytania, które przekraczają jakiś tam limit czasowy. Nie pamiętam w tym momencie jaki, chyba 500 milisekund, to wtedy to zapytanie świeci się na czerwone i jest oznaczone jako wolne. No i tutaj też widzimy po pierwsze dokładnie to zapytanie, które zostało wykonane, więc możemy sobie je wykorzystać jeszcze gdzieś tam przy debugowaniu problemu i wrzucić na przykład W narzędziu typu phpMyAdmin, czy w konsoli, czy gdziekolwiek, gdzie możemy to zapytanie wykonać na bazie danych. Ale też oczywiście mamy informację, z którego komponentu całej naszej strony pochodzi to zapytanie, która funkcja to uruchomiła, czyli czy jest to na przykład zapytanie wykonywane przez sam silnik WordPressa, czy może przez jakąś naszą wtyczkę albo nasz motyw.

Oczywiście również wszystko mamy tutaj wylistowane w kolejności w takiej, jakiej jest to umieszczone na danej stronie. Oczywiście mamy również podgląd tych parametrów, także tutaj debugowanie tych rzeczy związanych z samym Gutenbergiem, z blokami, czy to tymi, Z Cora WordPressa, czy np. jakimiś customowymi blokami dodanymi przez nas. Mamy to wszystko podane na tacy, nie musimy gdzieś tam szukać, kombinować, tylko jest to w formie takiej tabeli wylistowane. W kolejnej zakładce, w zakładce Templates mamy wszystkie informacje dotyczące tego, który template aktualnie został załadowany. No bo jak wiecie, w WordPressie mamy coś takiego jak hierarchia plików w motywie i w zależności od tego, jaki to jest widok, czy to jest np. strona, widok archiwum.

Widok jakiejś konkretnej taksonomii, czy np. strona z jakimś tam wybranym slagiem, no to możemy to obsługiwać sobie przez jakiś tam konkretny plik, który został nazwany w konkretny sposób. Zresztą o hierarchii plików w motywie mówiłem już w podcaście, więc możesz wrócić do starszego odcinka. I tutaj mamy też wyświetlone wszystkie informacje na temat tego, który plik jest aktualnie załadowany, jakie klasy zostały dodane do tagu body i wszystko mamy jak na dłoni. Kolejne zakładki dotyczą skryptów i styli, które są dołączone do naszego WordPressa. Tutaj widzimy przede wszystkim to, czy te skrypty zostały załączone w nagłówku, w headerze, czy może w stopce strony. Oczywiście linki, uchwyty, tak zwane, dzięki którym możemy też wyrejestrować na przykład jakieś style, gdy nie są nam potrzebne, czy ewentualnie jakieś JavaScripty, które nie biorą udziału na jakiejś tam konkretnej stronie.

Następnie mamy zakładkę związaną z językami. Tutaj, gdybyśmy mieli jakieś problemy z tłumaczeniem, no to znajdziemy też garść cennych informacji. I kolejna zakładka, która może być przydatna w momencie, w którym nasza strona działa powoli. Jeśli na przykład operujemy na jakichś zewnętrznych API, to tutaj, jeśli to wszystko działa na zasadzie funkcji wordpressowych, takich jak WP Remote Get bodajże, Albo Remote Post, no to również znajdziemy tutaj informacje na temat takich zapytań gdzieś tam na zewnątrz, czyli sytuacja, w której WordPress łączy się np. do jakiejś zewnętrznej usługi i pobiera dane, czy wysyła jakieś dane do zewnętrznej usługi, no to również tutaj zobaczymy szczegóły, W kolejnej zakładce mamy informację o tym, czy jakieś transienty zostały użyte.

Transienty to jest powiedzmy taki wewnętrzny WordPressowy cache. O transientach też mówiłem już w swoim podcaście, więc jeśli by Cię to zainteresowało, no to zapraszam do starszych odcinków. I w ostatnich zakładkach mamy takie rzeczy związane głównie ze środowiskiem, w którym był uruchomiony ten plugin. I tutaj mam na myśli przede wszystkim wszystkie rzeczy związane z serwerem, czyli po pierwsze wersja PHP, To jaki to jest serwer, jakie mamy limity pamięci, limity uploadów i tak dalej. Wszystkie te rzeczy mamy wylistowane, również te rzeczy związane z bazą danych, z samym WordPressem, czyli wersja WordPressa, ustawienia w WPConfigu i tak dalej. To wszystko mamy tutaj w takiej ładnej formie zgrupowane, wylistowane i możemy sobie to po prostu przejrzeć.

Które funkcje zwracają true, a które false w danym kontekście. I tak jak mówiłem, mi akurat przydała się ta wtyczka w momencie, w którym miałem do znalezienia problem taki wydajnościowy, no bo panel WordPressa działał po prostu tragicznie źle. Ładowanie po 30-40 sekund można powiedzieć było standardem. Tam akurat w moim przypadku odpowiedzialna za to była Baza danych, w zasadzie nie tyle baza danych, co takie bardzo, bardzo nieoptymalne zapytanie, które wynikało z tego, że było to zapytanie wygenerowane przez klasę WP Query z wieloma parametrami dotyczącymi custom fieldów i niestety w takim połączeniu tych wielu warunków dało to po prostu finalnie zapytanie, które jest bardzo, bardzo nieefektywne.

A druga kwestia to w przypadku np. pisania jakiejś wtyczki, jakiegoś kodu ogólnie, Możemy sobie również pomóc, patrząc co się dzieje tam pod maską naszego WordPressa, choćby ta zakładka dotycząca hooków, czyli to w jakiej kolejności te hooki są uruchamiane, jakie konkretnie funkcje są podpięte do danych hooków. To wszystko może nam się przydać przy takim codziennym dewelopmencie, jeśli piszemy sobie wtyczkę czy motyw Mamy, powiedzmy, jakiś tam problem, czy zastanawiamy się, jak, co tam działa, no to ta wtyczka bez wątpienia może nam pomóc. Jest to też takie narzędzie, które jest bezproblemowe w użyciu, bo nie potrzebujemy tutaj konfigurować jakoś specjalnie środowiska, bo oczywiście są takie narzędzia do debugowania, typu np. xdebug czy coś takiego, ale to już wymaga troszkę więcej zachodu ze środowiskiem, z tym, gdzie to uruchamiamy.

A taką wtyczkę możemy sobie uruchomić nawet w formie takiego szybkiego audytu, powiedzmy, jeśli przyjdzie klient i powie, ej, słuchaj, moja strona działa wolno, rzuć okiem, co tam jest problemem, czemu to tak jest, no to taką wtyczkę możesz zainstalować W 3 minuty sprawdzić mniej więcej i bardzo możliwe, że już po takim bardzo, bardzo wstępnym audycie wyjdą tam jakieś problemy i będzie można zawęzić ten obszar poszukiwań do na przykład konkretnej wtyczki i tą wtyczkę albo wyeliminować, albo inaczej skonfigurować, albo coś tam zmienić, aby ten problem przestał istnieć. Na dzisiaj to wszystko. Jeśli jeszcze nie korzystałeś z tej wtyczki, a pracujesz z WordPressem w taki trochę bardziej zaawansowany sposób, bardziej od strony kodu, no to polecam, bo naprawdę może Ci zaoszczędzić sporo czasu na debugowaniu różnych trudnych problemów.

Zapraszam Cię również na moje social media, na mojego Instagrama i na mojego TikToka, gdzie publikuję od dwudziestu kilku dni codziennie jeden film z serii Ogarnij WordPressa. To są takie krótkie, szybkie porady po to, aby Twój WordPress był w lepszej kondycji. W tym odcinku to wszystko. Dzięki za wysłuchanie i słyszymy się w kolejnym odcinku podcastu Rób WordPressa. Cześć!