Jak przyspieszyć katalog lub witrynę marketplace zbudowaną za pomocą HivePress?

W dzisiejszych czasach szybkość ładowania strony internetowej i ogólna wydajność mają kluczowe znaczenie dla dobrego doświadczenia użytkownika i rankingu w wyszukiwarkach. Niedawno Google ogłosił, że zacznie mierzyć podstawowe wskaźniki internetowe, takie jak wyniki stabilności wizualnej i czasy wczytywania stron, aby strony internetowe mogły określić, czy kwalifikują się do zwiększenia sygnału w rankingu. Ponadto strony z dłuższym czasem wczytywania mają zwykle wyższy współczynnik odrzuceń i krótszy średni czas na stronie.

W tym samouczku wyjaśnimy, jak zwiększyć wydajność witryny poprzez konfigurację pamięci podręcznej, optymalizację stylów i skryptów, a także optymalizację treści multimedialnych. Użyjemy wtyczki LiteSpeed ​​Cache, kompleksowego rozwiązania do przyspieszania witryn internetowych z mnóstwem narzędzi i funkcji, które sprawią, że Twoja witryna będzie działać szybko.

Do celów testowych użyjemy witryny z katalogiem WordPress zbudowanej za pomocą HivePress i kilku rozszerzeń wraz z domyślnym motywem ListingHive. Jeśli jednak Twoja witryna nie jest zbudowana z wtyczką HivePress, możesz wykonać te same kroki dla dowolnej innej witryny opartej na WordPressie.

Zacznijmy więc od instalacji LiteSpeed ​​Cache.

Instalowanie pamięci podręcznej LiteSpeed

Przede wszystkim musisz zainstalować wtyczkę LiteSpeed ​​Cache. Możesz to łatwo zrobić bezpośrednio z pulpitu WordPress, przechodząc do sekcji Wtyczki> Dodaj nowy . Znajdź go za pomocą paska wyszukiwania i kontynuuj, instalując go. Po zakończeniu instalacji wystarczy kliknąć przycisk „Aktywuj”, aby włączyć wtyczkę.

Po zainstalowaniu i aktywacji możesz rozpocząć optymalizację swojej witryny. Przejdźmy najpierw przez podstawowe ustawienia pamięci podręcznej.

Optymalizacja pamięci podręcznej

Aby dostosować podstawowe ustawienia pamięci podręcznej, przejdź do strony LiteSpeed ​​Cache > Cache . Na tej stronie znajduje się wiele różnych sekcji, ale omówimy tylko najważniejsze ustawienia.

Ustawienia pamięci podręcznej

W tym miejscu zdecydowanie zalecamy wyłączenie pamięci podręcznej dla zalogowanych użytkowników i żądań REST API. Jest to wymagane, aby wtyczka HivePress działała poprawnie. Po włączeniu lub wyłączeniu jakichkolwiek opcji nie zapomnij zapisać zmian.

Pamięć podręczna obiektów

Następnie włączmy Object Cache . Przejdź do sekcji Obiekt i sprawdź, czy pamięć podręczna obiektów jest dostępna w Twojej witrynie. Test połączenia powinien być wyświetlany jako „zaliczony”. Jeśli tak, możesz włączyć pamięć podręczną obiektów, a to drastycznie poprawi wydajność witryny poprzez buforowanie zduplikowanych zapytań do bazy danych.

Nie powinno być problemów z przejściem testu połączenia, jeśli Twoja witryna jest oparta na serwerze OpenLiteSpeed ​​lub Twój dostawca hostingu obsługuje buforowanie obiektów.

Pamięć podręczna przeglądarki

Na koniec przejdź do sekcji Pamięć podręczna przeglądarki i upewnij się, że jest włączona. Spowoduje to buforowanie całej statycznej zawartości, takiej jak style, skrypty i obrazy w przeglądarce użytkownika.

Optymalizacja strony

Następnym krokiem jest przejście do sekcji LiteSpeed ​​Cache > Optymalizacja strony , aby zoptymalizować style, skrypty i czcionki.

Optymalizacja CSS

Zacznijmy od sekcji Ustawienia CSS . W tym miejscu zalecamy włączenie ustawień CSS Minify i CSS Combine .

• CSS Minify – Jeśli włączysz tę opcję, wszystkie dodatkowe znaki odstępu, znaki nowego wiersza i inne niepotrzebne lub zbędne dane zostaną automatycznie usunięte z plików CSS bez wpływu na style witryny.
• CSS Combine – Po włączeniu tej opcji wszystkie pojedyncze pliki CSS zostaną scalone w jeden plik CSS. W ten sposób przeglądarka wysyła żądanie pojedynczego pliku zamiast żądać każdego pliku CSS osobno, zmniejszając liczbę żądań HTTP.

Optymalizacja czcionek

Jeśli Twoja witryna korzysta z czcionek Google, istnieje kilka opcji optymalizacji ładowania czcionek. W tej samej sekcji Ustawienia CSS możesz przewinąć w dół i ustawić opcję Optymalizacja wyświetlania czcionek na Zamień , aby czcionka zastępcza była używana do wyświetlania tekstu, dopóki nie zostanie w pełni pobrana czcionka niestandardowa.

Po ustawieniu opcji Zamień przejdź do sekcji Optymalizacja na tej samej stronie i włącz opcję Załaduj czcionki Google asynchronicznie , aby załadować czcionki Google w tle podczas renderowania strony.

Optymalizacja JS

Przejdźmy teraz do sekcji Ustawienia JS , aby zoptymalizować pliki JavaScript. Tutaj zalecamy wykonanie tych samych kroków, jak w przypadku ustawień CSS. Po prostu włącz opcje JS Minify i JS Combine , aby pliki JS również zostały zminimalizowane i połączone w jeden plik.

Dostępna jest również opcja Load JS Deferred , która może naprawdę wiele zmienić. Po włączeniu tego ustawienia skrypty będą ładowane w tle, podczas gdy przeglądarka renderuje układ i style strony. Skrypty są często „cięższe” niż HTML, więc ładowanie i wykonywanie skryptów, które nie są niezbędne do początkowego renderowania strony, może zostać odroczone i wczytane później. Pozwala odwiedzającym na niemal natychmiastowe korzystanie z serwisu.

Po zaznaczeniu tej opcji upewnij się, że interfejs witryny nie jest uszkodzony, ponieważ niektóre skrypty mogą wymagać wczytania przed wyrenderowaniem strony.

Optymalizacja mediów

Na koniec musisz zoptymalizować zawartość multimedialną. Ponieważ obrazy często stanowią około połowy rozmiaru zawartości strony internetowej, konwersja wszystkich obrazów do formatu WebP (który jest średnio o 30% mniejszy niż inne formaty) może znacznie poprawić szybkość ładowania strony.

W sekcji LiteSpeed ​​Cache > Optymalizacja obrazu > Ustawienia możesz przekonwertować obrazy swojej witryny do formatu WebP, włączając ustawienia Utwórz wersje WebP i Zastępowanie obrazu WebP .

Po zaznaczeniu tych opcji przejdź do sekcji Podsumowanie optymalizacji obrazu , aby uzyskać klucz domeny i zoptymalizować obrazy, klikając przycisk „Wyślij żądanie optymalizacji”, aż wynik optymalizacji obrazu osiągnie 100%.

Ponadto, jeśli na Twojej stronie znajdują się jakieś embedy (np. filmy na YouTube, posty na Instagramie lub tweety), lepiej załadować osadzoną treść tylko wtedy, gdy użytkownicy przewiną do niej, a nie podczas początkowego renderowania strony. Spowoduje to znacznie szybsze renderowanie pierwszej strony i zmniejszenie zużycia pamięci przeglądarki.

Przejdź do sekcji LiteSpeed ​​Cache > Optymalizacja strony > Ustawienia multimediów i włącz opcję Lazy Load iframes .

Zawijanie

Poniżej znajduje się zrzut ekranu wyników Google PageSpeed ​​na urządzeniach mobilnych i stacjonarnych po zoptymalizowaniu wydajności witryny, wykonując czynności opisane w tym samouczku.

Otóż ​​to! Jeśli zbudowałeś swój katalog lub witrynę marketplace za pomocą HivePress (lub dowolnego innego rozwiązania opartego na WordPress) , możesz wykonać te same kroki, aby skonfigurować pamięć podręczną, zoptymalizować style, skrypty i czcionki, a także treści multimedialne, takie jak obrazy lub osadzania. W rezultacie uzyskasz wysoki wynik w Google PageSpeed ​​(zwiększając w ten sposób rankingi SEO) i poprawisz ogólne wrażenia użytkownika swojej witryny.

Dodatkowo zachęcamy do zapoznania się z następującymi artykułami:

• Najlepsze wtyczki do katalogów WordPress
• Popularne motywy katalogów WordPress
• Błędy podczas tworzenia witryny z listą WordPress