Optymalizacja WordPressa dla Wide Magazine

Wide Magazine to magazyn lifestylowy prezentujący fajne doświadczenia w centrum Bukaresztu.

Chociaż magazyn był hostowany na VPS, prędkość była niska. Koszt zarządzanego VPS wydawał się nieracjonalnie wysoki.

Szybkość ładowania witryny wyniosła 6,99 sekundy, elementy strony zajmowały łącznie 2,5 MB i wykonywały 113 żądań do serwera.

Strona główna się ładowała:

• 30 plików JS – 883,2 K
• 11 plików CSS – 138,3 K
• 22 obrazy CSS – 255,2 tys
• 13 obrazów – 1320,7 K
• 1 favikona – 16,9 tys

Wynik Google PageSpeed ​​Insights wyniósł 57/100, rekomendacje były następujące:

• włączyć kompresję
• wykorzystaj buforowanie przeglądarki
• optymalizować obrazy
• skraca czas odpowiedzi serwera

Raport optymalizacji

Nawet favikona ma za dużo KB. Zrobiliśmy test, pobraliśmy go i zaimportowaliśmy do favicon.cc, gdzie wygenerowaliśmy nowy. Otrzymaliśmy plik o wielkości 1,6 K (choć gorszej jakości).

Obrazy

Obrazy nie są zoptymalizowane i mogą być wyświetlane stopniowo w miarę przewijania strony, aby przyspieszyć ładowanie treści na ekranie (leniwe ładowanie).

Kolejnym problemem z wyświetlaniem obrazów jest to, że ładują się one w oryginalnym rozmiarze (1024*682px), a przeglądarka zmienia ich rozmiar na 676*450px.

Zalecane jest przesyłanie zdjęć bezpośrednio w rozdzielczości 676*450px lub ustawienie miniatury w tym konkretnym rozmiarze.

W ten sposób przeglądarka mniej działa przy zmianie rozmiaru zdjęć + zmniejsza się rozmiar strony (KB). Te dwa czynniki prowadzą do poprawy prędkości ładowania.

Na przykład zrobiliśmy losowe zdjęcie o rozmiarze 163 KB, zmieniliśmy rozmiar na 676 * 450 pikseli i po To zoptymalizowaliśmy to za pomocą jpegmini.com. Powstały plik miał 70,7 K.

Nawet pozostawiwszy rozdzielczość 1024*682 pikseli i po prostu optymalizując ją za pomocą JPEGMini, otrzymaliśmy plik o rozmiarze 90,3 KB, co stanowi znaczną poprawę w porównaniu z początkowymi 163 KB.

pliki JS

Następną rzeczą, której szukaliśmy, była liczba i całkowity rozmiar plików JS – 30 plików o łącznej wartości 883,2 KB.

I tutaj również znaleźliśmy pewne problemy.

JQuery był ładowany dwukrotnie – wersja 1.9.1 (92,6 KB) z code.jquery.com i wersja 1.8.3 (93,6 KB) ładowana z lokalnego folderu WordPress.

Ten sam problem z kodem Google Analytics – raz stara wersja ga.js (39,8K), raz nowa wersja analytics.js (20,3K).

To dodatkowe 133,4 tys.

Istnieje kilka plików JS ładowanych przez 2 wtyczki, które zasadniczo robią to samo, wyświetlając galerie zdjęć: NextGen Gallery i PrettyPhoto Media.

Wydaje się, że PrettyPhoto Media nie jest używane, więc można je usunąć, aby zaoszczędzić około 50 tys. i 2 żądań.

Wtyczki

Można wyeliminować 2 dodatkowe wtyczki, jQuery Mega Menu i Useful Banner Manager. Wygląda na to, że jQuery Mega Menu nie jest nigdzie używane. Przydatny Menedżer banerów służy do pojedynczego banera, który można wyświetlić za pomocą prostego kodu HTML wstawionego do widgetu tekstowego.

Wtyczka ShareThis, która dodaje przyciski udostępniania do postów, używa JS 125.1K. Można go zastąpić Jetpackiem, który wykorzystuje JS tylko 38,5 tys.

Facebook Like Box nie jest zaimplementowany w najbardziej efektywny sposób, przy użyciu JS wynoszącego 171,9 tys.

Najprostszą i najskuteczniejszą metodą jest skopiowanie kodu iframe ze strony Facebook Developers Like Box i wklejenie go do widżetu tekstowego, eliminując w ten sposób potrzebę JS.

Wtyczka Google Maps wykorzystuje cztery pliki JS o łącznej wielkości 60,7 KB.

Podobnie jak w przypadku Like Boxa, Google Maps można również zintegrować z ramką iframe.

Sprawdziłem ostatnie 10 postów i żaden nie ma zintegrowanej mapy, więc jeśli nie jest to standardowa funkcjonalność i jest używana rzadko, bardziej efektywne jest ręczne wprowadzanie map z ramkami iframe w postach.

Co zrobiliśmy

• zoptymalizowaliśmy obrazy
• ustawiamy progresywne ładowanie zdjęć na stronie
• zaimplementowaliśmy pamięć podręczną strony + pamięć podręczną bazy danych
• rozwiązaliśmy zduplikowany jQuery
• rozwiązaliśmy zduplikowany Google Analytics JS
• rozwiązaliśmy problem Facebook Like Box.

Wynik

Strona główna ma teraz 62 elementy o łącznej wartości 672,6 tys. – w porównaniu do 113 elementów o łącznej wielkości 2,5 MB, co oznacza poprawę o 73% .

Średnia prędkość ładowania wynosi teraz 1,5 sekundy – w porównaniu do 6,99 sekundy = poprawa o 78% .

Jeśli potrzebujesz szybszej witryny WordPress, nie wahaj się z nami skontaktować i zobacz, co możemy zrobić, aby Ci pomóc.