W artykule:
Czy chcesz przyspieszyć swoją witrynę WordPress? Chcesz poznać sztuczki optymalizacyjne WordPress, które pomogą Ci skrócić czas ładowania 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 prędkość WordPress jest ważna dla SEO. Szybsza strona ma lepsze zaangażowanie użytkowników, więcej przeglądów stron i lepszą sprzedaż. W studium przypadku strangeloop odkryli, że jednosekundowe opóźnienie może kosztować 7% sprzedaży, 11% mniej odsłon stron i 16% spadek satysfakcji klienta.
Więc jak faktycznie przyspieszyć WordPress?
Cóż, zamiast udostępniać listę wskazówek dotyczących prędkości, postanowiliśmy przeprowadzić pełne studium przypadku, aby pokazać wyniki z naszej strony 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. Strona ma ponad 1,5 miliona subskrybentów, a kanał YouTube ma ponad ćwierć Miliard widoki.
Treści na stronie to głównie obrazy i filmy, które zajmują terabajty przepustowości, więc ogólna optymalizacja prędkości była dla nas kluczowa, aby obniżyć koszty, zmniejszyć liczbę porzucanych stron i poprawić czas na stronie.
Zanim rozpoczęliśmy optymalizację, nasza strona domowa ładowała się 2.21 sekund zgodnie z Pingdom. Po zakończeniu czas ładowania strony spadł do 1.21 sekundy (~45% szybciej).
Podczas tej optymalizacji byliśmy w stanie przyspieszyć czas reakcji serwera, poprawić nasz wynik wydajności szybkości strony, zmniejszyć liczbę całkowitych żądań i poprawić ogólny czas ładowania.
Rzućmy okiem na techniki optymalizacji, które pomogły nam przyspieszyć naszą witrynę WordPress.
Hosting WordPress
Posiadanie dobrego hosta internetowego ma kluczowe znaczenie dla szybkości witryny. Ponieważ nasza strona stała się bardziej popularna, po prostu wyrosliśmy z naszej poprzedniej firmy hostingowej (HostGator).
Ich serwery po prostu nie mogły obsłużyć witryny tej wielkości, ponieważ List25 otrzymuje dziesiątki milionów odsłon. HostGator jest świetny dla mniejszych witryn, ale nie dla czegoś o takiej wielkości.
Przyjrzeliśmy się różnym zarządzanym opcjom hostingu WordPress i ostatecznie skończyło się na użyciu SiteGround dla Hosting List25, ponieważ oferowali najlepszą ogólną wartość dla tej witryny.
Możesz natychmiast zobaczyć poprawę czasu odpowiedzi naszego serwera. Przeszliśmy od max 442ms do 172ms czasu reakcji. To poprawa o 256%.
Siteground zbudował wzmacniacze wydajności dla określonych 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 należy zmienić hosting, który mówi o kluczowych wskaźnikach 7.
Jeśli chcesz zmienić hosty, zdecydowanie spróbuj SiteGround. Użytkownicy WPBeginner otrzymują ekskluzywną zniżkę 60% na hosting + bezpłatną domenę.
Wtyczka Buforująca
Jeśli chodzi o przyspieszenie WordPress,buforowanie jest drugim najważniejszym czynnikiem po hostingu.
Zwykle, gdy odwiedzający odwiedza Twoją witrynę WordPress, Twój serwer przekazuje żądanie PHP do bazy danych MySQL, która znajduje żądaną stronę, generuje ją w locie i pokazuje ją odwiedzającemu. To wymaga wielu zasobów. Gdy masz buforowanie, oszczędza czas i zasoby.
Poniższy diagram podkreśla proces. W kategoriach laików pomyśl o buforowaniu jako tworzeniu skrótu na pulpicie, który pomaga szybciej dostać się do pliku.
Dla witryny List25 używamy Siteground SuperCacher, wtyczki, którą specjalnie zbudowali dla swoich klientów. Ponadto dodano zaawansowane dynamiczne opcje buforowania przy użyciu lakieru (część wzmacniacza wydajności).
Jeśli nie jesteś na Siteground, nie martw się. Możesz skonfigurować pamięć podręczną w swojej witrynie 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.
Ponieważ więcej firm hostingowych specjalizuje się w WordPress, zobaczymy więcej niestandardowych rozwiązań buforowania zbudowany. Pagely i WPEngine oferują również własny wbudowany system buforowania.
CDN
Sieci dostarczania treści (CDN)mogą pomóc zwiększyć szybkość witryny. Używamy MaxCDN od początku List25, więc ta część się nie zmieniła.
Napisaliśmy pełny artykuł na temat tego, co to jest CDN i dlaczego go potrzebujesz wraz z infografiką.
CDN pozwala nam obsługiwać wszystkie 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 jesteś na rynku rozwiązania CDN premium, możesz użyć Cloudflare.
Łączenie plików w celu zmniejszenia żądań HTTP
Gdy dodajesz więcej wtyczek, często dodają one własne pliki JavaScript i CSS. Każdy dodatkowy plik jest nowym żądaniem HTTP.
Połączyliśmy te pliki JavaScript i CSS w jeden plik dla każdego, aby zredukować żądania i przyspieszyć czas ładowania. Możesz zobaczyć więcej szczegółów na ten temat, w jaki sposób wtyczki WordPress wpływają na czas ładowania.
Podczas gdy ładujemy teraz niewielką funkcjonalność, której możemy nie potrzebować w określonej sekcji witryny, kod ten jest buforowany w CDN, a wyniki pokazują, że mniej żą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ę w godzinach nadliczbowych.
Obrazy Sprites
Wykorzystaliśmy sprite obrazu, który połączył kilka ikon społecznościowych i witryn w jeden obraz:
Ilekroć potrzebowaliśmy wyświetlić konkretną ikonę, użyliśmy CSS do:
- Załaduj obraz jako obraz tła
- Określ szerokość i Wysokość elementu, dla którego potrzebujemy ikony
- Ustaw pozycję tła dla 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_socjal_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;}
Na background-position, szerokość oraz wysokość Właściwości CSS pomagają nam ukierunkować konkretną sekcję obrazu, którą chcemy wyświetlić:
W rezultacie tylko pierwsze żądanie dla tego pliku obrazu wykorzystuje przepustowość. Kolejne żądania do CDN dotyczące obrazu spowodują załadowanie buforowanej (zazwyczaj lokalnej) wersji, a także konieczność żądania tylko jednego obrazu w porównaniu z 6 różnymi ikonami społecznościowymi.
Łącząc JavaScript, CSS i obrazy razem, znacznie zmniejszyliśmy liczbę żądań.
Minifikacja Kodu
Minifikacja kodu polega na usunięciu białych spacji i podziałów linii, aby zmniejszyć rozmiar pliku, co przyspiesza ładowanie na żądanie.
Dla List25 używamy SCSS, arkusza stylów opartego na składni (Intro do Sass). Pozwala nam to na uporządkowanie naszych plików 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 spacje i podziały linii, aby upewnić się, że plik jest tak mały, jak to możliwe:
W rezultacie udało nam się zmniejszyć rozmiar pliku CSS o 28%.
Optymalizacja Obrazu
Zoptymalizowaliśmy nasze obrazy w dwóch obszarach: nasz motyw WordPress i przesłane treści.
Dla naszego motywu WordPress użyliśmy CodeKit, aby zapewnić, że wszystkie obrazy zostały bezstratnie skompresowane. Zapewnia to, że rozmiary plików są tak małe, jak to możliwe, bez utraty jakości.
Zapoznaliśmy również wszystkich naszych pisarzy na temat znaczenia zapisywania obrazów zoptymalizowanych pod kątem Internetu. Zobacz nasz przewodnik, Jak zapisywać obrazy zoptymalizowane pod kątem Internetu.
Udostępnianie społecznościowe bez obsługi Javascript
Udostępnianie społecznościowe dla List25 jest naprawdę ważne, podobnie jak każda inna strona internetowa. Jednak wtyczki do udostępniania społecznościowego mogą znacznie spowolnić Twoją witrynę.
Podczas gdy integracja tych czterech skryptów sieci społecznościowych nie wpłynęła na czas ładowania strony w naszych testach, widocznie spowolniła witrynę internetową podczas przeglądania na urządzeniu mobilnym. Przyciski udostępniania społecznościowego zajęłyby kilka sekund, pomimo asynchronicznie ładujących się skryptów, co powodowało, że treść postu poruszała się po przyciskach załadowanych do widoku.
Aby rozwiązać ten problem, przeszliśmy na (prawie) wolne od Javascript rozwiązanie. 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.
Jednak nadal chcieliśmy wyświetlić całkowitą liczbę udziałów, które post miał we wszystkich sieciach społecznościowych. Aby to zrobić, stworzyliśmy małą niestandardową wtyczkę WordPress do pobierania i buforowania liczby akcji społecznościowych z każdej sieci społecznościowej do tabeli Meta Post. Liczby te są aktualizowane co 24 godziny, dzięki czemu czasochłonne zapytania nie są stale uruchomione.
Możesz użyć interfejsu API takiego jak Sharre lub przeanalizować pływający pasek społecznościowy w celu dostosowania.
Korzystając z RUM Pingdom (Real User Monitoring), ta nowa wtyczka share zmniejszyła “prawdziwy” czas ładowania strony z 6 sekund do nieco ponad 2 sekund. Zapewniło to również, że zmniejszyliśmy liczbę żądań dotyczących skryptów stron trzecich.
Wyniki
Znacznie poprawiliśmy szybkość naszej strony. Czas ładowania wzrósł z 2,2 sekundy do 1,22 sekundy.
Udało nam się znacznie skrócić czas reakcji serwera.
Pomogło to skrócić czas pobierania strony przez bota Google, który pomógł naszemu indeksowi.
Nasz ogólny współczynnik odrzuceń spadł o 7%, ponieważ witryna ładowała się szybciej, a dzięki zmianie hostów byliśmy w stanie zmniejszyć błędy 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.
Wniosek
Jak widać szybsze ładowanie strony internetowej może poprawić zaangażowanie odwiedzających. Techniki, które omówiliśmy, obejmowały szereg podstawowych i pośrednich ulepszeń, które można wdrożyć w celu optymalizacji witryny WordPress.
Mamy nadzieję, że ten artykuł pomógł Ci przyspieszyć witrynę WordPress. Możesz również sprawdzić nasz artykuł o 20 musi mieć wtyczki WordPress dla 2015.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
