Przyspieszanie WordPressa: Jak zoptymalizowaliśmy wydajność List25 o 256%

Chcesz przyspieszyć swojego WordPressa? Chcesz poznać sztuczki optymalizacyjne WordPressa, które pomogą Ci skrócić czas ładowania witryny? W tym artykule pokażemy Ci, jak przyspieszyć WordPress, dzieląc się tym, jak zoptymalizowaliśmy naszą witrynę List25, aby zwiększyć wydajność.

Prawdopodobnie słyszałeś, że szybkość WordPressa jest ważna dla SEO. Szybsza witryna zapewnia lepsze zaangażowanie użytkowników, więcej wyświetleń stron i lepszą sprzedaż. W studium przypadku Strangeloop stwierdzono, że jednosekundowe opóźnienie może kosztować Cię 7% sprzedaży, 11% mniej wyświetleń stron i 16% spadek satysfakcji klienta.

Jak więc faktycznie przyspieszyć WordPressa?

Cóż, zamiast po prostu udostępniać listę wskazówek dotyczących szybkości, postanowiliśmy przeprowadzić pełne studium przypadku, aby pokazać wyniki z naszej witryny List25 wraz ze sposobem, w jaki to wszystko osiągnęliśmy.

Przegląd

List25 to blog rozrywkowy założony przez naszego założyciela Syeda Balkhi. Witryna ma ponad 1,5 miliona subskrybentów, a kanał YouTube ma ponad ćwierć miliarda wyświetleń.

Treść na stronie to głównie obrazy i filmy, które zużywają terabajty przepustowości, więc ogólna optymalizacja prędkości była dla nas kluczowa, aby obniżyć koszty, zmniejszyć liczbę porzuceń stron i zwiększyć czas spędzony na stronie.

Zanim rozpoczęliśmy optymalizację, nasza strona główna ładowała się 2,21 sekundy według Pingdom. Po zakończeniu pracy czas ładowania strony spadł do 1,21 sekundy (~45% szybciej).

Podczas tej optymalizacji udało nam się przyspieszyć czas odpowiedzi serwera, poprawić wynik wydajności strony, zmniejszyć liczbę całkowitych żądań i poprawić ogólny czas ładowania.

Przyjrzyjmy się technikom optymalizacji, które pomogły nam przyspieszyć naszą stronę WordPress.

Hosting WordPress

Posiadanie dobrego hostingu jest kluczowe dla szybkości Twojej strony internetowej. Ponieważ nasza strona stawała się coraz bardziej popularna, po prostu przerosliśmy naszą poprzednią firmę hostingową (HostGator).

Ich serwery po prostu nie były w stanie obsłużyć strony tej wielkości, ponieważ List25 odwiedza dziesiątki milionów użytkowników. HostGator jest świetny dla mniejszych stron, ale nie dla czegoś tej skali.

Przejrzeliśmy różne opcje zarządzanego hostingu WordPress i ostatecznie zdecydowaliśmy się na SiteGround do hostowania List25, ponieważ oferowali najlepszy stosunek jakości do ceny dla tej strony.

Natychmiast widać poprawę czasu odpowiedzi serwera. Przeszliśmy z maksymalnie 442 ms do 172 ms czasu odpowiedzi. To 256% poprawy.

Siteground stworzył wzmacniacze wydajności dla konkretnych platform, takich jak WordPress, Joomla i Magento. W zależności od platformy Twojej witryny, specjalnie optymalizują Twoje serwery, co przekłada się na lepszą ogólną wydajność.

Napisaliśmy artykuł o kiedy powinieneś zmienić hosting swojej strony internetowej, który omawia 7 kluczowych wskaźników.

Jeśli rozważasz zmianę hostingu, zdecydowanie wypróbuj SiteGround. Użytkownicy WPBeginner otrzymują wyjątkowy 60% rabat na hosting + darmową domenę.

Wtyczka buforująca

Jeśli chodzi o przyspieszenie WordPressa, buforowanie jest drugim najważniejszym czynnikiem po hostingu internetowym.

Zazwyczaj, gdy odwiedzający wchodzi na Twoją witrynę WordPress, Twój serwer przekazuje żądanie PHP do bazy danych MySQL, która znajduje żądaną stronę, generuje ją w locie i wyświetla odwiedzającemu. Zajmuje to dużo zasobów. Kiedy masz buforowanie, oszczędzasz czas i zasoby.

Poniższy diagram przedstawia proces. Mówiąc prościej, pomyśl o cachowaniu jako o tworzeniu skrótu na pulpicie, który pomaga szybciej uzyskać dostęp do pliku.

W przypadku strony List25 używamy SiteGround SuperCacher, wtyczki, którą specjalnie zbudowali dla swoich klientów. Ponadto dodali zaawansowane opcje buforowania dynamicznego za pomocą Varnish (część ich wzmacniacza wydajności).

Jeśli nie korzystasz z Siteground, nie martw się. Możesz skonfigurować pamięć podręczną na swojej stronie WordPress, korzystając z jednego z wielu dostępnych rozwiązań, takich jak W3 Total Cache lub WP Super Cache.

W WPBeginner używamy W3 Total Cache, który zapewnia szereg opcji buforowania stron, buforowania bazy danych i buforowania obiektów.

W miarę jak coraz więcej firm hostingowych specjalizuje się w WordPressie, będziemy widzieć więcej niestandardowych rozwiązań do cachowania. Pagely i WPEngine oferują również własny wbudowany system cachowania.

CDN

Sieci dostarczania treści (CDN) mogą pomóc w przyspieszeniu Twojej strony internetowej. Od początku List25 korzystamy z MaxCDN, więc ta część się nie zmieniła.

Napisaliśmy pełny artykuł o co to jest CDN i dlaczego go potrzebujesz, wraz z infografiką.

CDN pozwala nam serwować wszystkie pliki CSS, Javascript i obrazy z sieci dostarczania treści. Działa to poprzez określenie lokalizacji odwiedzającego witrynę i serwowanie treści z serwera najbliższego odwiedzającemu.

Jeśli nie szukasz płatnego rozwiązania CDN, możesz skorzystać z Cloudflare.

Łączenie plików w celu zmniejszenia liczby żądań HTTP

W miarę dodawania kolejnych wtyczek, często dodają one własne pliki JavaScript i CSS. Każdy dodatkowy plik to nowe żądanie HTTP.

Połączyliśmy te pliki JavaScript i CSS w jeden plik dla każdego, aby zmniejszyć liczbę żądań i przyspieszyć czas ładowania. Więcej szczegółów na ten temat można znaleźć w artykule jak wtyczki WordPress wpływają na czas ładowania.

Chociaż teraz ładujemy pewne małe funkcjonalności, których możemy nie potrzebować w konkretnej sekcji strony, ten kod jest buforowany w CDN, a wyniki pokazują, że mniejsza liczba żądań plików zapewnia lepszą wydajność niż ładowanie kilku mniejszych plików JS.

Jest to coś, co musisz robić regularnie, ponieważ wtyczki, których używasz, zmieniają się z czasem.

Sprite'y obrazów

Wykorzystaliśmy sprite obrazu, który połączył kilka ikon społecznościowych i stron w jeden obraz:

Kiedy potrzebowaliśmy wyświetlić konkretną ikonę, używaliśmy CSS do:

1. Załaduj obraz jako obraz tła
2. Zdefiniuj szerokość i wysokość elementu, dla którego potrzebujemy ikony
3. Ustaw pozycję tła naszego obrazu, aby załadować niezbędną ikonę

Na przykład, aby załadować ikony mediów społecznościowych paska bocznego, używamy:

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

Właściwości CSS background-position, width i height pomagają nam skierować konkretną sekcję obrazu, którą chcemy wyświetlić:

W rezultacie tylko pierwsze żądanie tego pliku obrazu zużywa przepustowość. Kolejne żądania do CDN dla obrazu spowodują załadowanie buforowanej (zazwyczaj lokalnej) wersji, a także potrzebę żądania tylko jednego obrazu w porównaniu do 6 różnych ikon społecznościowych.

Łącząc JavaScript, CSS i obrazy, znacznie zmniejszyliśmy liczbę żądań.

Minifikacja kodu

Minifikacja kodu polega na usuwaniu białych znaków i podziałów wierszy w celu zmniejszenia rozmiaru pliku, co przyspiesza jego ładowanie po żądaniu.

Dla List25 używamy SCSS, składni arkuszy stylów (Wprowadzenie do Sass). Pozwala nam to na strukturyzację naszych plików CSS w różnych obszarach rozwoju w łatwym do odczytania układzie:

Używamy CodeKit do kompilacji plików SCSS do jednego pliku CSS. CodeKit usuwa również białe znaki i łamanie linii, aby zapewnić jak najmniejszy rozmiar pliku:

W rezultacie udało nam się zmniejszyć rozmiar naszego pliku CSS o 28%.

Optymalizacja obrazów

Zoptymalizowaliśmy nasze obrazy w dwóch obszarach: nasz motyw WordPress i przesłane treści.

W przypadku naszego motywu WordPress użyliśmy CodeKit, aby zapewnić bezstratną kompresję wszystkich obrazów. Zapewnia to jak najmniejsze rozmiary plików, bez utraty jakości.

Poinformowaliśmy również wszystkich naszych autorów o znaczeniu zapisywania zoptymalizowanych pod kątem sieci obrazów. Zobacz nasz przewodnik po tym, jak zapisywać obrazy zoptymalizowane pod kątem sieci.

Udostępnianie społecznościowe bez JavaScript

Udostępnianie w mediach społecznościowych dla List25 jest naprawdę ważne, tak jak w przypadku każdej innej witryny. Jednak wtyczki do udostępniania w mediach społecznościowych mogą znacznie spowolnić Twoją witrynę.

Chociaż integracja skryptów tych czterech sieci społecznościowych nie wpłynęła na czas ładowania strony w naszych testach, wyraźnie spowolniła stronę internetową podczas przeglądania na urządzeniu mobilnym. Przyciski udostępniania społecznościowego pojawiały się przez kilka sekund, mimo że skrypty ładowały się asynchronicznie, co powodowało przesuwanie się treści posta w miarę ładowania się przycisków.

Aby rozwiązać ten problem, przeszliśmy na rozwiązanie (prawie) wolne od JavaScript. Każdy z przycisków udostępniania w sieci społecznościowej jest renderowany przez naszą niestandardową wtyczkę WordPress, a JavaScript motywu jest używany tylko do otwierania okna przeglądarki internetowej, gdy użytkownik kliknie przycisk.

Chcieliśmy jednak nadal wyświetlać całkowitą liczbę udostępnień posta we wszystkich sieciach społecznościowych. Aby to zrobić, stworzyliśmy małą niestandardową wtyczkę WordPress, aby pobierać i buforować liczbę udostępnień społecznościowych z każdej sieci społecznościowej do tabeli meta posta. Liczby te są aktualizowane co 24 godziny, co zapewnia, że czasochłonne zapytania nie są stale uruchamiane.

Możesz użyć API takiego jak Sharre lub rozebrać Floating Social Bar do personalizacji.

Korzystając z RUM (Real User Monitoring) Pingdom, ta nowa wtyczka udostępniania zmniejszyła „rzeczywisty” czas ładowania strony z 6 sekund do nieco ponad 2 sekund. Zapewniła również, że zmniejszyliśmy liczbę żądań wysyłanych do skryptów stron trzecich.

Wynik

Znacząco poprawiliśmy szybkość naszej strony. Czas ładowania przeszedł z 2,2 sekundy do 1,22 sekundy.

Udało nam się znacząco skrócić czas odpowiedzi naszego serwera.

Pomogło to skrócić czas poświęcony na pobieranie strony przez bota Google, co poprawiło nasze wskaźniki indeksowania.

Nasz ogólny współczynnik odrzuceń spadł o 7%, ponieważ strona ładowała się szybciej, a dzięki zmianie hostingu udało nam się zmniejszyć liczbę błędów serwera.

Jak można sobie wyobrazić, przy niższym współczynniku odrzuceń, czas spędzony na stronie również wzrósł o ponad 30 sekund.

Podsumowanie

Jak widać, szybsze ładowanie strony internetowej może poprawić zaangażowanie odwiedzających. Omówione techniki obejmowały szereg podstawowych i średniozaawansowanych ulepszeń, które można wdrożyć w celu optymalizacji witryny WordPress. 

Mamy nadzieję, że ten artykuł pomógł Ci przyspieszyć działanie Twojej witryny WordPress. Możesz również zapoznać się z naszym artykułem o 20 niezbędnych wtyczkach do WordPressa na rok 2015.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz Kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.