Ten szczegół jest bardzo ważny dla osób, które napotykają ten problem. Na szczęście istnieją narzędzia takie jak Google PageSpeed Insights czy GT matrix. Mogą one dokładnie powiedzieć, co chcesz wiedzieć o wydajności Twojej witryny, co musisz zmienić, jeśli masz już włączone buforowanie przeglądarki lub nie, i wiele więcej.

Ok ok. Więc o co chodzi? Dlaczego musisz korzystać z pamięci podręcznej przeglądarki w WordPressie?

Ta kwestia została szczegółowo omówiona poniżej przez nasz zespół wpDataTables, więc czytaj dalej, a do końca tego artykułu uda Ci się wykorzystać buforowanie przeglądarki (ze skrzyżowanymi palcami).

Stworzenie przyjemnej wizualnie strony internetowej nie jest już najważniejsze, gdy czasy ładowania są tak złe, że użytkownicy opuszczają ją w kilka sekund.

Musisz zbudować witrynę z szybko ładującymi się stronami i wysokiej jakości treścią. Każda osoba mająca kontakt z Internetem powinna o tym wiedzieć. A najłatwiejszym sposobem na przyspieszenie witryny jest wykorzystanie pamięci podręcznej przeglądarki.

Ta koncepcja zostanie wyjaśniona później, ale powinieneś wiedzieć, że jest to najlepsza rekomendacja Google, jeśli chodzi o czasy ładowania.

Zwykle szybkość ładowania witryny można poprawić nawet o 50%, o ile stosujesz odpowiednie metody.

Co ma z tym wspólnego buforowanie przeglądarki?

Zagłębmy się.

Cache przeglądarki dźwigni? Co przez to rozumiesz?

Dla tych, którzy nie wiedzą, dlaczego należy korzystać z pamięci podręcznej przeglądarki, najlepiej wyjaśnić to prostszymi słowami.

Buforowanie reprezentuje czas, przez jaki przeglądarki lokalnie przechowują zasoby, które można przechowywać w pamięci podręcznej, dostępne w witrynie internetowej.

Zasoby te obejmują obrazy, JavaScript, CSS i inne. Za każdym razem, gdy dana osoba wchodzi na stronę internetową, zasoby, które można przechowywać w pamięci podręcznej, które są przechowywane na twoim komputerze, są przesyłane z powrotem. Szybkość ładowania strony internetowej jest w ten sposób wyraźnie poprawiona. To jest powód, dla którego ludzie chcą wykorzystywać buforowanie przeglądarki w WordPress.

Jak działa buforowanie przeglądarki w WordPressie?

Gdy dana osoba uzyskuje dostęp do określonej domeny, w tle zachodzi wiele procesów. Wszystko, co składa się na Twoją witrynę WordPress, jest przesyłane do przeglądarki użytkownika, dzięki czemu witryna jest widoczna. Te składniki witryny obejmują treści, obrazy, arkusze stylów, skrypty i inne. Muszą być przeniesione z serwera serwisu do przeglądarki użytkownika, gdy jest to wymagane. Etapy tego procesu to:

Odwiedzający wpisuje adres URL w swojej przeglądarce
Przeglądarka generuje zapytanie do serwera, na którym znajduje się Twoja strona internetowa (żądanie HTTP)
Serwer łączy wszystkie dane i przesyła je do użytkownika. To jest krok, w którym użytkownicy zauważają spowolnienie. Aby zapobiec temu spowolnieniu, ludzie mogą zmniejszyć rozmiar wycinków, zoptymalizować rozmiary obrazów i tak dalej.
Po przesłaniu danych przeglądarka może wreszcie wyświetlić stronę internetową. Proces powtarza się, gdy odwiedzający uzyskują dostęp do innych stron. Żądania serwera mogą być jednocześnie bardzo liczne, co może prowadzić do niskiej wydajności. Dlatego ludzie muszą zoptymalizować swoją stronę internetową, aby była szybka.

Zawartość pamięci podręcznej jest używana zarówno w przeglądarkach internetowych, jak i aplikacjach. Jest przechowywany tymczasowo na dysku lokalnym. Te dane noszą nazwę ‘ Pamięć podręczna sieci ‘ lub ‘ Pamięć podręczna HTTP ‘. Za każdym razem, gdy odwiedzasz tę samą witrynę, przeglądarka przesyła informacje przechowywane na Twoim komputerze i pobiera zawartość z witryny.

Aby sprawdzić, czy Twoja witryna WordPress prawidłowo wykorzystuje buforowanie przeglądarki, musisz użyć określonego narzędzia. Najpopularniejszym z nich jest Google PageSpeed Insights. Sprawdź, czy wszystko działa poprawnie, wpisując adres URL swojej witryny.

Następnie kliknij Analizuj i pozwól, aby narzędzie wykonało swoją magię. PageSpeed powinien informować, jaki wynik ma Twoja witryna pod względem optymalizacji pod kątem urządzeń mobilnych i komputerów stacjonarnych. Wynik waha się od 0 do 100, a następnie otrzymasz sugestie, jak ulepszyć swoją witrynę. Jedną z najczęstszych sugestii jest skorzystanie z pamięci podręcznej przeglądarki w WordPress.

Hej, czy wiesz, że dane też mogą być piękne?

wpDataTables może to zrobić. Nie bez powodu jest to wtyczka nr 1 WordPress do tworzenia responsywnych tabel i wykresów.

Rzeczywisty przykład wpDataTables w środowisku naturalnym

I naprawdę łatwo jest zrobić coś takiego:

Podajesz dane tabeli
Skonfiguruj i dostosuj go
Opublikuj go w poście lub na stronie

I to nie tylko ładne, ale i praktyczne. Możesz tworzyć duże tabele z milionami wierszy, możesz użyć zaawansowanych filtrów i wyszukiwania, albo możesz poszaleć i udostępnić je do edycji.

„Tak, ale po prostu za bardzo lubię Excela, a na stronach internetowych nic takiego nie ma". Tak, jest. Możesz użyć formatowania warunkowego, takiego jak w Excelu lub Arkuszach Google.

Czy mówiłem ci, że możesz też tworzyć wykresy ze swoich danych? A to tylko niewielka część. Istnieje wiele innych funkcji dla Ciebie.

Różnice między buforowaniem serwera a buforowaniem przeglądarki

Każdy użytkownik WordPressa powinien wiedzieć więcej o buforowaniu serwera. Jest to proces, który obejmuje generowanie stron internetowych z pamięci podręcznej dla Twojej witryny za pośrednictwem serwera WWW. Powyższe kroki reprezentują buforowanie witryny, które odbywa się głównie po stronie serwera.

Istnieje kilka sposobów na ulepszenie systemu buforowania serwera. Najbardziej zalecaną opcją byłaby aktualizacja nagłówków w Apache. Korzystanie z wtyczek WordPress byłoby kolejnym krokiem, a dodanie CDN następuje po nim.

Wykorzystaj buforowanie przeglądarki w WordPress

Aby wykorzystać buforowanie przeglądarki w WordPressie, musisz użyć trochę kodu. Nie martw się – to nie jest takie trudne, jak mogłoby się wydawać.

Musisz tylko dotrzeć do. htaccess file, dodaj dany fragment kodu i to wszystko. Wykorzystanie buforowania przeglądarki za pomocą pliku Htaccess jest najłatwiejszą i najskuteczniejszą metodą, o której powinieneś się dowiedzieć.

Najprostszym i najszybszym sposobem, aby upewnić się, że Twoja witryna WordPress w pełni wykorzystuje buforowanie zarówno po stronie serwera, jak i przeglądarki, jest skorzystanie z zarządzanego hostingu WordPress, który wstępnie konfiguruje dla Ciebie wszystkie niezbędne ustawienia.

Wykorzystaj buforowanie przeglądarki w WordPressie ręcznie, wykonując następujące czynności:

Dodaj nagłówki wygasa
Dodaj nagłówki kontroli pamięci podręcznej
Wyłącz tagi ET

Aby to zrobić, musisz wykonać poniższe czynności:

Uzyskaj dostęp do plików strony internetowej

Zacznij od zalogowania się na swoje konto hostingowe/cPanel. Przejdź do menedżera plików. Tutaj znajdziesz ustawienia witryny, w których musisz włączyć opcję Ukryty plik. Następnie przejdź do katalogu głównego witryny i przejdź do pliku .htaccess.

Zwykle znajduje się w /public_html/.htaccess. Jeśli domena Twojej witryny jest niestandardowa, znajdziesz ją pod domainname/public_html/.htaccess. Kliknij plik prawym przyciskiem myszy i edytuj go, korzystając z otrzymanych instrukcji.

Dodaj kod pamięci podręcznej przeglądarki do pliku .htaccess

Następny krok jest najprostszy. Skopiuj poniższy kod i wklej go na końcu zawartości pliku .htaccess. Nie wprowadzaj żadnych innych zmian w pliku.

Ustawienia zawarte w powyższym kodzie obejmują 600-sekundowy czas odświeżania/wygaśnięcia dla HTML oraz jeden miesiąc dla CSS i JavaScript.

Celem tego okresu wygaśnięcia jest uniknięcie zbyt częstego ponownego pobierania zasobów przez użytkowników. Jeśli częściej dokonujesz zmian w zakresie aktywów, możesz zmienić okres zgodnie ze swoimi potrzebami.

Dla osób, które chcą wykorzystać buforowanie przeglądarki, zmiana pliku .htaccess jest najlepszą opcją.

Jak widać na fragmencie kodu, obrazy wygasają po upływie roku. Aby dodać wygasłe nagłówki .htaccess, musisz zmienić plik bez uszkadzania czegokolwiek innego.

Jednak niektórzy ludzie nie chcą zadzierać z plikiem .htaccess. Jeśli taka jest Twoja sytuacja, możesz po prostu użyć wtyczki do buforowania przeglądarki. Więcej o takich wtyczkach dowiesz się w dalszej części tego artykułu.

Dodaj nagłówki kontroli pamięci podręcznej za pośrednictwem Apache

Skopiuj poniższy kod:

Ustawienie daty wygaśnięcia lub maksymalnego wieku w nagłówkach HTTP nie jest już wymagane, ponieważ zostało to już ustawione w poprzednim kroku, co oznacza, że nie trzeba tego tutaj powtarzać.

Wyłącz etagi

Etags to skrót od Entity Tags i odnoszą się do nowych wersji plików z pamięci podręcznej. Ponieważ masz już ustawione nagłówki kontroli pamięci podręcznej, nie ma potrzeby używania ETagów, więc możesz je wyłączyć, aby skrócić czas ładowania. Dodaj następujący fragment kodu do pliku .htaccess:

Zapisz plik .htaccess i gotowe!

Serwer NGINX i buforowanie przeglądarki

Jeśli Twoja witryna korzysta z NGINX, będziesz musiał użyć innych fragmentów kodu, ponieważ nie będziesz w stanie znaleźć pliku .htaccess. Ponownie, jest to bardzo łatwy proces, który nie wymaga dużej wiedzy technicznej. Przejdź do /etc/nginx/sites-enabled/default i wklej tam ten kod:


server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    location ~*  .(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 365d;
    }
    location ~*  .(pdf)$ {
        expires 30d;
    }
}

Add Cache-Control Headers (NGINX)
location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
expires 90d;
add_header Cache-Control "public, no-transform";
}

Prawdopodobnie możesz powiedzieć, że czas wygaśnięcia plików graficznych jest ustawiony na 365 dni, co odpowiada jednemu rokowi. Pliki PDF wygasają po zaledwie 30 dniach. Możesz dostosować kod tak, jak chcesz, tak jak w poprzednim przypadku.

Po edycji NGINX zapisz plik i możesz mieć pewność, że aktywowałeś buforowanie przeglądarki na serwerze NGINX.

Wykorzystaj przeglądanie w WordPressie za pomocą wtyczek

Poprawianie pliku .htaccess tam, gdzie go nie potrzebujesz, może zrujnować całą witrynę. Popełnienie jednego błędu doprowadzi do pustych stron i błędów, więc jest całkowicie zrozumiałe, jeśli nie chcesz samodzielnie zmieniać pliku.

Na szczęście istnieją wtyczki, które mogą być przydatne, bez konieczności uczenia się, jak włączyć buforowanie przeglądarki w WordPressie

ręcznie. Instalację wtyczki można wykonać w następujący sposób:

Pobierz wtyczkę – jeden przykład znajdziesz tutaj
Przejdź do pulpitu nawigacyjnego, wtyczek i dodaj nowy
Znajdź „Wykorzystaj buforowanie przeglądarki”
Kliknij Zainstaluj teraz
Aktywuj wtyczkę
Przetestuj swoją witrynę

Istnieją również inne wtyczki, których możesz użyć, a niektóre z nich są wymienione poniżej. Wybierz je zgodnie ze swoimi wymaganiami:

Całkowita pamięć podręczna W3 – wtyczka WordPress

Naprawianie buforowania przeglądarki z dźwignią w WordPress za pomocą W3 Total Cache można wykonać, wykonując następujące czynności:

Pobierz i zainstaluj wtyczkę W3 Total Cache WordPress
Przejdź do ustawień ogólnych i wybierz opcję Włącz pamięć podręczną przeglądarki
Kliknij Zapisz i przejdź do Ustawień pamięci podręcznej przeglądarki (u góry strony)
Wybierz dostępne nagłówki pamięci podręcznej
Ustaw nagłówki wygasania, kontrolę pamięci podręcznej i nagłówki ETag (na podstawie ustawień zrobionych wcześniej)
Zapisz wszystkie ustawienia i odśwież swoją stronę

Najszybsza pamięć podręczna WP

WP Fastest Cache to kolejna wtyczka, której możesz użyć do włączenia buforowania przeglądarki w WordPress.

Pobierz i zainstaluj WP Fastest Cache.
Przejdź do ustawień wtyczki
Wybierz Buforowanie przeglądarki, zaznaczając pole
Kliknij Prześlij, aby zastosować zmiany i to wszystko

Włącz pamięć podręczną – pamięć podręczna WordPress

Ta wtyczka zawiera więcej funkcji, które mogą okazać się przydatne w przyszłości: możesz zautomatyzować proces czyszczenia pamięci podręcznej lub możesz to zrobić ręcznie, możesz ręcznie wyczyścić stronę, możesz zminimalizować HTML i JavaScript i wiele innych. Aby z niego skorzystać, po prostu:

Zainstaluj wtyczkę i aktywuj ją
Przejdź do ustawień
Kliknij Włącz buforowanie przeglądarki z dźwignią

Użyj Yoast SEO, aby edytować plik .htaccess

Możesz także edytować plik .htaccess w bezpieczniejszy sposób, używając wtyczki Yoast SEO. Najczęściej używaną wtyczką WordPress jest SEO firmy Yoast. Korzystając z tej wtyczki, możesz łatwo edytować plik .htaccess. Jeśli nie masz jeszcze Yoast, musisz go wcześniej zainstalować i aktywować. Następnie musisz:

Uzyskaj dostęp do SEO, a następnie Narzędzia.
Przejdź do Edytora plików
Plik .htaccess zostanie otwarty w edytorze tekstu, w którym możesz wkleić wymienione powyżej fragmenty kodu
Zapisz zmiany

Po wprowadzeniu zmian możesz skorzystać z Google PageSpeed Insights, aby sprawdzić, czy po wprowadzeniu zmian wszystko jest w porządku. Jeśli Twoja witryna prawidłowo wykorzystuje pamięć podręczną przeglądarki, możesz zacząć. Jeśli nie, powinieneś ponownie przejść przez ten proces i zobaczyć, co przegapiłeś.

Buforowanie zasobów firm trzecich

Po wykonaniu wszystkich zmian opisanych w tym artykule nadal możesz uzyskać zły wynik podczas testowania szybkości witryny za pomocą różnych narzędzi. Google PageSpeed Insights może dać Ci zły wynik z powodu wielu skryptów lub usług innych firm, które działają za Twoją witryną. Skrypty te nie mają długiego czasu ważności z wielu powodów.

Jeśli nadal będziesz otrzymywać wiadomości do wykorzystania buforowania przeglądarki w WordPress po zastosowaniu wszystkich możliwych wskazówek, niewiele możesz zrobić poza wyeliminowaniem skryptów, których nie używasz. Maksymalnie trzy skrypty powinny wystarczyć na stronie internetowej, więc pamiętaj o wyczyszczeniu listy.

Po wprowadzeniu tej zmiany wszystko powinno działać poprawnie, a czas ładowania Twojej strony powinien być jak najbardziej zbliżony do perfekcji. Jeśli napotkasz problem, który jest bardzo specyficzny i nie ma on nic wspólnego ze skryptami innych firm, powinieneś zostać o tym poinformowany i sprawdzić, jakie ustawienie powoduje problem.

Końcowe myśli o tym, jak wykorzystać pamięć podręczną przeglądarki w WordPress

Pamiętaj, że możesz nie zauważyć zmian, które wprowadzasz natychmiast po zainstalowaniu wtyczki. Powodem tego opóźnienia jest plik CSS/Arkusz stylów. Pamięć podręczna przeglądarki, którą już zapisałeś na swoim komputerze, uniemożliwi Ci zobaczenie dokonanych zmian. Aby poprawnie zobaczyć stronę po wprowadzeniu kilku zmian, zaleca się odwiedzenie jej za pomocą funkcji Incognito w Twojej przeglądarce. Korzystając z tej funkcji, nie będziesz korzystać z zasobów pamięci podręcznej i powinieneś być w stanie poprawnie zobaczyć zmiany.

Ostatecznie wybrana metoda wykorzystania buforowania przeglądarki nie ma znaczenia. Jedyne, co się liczy, to zobaczyć go w akcji. Tak długo, jak buforowanie przeglądarki w WordPressie działa zgodnie z założeniami, sposób, w jaki się tam znalazłeś, nie ma znaczenia. Możesz wybrać metodę, z którą czujesz się komfortowo, a wynik będzie taki sam. Albo zdecydujesz się zmienić plik .htaccess, albo użyć wtyczki, uzyskasz lepsze czasy ładowania, aktywując buforowanie przeglądarki dźwigni.

Jeśli podobał Ci się ten artykuł o tym, jak wykorzystać pamięć podręczną przeglądarki w WordPressie, powinieneś zapoznać się z tym, jak przyspieszyć działanie WordPressa.

Pisaliśmy również o kilku powiązanych tematach, takich jak wtyczka bazy danych WordPress, wtyczka leniwego ładowania WordPress, opcje wtyczki do pamięci podręcznej WordPress i usługi CDN.

Źródło nagrywania: wpdatatables.com