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:
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.
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.
