Porównanie wydajności popularnych edytorów do tworzenia stron WordPress

Spis treści

Nie będzie to kompletne porównanie wszystkich popularnych konstruktorów/edytorów stron WordPress, w tym wpisie skupię się na wydajności tych narzędzi do Tworzenia stron.

Na potrzeby testów za pomocą tych narzędzi (page builders) odtworzę poniższą sekcję hero (trochę uproszczoną), którą pobrałem ze strony Dribbble.com, nie będzie to odwzorowanie pixel perfect. Użyje podstawowych elementów które są dostępne w tych edytorach. Tak więc każda strona będzie zawierała poniższe elementy/moduły.

1. Logo, Menu, 2 przyciski
2. Nagłówek H1, paragraf, przycisk, przycisk (kolumna 1)
3. Obrazek (kolumna 2)
4. Logo, nazwa strony (stopka)

Nie będę używał opcji stylowania modułów / bloków / widgetów, oprócz wydajności sprawdzę jak strona będzie wyglądała bez używania dodatkowych opcji modułu, co da mi podgląd w jaki spsób najniższym nakładem pracy stworzyć w miarę spójną stronę www. Czyli poniższą sekcję postaram się odtworzyć tylko przez dodanie elementu, podmianę tekstu i dodaniu zdjęcia.

Nie będę robił niczego oprócz instalacji i aktywowania motywu lub wymaganych wtyczek. Wiem że Divi i Elementor mają opcje które mogą poprawić szybkość strony, ale chcę sprawdzić optymalizację tych „edytorów / kreatorów stron” out of the box.

Nie będę optymalizował również obrazów, chcę żeby ten test oddawał wydajnosć poniższych narzędzi dla początkującego użytkownika który może nie wiedzieć że obrazy trzeba optymalizować.

Środwisko testowe, informacje o instalacji WP

Hosting	Zenbox – Hosting Firma 10k
Wersja WordPress	WordPress 6.3.1
Wersja motywu, wtyczki	Najnowsza na dzień 8.30.2023
Wersja PHP	7.4
Ilość podstron	1 (tylko strona główna)
Ilość wpisów	0
Ilość zdjęć w bibliotece	2 (logo i obrazek)
Dodatkowe wtyczki	0

Wszystkie testy były przprowadzane kilka razy w celu wykluczenia błędów narzedzi do pomiarów szybkości stron wwww. Robiłem poniższe testy również na wersji PHP 8, ale nie miało to większego znaczenia na wydajność.

Szybkość motywu Divi test Google PageSpeed insights, Pingdom i GTmetrix

Divi to motyw WordPress który pozwala na tworzenie stron za pomocą edytora wizualnego, jego największa zaletą jest to że posiada wiele układów graficznych, dzięki którym można szybko stworzyć stronę internetową.

Divi 4 wynik PageSpeed Insights

Divi 4 wynik Ping Dom Website Speed

Divi 4 wynik GTmetrix

Szybkość i wygląd strony stworzonej w Divi opinia

Po powyższsych testach już wiem że Divi jeżeli chodzi o wydajność nie wygra tego testu, ale co nie zmienia faktu że Divi to świetny motyw. Jeżeli chodzi o wygląd odtworzonej sekcji wygląda ona dosyść dobrze, po odpowiednim stylowaniu modułów w opcjach modułu Divi „Design”, można szybko bez znajomości CSS dostosować wygląd aby wyglądął identycznie jak w projekcie tej sekcji.

Z mojego doświadczenia wiem że Divi ma jeden z lepszych interfejsów stylizacji modułów, jest łatwy i intuicyjny.

Pomimo tego że Divi wypada najgorzej w tym teście polecam Divi ponieważ ma wiele innych zalet, których nie ma konkurencja.

Największa zaleta Divi to cena i brak ograniczeń licencji, za $249 możemy nabyć licencję dożywotnią z której możemy korzystać na nieograniczonej ilości stron www.

Szybkość wtyczki Elementor Pro test Google PageSpeed insights, Pingdom i GTmetrix

Wprawdzie Elementor to bezpłatna wtyczka, ale żeby skorzystać z dodatkowych opcji typu budowa nagłówka i stopki (i wiele więcej) musimy kupić wersję PRO, Elementor to obecnie najbardziej popularne narzędzie do tworzenia stron w ekosystemie WP.

Elementor Pro wynik PageSpeed Insights

Elementor Pro wynik Pingdom Website Speed

Elementor Pro wynik GTmetrix

Szybkość i wygląd strony stworzonej za pomocą wtyczki Elementor Pro opinia

Spodziewałem się lepszego wyniku dla strony stworzonej w Elementorze, co nie zmienia faktu że Elementor to świetne narzędzie do tworzenia stron WordPress, posiada wiele dodatków stworzonych przez zewnętrznych developerów. Jeżeli chodzi o wygląd odtworzonej sekcji wygląda ona dosyść dobrze, po odpowiednim stylowaniu widgetów w opcjach „Style”, można szybko bez znajomości CSS dostosować wygląd aby wyglądął identycznie jak w projekcie.

Pomimo tego że Elementor wypada nie najlepiej w tym teście polecam Elementor Pro.

Największą zaletą wtyczki Elementor Pro jest jej ciągła rozbudowa przez developerów. W porównaniu z Divi, Elementor rozwija się o wiele szybciej, a jego twórcy często dodają nowe funkcje.

Największą wadą wtyczki Elementor Pro jest brak licencji Lifetime.

Szybkość strony www stworzonej w kreatorze stron Breakdance

Breakdance to dosyć nowa wtyczka WordPress do tworzenia stron www z pomocą edytora graficznego więc nie moge napisać o niej zbyt wiele, przejdźmy więc do testów.

Wtyczka Breakdance wynik PageSpeed Insights

Strona Breakdance wynik Pingdom Website Speed

Strona stworzona w Breakdance wynik GTmetrix

Szybkość i wygląd strony stworzonej za pomocą wtyczki Breakdance opinia

Wow w przypadku wtyczki Breakdance jestem w szoku! Pomimo póki co najlepszego wyniku w narzędzi Google PageSpeed Insughts, spodziewałem się lepszego wyniku dla strony stworzonej z pomoca wtyczki Breakdance.

Jeżeli chodzi o wygląd odtworzonej sekcji wygląda ona dosyść dobrze, ale widać że osoba początkująca nie wykona szybko ładnej strony (pomijam korzystanie z Biblioteki szablonów), uważam że moduły powinny mieć ustawiony jakiś padding out of the box, chyba że grupą docelową są osoby bardziej doświadczone lub znające chociaż podstwy tego czym jest padding i margin.

Największą zaletą wtyczki Breakdance jest to że kod HTML strony stworzeinej w Breakdance wygląda lepiej i bardziej semantycznie niż kod wygenerowany przez Elementor i Divi.

Największą wadą wtyczki Brekadance jest brak licencji Lifetime.

Szybkość strony www stworzonej w kreatorze stron WordPress Bricks

Bricks podobnie jak Breakdance to też nowa wtyczka do Tworzenia stron WordPress więc przejdźmy do testów.

Motyw Bricks wynik PageSpeed Insights

Strona Bricks wynik Pingdom Website Speed

Strona stworzona w Bricks wynik GTmetrix

Szybkość i wygląd strony stworzonej za pomocą motywu Bricks opinia

Czy mamy lidera? Na to wygląda, we wszystkich narzędziach do pomiaru szybkości i wydajności stron www Bricks wypada świetnie. Jest jedno „ale” nie kupiłem motywu Bricks i test został przeprowadzony w środowisku testowym Bricks z nieznaną konfigurancją i z włączonym cachowaniem po stronie serwera. Więc Bricks wypada z zestawienia. Jak kupię kiedyś motyw Bricks zrobię ponowny test.

Jeżeli chodzi o wygląd odtworzonej sekcji wygląda ona źle, szczególnie na telefonie komórkowym, gdzie cały layout się zlewa. Osoba początkująca nie wykona szybko ładnej strony (pomijam korzystanie z Biblioteki szablonów), podobnie jak w przypadku Breakdance uważam że moduły powinny mieć ustawiony jakiś padding out of the box, chyba że grupą docelową są osoby bardziej doświadczone w tworzeniu stron WordPress.

Największą zaletą motywu Bircks (na podstawie mojej krótkiej styczności) jest to że posiada licencję Lifetime dla nieograniczonej stron. Nie spędziłem wystarczającej ilości czasu żeby zapoznać się ze wszystkimi zaletami motywu Bricks.

Szybkość strony www stworzonej w edytorze blokowym

Jedni go kochają inni nie nawidzą, co nie zmienia faktu że motywy z możliwością edycji całej strony za pomocą edytora blokowego są świetne i przyjemne w obsłudze. Pamiętam gdy w wersji 5.0 zastąpiono klasyczny edytor blokowym było to dla mnie frustrujące, teraz przy wersji 6.3 uważam że społeczość programistów WordPress zrobiła krok milowy i wymusiła na twórcach innych page builderów rozwój swojego oprogramowania. Przejdźmy do testów.

Strona stworzona w edytorze blokowym wynik PageSpeed Insights

Strona wykonana w edytorze blokowym wynik Pingdom Website Speed

Strona stworzona w edytorze blokowym wynik GTmetrix

Szybkość i wygląd strony stworzonej za pomocą edytora blokowego

A więc mamy zwycięzcę, wbudowany edytor WordPress pozwala stworzyć szybką i ładną stronę www.

Jeżeli chodzi o wygląd odtworzonej sekcji wygląda ona najlepiej. Nawet osoba początkująca stworzy ładną i szybką strone internetową. Przypominam ten test dotyczy tylko dwóch parametrów wydajność i wyglądu out of the box.

W przypadku porównania edytora blokowego do innych „kreatorów stron WordPress” na tym etapie bym tego nie robił, pomimo tego że edytor blokowy ma wiele zalet nie daje możliwości zbudowania bardziej rozbudowanych layoutów stron jak powyższe wtyczki czy motywy. Uważam że edytor blokowy jest świetny, ale osoby które chcą stworzyć bardziej dynamiczne strony powinny rozważyć wybór jakiegoś innego page buildera. (moje zdanie na dziś to jest 08.30.2023)

Największą zaletą edytora blokowego jest to że jest darmowy i można stworzyć szybką stronę bez szukania informacji o optymalizacji szybkości strony www.

Największą wadą edytora blokowego jest że nie nie ma póki co motywu z taką ilością modułów jak w Divi czy Elementor.

Ale uważam że społeczność WordPressa prędzej czy później dogoni popularne „kreatory stron”.

Przyszłość motywu Divi – Szybkość motywu Dvi 5.0

Cały czas uważam że liczba zalet motywu Divi przewyższa liczbę jego wad, z racji że mam dostęp do wersji Developerskiej divi 5.0 beta, postanowiłem że również umieszczę wyniki szybkości strony stworzonej z pomocą nowej wersji tego page buildera.

Nie bedę się tu rozpisywał o różnicy pomiędzy nadchodzącej wersji Divi 5.0 do wersji Divi 4, ale będzie on przepisany od podstaw żeby nadążyć za najnowszymi standardami. Więcej o nowej wersji Divi można przeczytać na blogu Elgantthemes.com.

Oczywiście wydajność strony stworzonej za pomocą motywu Divi 5.0 beta nie umieszczę w zestawieniu, ale zamieszczę je w tym wpisie, bo pomimo że na pierwszy rzut oka wyniki są podobne lub gorsze to po dłuższym porównaniu tych wyników i kodu generowanego przez Divi 5.0 widać że Elegantthemes idzie w dobrą stronę. Właśnie dlatego uważam że Divi to świetny motyw do Tworzenia stron.

Strona stworzona za pomoca motywu Divi 5.0 beta wynik PageSpeed Insights

Strona wykonana za pomocą motywu Divi 5.0 dev beta wynik Pingdom Website Speed

Strona stworzona w Divi 5.0 beta wynik GTmetrix

Szybkość i wygląd strony stworzonej za pomocą edytora blokowego

Nic tu więcej nie napiszę ponieważ jest za wcześnie żeby wyciągać jakieś wnioski, jak tylko Divi 5.0 będzie miało premierę napewno dokładnie sprawdzę jego wydajność.

Szybkość i wydajność – WordPress vs Framer

Na rynku mamy wiele narzędzi no code lub low code do tworzenia stron takich jak Wix, Squarespace, Webflow…, ale najbardziej ciekawi mnie Framer więc podobnie jak w przypadku powyższych sprawdzę jego wydajność.

Strona stworzona za pomcą Framer wynik PageSpeed Insights

Strona wykonana za pomocą Framer wynik Pingdom Website Speed

Strona stworzona w Framer wynik GTmetrix

Szybkość i wygląd strony stworzonej za pmocą Framer opinia

Framer wypada bardzo dobrze w testach wydajności, na początku chciałem uwzględnić w porównaniu wydajność strony Framer w zestawieniu, ale ze względu na to że strona jest na zewnetrznych serwerach Framer nie będe jej uwzględniał. Ale nie zmienia to faktu że framer to świetne i wydajne narzedzie do Tworzenia stron www.

Porównanie w tabeli wydajności edytorów do Tworzenia Stron WordPress

Teraz czas na podsumowanie i zobrazowanie najważniejszych elemen

PageSpeed insights – Divi vs Elementor Pro vs Breakdance vs Edytor blokowy

	Divi	Elementor Pro	Breakdance	Edytor blokowy
Performance	80	83	96	98
FCP	3,1 s	2,7 s	1,1 s	0,9 s
TBT	40ms	30 ms	60ms	0 ms
Speed Index	3.1 s	2,7 s	2,6 s	1,3 s
LCP	3,9 s	4,1 s	2,7 s	2,3 s
CLS	0.094	0	0	0

Patrząc na poniższe wyniki zwycięzcą jest strona wykonana w edytorze blokowym WordPress

Pingdom Website Speed Test – Divi vs Elementor Pro vs Breakdance vs Edytor blokowy

Podstawowe wskaźniki

	Divi	Elementor Pro	Breakdance	Edytor blokowy
Performance Grade	A 93	B 85	B 89	A 96
Page size	304.1 KB	534.4 KB	204.5 KB	292.9 kB
Load time	1.84 s	573 ms	981 ms	644 ms
Requests	12	41	19	10

Rozmiar treści według typu zawartości

	Divi	Elementor Pro	Breakdance	Edytor blokowy
Image	43.15% (131.2 KB)	48.39% (258.6 KB)	64.11% (131.1 KB)	88.28% (258.6 KB)
Script	35.63% (108.3 KB)	24.58% (131.3 KB)	14.21% (29.1 KB)	3.29% (9.6 KB)
Font	14.13% (43.0 KB)	11.90% (63.6 KB)	–	–
HTML	6.01% (18.3 KB)	1.75% (9.4KB)	3.60% (7.4 KB)	3.80% (11.1 KB)
CSS	0.76% (2.3 KB)	13.19% (70.5 KB)	17.60% (36 KB)	–

GTmetrix – Divi vs Elementro Pro vs Breakdance vs Edytor Blokowy

	Divi	Elementor Pro	Breakdance	Edytor blokowy
Grade / Preformance	A / 89%	B / 83%	B / 87%	A / 94%
Strucutre	97%	90%	92%	94%
LCP	1.6s	1.8s	1.7s	1.4s
TBT	0ms	0ms	0ms	0ms
CLS	0	0	0	0
Fully Loaded Time	2.0s	2.4s	2.0s	1.4s
Page size	340KB	507KB	193KB	274KB
Page requests	12	43	19	9

Podsumowanie testu

Jak widać bezwątpienia najszybszą stronę „out of The box” można stowrzyć z pomocą edytora blokowego, biorąc pod uwagę wygląd strony, edytor blokowy również wypada najlepiej. Jak wspominałem wyżej jest jedno ale, motywy FSE nie oferują jeszcze tak wielu elementów / modułów / widgetów jak Divi czy Elementor PRO. Oczywiście są wtyczki które pozwalają zwiększyść ilość dostępnych bloków dla edytora WordPress, ale wpływa to również na jego wydajność.

Więc co wybrać? Wszystko zależy od Twoich wymagań, powyższy test pokazuje że wszystkie te narzędzia do tworzenia stron są w stanie pomóc nam stowrzyć szybką stronę WWW.

Divi i Elementor Pro posaidają wbudowane opcje, które mogą zwiększyć wydajność. Można też skorzystać z wtyczki na przykład LiteSpeed Cache i wtedy wyniki testów dla Tych Dwóch będą bardzo dobre.

Ostateczne Starcie – szybkość Divi vs Elementor Pro

Na pisanie tego porównania poswięciłem około 17h, więc podjąłem decyzję że zrobię jeszcze jeden test szybkości, mianowicie zainstaluje i skonfiguruję wtyczkę LiteSpeed cache na stronach stworzonych w Divi i Elementor Pro, zoptymalizuję również obrazy, bo w tym teście największym problemem z wydajnością były właśnie obrazy.

Zmiana planów zdecydowałem że takie porównanie powinno być bardziej miarodajne. Zdecydowałem że ostateczne porownanie Divi VS Elementor Pro będzie w nowym wpisie ten już jest chyba za długi.

Kto wygra? Kliknij i się przekonaj „Szybkość Divi vs Elementor Pro – ostateczne starcie„