Jak zoptymalizować bloga, stronę na WordPressie pod kątem PageSpeed Insigths?

Ostatnio na drugim blogu pokazałem jak zoptymalizować stronę internetową i z 30/100 osiągnąć wynik bliski setki w PageSpeed Insights. Dzisiaj bierzemy się do pracy i optymalizujemy stronę www.mrcng.pl, która w teście wypada dosyć blado:

Pierwszy test mrcng.pl w PageSpeed Insights

Od czego zacząć optymalizację strony na WordPressie? Po pierwsze porządki w kokpicie!

Zaczynamy od zakładki Wtyczki > Zainstalowane wtyczki i usuwamy wszystkie niepotrzebne i zbędne pluginy, które nie tyle obciążają stronę (bo nie ma ich za wiele), ale przy ładowaniu strony wtyczki wczytują swoje style css i pliki js, co wydłuża czas ładowania strony.

15 wtyczek usuniętych – tak się zastanawiam, po kiego grzyba, aż tyle zainstalowałem? Pozostało kilka naprawdę niezbędnych i bardzo popularnych pluginów – pewnie zastanawiacie się jakie? O tym prawdopodobnie napiszę już niebawem – także bądźcie czujni!

Na koniec operacji czyścimy bazę mySQL za pomocą WP Optimize

I już jest nieco lepiej na mobile 66/100, a na desktopie 71/100.

Podejście do testu numer 2

Czas na optymalizację grafik na stronie

Co prawda na blogu nie użyłem zbyt wielu grafik, ale PageSpeed Insights wyrzuca kilka w raporcie jako zbyt duże i do zoptymalizowania. Jak to zrobić? Posiadam pakiet Adobe, Corela i kilka innych naprawdę dobrych kombajnów, dlatego z optymalizacją nie będzie problemu. 

Otwieramy Photoshopa, otwieramy daną grafikę, a następnie plik Zapisujemy do Internetu i “bawimy się” konfiguracją, aby drastycznie obniżyć rozmiar pliku przy jednoczesnej minimalnej stracie jakości!

Plik w nagłówku z 212 KB na 32 KB, plik w stopce z 113 KB na 16,3 KB oraz kilkanaście grafik dodanych do wpisów, które wyświetlają się w sekcji na głównej stronie!

I jak widać poniżej jest już naprawdę dobrze, jeszcze kilka usprawnień i będzie idealnie.

Porządki w motywie oraz w pliku functions.php

Kolejne działania zostaną przeprowadzone w obrębie motywu. 

UWAGA! Jeśli korzystasz z motywu płatnego, darmowego itd. to koniecznie wykonaj kopię bezpieczeństwa, aby w razie problemów móc przywrócić stabilną wersję sprzed zmian!

  • przenosimy wywoływanie fontów z Google, link do arkuszu css Font Awesome Pro 5 oraz skryptu Facebooka, Google Analytics do pliku footer.php
  • usuwamy niepotrzebnie wywoływane arkusze css, pliki js w functions.php, a następnie usuwamy te pliki z folderów /inc, /css, /js
  • ustawiamy asynchroniczne ładowanie skryptów w pliku functions.php

A teraz: minifikacja plików css, js oraz cache

Instalujemy wtyczkę Autoptimize aby wykonać minifikację plików css, js oraz kodu HTML.

Zaznaczamy HTML, CSS oraz JS a następnie klikamy Zapisz zmiany i opróżnij pamięć podręczną. Dodatkowo można na drugiej karcie zaznaczyć usunięcie wbudowanego kodu CSS do wyświetlania emoji, a także istnieje możliwość podania linków do plików JS, które mają wczytywać się asynchronicznie.

Na koniec prac instalujemy wtyczkę do cachowania strony – tutaj korzystam z LiteSpeed Cache, ponieważ polecają ją panowie z zenboxu! Plugin nie wymaga konfiguracji, instalujesz, uruchamiasz i cachowanie działa. I teraz wyniki prezentują się naprawdę znakomicie!

Pingdom pokazuje natomiast 94 / 100:

Wynik byłby pewnie zbliżony o setki gdyby zrezygnował z Google Analytics, możliwości udostępniania poprzez Facebooka, systemu disqus, ale chyba nie o to chodzi by mieć 100/100 i okroić stronę do zera z funkcjonalności.

Marcin Guzik

Marcin Guzik

Zafascynowany WordPressem. Użytkownik WP od 2008 roku, od wersji 2.4, albo 2.5 (nie pamiętam dokładnie). Piszę na: mrcng.pl. Zawodowo: jestem właścicielem Net-Factory. Prywatnie: mąż, ojciec, instruktor karate.

Opieka i serwis stron internetowych

Zajmij się swoim biznesem a my zajmiemy się Twoją stroną. Zapewniamy stałą opiekę oraz wyspecjalizowany serwis dla stron na WordPress oraz sklepów internetowych WooCommerce.

Wybierz coś dla siebie