6 wskazówek, jak zoptymalizować swoją witrynę Elementor

Jak szybko ładuje się strona internetowa i jakie doświadczenie oferuje, niezależnie od urządzenia używanego do uzyskania do niej dostępu, to prawdopodobnie dwie pierwsze rzeczy, które użytkownik zauważa, gdy po raz pierwszy na nią ląduje.

Nauka optymalizacji witryny pod kątem wydajności i konwersji ma kluczowe znaczenie, ponieważ zapewni, że będzie działała dokładnie tak ciężko, jak powinna, pozostawiając odwiedzających zadowolonych z przeglądania.

Jeśli jesteś na tej stronie, prawdopodobnie jesteś tutaj, aby poszukać informacji o WordPressie. A jeśli słyszałeś o WordPressie, to musiałeś natknąć się na Elementora — wiodącego kreatora witryn typu „przeciągnij i upuść” w ekosystemie.

Kreator witryn WordPress z lotu ptaka

Jeśli masz witrynę Elementor, ale nie zoptymalizowałeś jej jeszcze w pełni, tracisz wiele niesamowitych korzyści. Elementor to kreator stron WordPress do tworzenia unikalnych i atrakcyjnych wizualnie stron internetowych. Ma aktywną społeczność ponad 8 milionów twórców stron internetowych.

Elementor pokazuje wynik Twojego projektu, gdy łączysz różne elementy projektowania stron internetowych, przyspieszając ten proces. Narzędzie łatwo łączy się z innymi wtyczkami i działa wygodnie na dowolnym motywie WordPress.

Elementor oferuje intuicyjne nawigatory i menu, z których można korzystać nawet bez znajomości kodowania HTML lub CSS. Najnowsza wersja, tj. Elementor 3.4, zawiera kilka fajnych funkcji i ulepszeń zorientowanych na UX.

Oferuje użytkownikom możliwość nieograniczonego projektowania dzięki nowym opcjom projektowania. Można zapoznać się z widżetem koszyka menu, AJAX Load More, Video Playlists i Dynamic WooCommerce Tags. Funkcjonalności te pomagają w marketingu i innych funkcjach na stronach internetowych.

Choć Elementor jest niesamowity, ponieważ jest po wyjęciu z pudełka, wciąż jest miejsce na ulepszenia, jeśli chodzi o wydajność wtyczek i funkcjonalność witryny. W tym artykule omówimy sześć wskazówek, które pomogą Ci wykorzystać to, co Elementor wnosi do tabeli, jednocześnie optymalizując wtyczkę dla Twojej witryny. Zacznijmy:

1. Wybierz metodę ładowania czcionek, aby zwiększyć szybkość strony

Elementor umożliwia swoim użytkownikom zmianę metody ładowania czcionek Google w witrynach. Sposób ładowania tych czcionek może wpłynąć na ładowanie Twojej witryny. Zespół Elementora stale publikuje aktualizacje, które modyfikują sposób działania ich wtyczki pod kątem poprawy wydajności.

Ekran ustawień Elementora pozwala wybrać zmiany w metodzie ładowania czcionek Google. W najnowszej wersji masz dostęp do pięciu opcji do wyboru, a mianowicie:

• Domyślne : tutaj przeglądarka definiuje strategię wyświetlania czcionek.
• Blokowanie : Nadaje czcionce krótki okres blokowania i nieskończony okres wymiany.
• Fallback : Nadaje czcionce bardzo mały okres blokowania i krótki okres wymiany.
• Opcjonalnie : jest to to samo co Fallback, jeśli chodzi o ukrywanie tekstu. Jedyna różnica polega na tym, że używa czcionki rezerwowej, chyba że czcionka jest w pełni załadowana.
• Zamień : oznacza, że ​​jeśli czcionka nie jest ładowana zgodnie z wymaganiami, przed ponownym renderowaniem w zaktualizowanej wersji zostaną użyte czcionki zastępcze.

2. Rozwiąż konflikty konfiguracji serwera w Twojej witrynie

Z każdą wtyczką możliwe jest, że napotkasz konflikt serwera. Aby zminimalizować problemy z hostingiem lub serwerem podczas korzystania z Elementora, możesz użyć prostego przełącznika, do którego możesz uzyskać dostęp, przechodząc do podstawowych ustawień Elementora.

Kliknij Elementor > Ustawienia > Zaawansowane , aby włączyć opcję „Przełącz metodę ładowania edytora frontonu” w sekcji „Program ładujący edytora”, aby rozwiązać konflikty konfiguracji serwera (patrz zrzut ekranu powyżej).

W ten sposób włączysz metodę ładowania edytora Elementor, która przydaje się do rozwiązywania różnych rodzajów problemów z serwerem hostingowym.

3. Zoptymalizuj układ witryny

Aby Twoja witryna była interaktywna i przyjazna dla użytkownika, Elementor oferuje różne układy do dodawania projektów do Twojej witryny. Istnieją różne opcje, takie jak format siatki lub styl murowany, które możesz wybrać w zależności od tego, co dobrze pasuje do zawartości Twojej witryny.

Niedawna aktualizacja Theme Buildera pozwala w rzeczywistości uzyskać wizualny przegląd całej witryny. Możesz zarządzać, który szablon ma zastosowanie do poszczególnych obszarów witryny i łatwo edytować, aktualizować, modyfikować zawartość w razie potrzeby.

Możesz również wybrać standardowy układ bloga, aby dobrze prezentować swoje produkty. Nowo wprowadzone niestandardowe punkty przerwania umożliwiają projektowanie bardziej responsywnych stron internetowych. Punkt przerwania to w zasadzie punkt, w którym element treści reaguje na szerokość urządzenia.

Oznacza to, że Twoja witryna będzie dobrze wyglądać na dowolnym rozmiarze ekranu i zapewniać odwiedzającym lepsze wrażenia na dowolnym urządzeniu. Układ witryny zmienia się dynamicznie w zależności od szerokości urządzenia z tymi punktami przerwania, które można zoptymalizować za pomocą responsywnego mechanizmu ładowania kontroli Elementora. Teraz można doświadczyć skrócenia czasu odpowiedzi serwera nawet o 23%.

Ponadto Elementor 3.4 (i nowsze) umożliwia dostosowanie układu projektu do siedmiu urządzeń, w tym oryginalnego komputera stacjonarnego, telefonu komórkowego i tabletu.

Oferuje punkty przerwania wraz z nowymi rozmiarami urządzeń szerokoekranowych, aby uzyskać więcej miejsca na ekranie. Zapewnia pełną elastyczność w zakresie niezależnego zwiększania lub zmniejszania rozmiaru podglądu w razie potrzeby, co daje platformę, która zapewnia znacznie wyższą wydajność.

4. Kompresuj wizualizacje witryny bez obniżania jakości

Optymalizacja obrazu to kluczowy czynnik poprawiający ogólną wydajność witryny. Klienci szukają więcej treści wizualnych i chcą szybciej ładować strony internetowe. Aby skrócić czas ładowania strony, musisz zoptymalizować swoje obrazy.

Ponieważ motywy WordPress i trendy projektowe ewoluują w kierunku większej liczby elementów wizualnych, konieczne jest zapewnienie, że filmy, zdjęcia i GIF-y, które umieszczasz w swojej witrynie, nie spowalniają jej.

Ale zamiast pobierać wszystkie elementy wizualne na raz, gdy strona się ładuje, możesz wdrożyć leniwe ładowanie – popularną technikę stosowaną w projektowaniu stron internetowych, aby odroczyć ładowanie niekrytycznych zasobów (np. zdjęć) na stronie i zamiast tego ładować je tylko w moment potrzeby (np. przewinięcie strony).

Lazy loading jest podstawową funkcją WordPress od WordPress 5.5, ale nie działa z Elementorem, ponieważ wtyczka kompiluje CSS obrazu tła w osobnym arkuszu stylów. Ale nie martw się, mówimy o WordPressie, więc do wszystkiego jest wtyczka! Oto kilka świetnych opcji do rozważenia.

Optimole

Kompleksowe rozwiązanie do optymalizacji obrazu dla WordPress, kompatybilne z Elementorem. Twoje obrazy będą wyświetlane z sieci CDN, a nie z głównego serwera, co zmniejsza czas ładowania i wykorzystanie przepustowości. Wybiera odpowiedni rozmiar obrazu dla przeglądarki i okna użytkownika odwiedzającego oraz wykorzystuje leniwe ładowanie do wyświetlania obrazów.

Smush

Kolejna wysoko oceniana wtyczka do optymalizacji obrazu, która dobrze współpracuje z Elementorem, Smush umożliwia łatwą zmianę rozmiaru, optymalizację i leniwe ładowanie obrazów w celu poprawy wydajności. Oferuje bezstratną kompresję i zbiorczo przetwarza pliki PNG, JPEG i GIF. Możesz także skonfigurować automatyczną optymalizację, aby Twoje załączniki były poddawane superszybkiej kompresji podczas przesyłania.

5. Popraw wydajność dzięki funkcjom DOM Output i ładowania zasobów

Najnowsza wersja Elementora zawiera szereg cech wydajności, takich jak ulepszone ładowanie zasobów i dostępność. Nowa wersja zmniejsza rozmiary plików zasobów JS poprzez wycofanie obsługi starszych przeglądarek (takich jak Internet Explorer).

Mniejsze rozmiary plików zasobów przyspieszają ładowanie, a ładowane warunkowo lightboxy mają opcję ładowania ich na żądanie.

Elementor pracuje nad zmniejszeniem elementów DOM i wagi strony, gdy spowalniają one szybkość Twojej witryny. Ma również wbudowane ładowanie, dzięki czemu użytkownicy mogą wyświetlać widżety bez oczekiwania na pełne pobranie wszystkich plików JavaScript przed renderowaniem jakiejkolwiek treści lub funkcji.

Aby upewnić się, że Twoja witryna jest zoptymalizowana do najlepszych możliwości, Elementor wprowadza zmiany w renderowaniu CSS i usuwaniu elementów DOM.

Jednak niektóre ulepszenia mogą zająć trochę czasu, ponieważ mają niski potencjał zakłóceń, podczas gdy inne wiążą się z wysokim ryzykiem i jeszcze większym potencjałem problemów, jeśli zostaną wykonane nieprawidłowo.

6. Wybierz i zarządzaj swoimi wtyczkami wydajnie

Elementor ma własną funkcję kreatora, ale łatwo integruje wtyczki i zarządza nimi, aby spełnić bardziej spersonalizowane wymagania. Na przykład Elementor dobrze integruje się z renomowanymi wtyczkami WordPress, takimi jak WooCommerce, Yoast, Rank Math, ACF, Toolset, Pods, LearnDash, Tutor LMS i MemberPress.

Aby zintegrować formularze z Elementorem, możesz użyć widżetu shortcode. Ale ta metoda nie pozwala na wizualne dostosowywanie formularza na stronie obsługiwanej przez Elementor, ponieważ używa skrótów do osadzania formularzy na stronach.

Poświęć trochę czasu na wybór wtyczek zaprojektowanych do pracy z Elementorem. Dodatki, takie jak Happy Addons i Essential Addons, są dostarczane z widżetami Elementor, które umożliwiają integrację formularzy witryny z edytorem wizualnym.

Niezależnie od tego, czy używasz Gravity Forms, Contact Form 7, czy innych popularnych wtyczek, te integracje zapewnią, że Twoje formularze będą wyglądać świetnie zarówno w trybie projektowania, jak i na opublikowanych stronach. Ponadto będą działać tak wydajnie, jak nigdy dotąd, nie wpływając negatywnie na wydajność witryny.

Możesz także rozważyć wtyczkę, taką jak Uncanny Automator, do automatyzacji funkcji w witrynie Elementor. Na przykład możesz utworzyć przepis, aby automatycznie wyświetlać wyskakujące okienko z formularzem subskrypcji biuletynu, gdy użytkownicy prześlą komentarz do Twojej witryny zbudowanej za pomocą Elementora.

Nie można zaprzeczyć, że Elementor 3.4 to duży krok naprzód w projektowaniu i wydajności stron internetowych. Oferuje wiele ulepszonych funkcji, takich jak suwaki, animacje i kreatory formularzy na żywo, które mogą poprawić interfejs użytkownika witryn internetowych w celu sprzedaży produktów, jednocześnie zbierając informacje od użytkowników odwiedzających witrynę.

Ale co ważniejsze, ważne jest, aby położyć nacisk na optymalizację strony internetowej. Jak wydajność Twojej witryny jest głównym dyktatorem sukcesu nowoczesnych firm internetowych. W końcu niepozorne, powolne i niezgrabne strony internetowe frustrują odwiedzających witrynę i zabijają zyski firmy. Jeśli nie chcesz, aby potencjalni klienci szukali alternatyw, zoptymalizuj swoją witrynę.