Optymalizacja strony www w Elementor
Elementor to edytor, który zawiera w sobie wiele funkcji. To pozwala nam na budowanie naszej strony www na wiele sposobów, przy użyciu różnych narzędzi i technik pracy.
Jednak jak się okazuje im więcej użyjemy widżetów, typów sekcji i kolumn oraz elementów powtarzalnych, nasza witryna straci na szybkości. Aby temu zapobiec konieczna jest optymalizacja układu strony www.
Istnieją proste metody pracy z Elementorem, które pomogą nam zbudować profesjonalny layout i jednocześnie zachować dobre właściwości pod względem szybkości wczytywania strony w przeglądarce.
Stosuj ustawienia globalne
Przy doborze koloru lub czcionki stosuj ustawienia globalne. Najpierw ustaw te wartości w panelu USTAWIENIA witryny. Ustaw wcześniej wartości globalne w panelu ustawienia.
Następnie wybierz dany element w strukturze strony i po zaznaczeniu kliknij w zakładkę STYL. Zarówno przy wyborze stylu dla typografii i kolorów, możemy kliknąć w ikonę globusa i z rozwiniętej listy wybrać zdefiniowany wcześniej kolor, rodzaj czcionki lub nadać nowy styl.
W ten sposób po załadowaniu strony w przeglądarce, ta wyśle mniej żądań do serwera. Kod strony stanie się lżejszy i prostszy. To z kolei pozwoli na skrócenie czasu ładowania strony i tym samym zwiększy notowania dla SEO.
Mniej widżetów na stronie
Przy budowie strony, staraj się używać widżetów w taki sposób, żeby było ich jak najmniej. Taka optymalizacja układu strony www sprawi, że witryna znacznie przyspieszy. Przy budowie danej sekcji na stronie, dobrze jest stosować zasadę ograniczania widżetów. Dobierz taki widżet, który zapewni wykonanie danego elementu bez stosowania innego, dodatkowego widżetu.
Na przykład gdy chcemy zbudować nagłówek, zamiast tworzyć oddzielne kolumny możemy użyć widżetu NAV MENU (tylko w wersji Elementor PRO). Po jego przeciągnięciu na scenę, możemy edytować jego poszczególne sekcje, co pozwoli nam utworzyć cały nagłówek.
Innym przykładem dobrej praktyki pracy z widżetami w Elementorze jest zastosowanie widżetu karuzela obrazków do prezentacji logotypów.
Zamiast stosować oddzielne kolumny dla każdego logotypu, możemy dodać do sekcji z jedną kolumną widżet karuzela obrazków. W ustawieniach widżetu możemy ustawić jeden wspólny rozmiar dla obrazków 1 kliknięciem i nie musimy kontrolować rozmiaru dla każdego obrazka oddzielnie. W zakładce style możemy również ustawić odstępy i wyrównanie w pionie i w poziomie w łatwy sposób.
Odpowiednie wymiary obrazków
Przed dodaniem obrazków na stronie dopasuj dokładnie ich wymiary do poszczególnych elementów struktury strony. Dzięki temu zwiększymy szybkość ładowania (mniej przeliczeń), a także zapobiegniemy niepotrzebnemu przesuwaniu się układu strony w przeglądarce.
Pamiętajmy o tej zasadzie, bo optymalizacja układu strony www pomoże znacznie przyspieszyć witrynę.
Wyrównuj elementy za pomocą marginesów i odstępów
Żeby wyrównać dany element względem kolumny stosuj ustawienia marginesów i odstępów (padding), zamiast tworzyć dodatkowe kolumny wewnątrz sekcji. Taki sposób tworzenia strony internetowej w Elementorze zapewni mniejszą ilość kodu i pomoże w jej optymalizacji.
optymalizuj filmy na stronie www
Do umieszczenia filmu na stronie www użyj widżetu video. W ustawieniach włącz parametr lazy load. Takie ustawienie pozwoli na zastąpienie kodu do umieszczenia filmu, statycznym obrazem. Film jest ładowany dopiero w momencie, gdy użytkownik kliknie w obraz.
Cała operacja poprawia czas ładowania całej strony www, dlatego używaj jej na swojej witrynie. Taką opcję możesz również znaleźć w widżetach takich, jak lotte lub pro Gallery.
Optymalizacja grafiki na stronie www
Dobrą praktyką jest utrzymanie wagi strony na poziomie 1 mb. Dlatego ważnym czynnikiem, który pozwoli nam na uzyskanie takiego wyniku jest optymalizacja grafiki.
Takie pliki, jak jpg, png czy gif, pozwalają na kompresję. Jest to proces, który pozwala na redukcję pikseli, pogarszając jakość wyświetlanego obrazu, ale jednocześnie zmniejszając jego wagę.
Google zaleca czas ładowania dla obrazka do ok. 3 sekund, dlatego istotne jest żeby nasze obrazki nie ładowały się dłużej. Do grafik typu logo lub ikony używaj plików SVG. Pozwalają one na skalowanie pliku bez utraty jakości.
Żeby wstawiać pliki tego typu w Elementorze należy przejść do jego ustawień i w zakładce ADVANCED, włącz opcję niefiltrowane przesyłanie plików i zapisz zmiany.
Wtyczka Smush
Darmowa wtyczka Smush pozwala na optymalizowanie obrazków już po stronie serwera, na którym znajduje się nasza witryna. Wtyczka jest oceniana wysoko przez użytkowników i daje bardzo dobre rezultaty.
Po zainstalowaniu wtyczki w procesie konfiguracji poprowadzi nas za rękę kreator konfiguracji. Klikamy przycisk Begin Setup. Wszystkie opcje domyślnie zaznaczone lub nie, zostawiamy bez zmian.
Pokaże się nam okno programu. Zobaczymy liczbę obrazków do skompresowania.
W zakładce Image Resizing ustawiamy szerokość dla największego obrazu na stronie na 2000 pikseli.
Następnie wciśnij przycisk Bulk Smush Now (masowa kompresja) i wtyczka rozpocznie proces optymalizacji obrazków. Nie zamykaj okna programu zanim kompresja nie dobiegnie do końca. Po skończonej optymalizacji program wyświetli dane pokazujące ile miejsca udało się zaoszczędzić.
Pamiętaj, że skuteczna optymalizacja obrazków na twojej stronie www jest jedną z najskuteczniejszych technik optymalizacji. Dlatego warto poświęcić dla niej trochę więcej czasu i nie pomijać jej. Szybsze ładowanie obrazów zwiększy wydajność witryny i znacznie poprawi wyniki SEO.
