Porównanie wydajności Divi vs Avada (2021): co jest szybsze?

Próbujesz wybrać między Divi a Avadą, aby zbudować swoją witrynę WordPress?

Te dwa motywy są dwoma najpopularniejszymi motywami WordPress premium wszechczasów – Elegant Themes (twórca Divi) twierdzi, że ma ponad 806 000 klientów, a Avada została kupiona ponad 747 000 razy w ThemeForest. Są to zarówno niewiarygodnie imponujące liczby, jak i dowód na to, że każdy motyw ma wielu zadowolonych użytkowników.

Jednym z największych czynników sukcesu obu motywów są ich pakiety wizualne, kreatory typu „przeciągnij i upuść”. Za pomocą tych kreatorów możesz tworzyć piękne niestandardowe witryny WordPress — nie jest wymagany kod.

Ale elastyczność projektowania nie jest jedyną rzeczą, którą należy wziąć pod uwagę w motywie WordPress – musisz również rozważyć, jak szybko ten motyw pomoże w załadowaniu witryny, ponieważ czas ładowania witryny odgrywa rolę we wszystkim, od komfortu użytkownika po SEO, współczynniki konwersji i nie tylko .

Jest to jeszcze bardziej prawdziwe od czasu aktualizacji Google Page Experience, gdzie Google zaczął uwzględniać kluczowe wskaźniki sieciowe w swoich rankingach.

W tym celu postanowiliśmy stworzyć porównanie Divi i Avada skoncentrowane na jednym konkretnym wskaźniku: wydajności.

To znaczy, czy Divi lub Avada pomagają w szybszym ładowaniu się witryny? Aby odpowiedzieć na to pytanie, przeprowadziliśmy własne testy – czytaj dalej, aby zobaczyć dane i analizę.

Uwaga – pierwotnie opublikowaliśmy ten post i przeprowadziliśmy te testy w lipcu 2021 r. Jednak Elegant Themes wydało aktualizację z głównymi aktualizacjami wydajności frontendu w sierpniu 2021 r. (Divi 4.10), która ma ogromny wpływ na wydajność Divi. Z tego powodu całkowicie ponownie przeprowadziliśmy te testy i zebraliśmy wszystkie nowe dane i wnioski w listopadzie 2021 r.

Jak przetestujemy wydajność motywu Divi vs Avada?

Zanim przejdziemy do danych, porozmawiajmy o tym, jak zamierzamy przetestować wydajność Divi vs Avada, abyś wiedział dokładnie, jak to ustawiliśmy.

Najpierw przetestujemy dwa wysokopoziomowe scenariusze:

• Test nr 1 – przetestujemy tylko motywy. Oznacza to, że nie będziemy używać dołączonych do nich wizualnych konstruktorów. Zamiast tego przetestujemy domyślną „Przykładową stronę” zbudowaną za pomocą edytora bloków.
• Test nr 2 – przetestujemy prostą stronę zbudowaną za pomocą kreatora każdego motywu, ponieważ kreatory wizualne są kluczową częścią tego, co sprawia, że ​​Divi i Avada są tak popularne. Postaramy się użyć porównywalnych modułów, aby porównanie było jak najbardziej równe.

Dla każdego scenariusza testu wysokiego poziomu przetestujemy również dwie różne konfiguracje:

• Pierwsza konfiguracja dotyczy samych motywów i żadnych innych optymalizacji wydajności.
• Druga konfiguracja jest z zainstalowanym i skonfigurowanym WP Rocket, dzięki czemu możesz zobaczyć, jak wszystko wygląda, jeśli zaimplementujesz najlepsze praktyki wydajności WordPress.

Oprócz buforowania stron i innych podstawowych najlepszych praktyk, WP Rocket oferuje również kilka unikalnych funkcji, które mogą zoptymalizować kod każdego motywu i poprawić wskaźniki Core Web Vitals.

• Usuń nieużywany CSS – pozwala to usuwać niepotrzebne CSS ze swojej witryny na zasadzie strona po stronie. Może być szczególnie świetny w zmniejszaniu rozmiaru strony motywów takich jak Divi i Avada.

• Opóźnij wykonanie JavaScriptu – pozwala poczekać z wykonaniem JavaScriptu do czasu interakcji użytkownika, co świetnie przyspiesza początkowe ładowanie. Zawsze możesz ręcznie wykluczyć określone skrypty, jeśli chcesz, aby zostały natychmiast załadowane .

Nasze strony testowe są hostowane na taniej kropli DigitalOcean o wartości 5 USD miesięcznie, zasilanej przez RunCloud i stos oparty wyłącznie na Nginx. Nie wprowadziliśmy żadnych ulepszeń wydajności poza dodaniem WP Rocket w niektórych testach, jak wspomniano powyżej.

Aby przetestować i zmierzyć dane dotyczące wydajności WordPressa, użyjemy WebPageTest do zebrania danych dotyczących wydajności zorientowanych na urządzenia mobilne:

• Urządzenie testowe – iPhone 8. Bardziej nowoczesne urządzenia będą miały mocniejsze procesory do szybszego przetwarzania JavaScript, co może prowadzić do nieco szybszego czasu ładowania. Może być odwrotnie ze starszymi/słabszymi urządzeniami.
• Szybkość połączenia – dławione połączenie LTE (12 Mbps, 70 ms RTT). Rzeczywiste czasy ładowania byłyby szybsze, jeśli użytkownik przegląda sieć Wi-Fi, lub wolniej, jeśli użytkownik ma coś w rodzaju połączenia 3G.

Dla każdego testu WebPageTest przeprowadzi dziewięć oddzielnych testów i przyjmie wartość mediany. Pomaga nam to uniknąć zmienności pojedynczego testu i uzyskać bardziej spójne wyniki.

Oto cztery wskaźniki, na których się skupimy:

1. Największe malowanie treści (LCP) — część nowych wskaźników Google Core Web Vitals i współczynnik rankingu SEO w aktualizacji Page Experience.
2. Czas do pierwszego bajtu (TTFB) – mierzy, jak szybko serwer jest w stanie odpowiedzieć pierwszym bajtem danych po przetworzeniu PHP witryny/motywu (lub dostarczeniu z pamięci podręcznej, w przypadku naszego testu WP Rocket).
3. Rozmiar strony – wszystko inne równe, mniejszy rozmiar strony jest zawsze lepszy.
4. Żądania HTTP – wszystkie inne równe, mniej żądań HTTP jest zawsze lepsze.

Na koniec oto numery wersji wszystkiego, co testujemy:

• Motyw Avada – 7,5
• Avada Builder – 3,5
• Motyw Divi – 4.13.1
• Rakieta WP – 3.10.3.

Testy prędkości Divi vs Avada

Przejdźmy teraz do naszych praktycznych testów wydajności Divi vs Avada.

Test nr 1: tylko motywy

W tym pierwszym teście testujemy tylko motywy bez użycia wizualnych konstruktorów:

• Divi – tylko motyw Divi, ponieważ Divi jest już w pakiecie w Divi Builder.
• Avada – zainstalowaliśmy również wtyczki Avada Core i Avada Builder, ponieważ są to wymagane wtyczki podstawowe. Nie zainstalowaliśmy jednak żadnych opcjonalnych wtyczek.

Rzeczywista zawartość to „Przykładowa strona”, która jest dostarczana ze świeżą instalacją WordPress. Jest zbudowany z natywnym edytorem bloków.

Oto dane dla samych motywów:

Widać, że Divi jest tutaj dość wyraźnym zwycięzcą, jeśli chodzi o czas największej zawartości treści, ponieważ czas Avady jest o 50% wyższy.

Dlaczego różnica?

Cóż, zgadujemy, że dużą częścią szybszej wydajności Divi jest fakt, że rozmiar strony Avady to 544 KB, podczas gdy Divi to tylko 201 KB. Należy pamiętać, że dotyczy to strony, która nie została zbudowana przy użyciu wizualnego narzędzia do tworzenia — to tylko domyślna przykładowa strona zbudowana za pomocą edytora bloków.

Spójrzmy teraz na dane po dodaniu WP Rocket:

Widać, że dzięki optymalizacji WP Rocket oba motywy są znacznie szybsze i istnieje bardzo niewielka różnica w czasie największej zawartości treści między Divi a Avadą. Divi jest nadal nieco szybszy, ale różnica jest na tyle mała, że ​​może to być po prostu normalna zmienność testowa.

Co więcej, WP Rocket był w stanie znacznie zmniejszyć rozmiar strony obu motywów dzięki funkcjom usuwania nieużywanego CSS i opóźniania wykonywania JavaScriptu. Widać, że rozmiar strony Divi spadł o ponad połowę, podczas gdy rozmiar strony Avady został zmniejszony o ponad 200 KB.

Te ulepszenia, wraz z buforowaniem i innymi poprawkami, spowodowały poprawę czasów LCP.

Test #2: Z budowniczymi

W tym drugim teście użyliśmy wizualnego kreatora każdego motywu, aby stworzyć porównywalną stronę przy użyciu mniej więcej tych samych modułów. Projekt jest bardzo prosty – dodaliśmy tylko trzy elementy, aby wszystko było jak najbardziej wyrównane:

• Edytor tekstu z identyczną zawartością lorem ipsum
• Przycisk
• Okrąg licznika

Pomysł polega głównie na tym, aby zobaczyć, jaka dodatkowa „waga” zostanie dodana do strony po aktywowaniu kreatora każdego motywu.

Oto dane dla samych motywów/konstruktorów:

Ogólnie widać, że wyniki są prawie takie same jak powyżej. Divi jest zauważalnie mniejszy pod względem rozmiaru strony, w wyniku czego ma szybszy czas największego malowania treści.

Co więcej, żaden motyw nie dodaje dodatkowej wagi do strony tylko dlatego, że aktywowałeś wizualny kreator, co oznacza, że ​​nie ma żadnej kary za używanie kreatora zamiast edytora natywnego ( przynajmniej w przypadku prostych stron ).

Oto dane po dodaniu WP Rocket:

Dzięki WP Rocket możesz zobaczyć ten sam wynik, co w pierwszym teście. Teraz czasy największego malowania treści Divi i Avady są znacznie szybsze i podobne pod względem wydajności, chociaż Divi jest znowu trochę szybszy. Oprócz znacznego skrócenia czasu największej zawartości treści, WP Rocket był również w stanie osiągnąć podobne redukcje rozmiaru pliku, jak w pierwszym teście.

Ostatnie przemyślenia na temat Divi vs Avada Performance

Divi i Avada są podobne pod tym względem, że obie dają możliwość zbudowania niestandardowej witryny internetowej za pomocą ich wizualnych kreatorów typu „przeciągnij i upuść”.

Jednak chociaż oba zapewniają tę kontrolę, Divi jest teraz znacznie szybszy pod względem wydajności po wyjęciu z pudełka.

Różnica była niewielka, gdy po raz pierwszy przeprowadziliśmy testy wydajności Divi vs Avada. Jednak po aktualizacji wydajności Divi 4.10 w sierpniu 2021 r. Divi jest teraz domyślnie znacznie mniejszy niż Avada, co prowadzi do tego, że czasy największej zawartości Divi po wyjęciu z pudełka wynoszą około dwóch trzecich czasu Avady.

Jeśli jednak używasz WP Rocket z jego buforowaniem i nowymi funkcjami usuwania nieużywanego CSS i opóźniania wykonywania JavaScript, możesz wprowadzić duże ulepszenia w obu motywach.

Podczas gdy Divi był nadal nieco szybszy z włączonym WP Rocket, różnica była znacznie bardziej minimalna, a Avada nadal działał dobrze.

Sugeruje to, że chociaż Divi jest nieco szybszy, nadal możesz utworzyć szybko ładującą się witrynę za pomocą Avady, o ile zaimplementujesz najlepsze praktyki wydajności WordPress za pomocą narzędzia takiego jak WP Rocket.

Oczywiście te dwa motywy nie są twoimi jedynymi dwiema opcjami. Jeśli koncentrujesz się na szybkości i wydajności, możesz sprawdzić nasze kolekcje najszybszych darmowych motywów WordPress lub najszybszych motywów WooCommerce, jeśli budujesz sklep eCommerce.

Możesz znaleźć nawet szybsze motywy niż te dwa, w tym motyw Astra, który dobrze wypadł w naszym porównaniu wydajności Divi i Astra ( chociaż różnica nie jest tak duża dzięki nowym ulepszeniom wydajności Divi ).

Czy nadal masz jakieś pytania dotyczące Divi vs Avada, jeśli chodzi o szybkość i wydajność? Zapytaj nas w komentarzach!