Wskazówki dotyczące ulepszania kluczowych elementów witryny WordPress

Opublikowany: 2021-09-13

Google potrafi wywołać falę paniki zarówno wśród projektantów stron internetowych, jak i właścicieli witryn. Kiedy dokonują zmiany w swoim algorytmie wyszukiwania, ludzie zaczynają starać się nadrobić zaległości. Łatwo zrozumieć, dlaczego. Nikt nie chce, aby ich rankingi SEO ucierpiały.

Tak więc, kiedy ogłoszono metryki Core Web Vitals, reakcja była dość przewidywalna. Ponieważ te zmiany są oparte na wydajności witryny, skupiliśmy się na zapewnieniu błyskawicznego wczytywania.

Ale nie zawsze jest to proste. Strony internetowe, które obsługują system zarządzania treścią (CMS), taki jak WordPress, mogą stanowić szczególne wyzwanie. W grę wchodzi wiele czynników. Dlatego poprawa wydajności wymaga wielotorowego podejścia.

Gdzie zacząć? Zapoznaj się z naszym przewodnikiem dotyczącym zwiększania wyniku Core Web Vitals Twojej witryny WordPress.

Implementuj buforowanie

Jednym z najprostszych sposobów na zwiększenie szybkości witryny WordPress jest wdrożenie buforowania. W wielu przypadkach po wykonaniu tego jednego kroku poprzednio słaba strona internetowa stanie się znacznie szybsza. Dzieje się tak nawet na stosunkowo tanim hostingu.

Domyślnie strony i posty WordPress muszą pobierać zawartość i ustawienia z bazy danych witryny. To wymaga czasu. Z drugiej strony pamięć podręczna będzie wyświetlać zawartość jako statyczne pliki HTML – eliminując potrzebę wywołania bazy danych. Po usunięciu pośrednika (tj. bazy danych) nastąpi szybszy czas ładowania.

Niektóre pakiety hostingowe, w szczególności zarządzany hosting WordPress, będą zawierać pamięć podręczną opartą na serwerze. Jest to często najlepsza opcja, ponieważ wymaga niewiele od projektantów stron internetowych i działa całkiem nieźle. Może być konieczne częste usuwanie. W przeciwnym razie jest to doświadczenie bez rąk. I można go skutecznie połączyć z wtyczką, aby jeszcze bardziej zwiększyć szybkość.

Nawet jeśli Twój host nie zapewnia buforowania na poziomie serwera, nadal możesz zoptymalizować wydajność za pomocą wtyczki. Wtyczki buforujące różnią się zakresem, złożonością i ceną. Zapewniają jednak wymierne rezultaty, jeśli chodzi o skrócenie czasu ładowania. To z kolei jest pozytywnym impulsem dla Core Web Vitals.

Sportowy samochód.

Odrocz ładowanie skryptów i stylów blokujących renderowanie

Podczas testowania wydajności swojej witryny w Google PageSpeed ​​Insights temat zasobów blokujących renderowanie wydaje się być często poruszany. Są to skrypty i style, które nie są uważane za „krytyczne” – co oznacza, że ​​nie są wymagane do renderowania treści strony „na górze strony”.

Zasoby te mogą przeszkodzić w skróceniu czasu ładowania. W szczególności wpływają one na wynik „Największej zawartości treściowej (LCP)” w Core Web Vitals. Jest to czas potrzebny na załadowanie głównego obszaru zawartości strony. Zmniejszenie LCP jest, cóż, niezbędne.

Jednym ze sposobów poprawy sytuacji jest opóźnienie (lub odroczenie) ładowania różnych elementów treści (obrazów, filmów, tekstu na poziomie bloku). Gwarantuje to, że najpierw ładowane są tylko potrzebne skrypty i style, a wszystko inne pojawia się później.

Wraz z minifikacją, wiele wtyczek do buforowania/optymalizacji WordPress również zawiera tego typu funkcje. Może to jednak wymagać trochę eksperymentowania, ponieważ odroczenie niewłaściwego zasobu może być problematyczne.

Przetestuj wszystkie wprowadzone zmiany i sprawdź, czy w konsoli przeglądarki nie ma błędów. Po znalezieniu odpowiedniej konfiguracji liczba zasobów blokujących renderowanie na Twojej stronie powinna zostać znacznie zmniejszona.

Znak wydajności na ulicy.

Optymalizacja obrazów

Powszechne stosowanie dużych obrazów bohaterów i złożonych suwaków tylko zwiększa wyzwanie optymalizacji wydajności. Zasoby te mogą wyglądać ładnie, ale mogą z łatwością sumować się do megabajtów danych. To nie da ci pozytywnej oceny z Core Web Vitals – szczególnie na urządzeniach mobilnych.

Na szczęście istnieje kilka sposobów na zmniejszenie obciążenia. Przede wszystkim pozbądź się wszelkich obrazów, które uważasz za niepotrzebne. Usunięcie nawet jednego dużego obrazu może mieć znaczenie.

Resztę obrazów można zoptymalizować. Zmniejszy to rozmiar pliku i zmniejszy wpływ, jaki mają na czas ładowania.

To, jak podejdziesz do optymalizacji obrazu, zależy od Ciebie. Możesz pobrać kopię swoich najgorszych przestępców i skompresować je za pomocą ulubionego edytora obrazów, a następnie przesłać je z powrotem do swojej witryny. Możesz też zautomatyzować proces za pomocą przydatnej wtyczki multimedialnej WordPress.

Responsywne obrazy

W przypadku użytkowników mobilnych WordPress umożliwia wyświetlanie responsywnych obrazów za pośrednictwem srcset . W rzeczywistości automatycznie wykona brudną robotę na obrazach umieszczonych w treści. Jest to niezwykle cenne, ponieważ zapobiega spowalnianiu korzystania z urządzeń mobilnych przez ogromne media o rozmiarze komputera stacjonarnego. W przypadku obrazów znajdujących się poza głównym obszarem zawartości może być konieczne wykonanie pewnych prac niestandardowych w celu zaimplementowania tej funkcji.

Nowoczesne formaty obrazu

Warto również przyjrzeć się używanym formatom plików. Na przykład format WebP firmy Google może często zmniejszać rozmiar pliku przy zachowaniu jakości obrazu. Pamiętaj, że niektóre nowe formaty nie są obsługiwane w starszych przeglądarkach (ahem, IE), więc mogą być konieczne wersje zastępcze. Wtyczki również mogą w tym pomóc.

Osoba korzysta z oprogramowania do edycji zdjęć.

Lazy Load All the Things

Funkcja leniwego wczytywania ładuje elementy tylko wtedy, gdy znajdują się w widoku przeglądarki. Opóźniając ładowanie obrazów, ramek iframe i innych treści stron trzecich (takich jak widżety mediów społecznościowych), możesz skoncentrować zasoby na elementach, które użytkownicy zobaczą jako pierwsze.

WordPress już implementuje natywne, oparte na przeglądarce leniwe ładowanie obrazów. Gdy dodajesz obraz do strony lub posta, atrybut loading="lazy" jest umieszczany w tagu <img> . Oznacza to, że pod warunkiem, że obraz zawiera atrybuty wysokości i szerokości.

To świetnie – ale co z innymi elementami, takimi jak filmy czy iframe? Te elementy mogą również obciążać stronę po załadowaniu od samego początku.

Ramki iframe są teraz domyślnie ładowane z opóźnieniem – więc nie ma obaw. Niektóre bardziej złożone elementy mogą wymagać niestandardowego kodu lub wtyczki, aby zaimplementować tę funkcję.

Pies odpoczywa na ławce.

Pozbądź się bałaganu

Z biegiem czasu nawet dobrze utrzymana witryna WordPress może stać się zagracona. Zatkana baza danych, nieużywane wtyczki, które są nadal aktywne, nadęty motyw z funkcjami, których nie używasz – to się zdarza. Może też przeciągnąć w dół Twoje kluczowe wskaźniki internetowe.

Dlatego tak ważne jest, aby od czasu do czasu posprzątać. Bazę danych Twojej witryny można zoptymalizować ręcznie lub ustawić tak, aby robiła to regularnie. Nieużywane wtyczki można dezaktywować i usuwać. Motywy mogą być odchudzone lub zastąpione czymś lepszym.

Dowiedz się, co spowalnia Twoją witrynę, znajdź winowajców i rozpraw się z nimi. Możesz być zaskoczony, jak wielką może to zmienić.

Płytki z literami z napisem „KEEP THINGS SIMPLE”.

Popraw najważniejsze wskaźniki internetowe swojej witryny

Core Web Vitals komplikuje i tak już trudny proces optymalizacji wydajności witryny WordPress. Nawet witryna, która osiąga dobre wyniki w innych wskaźnikach wydajności, może nadal nie spełniać wymagań w tym obszarze. Widać to przede wszystkim w testach mobilnych.

Dobrą wiadomością jest to, że projektanci mogą zrobić wiele drobiazgów, aby nadrobić zaległości. Wdrożenie pamięci podręcznej stanowi świetny fundament i zapewnia natychmiastowy wzrost. Od tego momentu chodzi o zmniejszenie rozmiarów plików i ładowanie stylów i skryptów w kolejności ich ważności.

Idąc dalej, warto również dostosować CSS witryny, mając na uwadze podstawowe wskaźniki internetowe. Może to pomóc w uzyskaniu przerażającego wyniku skumulowanego przesunięcia układu (CLS) i zmniejszyć rozdęcie.

Ogólnie rzecz biorąc, rzeczy, które są dobre dla wydajności, są również dobre dla Core Web Vitals. Wyniki mogą się dość szybko poprawić. Po prostu wiedz, że potrzeba trochę prób i błędów, aby rozwiązać niektóre z tych indywidualnych niedociągnięć.

Nadrzędnym celem jest zapewnienie, że tylko podstawowe informacje zostaną załadowane, gdy użytkownik odwiedza Twoją witrynę. Dzięki temu zarówno odwiedzający, jak i Google będą bardzo zadowoleni.