Jak przyspieszyć Elementor

Jak przyspieszyć Elementor

Wszyscy wiemy, że szybkość ładowania się witryny ma ogromne znaczenie dla odwiedzających. Aby upewnić się, że ich doświadczenie z Twoją witryną będzie na najwyższym poziomie, musisz zadbać o optymalizację. O samej optymalizacji w ujęciu ogólnym pisałem już kilkukrotnie. Dziś jednak chciałbym skupić się na optymalizacji pracy jednego z najpopularniejszych edytorów drag & drop dla WordPress, tj. Elementor. Bez wątpienia szybko rośnie on siłę i staje się coraz popularniejszy. Wraz z popularnością podnoszą się głosy krytyczne w sprawie jego wpływu na wydajność witryny. Sami autorzy wtyczki dużo się starają aby przyspieszyć swoje narzędzie i dają nam dodatkowe możliwości optymalizacji. Zatem jak przyspieszyć Elementor? Na to pytanie odpowiem właśnie w tym wpisie.

Zalety Elementora

Sam Elementor ma już ogromna rzeszę fanów. Licząca ponad 8 milionów użytkowników społeczność chwali go sobie za niesamowitą wygodę użytkowania oraz możliwość efektownych rozwiązań. Oferuje bardzo intuicyjne menu nawigacyjne, sporą bazę gotowych do użycia szablonów i setki, jeśli nie tysiące widżetów tworzonych przez niezależne firmy i developerów. Nie wymaga znajomości HTML ani CSS i integruje się z niemal każdym motywem WordPress.

Pomimo, że posiada wiele zalet, to główną jego wadą jest generowanie dużej ilości kodu, który może spowalniać stronę. Nie wspominając o jego semantyce. Na polu optymalizacji i szybkości działania jest więc miejsce do działania.

Jak przyspieszyć Elementor

Co my, użytkownicy możemy zrobić, aby cieszyć się pięknym designem, nieszablonowymi rozwiązaniami i nie martwić się przy tym szybkością działania strony? Mądrze korzystajmy z danych nam opcji. Część z nich jest nawet wbudowana w Elementor. Zobacz, co możesz zrobić.

1. Ustaw metodę ładowania Google Fonts

W związku z licznymi prośbami, autorzy Elementora udostępnili w ustawieniach zaawansowanych możliwość zmiany metody ładowania czcionek z biblioteki Google. Znajdziesz je w zakładce Elementor -> Ustawienia -> Zaawansowane.

Jak przyspieszyć Elementor

To, w jaki sposób ładowane są czcionki ma duże znaczenia dla czasu ładowania się strony. W opcji “Ładowanie krojów pisma Google Fonts” masz do wyboru:

Domyślne – Ta opcja pozwala przeglądarce użytkownika wybrać automatycznie sposób ładowania czcionek. 

Blokowanie – Blokuje wyświetlanie tekstu do czasu, aż przeglądarka pobierze czcionki Google.

Zamień – Używa domyślnej czcionki systemowej do czasu aż przeglądarka pobierze czcionki Google a następnie zamienia ją (widać charakterystyczny przeskok tekstu i zmianę kroju).

Wsparcie awaryjne – Ukrywa na chwilę tekst do czasu, aż font Google zostanie pobrany. Jeśli nie nastąpi to w ciągu kilku sekund, przestanie czekać i wyświetli tekst z czcionką systemową użytkownika.

Opcjonalnie – Ukrywa na chwilę tekst do czasu, aż font Google zostanie pobrany. Jeśli nie nastąpi to w ciągu kilku sekund, wyświetli tekst z czcionką systemową użytkownika i podmieni czcionkę dopiero gdy zostanie ona w pełni pobrania (niezależnie od czasu).

Przetestuj te opcje i sprawdź czy Ci pasują i jak wpływają na czas ładowania się strony.

2. Zadbaj o odpowiedni layout

Projektując swoją stronę w Elementorze, zapewne zauważyłeś, że masz domyślnie dostępne trzy układy strony, tzw. breakpointy. Są nimi Mobile, Tablet i Desktop. Poszczególne widoki przełączają się w zależności od szerokości ekranu danego urządzenia (w pikselach). 

W jednej z ostatnich aktualizacji Elementor dostał aż 4 dodatkowe breakpointy, które możesz ustawić projektując stronę. Ma to spory wpływ na prędkość ładowania strony, bo w zależności od szerokości ekranu możesz pewne rzeczy ukrywać lub pokazywać. Np. ukrywać duże zdjęcia w Mobile a pokazywać tylko na tabletach lub laptopach. Możesz też, np. pokazywać mniej zdjęć w galerii na Mobile aby szybciej ładować stronę.

Zastanów się też, czy zamiast tworzyć jedną bardzo długa podstronę z ogromną ilością treści i multimediów, nie możesz podzielić ich na kilka mniejszych podstron. Każda z nich wczytywałaby się wtedy szybciej, niż wszystkie razem.

3. Zredukuj ilość elementów DOM kodu źródłowego 

Nie tak dawno temu, Elementor udostępnił eksperymentalna metodę zmiejszenie generowanych elementów DOM. W zakładce Elementor -> Ustawienia -> Eksperymenty znajdziesz wiele eksperymentalnych opcji przyspieszenia działania strony. Zoptymalizowany wynik DOM jest pierwszą z nich. Im mniej elementów DOM, tym mniej kodu, który przeglądarka musi przetworzyć zanim wyświetli stronę. Elementami DOM mogą być sekcje, divy, paragrafy itp. 

Elementor próbuje w tym aspekcie generować nieco mniej niepotrzebnych elementów. Dodatkowo wykorzystuje skrypty JavaScript metodą inline, co pozwala pokazać użytkownikowi wybrane elementy bez czekania na załadowanie się wszystkich skryptów.

Opcja ta jest mocno eksperymentalna, ale przynosi bardzo dobre rezultaty. Jej włączenie zalecane jest jednak raczej na samym początku budowy strony niż później. Po włączeniu, niektóre wcześniej zbudowane sekcje strony mogą przestać działać lub wyświetlać się inaczej. Chodzi głównie o te fragmenty strony, w których korzystałeś z niestandardowych skryptów czy styli CSS. Kompatybilność ze standardowymi widżetami Elementora jest jednak zachowana a więc w miarę bezpieczna.

4. Zapewnij kompatybilność wtyczki z serwerem

Jak to bywa z każdym motywem lub wtyczką – nie każdy serwer będzie domyślnie spełniał ich wymagania. Jeśli miewasz problemy z pracą Elementora, szczególnie na etapie ładowania się edytora i zapisywaniu zmian, możesz spróbować zmienić ustawienia wtyczki.

Przejdź do wspomnianej wcześniej zakładki Elementor -> Ustawienia -> Zaawansowane i odszukaj opcji “Przełącz metodę Loader’a Edytora”. Włącz opisaną funkcję i zapisz ustawienia. 

Elementor

5. Kompresuj obrazy

Na koniec porada nie związana bezpośrednio z Elementorem. Sprawa kompresji obrazów wydaje się oczywista, ale wielu użytkowników zapomina o tym fundamentalnym aspekcie. Duże obrazy potrafią ładować się nawet kilkanaście sekund, całkowicie wydłużając czas zakończenia ładowania się całej strony. Aby zmniejszyć czas ładowania strony – zmniejsz obrazki. O kompresji obrazów pisałem niejednokrotnie. Zajrzyj choćby do wpisu jak optymalizować obrazki do weba.

Domyślna funkcja WordPress do odkładania ładowania obrazów poza ekranem, tzw. lazy load nie działa z Elementorem, ale możesz wesprzeć się dodatkowymi wtyczkami takimi jak Smush czy Optimole.

Optymalizacja jest ważna

Nie da się zaprzeczyć, że prawidłowa optymalizacja strony jest szczególnie ważna z punktu widzenia użytkownika. Odwiedzający chce szybko przeczytać treść do której został odesłany z linka i nie ma ochoty czekać w nieskończoność. Duże obrazki oraz rozbudowane czcionki, nadmierna ilość treści czy kodu źródłowego tylko przeszkadzają. Stosując powyższe rady możesz znacznie przyspieszyć ładowanie się Twojej strony. A gdy wyrobisz sobie nawyk ich stosowania od samego początku, to zaprocentuje Ci to lepszymi wynikami na etapie finalnej optymalizacji strony po ukończeniu projektu.

Daj znać w komentarzach, czy powyższe porady Ci pomogły. Napisz też, jeśli stosujesz inne techniki optymalizacji Elementora. Z pewnością wszyscy chcemy je znać!

ZAPISZ SIĘ DO NEWSLETTERA!

Bądź na bieżąco! W newsletterze będziesz otrzymywać m.in. informacje o nowych wpisach na blogu, poradnikach na YouTube, e-bookach oraz ważnych wydarzeniach ze świata WordPress. Wysyłam jedynie wartościowe treści.

Facebook
Twitter
Email
Drukuj