Aghiuta.com to blog poświęcony monitorowaniu mediów i polityce, którego autorem jest Florin Popescu. Oto nasza optymalizacja WordPressa, którą przeprowadziliśmy dla tego bloga.
Przed optymalizacją
Szybkość ładowania pierwszej strony wyniosła 4,3 sekundy.
Strona główna ma 86 żądań i 1,3 MB.
- 14 javascriptów – 505,6 tys
- Arkusz stylów 20 witryn – 41,1 tys
- 23 pliki – 601 tys
JS
Facebook Connect JS ma 174,4 KB i ładuje się w 0,69 sekundy. Facebook Like Box można wstawić jako widżet tekstowy, kopiując kod iframe ze Facebook Developers Like Box , co eliminuje plik JS.
Motyw Gonzo zawiera plik script.js o rozmiarze 101,3 KB. Zawiera kilka skryptów, takich jak:
- fitvidy
- elastyczny suwak
- złagodzenie jquery
- zakładki tabberowe
- rozciągnięcie pleców
- ładna fotokomórka
- elastyslid
W przypadku dużego obrazu tła używana jest funkcja Backstretch, ale co najmniej cztery pozostałe nie są używane: flexslider, Prettyphoto, elastislide i tabber tabber.
Fitvids sprawiają, że osadzanie wideo jest responsywne, więc prawdopodobnie jest potrzebne.
jQuery Easing powoduje pewien wpływ na kliknięcie (slajd z formularza wyszukiwania).
Dodatkowo jQuery Easing (8,1 K) ładuje się jeszcze raz za pomocą wtyczki LayerSlider (26K), która nie jest nigdzie używana.
Usunąłem nieużywane skrypty i rozmiar pliku zmniejszył się ze 101,3 KB do zaledwie 29 KB.
Przyciski udostępniania plików JS
Wtyczka umieszczająca przyciski udostępniania na stronie ma dość duży wpływ na czas ładowania:
- Plus 1 – 25,8 tys
- Interfejs API Google – 84,2 tys
- Twitter – 84,5 tys
- Pasek społecznościowy – 1,8 tys
Wszystko to można rozwiązać za pomocą innej wtyczki ( Jetpack ), która ładuje pojedynczy plik JS o wielkości 35 KB dla wszystkich przycisków.
jQuery można załadować z Biblioteki Google zamiast ładować z serwera.
Addfreestats JS wyświetla błąd 404. Zalecamy korzystanie z Google Analytics.
CSS
Istnieje zbyt wiele plików CSS (20), niektóre są załadowane za pomocą @import, co nie jest najlepszą opcją ze względu na wydajność.
Połączyliśmy to, co było możliwe (czasami łączenie plików js lub css powoduje błędy) i mamy teraz tylko 7 plików CSS.
Obrazy
Obrazy można lepiej zoptymalizować pod kątem Internetu (ta sama jakość, ale mniej KB) i myślę, że możemy zaoszczędzić co najmniej 5% każdego obrazu.
Na pierwszej stronie miniatury mają rozmiar 166 x 166 pikseli, ale załadowane zdjęcia są większe i wynoszą 300 x 300 pikseli.
Obrazy powinny być ładowane w rozmiarze 166x166px.
WordPress tworzy zbyt wiele miniatur:
- 960×677
- 150×105
- 300×211
- 550×387
- 700×426
- 300×300
- 50×50
- 290×166
- 620×310
- 620×350
- 186×186
- 620×220
Strona potrzebuje jedynie:
- 166×166 – miniatury pierwszej strony
- 50×50 – miniatury na pasku bocznym
- 134×77 – miniatury powiązanych postów
- 290×166 – miniatura archiwum kategorii
Pozostałe wymiary są bezużyteczne i zajmują miejsce na serwerze. Możemy je usunąć i wyeliminować niepotrzebny kod z motywu, który każe WordPressowi zrobić te kciuki.
Wdrożyliśmy Lazy Load, więc ładowane są tylko obrazy u góry strony (nad zakładką), co zapewnia znaczną poprawę postrzeganej szybkości.
Po optymalizacji
Po usunięciu niepotrzebnego kodu z plików JS, połączeniu plików CSS, poprawnej konfiguracji i zaimplementowaniu pamięci podręcznej strony i pamięci podręcznej bazy danych, witryna wysyła obecnie 48 żądań i ma 634,5 tys.
Szybkość ładowania pierwszej strony: 1,47 sekundy.
Osiągnęliśmy poprawę wydajności o około 60%.
Możemy dalej optymalizować, ale oznaczałoby to usunięcie niektórych elementów zapewniających określoną funkcjonalność pożądaną przez właściciela, więc zatrzymaliśmy się w tym miejscu.
Zostaw odpowiedź