Jak przyspieszyć WordPress: szczegółowy przewodnik

5 kwietnia 2021

Blog

27 / 100

Im szybciej ładuje się Twoja witryna, tym lepsze wrażenia użytkownika zapewniasz – to takie proste. Lepsze wrażenia użytkownika prowadzą do wyższych współczynników konwersji, niższych współczynników odrzuceń i nie tylko. Dowiedz się, jak przyspieszyć swoją witrynę i poprawić wrażenia użytkowników.

Jeśli chcesz tworzyć udane witryny WordPress dla siebie lub swoich klientów, niezbędne jest nauczenie się, jak przyspieszyć swoją witrynę WordPress.

Podczas gdy wiele osób słusznie koncentruje się na projekcie i zawartości witryny internetowej, szybkość ładowania tej witryny jest równie ważna, jeśli nie ważniejsza. Czasy ładowania będą miały wpływ na wygodę użytkownika, rankingi SEO, współczynniki konwersji, współczynniki odrzuceń i nie tylko.

Jednak zrozumienie wszystkich tajników wydajności WordPressa może być skomplikowane, dlatego stworzyliśmy ten ogromny przewodnik, jak przyspieszyć Twoją witrynę WordPress.

W tym poście omówimy wszystko, co musisz wiedzieć. Zaczniemy od wyjaśnienia, co spowalnia witryny WordPress, dlaczego szybkość jest ważna i jak przetestować aktualną wydajność witryny .

Następnie udostępnimy pełną listę praktycznych taktyk, których możesz dziś użyć, aby poprawić wydajność swojej witryny WordPress.

Dlaczego Twoja witryna WordPress działa wolno?

Istnieją dwie szerokie kategorie problemów, które mogą spowalniać działanie witryny WordPress:

  • Wydajność backendu – mówiąc ogólnie, tyle czasu zajmuje serwerowi dostarczanie plików.
  • Wydajność frontendu – tak zoptymalizowana jest Twoja witryna WordPress.

Problemy z wydajnością zaplecza zwykle wynikają z hostingu . Na przykład używanie wolnego hostingu jest jednym z największych winowajców słabej wydajności backendu. Możesz również przyspieszyć działanie backendu, zwiększając wydajność serwera dzięki taktykom, takim jak buforowanie stron, korzystanie z najnowszej wersji PHP, optymalizacja bazy danych i nie tylko.

Problemy z wydajnością frontendu w dużo większym stopniu zależą od wyborów podejmowanych podczas tworzenia witryny WordPress. Oto niektóre z typowych problemów:

  • Używanie zbyt wielu źle zoptymalizowanych wtyczek WordPress
  • Korzystanie z ciężkiego motywu WordPress
  • Ładowanie dużych, niezoptymalizowanych obrazów
  • Posiadanie niezoptymalizowanego JavaScript lub CSS
  • Ładowanie zbyt wielu skryptów innych firm

Jeśli chcesz zmaksymalizować wydajność witryny, musisz zoptymalizować oba typy wydajności. Na przykład nawet witryna z doskonałą optymalizacją frontendu może nadal ładować się powoli, jeśli jest na naprawdę wolnym hostingu (i odwrotnie). 

Poniższe wskazówki dotyczą rozwiązywania obu typów problemów.

Dlaczego szybkość witryny WordPress jest ważna?

Jeśli kiedykolwiek korzystałeś z wolno ładującej się witryny, intuicyjnie wiesz, jak frustrujące może być radzenie sobie z wolną witryną. To denerwujące, a Twoi goście będą zirytowani, jeśli będą musieli czekać na załadowanie treści (szczególnie na urządzeniach mobilnych).

Na podstawowym poziomie jednym dużym problemem związanym z powolną witryną WordPress jest to, że powoduje ona naprawdę złe wrażenia użytkownika dla odwiedzających, czego zawsze należy unikać.

Jednak wolna witryna ma również wiele wad:

Rankingi SEO – Google wykorzystuje szybkość witryny jako czynnik rankingowy zarówno w wynikach na komputery, jak i na urządzeniach mobilnych. Wkrótce zacznie też używać wskaźników Core Web Vitals , które obejmują wskaźnik szybkości. Szybkość witryny może być szczególnie ważna w konkurencyjnych niszach z wieloma silnymi witrynami, gdzie odróżnia dwie równie silne witryny. Oto podejście Google.

Współczynniki konwersji – wolniejsze czasy ładowania prowadzą do niższych współczynników konwersji. Według Akamai, nawet 100-milisekundowe opóźnienie może obniżyć współczynniki konwersji o 7% . Firma Deloitte odkryła również, że zaledwie 100-milisekundowa poprawa szybkości witryny sprawiła, że ​​kupujący wydają o 10% więcej.

Współczynnik odrzuceń – wolniejsze czasy wczytywania prowadzą do wyższych współczynników odrzuceń. Na przykład Pingdom odkrył, że współczynnik odrzuceń związany z czasem w przypadku strony, która ładuje się w ciągu dwóch sekund, wynosi 6%, ale w przypadku strony, która ładuje się w ciągu pięciu sekund, przeskakuje do 38%. Na urządzeniach mobilnych Google wykrył, że prawdopodobieństwo, że ktoś odbije, skacze z 32% po 1-3 sekundach do 90% po 1-5 sekundach.

Szybkość witryny jest również szczególnie ważna na urządzeniach mobilnych, gdzie 53% użytkowników mobilnych opuszcza stronę, której ładowanie trwa dłużej niż trzy sekundy.

Jak mierzyć szybkość witryny WordPress

Najłatwiejszym sposobem przetestowania wydajności witryny WordPress jest użycie narzędzia do testowania szybkości. Dzięki takiemu narzędziu wystarczy wpisać adres URL strony, którą chcesz przetestować, a narzędzie poda ci masę danych do oceny jej wydajności.

Niektóre z najlepszych darmowych narzędzi do testowania prędkości to:

  • WebPageTest – oferuje wiele zmiennych testowych w celu zebrania bardziej przydatnych danych.
  • Szybko lub wolno – testy z wielu lokalizacji na całym świecie w celu oceny globalnego czasu ładowania.
  • GTmetrix – dość elastyczny, jeśli zarejestrujesz darmowe konto.
  • Google PageSpeed ​​Insights – dostarcza rzeczywistych danych dotyczących prędkości z Google, wraz z testami z Lighthouse.

Jeśli potrzebujesz dokładnych danych, istnieje kilka zmiennych testowych, na które musisz zwrócić uwagę:

  • Urządzenie – spróbuj przetestować zarówno urządzenia stacjonarne, jak i mobilne.
  • Lokalizacja testowa – najlepiej byłoby przeprowadzić test z lokalizacji najbliższej docelowej publiczności. Jeśli Twoi odbiorcy są na całym świecie, powinieneś testować w wielu lokalizacjach.
  • Szybkość połączenia – szybkość połączeń internetowych odwiedzających wpłynie na szybkość ładowania witryny. Jednak niektóre narzędzia do testowania szybkości używają do testowania ultraszybkiego połączenia, co sprawia, że ​​Twoja witryna wygląda szybciej niż dla prawdziwych użytkowników. Idealnie byłoby, gdybyś chciał wybrać prędkość połączenia, która odpowiada rzeczywistej sytuacji użytkowników.

Na przykład, oto konfiguracja testowa do testowania szybkości witryny dla użytkowników mobilnych korzystających z połączenia 4G:

Co oznaczają wyniki testu? A co z „wynikami”?

Po przeprowadzeniu testu szybkości otrzymasz wiele różnych liczb (dokładne liczby zależą od używanego narzędzia).

Ogólnie rzecz biorąc, należy skupić się na faktycznym czasie ładowania, a nie na „wynikach”. Chociaż wyniki mogą dostarczyć przydatnych wskazówek, które pomogą Ci zoptymalizować witrynę, odwiedzającym zależy tylko na tym, jak długo faktycznie trwa ładowanie witryny.

Jeśli chodzi o rzeczywisty czas ładowania, zobaczysz różne liczby. Ogólnie rzecz biorąc, będziesz chciał zwrócić uwagę zarówno na czasy w pełni wczytywania (ile czasu zajmuje wczytanie całej witryny), jak i na wskaźniki „wrażenia użytkownika”, takie jak największa zawartość treści (LCP), które mierzą, ile czasu zajmuje witryna „Treść główna”, aby stała się widoczna (nawet jeśli witryna nadal wczytuje się w części strony widocznej na ekranie).

Jaki jest dobry czas ładowania witryny?

Ogólnie rzecz biorąc, dobry czas ładowania witryny wynosi mniej niż dwie do trzech sekund. W przypadku użytkowników mobilnych Google zaleca mniej niż trzy sekundy. W przypadku sklepów eCommerce celuj w mniej niż dwie sekundy.

Pamiętaj jednak, że czas pełnego ładowania witryny nie jest jedyną istotną miarą. Warto również skupić się na „postrzeganym” czasie ładowania witryny, czyli na tym, jak szybko użytkownicy „czują się” jak Twoja witryna. W słowach Google :

„Largest Contentful Paint (LCP) to ważna miara zorientowana na użytkownika do pomiaru postrzeganej szybkości ładowania, ponieważ oznacza punkt na osi czasu ładowania strony, w którym prawdopodobnie została załadowana główna treść strony – szybki LCP pomaga upewnić użytkownika, że ​​strona jest przydatny.”

Google zaleca , aby czas Twojego LCP był krótszy niż 2,5 sekundy i zacznie używać tego kryterium jako czynnika rankingowego SEO w 2021 roku.

Jak zoptymalizować prędkość witryny WordPress

Teraz przejdźmy do praktycznych taktyk, które możesz wdrożyć, aby przyspieszyć swoją witrynę WordPress…

Skorzystaj z szybkiego hostingu WordPress

Wybór zoptymalizowanego pod kątem wydajności hostingu WordPress to jedna z największych rzeczy, które możesz zrobić, aby poprawić wydajność zaplecza witryny.

Mówiąc prościej, jeśli Twój hosting jest powolny, istnieje duże prawdopodobieństwo, że Twoja witryna będzie wolna, nawet jeśli wykonujesz naprawdę dobrą robotę przy optymalizacji front-endu.

Aby uzyskać absolutnie najlepszą wydajność, należy rozważyć zarządzane opcje hostingu WordPress, takie jak Kinsta , WP Engine lub Flywheel . Jeśli to nie mieści się w Twoim budżecie, tańsze opcje, takie jak SiteGround i A2 Hosting, mogą nadal pomóc w osiągnięciu szybkiego czasu ładowania.

Aby uzyskać więcej opcji, sprawdź naszą listę zalecanych hostów WordPress. Mamy również przewodnik, jak wybrać hosting WordPress, aby pomóc Ci w podjęciu decyzji.

Wybierając hosta, należy również zwrócić uwagę na dostępne lokalizacje serwerów. Fizyczna lokalizacja serwera będzie miała wpływ na czas wczytywania strony, ponieważ odległość fizyczna wpływa na prędkość pobierania.

Najlepiej byłoby wybrać hosta, który oferuje serwer znajdujący się w tej samej lokalizacji, co podstawowa grupa docelowa.

Inną ważną kwestią jest poszukiwanie nowoczesnych technologii, takich jak HTTP / 2, które mogą poprawić wydajność HTTPS, a także lepiej radzą sobie z wieloma małymi żądaniami HTTP.

Użyj buforowania stron

Wdrożenie buforowania stron jest jedną z największych rzeczy, które możesz zrobić dla wydajności swojej witryny WordPress, zwłaszcza jeśli zaczynasz od taniego hostingu współdzielonego. Jeśli korzystasz z taniego hostingu współdzielonego, możesz nawet zobaczyć skrócenie czasu ładowania o połowę poprzez aktywację buforowania.

Zwykle serwer Twojej witryny WordPress musi złożyć każdą stronę od zera za każdym razem, gdy ktoś odwiedza Twoją witrynę. Obejmuje to wykonanie PHP w celu „zbudowania” strony i wysłanie zapytania do bazy danych witryny w celu pobrania zawartości strony. Gdy to zrobi, Twój serwer dostarczy gotowy kod HTML do przeglądarki odwiedzającego.

Ten proces wymaga czasu i zasobów, co ma dwa negatywne skutki dla wydajności witryny:

  1. To sprawia, że ​​indywidualne wizyty trwają dłużej.
  2. Zużywa więcej zasobów przy każdej wizycie, co oznacza, że ​​Twoja witryna będzie spowalniać jeszcze bardziej w okresach dużego ruchu.

Buforowanie stron eliminuje ten problem dzięki przechowywaniu gotowego produktu HTML strony w pamięci podręcznej. Następnie, w przypadku przyszłych wizyt, Twój serwer może po prostu dostarczyć ten kod HTML bez wykonywania pracy zakulisowej.

Wielu hostów WordPress automatycznie implementuje buforowanie stron, w tym większość opcji, które zalecamy powyżej. 

Jeśli Twój host tego nie robi, nadal możesz zaimplementować buforowanie stron za pomocą jednej z wielu wysokiej jakości wtyczek do buforowania . Oto kilka dobrych opcji:

Użyj sieci dostarczania treści (CDN)

Sieć dostarczania treści (CDN) przyspiesza globalne czasy wczytywania witryny, buforując statyczną zawartość w ogromnej sieci „brzegowych” serwerów na całym świecie. Następnie, gdy ktoś odwiedza twoją witrynę, ta osoba może pobierać treści z najbliższej lokalizacji brzegowej, a nie z twojego głównego serwera. Ponieważ odległość fizyczna jest mniejsza, pliki są pobierane szybciej, a witryna ładuje się szybciej.

Niektóre dobre sieci CDN dla użytkowników WordPress obejmują:

Wielu zarządzanych hostów WordPress oferuje również własne wbudowane usługi CDN bez dodatkowych kosztów.

Z wyjątkiem Cloudflare (który ma własny proces konfiguracji ), możesz skonfigurować CDN w następujący sposób:

  1. Zarejestruj się w usłudze CDN i dodaj swoją witrynę.
  2. Użyj wtyczki, takiej jak CDN Enabler, aby skonfigurować witrynę WordPress w celu ładowania określonych treści z CDN.

Zoptymalizuj swoje obrazy

Według danych z archiwum HTTP , obrazy stanowią średnio około połowy rozmiaru pliku przeciętnej witryny internetowej . To sprawia, że ​​są ogromną szansą na zmniejszenie rozmiaru witryny i przyspieszenie jej.

Jeśli chodzi o same obrazy, optymalizacja składa się z dwóch części:

  • Wymiary o zmienionym rozmiarze – chcesz zmienić rozmiar obrazu w oparciu o sposób jego używania. Jeśli umieścisz obraz w poście na blogu z obszarem treści o szerokości 800 pikseli, absolutne maksimum, jakie chcesz, aby ten obraz miał, to 1600 pikseli (podwojenie wymiarów, aby uwzględnić ekrany Retina).
  • Kompresja – po zmianie rozmiaru obrazu należy go skompresować, aby jeszcze bardziej zmniejszyć rozmiar pliku. Istnieją dwa rodzaje kompresji – stratna (pewna utrata jakości obrazu, ale ogromne oszczędności rozmiaru pliku) i bezstratna (zerowa utrata jakości, ale mniejsze oszczędności w rozmiarze pliku).

W przypadku większości witryn dobrą strategią jest:

  1. Zmień rozmiar obrazów do szerokości wyświetlania (lub maksymalnie 2X szerokości w przypadku ekranów Retina).
  2. Kompresuj obrazy przy użyciu kompresji stratnej (chyba że jesteś fotografem lub w innej niszy, w której jakość obrazu jest najważniejsza).

Jedną z opcji jest optymalizacja obrazów przed ich przesłaniem. Narzędzia takie jak BIRME (zmiana rozmiaru) i Kraken (kompresja) oferują optymalizację zbiorczą, podobnie jak Adobe Photoshop.

Możesz też użyć wtyczki do optymalizacji obrazu WordPress, aby automatycznie optymalizować obrazy podczas przesyłania ich do WordPress. Oto kilka dobrych opcji:

Możesz także zastosować taktyki, takie jak leniwe ładowanie. WordPress obsługuje teraz leniwe ładowanie obrazów w natywnej przeglądarce lub możesz również użyć WP Rocket lub bezpłatnej wtyczki Lazy Load .

Wreszcie, zamiast używać ciężkich GIF-ów do animacji, rozważ użycie krótkiego wideo MP4 i widżetu wideo Elementor , który oferuje znacznie lżejsze podejście.

Zoptymalizuj CSS

Kod CSS Twojej witryny daje kolejną możliwość optymalizacji front-endu.

Dwie podstawowe strategie optymalizacji CSS to:

  • Zminimalizuj kod CSS, aby zmniejszyć rozmiar pliku, eliminując białe znaki i zbędne znaki.
  • Połącz oddzielne pliki CSS, aby zmniejszyć liczbę żądań HTTP. Ogólnie jedno duże żądanie HTTP jest bardziej wydajne niż wiele małych żądań HTTP (chociaż różnica nie jest tak duża, jeśli Twój host używa protokołu HTTP / 2).

Aby poprawić wskaźniki wydajności użytkownika, takie jak największa zawartość, bardziej zaawansowana taktyka optymalizacji polega na wbudowaniu krytycznego kodu CSS w sekcji <head> i odłożeniu ładowania reszty CSS na później.

Wtyczki Autoptimize jest popularnym wolna opcja, która pozwala wykonywać te optymalizacje. Lub wiele wtyczek wydajnościowych oferuje te funkcje, w tym WP Rocket.

Zoptymalizuj JavaScript

Podobnie jak w przypadku CSS, powinieneś zminimalizować i połączyć JavaScript tak bardzo, jak to możliwe. Jednak może być konieczne wykluczenie niektórych plików JavaScript z kombinacji, aby uniknąć powodowania problemów .

Możesz osiągnąć obie optymalizacje za pomocą wtyczki Autoptimize lub WP Rocket:

Poza tym należy odłożyć ładowanie JavaScript tak bardzo, jak to możliwe, aby uniknąć blokowania ładowania treści w części strony widocznej na ekranie. Możesz to zrobić za pomocą wtyczki Async JavaScript od tego samego programisty lub WP Rocket.

Użyj szybkiego motywu

Jako podstawa treści w witrynie, Twój motyw odgrywa dużą rolę w optymalizacji strony.

Jeśli planujesz użyć Kreatora motywów Elementor do zbudowania witryny WordPress , zalecamy darmowy motyw Hello , który jest najszybszym motywem dla Elementora, ponieważ eliminuje wszystkie niepotrzebne funkcje. Mówiąc prościej, nie znajdziesz bardziej przyjaznej dla wydajności podstawy dla swoich projektów Elementora:

Inne lekkie motywy wysokiej jakości obejmują:

Wszystkie trzy motywy obejmują głęboką integrację z Elementorem i strony startowe.

Użyj szybkich wtyczek i ogranicz użycie wtyczek

Chociaż istnieje wiele świetnych wtyczek , musisz zwrócić uwagę na ich użycie, jeśli chcesz przyspieszyć swoją witrynę. Ogólnie rzecz biorąc, każda instalowana wtyczka dodaje własną wagę w postaci zapytań do bazy danych, żądań HTTP i rozmiaru pliku.

Z tego powodu ogólną ogólną zasadą jest to, że im więcej zainstalujesz wtyczek, tym wolniej będzie działać Twoja witryna.

Jednak nie chodzi tylko o ilość wtyczek, ale także o jakość. Nawet jedna wolna wtyczka może mieć ogromny negatywny wpływ na czas ładowania witryny.

Oto kilka podstawowych zasad, których należy przestrzegać, jeśli chodzi o wtyczki:

  1. Spróbuj ograniczyć liczbę używanych wtyczek. Jeśli jakaś funkcja nie jest konieczna do funkcjonowania Twojej witryny, rozważ jej wyłączenie. Ogranicza to również szansę na problemy ze zgodnością, które mogą dodatkowo wpłynąć na czas ładowania.
  2. Używaj tylko wtyczek renomowanych programistów z dobrą jakością kodu.

Prostym sposobem na wyeliminowanie konieczności instalowania nadmiarowych wtyczek jest użycie Elementora i / lub Elementora Pro.

Ponieważ Elementor zawiera wbudowane widżety do wielu ważnych działań, możesz go użyć, aby uniknąć instalowania większej liczby wtyczek i przyspieszyć swoją witrynę . Na przykład możesz używać Elementora do formularzy kontaktowych , ikon udostępniania społecznościowego , suwaków , galerii i nie tylko. Są to wszystkie funkcje, do których normalnie potrzebujesz osobnej wtyczki.

Zoptymalizuj swoją bazę danych

Baza danych Twojej witryny WordPress zawiera całą zawartość i ustawienia witryny (w tym projekty Elementora).

Kiedy ktoś odwiedza Twoją witrynę WordPress, Twój serwer musi wysłać zapytanie do bazy danych, aby uzyskać wszystkie informacje potrzebne do renderowania strony (chociaż, jak omówiliśmy powyżej, buforowanie stron może wyeliminować ten proces w przypadku większości odwiedzających).

Ogólnie rzecz biorąc, im większa i bardziej skomplikowana jest Twoja baza danych, tym dłużej będą trwały te zapytania, co obniży wydajność Twojej witryny, a także zmarnuje zasoby serwera.

Z tego powodu należy regularnie czyścić bazę danych witryny. Oto kilka wtyczek, które mogą pomóc:

Ogranicz lub wyłącz wersje

Jedną z głównych przyczyn bałaganu w Twojej bazie danych są poprawki wpisów. Domyślnie WordPress przechowuje nieograniczoną liczbę wersji za każdym razem, gdy naciśniesz przycisk Zapisz wersję roboczą podczas pracy nad treścią.

Aby uniknąć tego bałaganu, należy wyłączyć lub przynajmniej ograniczyć zmiany postów.

Możesz to zrobić za pomocą bezpłatnej wtyczki WP Revisions Control . Możesz też dodać jeden z tych fragmentów kodu do pliku wp-config.php swojej witryny :

Limit (przechowuj dwie wersje) :

define (‘WP_POST_REVISIONS’, 2);

Wyłącz :

define (‘WP_POST_REVISIONS’, false);

Zoptymalizuj swoje komentarze

Jeśli Twoja witryna ma bardzo obciążoną sekcję komentarzy, może to być zaskakujący spadek wydajności witryny. Domyślnie każdy komentarz dodaje zewnętrzne żądanie HTTP do Gravatar w celu załadowania obrazu użytkownika. Komentarze również zwiększają wagę bazy danych i dodatkowe zapytania do bazy danych w celu załadowania komentarzy.

Jeśli nie znajdziesz wartości w komentarzach, jedną z opcji jest całkowite wyłączenie komentarzy:

  1. Przejdź do Ustawienia → Dyskusja
  2. Odznacz to pole, aby umożliwić innym przesyłanie komentarzy

Jednak sekcje komentarzy są ważne w wielu witrynach, więc możesz nie chcieć się ich całkowicie pozbywać. Oto kilka wskazówek, jak je zoptymalizować:

Użyj systemu komentarzy innej firmy, takiego jak Disqus lub Komentarze na Facebooku, a następnie załaduj go leniwie za pomocą bezpłatnych wtyczek Disqus Conditional Load lub Lazy Social Comments .

Odciąż pliki multimedialne

Jeśli używasz wielu plików multimedialnych (np. Obrazów), może to spowodować duże obciążenie serwera, ponieważ serwer musi przechowywać i obsługiwać wszystkie te obrazy.

Jednym ze sposobów zmniejszenia tego obciążenia jest CDN. CDN „ściągnie” obrazy z serwera do pamięci podręcznej CDN, a następnie wyświetli obrazy z pamięci podręcznej. Jednak to nadal wykorzystuje zasoby, ponieważ CDN musi najpierw wysłać zapytanie do serwera, aby pobrać te obrazy.

Aby to naprawić, możesz rozważyć przeniesienie plików multimedialnych do pamięci zewnętrznej, takiej jak Amazon S3 , DigitalOcean Spaces , Google Cloud Storage itp. Nadal możesz korzystać z CDN, ale Twoja CDN będzie teraz „pobierać” swoje pliki multimedialne z pamięci w chmurze zamiast serwera Twojej witryny.

Aby ustawić to na WordPress, możesz użyć wtyczki WP Offload Media firmy Delicious Brains.

Użyj kompresji Gzip

Gzip to technologia, która umożliwia kompresję danych na poziomie serwera, co może spowodować 70% + zmniejszenie rozmiaru pliku witryny. 

Większość wtyczek wydajnościowych WordPress może włączyć kompresję Gzip, w tym WP Rocket. Możesz też użyć samodzielnej wtyczki Enable Gzip Compression .

Jeśli nie chcesz używać wtyczki, możesz również włączyć kompresję Gzip, dodając ten fragment kodu do pliku .htaccess swojej witryny:

Aby sprawdzić, czy to działa, możesz użyć tego testu kompresji Gzip .

Użyj buforowania przeglądarki (nagłówki Cache-Control i Expires)

Buforowanie przeglądania pozwala nakazać przeglądarce użytkownika przechowywanie statycznych zasobów na lokalnym komputerze odwiedzającego. Przy kolejnych wizytach przeglądarka gościa załaduje te pliki z lokalnej pamięci podręcznej, a nie z serwera, co przyspiesza ładowanie.

Aby kontrolować zachowanie pamięci podręcznej przeglądarki, możesz zastosować dwie taktyki:

  • Kontrola pamięci podręcznej
  • Wygasa nagłówki

Umożliwiają one poinformowanie przeglądarek odwiedzających, jak długo mają przechowywać określone typy plików w pamięci podręcznej przeglądarki. Na przykład „przechowuj obrazy PNG przez 30 dni przed ich ponownym pobraniem”.

Oba osiągają ten sam efekt, ale kontrola pamięci podręcznej jest nowszą i bardziej elastyczną opcją. Możesz używać obu – po prostu upewnij się, że długości pamięci są do siebie dopasowane.

Istnieją dwa sposoby dodawania nagłówków kontroli pamięci podręcznej lub wygasania:

  • Podłącz
  • Kod

Wiele wtyczek wydajnościowych WordPress zawiera już funkcje umożliwiające zaimplementowanie buforowania przeglądarki, w tym WP Rocket. Lub możesz użyć samodzielnej wtyczki Add Expires Headers .

Jeśli czujesz się komfortowo pracując z kodem, możesz to również ustawić, edytując plik .htaccess swojej witryny (jeśli używasz Apache) lub plik konfiguracyjny Nginx (jeśli używasz Nginx).

Oto fragmenty kodu, których będziesz potrzebować:

Kontrola pamięci podręcznej Apache (.htaccess):

<filesMatch ". (ico | pdf | flv | jpg | jpeg | png | gif | svg | js | css | swf) $">
        Zestaw nagłówków Cache-Control „max-age = 84600, public”
</filesMatch>    

Apache wygasa nagłówki (.htaccess):

## START ADD EXPIRES HEADERS ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image / jpg „dostęp 1 rok”
ExpiresByType image / jpeg „dostęp 1 rok”
ExpiresByType image / gif „dostęp 1 rok”
ExpiresByType image / png „dostęp 1 rok”
ExpiresByType image / svg „access 1 year”
ExpiresByType text / css „access 1 month”
ExpiresByType application / pdf „access 1 month”
ExpiresByType application / javascript „access 1 month”
ExpiresByType application / x-javascript „access 1 month”
ExpiresByType application / x-shockwave-flash „access 1 month”
ExpiresByType image / x-icon „dostęp 1 rok”
ExpiresDefault „dostęp 2 dni”
</IfModule>
## KONIEC DODAJ WYGASA NAGŁÓWKI ##  

Kontrola pamięci podręcznej Nginx:

lokalizacja ~ * \. (js | css | png | jpg | jpeg | gif | svg | ico) $ {
 wygasa 30d;
 add_header Cache-Control "public, no-transform";
}   

Nginx wygasa nagłówki:

lokalizacja ~ * \. (jpg | jpeg | gif | png | svg) $ {
        wygasa 365d;
    }
 
    lokalizacja ~ * \. (pdf | css | html | js | swf) $ {
        wygasa 2d;
    }    

Aby przetestować nagłówki, możesz użyć tego bezpłatnego narzędzia do sprawdzania pamięci podręcznej przeglądarki .

W przypadku ważnych zasobów użyj funkcji Preconnect i Prefetch

Łączenie wstępne i pobieranie wstępne to dwie taktyki przyspieszania rozpoznawania nazw DNS dla zasobów stron trzecich, co może przyspieszyć pobieranie zasobów. Na przykład możesz nakazać przeglądarkom wstępne połączenie się z Twoim CDN lub Google Fonts CDN.

preconnect
Źródło: web.dev

Możesz dowiedzieć się więcej w tym poście z WP Rocket .

Zarządzaj swoimi skryptami, aby uniknąć ładowania całej witryny

Wiele wtyczek WordPress ładuje swoje skrypty w całej witrynie, nawet jeśli używasz wtyczki tylko na niektórych stronach. Może to powodować niepotrzebne spadki wydajności na stronach, na których nie używasz tej wtyczki.

Na przykład, powiedzmy, że używasz WooCommerce jako systemu przetwarzania płatności za kurs online . Nawet jeśli nie tworzysz pełnego sklepu eCommerce, WooCommerce nadal będzie ładował swoje skrypty na każdej stronie, tak jakbyś prowadził sklep WooCommerce.

Aby to naprawić, możesz użyć wtyczki, która pozwala warunkowo kontrolować użycie skryptu na podstawie strony po stronie. Dwie dobre opcje to:

Celem jest załadowanie każdego skryptu tylko w przypadku zawartości, która jest absolutnie potrzebna, i wyłączenie go wszędzie indziej:

speed-up-wordpress-7-asset-cleanup

Uważaj na dane automatycznie ładowane z wtyczek

Podobnie jak niektóre wtyczki ładują swoje skrypty w całej witrynie, niektóre wtyczki również używają podobnej taktyki w Twojej bazie danych poprzez automatycznie ładowane dane w tabeli wp_options . Co gorsza, wiele wtyczek nie czyści swoich danych, nawet jeśli usuniesz wtyczkę. Może to spowolnić czas zapytań do bazy danych, szczególnie w starszych witrynach.

Możesz zapoznać się z tym przewodnikiem, aby dowiedzieć się, jak wyczyścić dane ładowane automatycznie.

Ogranicz użycie skryptów innych firm

Skrypty innych firm to takie elementy, jak:

  • Skrypty śledzące – Google Analytics , Hotjar itp.
  • Media społecznościowe – Facebook Pixel, przyciski „Lubię to” itp.
  • Reklamy innych firm – Google AdSense, Media.net itp.
  • Niektóre narzędzia do testowania A / B – Google Optimize , VWO itp.
  • Itp.

Korzystanie ze skryptów innych firm może być szczególnie trudne dla wydajności witryny, ponieważ masz dużo mniejszą kontrolę nad optymalizacją tych skryptów. Na przykład nie możesz kontrolować ich zachowania w pamięci podręcznej przeglądarki, a każdy skrypt innej firmy dodaje również dodatkowy czas rozpoznawania nazw DNS.

Z tego powodu chcesz maksymalnie ograniczyć korzystanie ze skryptów innych firm. Zastanów się długo i intensywnie, czy każdy skrypt wnosi do witryny wystarczającą wartość, aby uzasadnić spadek wydajności.

Aby uzyskać większą kontrolę, możesz również rozważyć lokalne przechowywanie niektórych skryptów, takich jak:

Użyj wtyczki zwiększającej prędkość

Niektóre z wyżej wymienionych zadań można wykonać za pomocą wtyczki prędkości WordPress. W rzeczywistości korzystanie z tych wtyczek może przede wszystkim zapobiec wystąpieniu problemów, zapewniając, że Twoja witryna WordPress jest poprawnie zoptymalizowana podczas dodawania multimediów lub treści.

Wysoce zalecaną wtyczką jest WP Offload Media. Przyspiesza to Twoją witrynę WordPress, przenosząc  multimedia do pamięci w chmurze, takiej jak Amazon S3 lub DigitalOcean Spaces, a następnie błyskawicznie obsługując ją za pomocą CDN. (Posiada również integrację z Elementorem ).

Zachowaj równowagę między dużą szybkością witryny a doskonałym projektem witryny

Poza wszystkim, co zbadaliśmy, ważne jest, aby pamiętać, że nie ma idealnego rozwiązania dla szybkości. 

Sprowadza się to do testowania i ponownego testowania, a przede wszystkim do znalezienia równowagi między tym, co ma dostarczyć nasza witryna, a tym, jak szybko to osiągniemy.

Jako twórcy stron internetowych czasami naszą misją jest oszołomienie naszych odbiorców, ale czasami ryzykujemy szybkość. Ale właśnie w tym miejscu rozwija się kreatywność i pomysłowość – z pewnymi ograniczeniami.

Wypełnij brief strony WWW a w ciągu 24h otrzymasz darmową wycenę!

Zamów darmową wycenę
budowy strony internetowej


Opisz nam w kilku słowach wizję swojej strony, jak miałaby wyglądać i jakie funkcje mieć wbudowane. Pozwoli to nam już na wstępie przedstawić zakres cenowy wykonania takiej strony.

Zapytanie można do nas przesłać również bezpośrednio
na poniższy adres e-mail: biuro@seobit.pl