Lista kontrolna optymalizacji WordPress

Optymalizacja WordPress to sztuka, aby Twoja witryna działała tak szybko, jak to możliwe, poprawiając komfort użytkowania, zmniejszając koszty serwera i zapewniając korzyści SEO.

Wiele badań pokazuje, że odwiedzający nie chcą czekać na załadowanie witryny i są skłonni opuścić witrynę, jeśli ładowanie trwa zbyt długo.

Szybko ładująca się strona internetowa jest dla Ciebie szczególnie ważna, jeśli masz sklep internetowy i chcesz poprawić swoje współczynniki konwersji.

Testy w Amazon wykazały podobne wyniki: co 100 ms wzrost czasu ładowania Amazon.com zmniejszał sprzedaż o 1% (Kohavi i Longbotham 2007)

Źródło: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

Szybkość ładowania Twojej witryny jest również bardzo ważna dla Twoich rankingów w Google, dzięki czemu optymalizacja witryny jest częścią Twojej strategii SEO.

Ale moja strona ładuje się bardzo szybko!

Jasne, że tak. Przynajmniej dla ciebie. Ale czy próbowałeś odwiedzić swoją stronę pierwszy raz od dłuższego czasu?

Kiedy poruszasz się po swojej witrynie, większość z nich zostanie zapisana w pamięci podręcznej przeglądarki. Jeśli chcesz uzyskać pierwsze wrażenia, wyczyść pamięć podręczną lub użyj zupełnie innej przeglądarki.

Jest wiele rzeczy do zrobienia, które mogą poprawić szybkość Twojej witryny WordPress, zacznijmy.

Skrypty minifikacyjne

Strony WordPress to połączenie HTML, CSS, JavaScript i obrazów. Kod HTML jest ładowany jako pierwszy, a następnie zawiera informacje o innych plikach arkuszy stylów CSS, plikach JavaScript i obrazach.

Każdy plik jest ładowany po kolei. Przeglądarka zwykle ma limit 2-4 „potoków”, co oznacza, że ​​przeglądarka ładuje jednocześnie maksymalnie 2-4 pliki z serwera, na którym są hostowane pliki.

Jeśli przejrzysz kod HTML swojej witryny WordPress, zauważysz wiele różnych plików .css i .js. Każdy z nich pochodzi zwykle z różnych wtyczek, z których każda dodaje do miksu pliki .js lub .css.

W niektórych przypadkach wtyczka może nawet wstrzyknąć style JavaScript lub CSS bezpośrednio do kodu HTML. Większość twórców wtyczek WordPress lub autorów motywów jest na tyle sprytna, by tego nie robić.

To tylko próbka ze zwykłej witryny WordPress. Kod HTML zawiera łącza do kilku innych plików. W tym prostym przykładzie ładowane są 4 pliki JavaScript, jeden po drugim.

<script type=”text/javascript” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress ma wewnętrzne funkcje, które umożliwiają autorom wtyczek i motywów osadzanie niezbędnych plików JavaScript i CSS.

wp_enqueue_script() i wp_enqueue_style(). Nazwy funkcji dają solidną wskazówkę, co robią. Używając jednego z nich do osadzenia niezbędnych plików, autorzy wtyczek i motywów kolejkują swoje pliki wraz ze wszystkimi innymi wtyczkami, a nawet samym WordPressem.

Możliwe jest również poinstruowanie funkcji dowolnych zależności innych bibliotek, zwykle plik JavaScript jest zależny od tego, który jQuery zostanie załadowany jako pierwszy.

Zwykle znajduję i instaluję wtyczkę minifikującą, aktywuję, a następnie sprawdzam, czy coś się nie psuje na stronie. Stamtąd idę określić, co konkretnie nie działa i czy potrzebuję tylko zmienić kilka ustawień, aby to naprawić.

Wtyczki minifikujące mają tendencję do wyłączania ustawień dla określonych plików, które nie odtwarzają się dobrze, gdy są ładowane z innymi lub do zmiany miejsca ładowania plików, w nagłówku lub stopce dokumentu.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Uwaga: w przykładowym kodzie przechowuję adres URL motywu w zmiennej, a następnie parsuję go do funkcji wp_enqueue_script. Zmniejsza to liczbę potrzebnych wywołań PHP i/lub baz danych, zwiększając szybkość.

W poszukiwaniu ekstremalnych prędkości ładowania mogłem zdecydować się na zakodowanie bezwzględnej ścieżki adresu URL, ale to ograniczyłoby motyw tylko do jednej domeny i utrudniłoby ponowne użycie kodu w innej witrynie.

Po zainstalowaniu wtyczki minifikującej arkusze stylów JavaScript i CSS są teraz łączone w mniejszą liczbę wywołań HTTP.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

To łączy 4 pliki w jeden „plik”/żądanie dla Twojej przeglądarki.

Natknąłem się na strony oparte na WordPressie, które miały załadowane 22 pliki .css i 15 .js. Wszystko na pierwszej stronie. Zmiana szybkości może być niesamowita, jeśli możesz zmniejszyć ilość plików zewnętrznych.

Chociaż skrypty minifikacyjne mają tendencję do znacznej poprawy szybkości, jest to również jedna z technik, których używam, które przynoszą najwięcej problemów podczas konfiguracji.

Zoptymalizuj plik header.php

Plik header.php w motywie jest wywoływany na każdej stronie w witrynie WordPress. Ten plik zwykle zawiera wiele elementów, które można zoptymalizować.

Klasycznym przykładem jest bloginfo('template_directory'), który jest zwykle wywoływany kilka razy w nagłówku, aby zwrócić adres URL motywu w celu dołączenia plików zewnętrznych.

Bardziej wydajną metodą jest wykonanie pojedynczego żądania adresu URL, a następnie zapisanie go jako zmiennej.

$template_directory = get_bloginfo('template_directory'); 

Adres URL katalogu motywu jest teraz przechowywany w zmiennej $template_directory.

Więcej przykładów, jak poprawić wydajność header.php można przeczytać w blogu WordPress header.php Porady dotyczące optymalizacji

Zmniejszenie liczby wtyczek

Kolejną ważną częścią optymalizacji WordPressa jest utrzymywanie jak najmniejszej liczby aktywowanych wtyczek. Dla wielu użytkowników kuszące jest testowanie i eksperymentowanie z różnymi wtyczkami, co rzeczywiście jest jedną z zalet WordPressa.

Jednak posiadanie wielu aktywnych wtyczek może zmniejszyć szybkość witryny WordPress. Wiele wtyczek ma jedną funkcję, którą równie łatwo można obsłużyć za pomocą fragmentu kodu umieszczonego w pliku functions.php.

W wielu przypadkach możesz potrzebować tylko jednej funkcji, ale używana wtyczka ma kilka innych opcji, których nigdy nie używasz.

Przeanalizuj każdą wtyczkę w swojej witrynie i upewnij się, że jej potrzebujesz. Jeśli ich nie potrzebujesz lub funkcjonalność można zastąpić kodem functions.php, dezaktywuj i usuń wtyczki.

Nie używaj obrazków – użyj CSS3

Projekty stron internetowych wykorzystują obrazy, aby pomóc w tworzeniu interfejsu użytkownika.

Po wprowadzeniu CSS, a w szczególności CSS3, wiele efektów używanych w interfejsach internetowych można naśladować za pomocą kodu CSS i HTML.

[box]Uwaga: Większość z tych efektów nie jest kompatybilna ze wszystkimi przeglądarkami, w szczególności ze starszym Internet Explorerem (tak, zawsze problematyczne dziecko dla każdego twórcy stron internetowych). Jeśli chcesz zoptymalizować szybkość swojej witryny, użycie efektów CSS może być szybkim i szybkim rozwiązaniem, ale nie jest dobrym wyborem, jeśli większość odbiorców klienta korzysta z przestarzałych przeglądarek.[/box]

Jeśli pracujesz dla klienta, którego celem jest B2C (business to consumer), powinieneś sprawdzić jego Google Analytics lub zapytać, jakiego rodzaju klientów mają (lub chcą kierować). Może to mieć wpływ na to, czy możesz używać efektów CSS3, jeśli odbiorcy zazwyczaj używają przestarzałych przeglądarek.

Kiedy Elegantthemes.com wydało nową wersję swojej wtyczki shortcode, miało to ogromny wpływ na czas ładowania moich klientów ze względu na efekty CSS3 i umieszczenie wielu obrazów w jednym sprite'ie.

Folder shortcodes/images, który kiedyś zawierał 90 obrazów, ma teraz pojedynczy sprite PNG, co zmniejsza ogólny rozmiar ze 140kb do 15kb!
(To około 90% zmniejszenie rozmiaru).

Obrazy do duszków

Optymalizacja sprite istniejącego motywu może być trochę czasochłonna, ale może również przynieść dużą poprawę szybkości działania Twojej witryny.

Sprite to pojedynczy obraz, zwykle w formacie .PNG, który zawiera kilka elementów projektu/układu wizualnego. Zamiast wczytywać każdy element graficzny z osobna, wszystkie obrazy są łączone w jeden lub jak najmniej sprite'ów.

Ta technika powinna być używana tylko do obrazów użytych do rozmieszczenia projektu, a nie do pojedynczych obrazów polecanych w postach, miniatur itp. Jedyne obrazy, które powinieneś spróbować umieścić w duszku, to obrazy, które są używane w Twojej witrynie na każdej stronie.

Zamiast wczytywania każdego pojedynczego obrazu (inne żądanie http), wszystkie obrazy są grupowane w jeden plik, a CSS wyświetlający każdy obraz jest modyfikowany, aby po prostu przesunąć tło do miejsca, w którym znajduje się potrzebna część.

SpriteMe.org to doskonały zasób do tworzenia duszków. Najlepszą metodą jest planowanie z wyprzedzeniem i budowanie duszków najpierw, ale jeśli potrzebujesz poprawić istniejącą stronę internetową, strona spriteme.org ma bookmarklet, który bardzo ułatwia ten proces.

Przykładowe style CSS w połączeniu z duszkiem:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Każdy styl CSS odwołuje się do tego samego pliku, ale położenie tła jest inne, pokazując różne części obrazu.

Dystrybucja – użyj CDN

Istnieją dwie główne zalety korzystania z CDN (Sieć dystrybucji treści) do hostowania plików motywów i elementów WordPress.

Twoje pliki są ładowane szybciej, ponieważ znajdują się w innej domenie. Dla każdej domeny obowiązuje limit 2–4 równoczesnych pobierania plików przez przeglądarkę.

Jeśli więc Twoje pliki są hostowane w innej domenie, przeglądarka sama je załaduje, w rzeczywistości przyspieszając ładowanie witryny, a także zmniejszając obciążenie domeny i hosta.

Inną korzyścią jest to, że jeśli korzystasz z głównej sieci CDN, będą mieli serwery rozmieszczone na całym świecie, które następnie wykrywają, skąd pochodzi odwiedzający, a następnie udostępniają im pliki z najbliższego serwera w ich sieci.

Właściwy serwer dla Twojej witryny

Serwer hostujący stronę musi znajdować się blisko grupy docelowej. Jeśli więc strona jest skierowana na rynek niemiecki, najlepiej jest znaleźć serwer z firmą hostingową w Niemczech, a przynajmniej w Europie Środkowej.

Ma to duży wpływ na odwiedzających, którzy ładują się z serwera znacznie bliżej miejsca, w którym się znajdują, co znacznie przyspiesza przeglądanie witryny.

Ma to również wpływ na SEO, nie tylko dlatego, że strona ładuje się szybciej, ale także dlatego, że zwiększa jej znaczenie dla niemieckich odbiorców, a zatem powinna mieć wyższą pozycję w rankingu.

Rzeczywisty efekt pod względem SEO jest dyskusyjny, ale jeśli chcesz poprawić wydajność swoich stron internetowych, warto się zastanowić.

Jest to dobrze znane SEO, ale po skonfigurowaniu witryny rzadko zdarza się, aby została przeniesiona na inny serwer z powodów czysto SEO. Warto jednak mieć to na uwadze przy kolejnym projekcie.

Napraw błędy 404

Powinieneś regularnie sprawdzać swoją witrynę, aby upewnić się, że nie masz błędu 404 – i tak nie znalazłeś stron. Zmniejszenie złych linków w witrynie może zmniejszyć obciążenie serwera i zapewnić lepsze wrażenia użytkownika. Nie tylko mogą zniknąć linki i strony, ale czasami literówka lub inny rodzaj błędu może prowadzić do treści nie znalezionych w Twojej witrynie.

Wskazówka: sprawdź ten fragment kodu, aby automatycznie przekierować 301 nie znalezionych stron.

[skrzynka]
Ta strona jest daleka od ukończenia i nie zawiera jeszcze wszystkich szczegółów optymalizacji WordPressa. Celem jest stworzenie zasobu porad i wskazówek, które pozwolą jak najlepiej wykorzystać witrynę WordPress.

Niektóre lub większość sztuczek będzie trudna do wdrożenia, jeśli nie jesteś programistą, ale każda z nich sprawi, że Twoja witryna WordPress będzie działać szybciej.
[/skrzynka]

Lista kontrolna

To jest lista kontrolna, proszę zauważyć, że każda strona internetowa i projekt są inne. Nie wszystkie kroki można zastosować na wszystkich stronach internetowych.