16 sposobów na przyspieszenie swojej witryny WordPress już dziś!

Przyspieszenie witryny to jedyny gwarantowany sposób na zwiększenie ruchu i zwiększenie sprzedaży.

W 2010 roku Google potwierdził, że szybkość witryny jest jednym z ponad 200 wskaźników wpływających na rankingi wyszukiwania. Ich dane pokazują, że gdy strony ładują się powoli, ludzie spędzają mniej czasu. Jednak większość z nas nie poświęca zbyt wiele uwagi przyspieszaniu naszych stron internetowych.

Być może dostrojenie wewnętrznych wyzwalaczy prędkości w witrynie WordPress jest zbyt zniechęcające.

Aby rzucić światło na skrócenie czasu ładowania o połowę, zaprosiliśmy Stavrosa Papadakisa, aby przedstawił swój proces przyspieszania stron internetowych klientów.

Jeśli czas ładowania jest dłuższy niż 3 sekundy lub rozmiar strony przekracza 2 MB, może to być duży problem, który kosztuje Cię pieniądze, zarówno w przypadku utraconej sprzedaży, jak i opłat za serwer.

Istnieje wiele bezpłatnych narzędzi online, takich jak WebPageTest, GTmetrix, Google PageSpeed ​​Insights i Pingdom, które mogą pomóc w zidentyfikowaniu problemów powodujących powolne ładowanie i złe wrażenia użytkownika witryny.

Oto jak przejąć kontrolę nad wydajnością swojej witryny.

1. Włącz kompresję

Kompresja plików CSS i Javascript pomoże przeglądarkom szybciej je pobrać.

Kompresja Gzip może łatwo zmniejszyć rozmiary plików z 200+KB (nieskompresowane) do mniej niż 40KB (skompresowane). Korzystaj z tego, o ile Twój serwer ma włączoną kompresję.

Możesz być pewien, że Twoi użytkownicy drastycznie przyspieszą działanie Twojej witryny zarówno na komputerach stacjonarnych, jak i telefonach komórkowych, włączając kompresję na Twoim serwerze.

Dodaj następujący fragment kodu w pliku .htaccess, aby włączyć kompresję plików statycznych.

AddOutputFilterByType DEFLATE application/x-httpd-php text/php text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript text/x-js

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Dołączanie nagłówka Vary User-Agent

2. Zoptymalizuj swoje obrazy

Obrazy są głównym winowajcą spowalniania witryny. Zawsze optymalizuj swoje obrazy (zwłaszcza te powyżej 50 KB) przed przesłaniem ich do swojej witryny.

Optymalnym sposobem ich optymalizacji jest użycie programu Photoshop lub innego oprogramowania do obróbki obrazów. Zapisuj obrazy do internetu z jakością obrazu do 60%.

Powinieneś także używać obrazów progresywnych dla plików JPG, ponieważ progresywne renderowanie obrazów zapewnia płynniejszą obsługę.

Sprawdź poniższe dwa obrazy, wyglądają tak samo, ale lewy nie jest zoptymalizowany i ma 80 KB, a ten po prawej jest zoptymalizowany i ma tylko 18 KB, 4 razy mniejszy.

Obraz niezoptymalizowany

Zoptymalizowany obraz

3. Przenieś pliki JavaScript do stopki

Chociaż biblioteki Javascript, takie jak jQuery, Mootools i Prototype, są niesamowite, ponieważ rozszerzają funkcjonalność Twojej witryny, mogą również blokować renderowanie Twoich stron.

Przeglądarki nie zaczynają wczytywać treści, dopóki nie zostaną pobrane wszystkie pliki JavaScript w nagłówku strony.

Prostym sposobem rozwiązania tego problemu jest przeniesienie plików JavaScript, które nie są wymagane podczas początkowego renderowania strony, z nagłówka do stopki strony.

Jeśli używasz Wordpressa, możesz przenieść wywołania skryptu z header.php do footer.php w swoim motywie i użyć true jako czwartego parametru za każdym razem, gdy używasz funkcji wp_enqueue_script.

Przenieś skrypty JS do stopki strony

4. Upewnij się, że masz włączoną funkcję KeepAlive

Apache (najczęściej używany serwer do wspólnych planów hostingowych w tanich firmach hostingowych) ma świetną „funkcję” o nazwie KeepAlive, która utrzymuje otwarte połączenia dla więcej niż jednego żądania HTTP.

Upewnij się, że KeepAlive jest aktywowany w Twojej firmie hostingowej.

Jeśli masz dostęp do pliku httpd.conf, włącz KeepAlive, upewniając się, że masz w nim „KeepAlive On”, w przeciwnym razie po prostu dodaj następujący fragment kodu w pliku .htaccess.

 <ifModule mod_headers.c>
 Zestaw słuchawkowy Połączenie utrzymuj przy życiu
</ifModule>

Włącz KeepAlive dla swojej witryny

5. Scalanie plików CSS – wbudowane małe pliki CSS

Przeglądarki obsługują jednocześnie tylko tyle żądań HTTP. Po osiągnięciu tego limitu niektóre pliki czekają, podczas gdy inne są pobierane.

Łącząc wszystkie pliki CSS w jeden plik CSS, strona renderuje się znacznie szybciej.

Jeśli masz pliki CSS, które mają mniej niż 2 KB, powinieneś je wbudować zamiast tworzyć dodatkowe żądanie HTTP.

Wordpress ma kilka świetnych wtyczek, takich jak Autoptimize i Better WordPress Minify, które mogą pomóc w łączeniu lub nawet wbudowaniu arkuszy stylów CSS.

Scal pliki CSS i wstaw je

6. Włącz buforowanie

Buforowanie radykalnie poprawia czas ładowania stron, które nie zmieniają się tak często.

Dzięki włączeniu buforowania w witrynie Twój kod nie generuje ciągle tej samej strony. W ten sposób wrażenia użytkownika są znacznie lepsze, a Twój serwer może obsłużyć większy ruch.

W3 Total Cache, WP Super Cache i WP Fastest Cache to tylko krótki wybór darmowych wtyczek Wordpress, które zapewniają różne rodzaje buforowania, np. buforowanie stron, buforowanie bazy danych i buforowanie obiektów.

Wtyczka W3 Total Cache zapewnia buforowanie stron, baz danych i obiektów

7. Użyj sieci dostarczania treści

Niezależnie od tego, czy korzystasz z systemu CMS, takiego jak Wordpress, Joomla, Magento, Drupal, czy też niestandardowej witryny PHP lub HTML, gorąco polecam skonfigurowanie sieci dostarczania treści (CDN).

CDN to rozproszony system serwerów wdrożonych w wielu centrach danych w Internecie.
Gdy klient odwiedza Twoją witrynę, zawartość statyczna, taka jak obrazy i pliki CSS, jest dostarczana z serwera, który jest im najbliżej, dzięki czemu renderowane są znacznie szybciej.

Nawiasem mówiąc, obciążenie twojego serwera jest również drastycznie zmniejszone dzięki CDN.

CloudFlare to między innymi bezpłatny dostawca CDN i DNS. MaxCDN to także świetna i niedroga opcja optymalizacji czasu ładowania Twojej witryny. Oboje są tak dobrzy, jak tylko mogą.

CloudFlare to bezpłatna sieć dostarczania treści

8. Zminimalizuj liczbę żądań HTTP

Im więcej masz żądań HTTP, tym wolniejszy będzie czas ładowania Twojej witryny.

Połącz swoje pliki CSS, scalaj pliki JavaScript i łącz obrazy w sprite'y danych, aby wykonać jak najmniej żądań HTTP.

Kiedy pracuję na stronie klienta, jednym z moich głównych celów jest zminimalizowanie liczby żądań HTTP ładowanych na stronę.

Łącz pliki CSS, używaj sprite’ów danych lub identyfikatorów URI danych w celu zmniejszenia liczby żądań HTTP

9. Wybierz odpowiedni typ pliku dla swoich obrazów

Użyj JPG jako domyślnego. To najmniejszy i najszybciej ładujący się typ pliku.

Używaj formatu PNG tylko do obrazów z tekstem (JPG rasteryzuje tekst, przez co jest rozmazany) lub jeśli potrzebujesz przezroczystego tła.

Zminimalizuj lub nawet wyeliminuj ciężkie pliki GIF, ponieważ mogą one drastycznie spowolnić czas ładowania witryny.

Chociaż poniższe dwa obrazy wyglądają tak samo, jest między nimi ogromna różnica. Ten po lewej jest zapisany jako plik png i waży 102 KB, a drugi to plik JPG o rozmiarze 18 KB, zgadza się, 6 razy lżejszy!

Obraz zapisany jako PNG

Obraz zapisany jako JPG

10. Napraw błędy 404

Wierz lub nie, ale każdy brakujący plik generuje błąd HTTP 404 i zdecydowanie spowolni czas ładowania Twojej witryny.

Zawsze sprawdzaj, czy podczas renderowania stron nie ma błędów 404, aby uzyskać jak najkrótszy czas ładowania.

Jeśli Twój „wodospad” (sposób, w jaki przeglądarka renderuje Twoją witrynę) wygląda tak (uważaj na jakiekolwiek czerwone wiersze), to błędy 404 rujnują czas ładowania Twojej witryny.

Błędy 404 mogą zrujnować czas ładowania Twojej witryny

11. Zadbaj o rozmiar swojej strony

Chociaż wyświetlanie dużej ilości treści na każdej stronie jest kuszące, powinieneś starać się ograniczyć rozmiar strony do minimum.

W przypadku telefonów komórkowych jest to jeszcze ważniejsze. Konieczność załadowania witryny 2MB przez telefon komórkowy w połączeniu 3G to recepta na katastrofę. Weź pod uwagę, że użytkownicy nie lubią czekać dłużej niż 2-3 sekundy na wyrenderowanie strony.

Czy nowy obraz wnosi wartość do witryny? Jeśli nie, nie powinieneś dodawać go do swojej witryny. Takie proste.

Zmniejsz rozmiar strony

12. Skaluj obrazy

Nigdy nie skaluj obrazów w locie w HTML. Utwórz miniaturę obrazu, którego potrzebujesz, w dokładnych wymiarach, które będą używane na twoich stronach.

Na przykład, jeśli masz obraz o wymiarach 1200 x 675 pikseli i chcesz użyć „skalowanej” wersji o rozdzielczości 480 pikseli x 270 pikseli, utwórz nową wersję oryginalnego obrazu o zmienionym rozmiarze i użyj jej zamiast tego.

Ten obraz łączy się z „dużą” wersją obrazu za pomocą przeskalowanej miniatury zamiast zmiany wymiarów obrazu w HTML.

Miniatura (obraz skalowany) Łącza do obrazu o dużym rozmiarze

13. Wykorzystaj buforowanie przeglądarki

Google zaleca minimalny czas przechowywania w pamięci podręcznej wynoszący jeden tydzień, a najlepiej do jednego roku w przypadku zasobów, które rzadko się zmieniają.

Ustaw zasady buforowania dla wszystkich odpowiedzi serwera na pliki statyczne (obrazy, CSS i JavaScript), aby przeglądarka mogła określić, czy może ponownie użyć wcześniej załadowanego pliku, czy nie.

Zwykle odbywa się to poprzez dodanie tego fragmentu kodu w pliku .htaccess dla współdzielonych planów hostingowych

<ifmodule mod_expires.c>
WygasaAktywny wł.
ExpiresByType text/html „dostęp plus 7200 sekund”
ExpiresByType image/gif „dostęp plus 864000 sekund”
ExpiresByType image/jpg „dostęp plus 864000 sekund”
ExpiresByType image/png „dostęp plus 864000 sekund”
ExpiresByType text/css „dostęp plus 864000 sekund”
ExpiresByType text/javascript „dostęp plus 864000 sekund”
ExpiresByType aplikacja/javascript „dostęp plus 864000 sekund”
</ifmodule>

14. Zoptymalizuj swoją bazę danych

Jeśli masz witrynę opartą na bazie danych (która obejmuje WordPress i wszystkie inne witryny oparte na CMS), zoptymalizuj swoją bazę danych.

Monitoruj swój kod pod kątem powolnych zapytań. Jeśli korzystasz z VPS lub serwera dedykowanego, włącz buforowanie zapytań i zoptymalizuj konfigurację serwera bazy danych.

Chociaż pełna optymalizacja bazy danych może być naprawdę trudnym i czasochłonnym procesem, phpMyAdmin oferuje kilka podstawowych opcji optymalizacji poprzez „optymalizację tabel”.

Zoptymalizuj swoją bazę danych przez phpMyAdmin

15. Wybierz mądrze swoją firmę hostingową

Wybierz plan hostingowy, który odpowiada potrzebom Twojej witryny.

Większość firm hostingowych stosuje ograniczenia w swoich wspólnych planach hostingowych i hostuje setki witryn na serwer, aby ograniczyć opłaty do minimum.

Dostajesz to, za co płacisz. Jeśli masz witrynę e-commerce, ciężki CMS, duży ruch lub skoki ruchu, unikaj wspólnych planów hostingowych.

Gorąco polecam firmę hostingową WordPress zarządzaną przez WPEngine dla dowolnej witryny WordPress eCommerce lub dowolnej witryny WordPress ze skokami ruchu.

16. Zatrudnij eksperta

Moim celem jest dostarczenie wystarczającej ilości informacji, aby rozpocząć optymalizację szybkości witryny.

Ale jak wiesz, najlepiej jest zatrudnić eksperta, gdy ważne jest, aby zrobić to dobrze.

Jeden z moich klientów skontaktował się ze mną w celu optymalizacji czasu ładowania swojej strony internetowej. Wczytywanie stron witryny trwało długo, a odwiedzający narzekali, ponieważ wrażenia użytkownika były złe.

Zaktualizowałem WordPressa do najnowszej wersji, przeprowadziłem migrację strony internetowej do niezawodnej firmy hostingowej i zastosowałem poprawki optymalizacji prędkości, aby osiągnąć najlepszy możliwy czas ładowania.

Czas ładowania wzrósł z 8,2 do 2,6 sekundy. Pierwszy bajt i czas rozpoczęcia renderowania zostały zoptymalizowane odpowiednio do 0,147 i 0,384 sekundy, a liczba żądań HTTP została zmniejszona z 96 do 78. Google PageSpeed ​​Insights został również zoptymalizowany do 88%.

Współczynnik odrzuceń spadł o około 10% w ciągu kilku tygodni. Klient i co ważniejsze użytkownicy serwisu byli zadowoleni, a utrzymanie serwisu stało się wspaniałym doświadczeniem.

Podsumowując, optymalizacja czasu ładowania Twojej strony to sytuacja korzystna dla Ciebie i Twoich potencjalnych klientów.

Wyobraź sobie, jak szczęśliwi będą Twoi użytkownicy, gdy zobaczą superszybkie czasy ładowania!

Jeśli chcesz mnie zatrudnić, chętnie pomogę. Zobacz moje portfolio i skontaktuj się ze mną na AwesomeWeb już dziś!

Wniosek

Wszystko się poprawia, gdy Twoja witryna ładuje się szybciej.

Google stawia Cię wyżej. Użytkownicy są szczęśliwsi. Zmniejszają się współczynniki odrzuceń. Wzrastają współczynniki konwersji. I robisz więcej sprzedaży.

Przestań tracić ruch i pieniądze. Już dziś zacznij optymalizować czas ładowania swojej witryny.

Dzisiaj oferuję specjalny pakiet o wartości 497 USD dla czytelników IncomeDiary. To połowa mojej normalnej stawki. Jeśli Twoja witryna spełnia moje minimalne wymagania, zajmę się wszystkim wymienionym w tym poście. Wspomnij o IncomeDiary w swojej wiadomości, a wkrótce się z Tobą skontaktuję. Rozpocznij rok 2015 z najszybszą stroną internetową, jaką możesz mieć!

Zatrudnij mnie tutaj lub znajdź innych freelancerów zajmujących się optymalizacją prędkości w AwesomeWeb tutaj.