Dlaczego Szybkość Strony WordPress Jest Tak Ważna?
Zanim przejdę do konkretów, krótkie przypomnienie, dlaczego powinieneś dbać o szybkość swojej strony:
- Pozycjonowanie w Google (SEO): Google uwielbia szybkie strony! Szybkość ładowania jest jednym z czynników rankingowych. Chociaż nie przeceniaj znaczenia szybkości w pozycjonowaniu: to jeden z czynników, a nie jedyny czynnik.
- Doświadczenie użytkownika (UX): Nikt nie lubi czekać. Wolna strona = zirytowani użytkownicy, którzy szybko ją opuszczą.
- Współczynnik konwersji: Im szybciej strona się ładuje, tym większa szansa, że użytkownik wykona pożądaną akcję (np. zakup, zapis do newslettera).
Krok 1: Podstawy Jak przyspieszyć stronę WordPress
Zanim zastosujesz zaawansowane techniki, upewnij się, że masz za sobą te podstawy:
- Optymalizacja Obrazów: Używaj formatu WebP zamiast JPG czy PNG. WebP oferuje znacznie lepszą kompresję przy zachowaniu wysokiej jakości. Możesz skorzystać z wtyczek lub tak, jak zalecam konwertować zdjęcia do webp przed wgraniem ich na stronę. Nie przesyłaj obrazów o gigantycznych rozmiarach! Dostosuj rozmiar obrazu do miejsca, w którym będzie wyświetlany na stronie.
- Czcionki Google (Tylko Elementor Pro): Jeśli używasz Elementora Pro, wyłącz domyślne ładowanie czcionek Google. Elementor domyślnie pobiera czcionki z serwerów Google za każdym razem, gdy strona jest ładowana. Zamiast tego, dodaj własne czcionki lokalnie. To znacznie przyspieszy ładowanie. Ta opcja nie jest dostępna w darmowej wersji Elementora.
- Wykonaj kopię zapasową: zanim wprowadzisz jakiekolwiek zmiany na stronie, wykonaj kopię zapasową. ZAWSZE
Krok 2: Darmowe Wtyczki, Które Przyspieszą Twojego WordPressa
Przechodzę do sedna! Oto darmowe wtyczki, które wykorzystam do optymalizacji:
WP Meteor
To bardzo prosta wtyczka, którą właściwie pozostawiasz na domyślnych ustawieniach. Jedyne, co możesz próbować, to w zakładce WP Meteor/Settings, suwakiem zmieniać “Delay until First interaction”. Zrób to, gdy na końcu w testach – wyniki szybkości nie będa zadowalające.
PhastPress
Ta wtyczka ponownie jest praktycznie pozostawiana na domyślnych ustawieniach. Kwestia “lazy load” jest zwykle dyskusyjna. “Lazy load” może powodować przesunięcia tekstu podczas ładowania strony, co źle wpływa i na seo i na user experience. Ja wyłączam, ale Ty zdecyduj samodzielnie, która wersja jest lepsza dla Ciebie. Poniżej na zdjęciach przedstawiam Ci, w jaki sposób to wygląda u mnie na stronie.
Code Snippets
Ostatnia wtyczka jest potrzebna do wklejania fragmentów kodu na stronie. Może być ta, ale mogą być też inne wtyczki oferujące tę samą funkcjonalność. Możesz też wklejać fragmenty kodów bezpośrednio w motywie. Pamiętaj zawsze o wykonaniu kopii zapasowej zanim zaczniesz dokonywać zmian w strukturze strony www.
Krok 3: Fragmenty Kodu (Code Snippets) od Web Squadron
Z racji tego, że kody, które będziemy używać, nie są wymyślone przeze mnie, to byłoby nietaktem używanie ich na mojej stronie. Kody są autorstwa Imrana Siddiga i skorzystaj z jego strony, by wkleić kody. Ja tylko poniżej wytłumaczę, jakie kody zalecam wklejać.
Wklejanie kodów
Aby dodać kod do strony przejdź kolejno do:
- wtyczki / code snippets / fragmenty kodu
- następnie kliknij “dodaj nowy” na górze podstrony
- w miejscu tytułu wprowadź dowolną nazwę, która będzie dla Ciebie jasna
- w miejscu kod – dodaj wybrany kod ze strony Web Squadron
- następnie kliknij przycisk “zapisz i aktywuj”
- ponów procedurę dla każdego kodu
Wybrane kody od Web Squadron
Zalecam dodanie następujących kodów ze strony Web Squadron:
- Reduce Revisions to 3 to improve WordPress Optimization – WordPress domyślnie za każdym razem, gdy klikniesz “Zapisz” zapisuje kolejną wersję podstrony. Ten kod usuwa wcześniejsze wersje i zostawia tylko 3 ostatnie.
- Stop Lazy Load – wspomniałem już o tym wyżej. Lazy load może powodować przesunięcia treści podczas ładowania strony.
- Remove Unused JS – usunięcie kodu JavaScript, który nie jest używany.
- Add Purge Site to Admin Bar – dodaje przycisk “Purge Cache”, który pozwala na czyszczenie pamięci podręcznej
Krok 4: Testowanie Wyników i Dalsza Optymalizacja
Po wykonaniu powyższych kroków, koniecznie przetestuj prędkość swojej strony za pomocą narzędzi takich jak:
- Google PageSpeed Insights
- GTmetrix
Ja zawsze używam Google Page Speed Insights, ale możesz skorzystać także z innych dostępnych na rynku.
Dodatkowe Wskazówki:
- Hosting: Wybierz dobry hosting, który jest zoptymalizowany pod kątem WordPressa. Tani hosting współdzielony może być wąskim gardłem. Nie musisz mieć najlepszego hostingu, ale jeżeli jest on słaby, to najlepsze optymalizacje nie pomogą
- CDN (Content Delivery Network): Rozważ użycie CDN, aby serwować treści statyczne (obrazy, CSS, JavaScript) z serwerów zlokalizowanych bliżej użytkowników. Jest to raczej rozwiązanie stosowane, gdy jesteś maniakiem przyspieszenia strony albo działasz w bardzo konkurencyjnej branży, gdzie każdy aspekt SEO i UX ma znaczenie
- Minimalizm: Ogranicz liczbę wtyczek i używaj tylko tych, które są naprawdę potrzebne. Im mniej wtyczek, tym lepiej. Unikaj też nadmiernej liczby animacji – ani to nie jest dobre dla szybkości ani dla czytelności. Trendem są subtelne animacje.
- Motyw: Wybierz lekki i dobrze zoptymalizowany motyw WordPress. jeżeli masz stronę zbudowaną z Elementorem, to nie jest tajemnicą, że najlepiej będzie współpracował motyw Hello.
Podsumowanie i Linki
Dzięki tym prostym krokom, możesz znacząco przyspieszyć swoją stronę WordPress, poprawić jej pozycję w Google i zapewnić lepsze doświadczenia użytkownikom. Pamiętaj, że optymalizacja to proces ciągły. Regularnie testuj prędkość swojej strony i wprowadzaj ulepszenia.
Linki:
Kanał Web Squadron (Imran Siddig)
Film
Cały proces jak przyspieszyć stronę WordPress krok po kroku wraz ze sprawdzeniem rezulatatów przed i po przygotowałem na poniższym filmie.
