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

Chcesz przyspieszyć swoją witrynę WordPress? Chcesz poznać sztuczki optymalizacyjne WordPress, które pomogą Ci skrócić czas wczytywania Twojej witryny? W tym artykule pokażemy, 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 importowana dla SEO. Szybsza witryna ma większe zaangażowanie użytkowników, więcej odsłon i lepszą sprzedaż. W studium przypadku strangeloop odkryli, że jednosekundowe opóźnienie może kosztować 7% sprzedaży, 11% mniej odsłon i 16% spadek zadowolenia klientów.

Jak więc przyspieszyć działanie WordPressa?

Cóż, zamiast po prostu dzielić się listą wskazówek dotyczących szybkości, postanowiliśmy przeprowadzić pełne studium przypadku, aby pokazać wyniki z naszej witryny List25 wraz z tym, jak 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 zobaczów.

Treść witryny to głównie obrazki i filmy, które zajmują terabajty przepustowości, więc ogólna optymalizacja prędkości była dla nas kluczowa, aby utrzymać koszty na niskim poziomie, zmniejszyć liczbę porzuceń strony i poprawić czas spędzany na witrynie.

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

Podczas tej optymalizacji byliśmy w stanie przyspieszyć czas odpowiedzi naszego serwera, poprawić wynik wydajności szybkości strony, zmniejszyć liczbę całkowitych żądań i poprawić ogólny czas wczytywania.

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

Hosting WordPress

Dobry hosting ma kluczowe znaczenie dla szybkości działania twojej witryny internetowej. Gdy nasza witryna stała się bardziej popularna, po prostu przerosła naszą poprzednią firmę hostingową (HostGator).

Ich serwery po prostu nie były w stanie obsłużyć witryny o takim rozmiarze, ponieważ List25 otrzymuje dziesiątki milionów odsłon. HostGator jest świetny dla mniejszych witryn, ale nie dla tak dużych.

Przyjrzeliśmy się różnym zarządzanym opcjom hostingu WordPress i ostatecznie zdecydowaliśmy się skorzystać z SiteGround do hostingu List25, ponieważ oferowali najlepszą ogólną wartość dla tej witryny.

Natychmiast widać poprawę czasu odpowiedzi naszego serwera. Zeszliśmy z maksymalnego czasu odpowiedzi 442 ms do 172 ms. To poprawa o 256%.

Siteground stworzył narzędzia zwiększające wydajność dla konkretnych platform, takich jak WordPress, Joomla i Magento. W oparciu o platformę twojej witryny, specjalnie optymalizują twoje serwery, co skutkuje lepszą ogólną wydajnością.

Napisaliśmy artykuł o tym, kiedy powinieneś zmienić swój hosting, który mówi o 7 kluczowych wskaźnikach.

Jeśli chcesz zmienić hosta, zdecydowanie wypróbuj SiteGround. Użytkownicy WPBeginner otrzymują ekskluzywną 60% zniżkę na hosting + darmową domenę.

Pamięć podręczna Wtyczka

Jeśli chodzi o przyspieszenie WordPressa, pamięć podręczna jest drugim najważniejszym czynnikiem po twoim hostingu.

Zwykle, 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 pokazuje odwiedzającemu. Zajmuje to dużo zasobów. Pamięć podręczna oszczędza czas i zasoby.

Poniższy diagram przedstawia ten proces. W kategoriach laika, myśl o pamięci podręcznej jako o tworzeniu skrótu na pulpicie, który pomaga szybciej dotrzeć do pliku.

W przypadku witryny List25 używamy SiteGround SuperCacher, wtyczki stworzonej specjalnie dla własnych klientów. Ponadto dodali zaawansowane opcje dynamicznej pamięci podręcznej za pomocą Varnish (część ich wzmacniacza wydajności).

Jeśli nie korzystasz z Siteground, nie martw się. Możesz skonfigurować pamięć podręczna na twojej witrynie WordPress za pomocą 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 pamięci podręcznej strony, buforowania bazy danych i buforowania obiektów.

Ponieważ coraz więcej firm hostingowych specjalizuje się w WordPressie, zobaczymy więcej własnych rozwiązań pamięci podręcznej. Strony Pagely i WPEngine również oferują własny wbudowany system pamięci podręcznej.

CDN

Sieci dostarczania treści (CDN) mogą pomóc zwiększyć szybkość twojej witryny internetowej. Korzystamy z MaxCDN od początku istnienia List25, więc ta część nie uległa zmianie.

Napisaliśmy pełny artykuł na temat tego, czym jest CD N i dlaczego go potrzebujesz, wraz z infografiką.

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

Jeśli nie jesteś na rynku rozwiązania CDN premium, możesz skorzystać z Cloudflare.

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

Gdy dodajesz więcej 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 z nich, aby zmniejszyć liczbę żądań i przyspieszyć czas wczytywania. Więcej szczegółów na ten temat można znaleźć na stronie Jak wtyczki WordPress mają wpływ na czas wczytywania.

Podczas gdy teraz wczytujemy kilka małych funkcji, których możemy nie potrzebować w konkretnej sekcji witryny, kod ten jest przechowywany w pamięci podręcznej w CDN, a wyniki pokazują, że mniej żądań plików zapewnia lepszą wydajność niż wczytywanie kilku mniejszych plików JS.

Jest to coś, co trzeba robić regularnie, ponieważ używane wtyczki zmieniają się w czasie.

Sprite’y obrazków

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

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

1. wczytywania obrazka jako obrazu tła
2. Zdefiniować szerokość i wysokość elementu, dla którego potrzebujemy ikonki
3. Ustawić pozycję tła dla naszego obrazka, aby wczytywać potrzebną ikonkę

Na przykład, aby wczytywać ikonki mediów społecznościowych panelu 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 określić konkretną sekcję obrazka, którą chcemy wyświetlić:

W rezultacie tylko pierwsze żądanie dla tego pliku obrazka wykorzystuje przepustowość. Kolejne żądania do CDN dla obrazu spowodują wczytywanie wersji podręcznej (zazwyczaj lokalnej), a także konieczność zażądania tylko jednego obrazka zamiast 6 różnych ikonek społecznościowych.

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

Minifikacja kodu

Minifikacja kodu bierze udział w usuwaniu białych znaków i przerw między wierszami w celu zmniejszenia rozmiaru pliku, dzięki czemu jest on szybciej wczytywany na żądanie.

W przypadku List25 używamy SCSS, arkusza stylów opartego na składni(Intro to Sass). Pozwala nam to uporządkować nasze pliki CSS w kilku obszarach rozwoju w łatwym do odczytania układzie:

Używamy CodeKit, aby następnie skompilować pliki SCSS do jednego pliku CSS. CodeKit usuwa również białe znaki i podziały wierszy, aby zapewnić jak najmniejszy rozmiar pliku:

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

Optymalizacja obrazków

Zoptymalizowaliśmy nasze obrazki w dwóch obszarach: w naszym motywie WordPress i w przesłanej treści.

W przypadku naszego motywu WordPress użyliśmy CodeKit, aby zapewnić bezstratną kompresję wszystkich obrazków. Zapewnia to, że rozmiary plików są tak małe, jak to możliwe, bez utraty jakości.

Poinformowaliśmy również wszystkich naszych autorów o tym, jak ważne jest zapisywanie obrazków zoptymalizowanych pod kątem sieci. Zobacz nasz przewodnik na temat zapisywania obrazków zoptymalizowanych pod kątem stron internetowych.

Udostępnianie społecznościowe bez Javascript

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

Podczas gdy integracja skryptów tych czterech sieci społecznościowych nie wpłynęła na czas wczytywania strony w naszych testach, wyraźnie spowolniła witrynę, gdy zobaczyliśmy ją na urządzeniu mobilnym. Przyciski udostępniania społecznościowego pojawiały się po kilku sekundach, mimo że skrypty wczytywały się asynchronicznie, co powodowało przesuwanie się treści wpisów, gdy przyciski wczytywały się, by je zobaczyć.

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

Nadal jednak chcieliśmy wyświetlać całkowitą liczbę udostępnień wpisu we wszystkich mediach społecznościowych. Aby to zrobić, stworzyliśmy małą własną wtyczkę WordPress, która pobiera i zapisuje w pamięci podręcznej liczbę udostępnień z każdej sieci społecznościowej w tabeli meta wpisu. Liczby te są aktualizowane co 24 godziny, dzięki czemu czasochłonne zapytania nie są stale uruchamiane.

Możesz użyć interfejsu API, takiego jak Sharre, lub przeanalizować pływający pasek społecznościowy w celu dostosowania go do własnych potrzeb.

Korzystając z RUM (Real User Monitoring) firmy Pingdom, ta nowa wtyczka do udostępniania skróciła „prawdziwy” czas wczytywania strony z 6 sekund do nieco ponad 2 sekund. Zapewniło to również zmniejszenie liczby żądań skryptów stron trzecich.

Wynik

Znacząco poprawiliśmy szybkość naszej witryny. Czas wczytywania spadł z 2,2 sekundy do 1,22 sekundy.

Udało nam się znacznie skrócić czas odpowiedzi serwera.

Pomogło to skrócić czas poświęcany na pobieranie strony przez bota Google, co zwiększyło nasz współczynnik indeksowania.

Nasz ogólny współczynnik odrzuceń spadł o 7%, ponieważ witryna wczytywała się szybciej, a dzięki zmianie hosta byliśmy w stanie zmniejszyć liczbę błędów serwera.

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

Wnioski

Jak widać, szybsze wczytywanie witryny może zwiększyć zaangażowanie odwiedzających. Omówione przez nas techniki obejmowały szereg podstawowych i pośrednich ulepszeń, które można wdrożyć w celu optymalizacji twojej witryny WordPress.

Mamy nadzieję, że ten artykuł pomógł ci przyspieszyć twoją witrynę WordPress. Możesz również zapoznać się z naszym artykułem na temat 20 niezbędnych wtyczek WordPress na 2015 rok.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.