WP Rocket – instrukcje dotyczące przyspieszenia strony internetowej

Instrukcje i wskazówki dotyczące konfiguracji wtyczki WP Rocket , która może wyraźnie przyspieszyć działanie witryny WordPress .

Co to jest pamięć podręczna

Pamięć podręczna to słowo rzucane ostatnio tak często, że nawet moja babcia powoli o tym mówi. Pamięć podręczna to nazwa tymczasowego lub pamięć podręczna komputera i serwera.

Zamiast konieczności przeładowywania całej strony internetowej (tak efektywnie pobieranej z serwera), z tej pamięci ładowane są pewne części, które się nie zmieniają.

Tym samym następuje zmniejszenie przepływu danych między klientem a serwerem, co wiąże się z mniejszą ilością przesyłanych danych, a w szczególności szybszym ładowaniem strony.

Pamięć podręczna po stronie serwera

Każdy przeciętny serwer ma swój własny system pamięci podręcznej. Serwer zazwyczaj zapamiętuje zapisane obrazy, pliki CSS i JS, które są wspólne dla całej strony.

Zamiast zawsze wysyłać zapisane logo do klienta, wysyła tylko informację, że klient ma już zapisane logo i dlatego może z niego korzystać.

Dotyczy to większości obrazów na stronie. Być może kiedykolwiek miałeś problem z wyświetlaniem starego obrazu nawet po zastąpieniu go nowym. Więc winna jest pamięć podręczna.

Podczas tworzenia strony internetowej musimy oczywiście wyłączyć pamięć podręczną, ponieważ musimy natychmiast zobaczyć wprowadzone zmiany. Można to zrobić po stronie serwera, w panelu sterowania hostingu.

Pamięć podręczna po stronie strony

Możemy też ustawić cache po stronie WordPress . Chociaż nazywa się to pamięcią podręczną, w rzeczywistości wykonywana jest tylko optymalizacja używanych kodów i innych plików.

W tym celu możemy wykorzystać kilka wtyczek. Niektóre z nich są bezpłatne i w większości obejmują tylko podstawową funkcjonalność. Wiele z nich ma płatne wersje lub jest opłacane od podstaw.

W tym artykule skupimy się na wtyczce WP Rocket, która jest płatna, ale z czystym sumieniem mogę ją zaliczyć do najlepszych wtyczek do optymalizacji prędkości.

Jak zdobyć rakietę WP? jaka jest jego cena?

WP Rocket otrzymujemy wyłącznie z ich oficjalnej strony internetowej . Pod względem ceny mamy do wyboru trzy plany – SINGLE za 49 USD rocznie, wykorzystamy go na jednej stronie internetowej. Użyjemy planu 99 USD PLUS dla trzech witryn i planu INFINITE z 249 USD rocznie dla nieskończonej liczby witryn (idealne dla programistów, którzy tworzą wiele witryn).

Po wypełnieniu informacji rozliczeniowych i płatności otrzymamy do pobrania plik .zip, który zawiera naszą wtyczkę i licencję. Wtyczkę wgrywamy na naszą stronę przez wp-admin (Wtyczki-> dodaj nową-> wgraj wtyczkę). Po udanej instalacji nie zapomnij aktywować wtyczki.

💡 Wskazówka:Wybór odpowiedniego hostingu ma kluczowe znaczenie dla szybkiej ⏱ strony internetowej. Zalecam obstawianie sprawdzonej jakości ➡️ AttHost, Wedos lub Bluehost.

Instrukcje dotyczące konfiguracji wtyczki WP Rocket

W praktyce już kilka razy spotkałem się, że osoba zainstalowała wtyczkę cache i nie zauważyła żadnej zmiany. Oczywiście. Posiadanie wtyczki pamięci podręcznej jest fajne, ale to jak posiadanie prawa jazdy (ale nie prowadzenie). Aby poprawić wydajność i zoptymalizować prędkość, będziemy musieli skonfigurować WP Rocket.

Dostęp do ustawień WP Rocket można uzyskać w wp-admin za pośrednictwem głównej lewej kolumny w sekcji Ustawienia –> Rakieta WP . Klikamy. Zobaczymy tablicę ogłoszeń i wiele różnych, na pierwszy rzut oka przerażających opcji. Przeanalizujmy je jeden po drugim.

Panel

Tablica ogłoszeń. Tutaj wyświetlane są podstawowe informacje o Twoim koncie, licencjach itp. Mamy tutaj opcję włączenia „Analizy rakiet”, co oznacza, że niektóre dane będą wysyłane do WP Rocket HQ. Może to pomóc twórcom wtyczek.

Pamięć podręczna

Podstawowe ustawienia pamięci podręcznej.

Możemy włączyć/wyłączyć buforowanie mobilne , polecam pozostawienie go włączone. Możemy również oddzielić pliki pamięci podręcznej osobno dla dużych komputerów i osobno dla telefonów komórkowych. Osobiście nigdy tego nie robię, bo nie widzę powodu.

Włącz pamięć podręczną dla zalogowanych użytkowników WordPress włącza pamięć podręczną dla zalogowanych użytkowników. Niepotrzebna w przypadku prostszych i prezentacyjnych stron, ale jeśli masz stronę, na której logują się użytkownicy (np. e-sklep), ta funkcja może się przydać. W zasadzie zalogowany użytkownik nie korzysta z cache (przyjmuje się, że zalogowany użytkownik jest administratorem serwisu, który powinien zobaczyć stronę bez cache, aby móc od razu sprawdzić zmiany). Gdy zaznaczysz to pole, pamięć podręczna będzie również używana przez zalogowanych użytkowników.

Cache Lifespan – tutaj ustawiamy czas, po jakim cache powinien zostać automatycznie wyczyszczony. Po kliknięciu w „Minuty” wystarczy wybrać godzinę i dzień. Zawsze zostawiam ustawioną wartość domyślną, ale oczywiście to zależy od Ciebie. Tak więc, jeśli kiedykolwiek dokonasz zmiany, nie zacznie się ona od razu pojawiać, musisz ręcznie „opróżnić” pamięć podręczną, tj. Zresetować ją. Jeśli zapomnisz, zostanie automatycznie zresetowany po określonym tutaj czasie.

Pamięć podręczną można wyczyścić ręcznie za pomocą panelu administracyjnego (czarny pasek u góry), znaleźć w nim element WP Rocket i kliknąć Wyczyść pamięć podręczną, aby opróżnić całą pamięć podręczną. Spowoduje to wyświetlenie zmian wszędzie, nawet niezalogowanym użytkownikom.

Optymalizacja plików

Prawdopodobnie najciekawsza część. Tutaj ustawiamy, w jaki sposób WP Rocket powinien przetwarzać pliki tworzące witrynę.

Podstawowe ustawienia

Zminimalizuj HTML — minimalizuje kod źródłowy HTML strony, usuwając podziały wierszy lub niepotrzebne spacje. Mało skuteczny, ale praktycznie nie ma tu nic złego. Zawsze go włączam.

Optymalizuj czcionki Google – zdecydowanie zostaw to włączone, poprawi to ładowanie czcionek Google, z których prawie na pewno korzystasz.

Uwaga: W nowszych wersjach WP Rocket ustawienia podstawowe nie są już dostępne (nie mają już znaczenia).

Pliki CSS

CSS to język, w którym, w uproszczeniu, ustawiany jest wygląd strony. W idealnym wszechświecie każda strona zawiera jeden plik .css, w którym skonfigurowane są wszystkie elementy wizualne. Ale to z pewnością nie ma zastosowania w WordPress . Ponieważ WordPress jest złożoną platformą i składa się z motywów i wtyczek, prawie każda wtyczka ma własne pliki CSS (i rzadko tylko jeden). W rezultacie ładujesz kilkadziesiąt plików CSS za każdym razem, gdy strona jest ładowana.

Zminifikuj pliki CSS – minimalizuje pliki .css, usuwając wcięcia i spacje. Podobny do minifikacji HTML. Ponieważ plików CSS jest więcej, to ustawienie jest niemal koniecznością.

Połącz pliki CSS – to ustawienie spowoduje przejrzenie wszystkich plików .css używanych na stronie i utworzenie jednego dużego pliku (tylko jednego). Zbliżmy się więc do stanu idealnego wszechświata – ładujesz tylko jeden plik .css, choć większy. Zdecydowanie konieczne jest włączenie tej opcji.

Optymalizuj dostarczanie CSS – ja też włączam to ustawienie. Spowoduje to, że CSS będzie ładowany „asynchronicznie”, to znaczy niezależnie od pozostałej zawartości strony internetowej.

Oczywiście, żeby nie było to takie proste, ustawienie kombinacji plików CSS może powodować błędy wizualne na stronie (tzw. bugi). W takim przypadku należy dowiedzieć się, co jest przyczyną danego problemu i dołączyć konkretny plik .css do „Wykluczonych plików CSS”.

Pliki JavaScript

Podobnie jak w przypadku CSS możemy również optymalizować pliki Javascript.

Minifikuj i łącz zachowują się tak samo jak CSS

Usuń jQuery Migrate – jQuery Migrate to pomocnicza funkcja jQuery, która ostrzega o niezgodnościach między wersjami jQuery i wtyczkami lub motywami innych firm. Od WordPress 5.5 nie jest już używany, więc możesz go wyłączyć.

Odroczone ładowanie JavaScript — zasadniczo działa tak samo jak optymalizacja dostarczania CSS — skrypt JavaScript zostanie załadowany niezależnie od pozostałych plików na stronie.

Uwaga: Jeśli korzystasz z protokołu http2, nie ma potrzeby łączenia plików CSS lub JS.

Media

W tej sekcji skonfigurujemy obrazy, filmy i inne treści multimedialne.

Leniwy ładunek

Lazy Load to funkcjonalność spowalniająca niepotrzebne ładowanie obrazów, które nie są od razu widoczne na stronie. Spowoduje to znaczny wzrost prędkości, ponieważ obrazy zaczną się ładować dopiero, gdy zbliżysz się do ich lokalizacji. Wchodzę na www.wp.sk i na samym dole w stopce jest logo wp.sk, które właściwie jest obrazkiem.

Lazy load spowoduje wczytanie strony bez tego obrazu. Dopiero gdy zbliżymy się do stopki kręcąc kółkiem myszy, obraz jest ładowany w tle i wyświetlany. Do tego czasu nie jest to potrzebne. Bez leniwego ładowania cała strona jest ładowana od razu na początku.

Włącz dla obrazów – włącza Lazy load dla obrazów.

Włącz dla iframes/video – włącza leniwe ładowanie dla video i iframes. Iframe jest często używany m.in. w przypadku kanału na Facebooku lub podczas wstawiania filmu z YouTube lub treści z innej witryny.

Zastąp iframe YouTube obrazem podglądu – zastępuje wyładowane wideo obrazem podglądu (np. jeśli szybko przewiniemy do miejsca, w którym wideo powinno być i nie zdążyło się wczytać w tle).

Emoji

Emotikony są raczej niepotrzebną częścią WordPress , ale można je znaleźć na niektórych blogach. W rzeczywistości są to emotikony (emotikony), które WordPress automatycznie konwertuje na formę graficzną. Jeśli go nie potrzebujesz, możesz je łatwo wyłączyć.

Osadzenia

Wyłącz osadzania WordPress – uniemożliwia innym „przeciąganie” części Twojej witryny do witryn zewnętrznych. Polecam zostawić to włączone.

Zgodność z WebP

Ustawia buforowanie obrazów WebP. WebP to stosunkowo nowy format obrazu przeznaczony głównie do wyświetlania w Internecie. Obraz jest mniejszy, ale jakość porównywalna z jpg. Każdy plik jpg i png można przekonwertować do WebP za pomocą jakiegoś konwertera i przesłać na stronę. Jeśli jednak nie korzystasz z WebP, nie jest konieczne włączanie tego ustawienia.

Wstępne ładowanie

Jak wspomniałem powyżej, WP Rocket działa w stylu tworzenia niestandardowych plików (głównie .css i .js), które są następnie wykorzystywane w działaniu witryny na żywo, zamiast oryginalnych. Preload to funkcja, która uruchamia generowanie tego pliku. To samo dotyczy regeneracji już utworzonych plików w przypadku zmiany na stronie (np. dodanie nowego artykułu itp.).

Tutaj polecam pozostawienie włączonej opcji „Aktywuj wstępne ładowanie”, a także „Aktywuj wstępne ładowanie pamięci podręcznej opartej na mapie witryny”, „Mapa witryny XML SEO Yoast” (jeśli korzystasz z wtyczki Yoast SEO), a także „Włącz wstępne ładowanie linków”. To wystarcza na 99% stron internetowych.

Zasady zaawansowane

Tutaj ustawimy zaawansowane zasady dla WP Rocket. Na przykład tutaj możemy określić podstrony, pliki itp. które nigdy nie powinny być buforowane. Możemy ustawić wyjątek podczas buforowania plików cookie lub na podstawie używanej przeglądarki.

W ramach WP Rocket możliwe jest wykorzystanie tzw symbole wieloznaczne, czyli symbol wieloznaczny z gwiazdką *. Jeśli potrzebujemy m.in. aby wykluczyć całą wtyczkę z pamięci podręcznej, powiedzmy Contact form 7, nonsensem jest wymienianie 10 plików .css pod sobą, które znajdują się w folderze contact-form-7. Zamiast tego użyjemy symbolu wieloznacznego, czegoś takiego:

Wp-content/plugins/contact-form-7/*, który zapewnia, że cały folder (a tym samym cała wtyczka) pozostanie bez pamięci podręcznej.

Baza danych

W tej sekcji możemy w niektórych przypadkach ładnie przyspieszyć działanie witryny, ale to zbiera swoje żniwo. Tutaj możemy wykonać tzw oczyszczenie bazy danych z pozornie niepotrzebnych danych. WP Rocket zaleca wykonanie kopii zapasowej bazy danych przed wykonaniem takich operacji na bazie danych.

Tutaj możemy usuwać poprawki, automatyczne wersje robocze, posty z kosza, niezatwierdzone komentarze, transjenty, optymalizować tabele i ustawiać automatyczne czyszczenie.

Podczas tworzenia każdej podstrony lub artykułu w WordPress , tyle poprawek jest zapisywanych tyle razy, ile razy klikamy przycisk AKTUALIZUJ. W przypadku dużych witryn, które zawierają głównie artykuły, może to stanowić spory problem, biorąc pod uwagę, że może być kilka milionów poprawek. Usuwając te poprawki znacznie ułatwimy życie bazy danych, ale stracimy możliwość powrotu do poprzednich wersji artykułu lub podstrony.

CDN

CDN oznacza sieć dostarczania treści. Używasz go i możesz nawet o tym nie wiedzieć. Na poziomie kodu strony internetowej istnieją różne biblioteki, które są zwykle używane do tworzenia strony internetowej.

Typowym przykładem mogą być czcionki jQuery lub Google. Zaletą jest to, że odwiedzający Twoją witrynę prawdopodobnie ma już pobrany jQuery z innej strony na swoim komputerze, więc jego przeglądarka nie musi ponownie pobierać pliku jQuery z serwera, ale z jego pamięci podręcznej podczas renderowania strony.

Wpłynie to na szybkość działania witryny. Jednak w rzeczywistości są to tylko kilka kilobajtów plików, co nie będzie miało ekstremalnego wpływu na szybkość, jeśli chodzi o klasyczną stronę internetową.

Bicie serca

Heartbeat to wbudowana funkcja wordpress. Jest to rodzaj regularnego „impulsu”, na podstawie którego żądania ajaxowe są wysyłane do serwera w regularnych odstępach czasu (raz na minutę).

Służy do powiadomień wyświetlanych w środowisku administratora, do automatycznego zapisywania artykułów i podstron, do blokowania treści podczas edycji przez innego użytkownika (wyskakuje przysłowiowa tabela „Nazwa użytkownika edytuje ten artykuł”).

Osobiście nigdy nie miałem z tym problemu, ani nigdy nie miałem z tym do czynienia. Teoretycznie można tutaj wyłączyć Heartbeat, ale na pewno nie polecam, gdyż zakłóca to wbudowaną funkcjonalność WordPress , nie mówiąc już o używanych wtyczkach, które mogą stać się bezużyteczne. Tak więc ograniczenie tego ustawienia dotyczy tylko niektórych słabych wtyczek.

Dodatki

Możliwość zainstalowania innych wtyczek współpracujących z WP Rocket i zapewniających jeszcze lepszą prędkość.

Optymalizacja obrazu

O optymalizacji wizerunku warto pomyśleć już przy tworzeniu strony internetowej lub podczas przesyłania treści. Przyzwoitość nakazuje nie umieszczać na stronie obrazu większego niż 300kB. Rozmiar FullHD (tj. 1920×1080) jest w zupełności wystarczający dla większości stron internetowych. Zdecydowanie nie polecam wgrywania do sieci gigantycznych zdjęć lustrzanek (np. 6000×4000).

Chociaż WordPress nadal przytnie je do rozmiaru 4K, rozmiar danych obrazu jest ważniejszy niż wymiary. Jest naprawdę tylko kilka wyjątków, gdy konieczne jest użycie dużego obrazu danych.

W przypadku takich obrazków jednak zawsze używamy jego miniatury, a pełnego obrazu tylko po kliknięciu na niego (np. otwierając go w Lightbox). W każdym razie WP Rocket nie zawiera opcji optymalizacji obrazów, ale działa bardzo ładnie z wtyczką Imagify .

Inną dobrze znaną wtyczką do optymalizacji obrazów jest EWWWW Image Optimizer (polecam odinstalowanie go po użyciu).

Narzędzia

Narzędzia wtyczek. Importuj, eksportuj, przywróć starszą wersję. Rzeczy, które znamy.

Poradniki

I wreszcie, w sekcji Samouczki wtyczki WP Rocket , możesz znaleźć samouczki wideo do użytku w języku angielskim.

Ostatnia wskazówka: zapoznaj się z tym samouczkiem, jak przyspieszyć działanie witryny WordPress .

WordPress Návod v PDF

ZOSTAW ODPOWIEDŹ

Proszę wpisać swój komentarz!
Proszę podać swoje imię tutaj