Test czasu ładowania zaplecza Oxygen Builder
Opublikowany: 2022-04-10W tym artykule przyjrzymy się czasowi ładowania zaplecza Oxygen Builder. Wiele osób uważa to za główną wadę tego narzędzia WordPress PageBuilder, więc zdecydowaliśmy się przetestować go na kilku różnych urządzeniach. Zobaczmy, co zostało odkryte.
Najpierw porównamy różne przeglądarki na tym samym urządzeniu. Następnie porównamy różne urządzenia za pomocą tej samej przeglądarki. Powinno to pozwolić nam określić nie tylko, które urządzenia ładują Oxygen Builder najszybciej, ale także, które przeglądarki najlepiej nadają się do tego zadania.
Wykluczymy testowanie różnych konfiguracji hostingu, ponieważ to bardzo komplikuje to porównanie. Ponadto: to dobrze znany fakt, że jeśli korzystasz z taniego hostingu, będziesz mieć powolne ładowanie zarówno na stronie front-end, jak i back-end dowolnej witryny WordPress. Jeśli tak jest, to całkowicie zależy od ciebie. (Możemy jednak wrócić do tego w przyszłości).
Obiekt testowy
Przedmiotem naszego testu jest stosunkowo standardowa strona internetowa do tworzenia tlenu, stworzona przez nas dla naszych odbiorców. Przyjrzyjmy się początkowej wydajności strony, rozmiarowi i dodatkowym aspektom.
Ta testowa strona internetowa jest hostowana na dedykowanym serwerze DO Premium, z 2 GB pamięci RAM i standardowymi ustawieniami. Jest zarządzany przez Cloudways, który jest naszym zalecanym hostem pod względem szybkości, kosztów i wsparcia. W czasie testów nie wykonaliśmy żadnej dodatkowej optymalizacji szybkości na stronie. Ustawienia serwera pozostały nietknięte od czasu uruchomienia instancji.
Przeczytaj: Omówienie pięciu opcji serwerów Cloudway dla hostingu WordPress
Uwaga dodatkowa: jest to świetna opcja serwera dla witryn deweloperskich i witryn o małym natężeniu ruchu, którą można łatwo skalować podczas uruchamiania. Użyj kodu ISOTROPIC, aby uzyskać zniżkę na Cloudways podczas rejestracji i uzyskaj 3-dniowy bezpłatny okres próbny (bez CC).
Testowana strona to strona główna serwisu. W czasie testów wyglądało to tak:
Główne elementy ładowanej strony to element menu Oxygen Builder, niestandardowy pasek wyszukiwania i siatka łatwych postów z postami demonstracyjnymi (pierwsza sekcja), element WSForm Oxygen i karuzela OxyExtras z repeaterem w środku. Ten repeater miał ponad dziewięć postów i dziesiątki warunków opartych na polach MetaBox.
Strona była publiczna, ponieważ DNS subdomeny deals.isotropic.co był udostępniany za pośrednictwem Cloudflare.
Całkowity rozmiar strony wynosił 5,05 MB. Wynikało to przede wszystkim z użycia zoptymalizowanych obrazów w czasie testowania. Proszę pamiętać, że jest to witryna na wczesnym etapie rozwoju (obiecuję, że zrobimy ją szybko przed uruchomieniem). Uważam, że tego typu strona internetowa jest najlepszym sposobem na przetestowanie szybkości powrotu i ładowania Oxygen Buildera, ponieważ symuluje normalne środowisko programistyczne.
Używane wtyczki były następujące:
| Imię | Opis | Dev | Status | Używana wersja | Recenzja |
|---|---|---|---|---|---|
| BetterLinks | Najlepsza wtyczka do tworzenia, skracania, śledzenia i zarządzania dowolnym adresem URL. Zbieraj raporty analityczne i łatwo przeprowadzaj skuteczne kampanie marketingowe. | WPDeveloper | Aktywny | 1.2.7 | |
| BetterLinks Pro | Uzyskaj dostęp do analityki indywidualnej, zarządzania rolami, integracji z Google Analytics i wielu innych niesamowitych funkcji do śledzenia i prowadzenia udanych kampanii marketingowych. | WPDeveloper | Aktywny | 1.1.0 | |
| Lepsze wyszukiwanie Zamień | Mała wtyczka do uruchamiania wyszukiwania/zamieniania w bazie danych WordPress. | Pyszne Mózgi | Aktywny | 1.3.4 | |
| Wyłącz indywidualne powiadomienia administratora | Wyłącz wtyczkę administracyjną powiadomień daje możliwość ukrycia ostrzeżeń o aktualizacjach i wbudowanych powiadomień w panelu administracyjnym. | Twórczy ruch | Aktywny | 1.2.6 | |
| Wyłącz Gutenberg | Wyłącza edytor bloku Gutenberga i przywraca klasyczny edytor i oryginalny ekran Edytuj post. Zapewnia opcje umożliwiające włączenie określonych typów postów, ról użytkowników i nie tylko. | Jeff Starr | Aktywny | 2.5.1 | |
| dPlugins DevKit | Wtyczka stworzona do instalacji i debugowania dPlugins | devusrmk | Aktywny | 1.1.2 | |
| Elastyczny nadawca wiadomości e-mail | Ta wtyczka ponownie konfiguruje funkcję wp_mail() do wysyłania wiadomości e-mail za pomocą interfejsu API (przez Elastic Email) zamiast SMTP i tworzy stronę opcji, która pozwala określić różne opcje. | Elastic Email Inc. | Aktywny | 1.2.3 | |
| Ulubione | Proste i elastyczne przyciski ulubionych dla każdego typu postu. | Kyle Phillips | Aktywny | 2.3.2 | |
| Pakiet wodoru | Pakiet ulepszeń Oxygen Builder oszczędzających czas | Wyczyść wtyczki | Aktywny | 1.3.5 | Nasza recenzja |
| MalCare Security — darmowy skaner złośliwego oprogramowania, ochrona i bezpieczeństwo dla WordPress | MalCare Security — darmowy skaner złośliwego oprogramowania, ochrona i bezpieczeństwo dla WordPress | Bezpieczeństwo MalCare | Aktywny | 4,63 | |
| Meta Box | Twórz niestandardowe metaboxy i niestandardowe pola w WordPressie. | MetaBox.io | Aktywny | 5.4.8 | Nasza recenzja |
| Meta Box AIO | Wszystkie rozszerzenia Meta Box w jednym pakiecie. | MetaBox.io | Aktywny | 1.15.1 | |
| Logowanie społecznościowe Nextend | Nextend Social Login wyświetla przyciski logowania społecznościowego dla Facebooka, Google i Twittera. | Nextendweb | Aktywny | 3.1.2 | |
| OxyDodatki | Biblioteka komponentów dla tlenu. | OxyDodatki | Aktywny | 1.3.8 | |
| Tlen 3,9 Beta 2 | BETA. UŻYWAJ NA WŁASNE RYZYKO. | Soflyy | Aktywny | 3.9 Beta 2 | |
| Elementy tlenowe dla WooCommerce | Twórz piękne strony internetowe WooCommerce. | Soflyy | Aktywny | 1,4 | |
| OxyMade | Oparty na CSS Tailwind, oparty na klasach użytkowych Framework CSS i narzędzia dla Oxygen Builder. | Anwesz | Aktywny | 1.5.2 | Nasza recenzja |
| Naprawdę prosty SSL | Lekka wtyczka bez żadnej konfiguracji, aby Twoja witryna była odporna na SSL | Naprawdę proste wtyczki | Aktywny | 5.1.2 | |
| Przekierowanie | Zarządzaj wszystkimi przekierowaniami 301 i monitoruj błędy 404 | Jana Godleya | Aktywny | 5.1.3 | |
| Zmień rozmiar obrazu po przesłaniu | Automatycznie zmień rozmiar przesyłanych obrazów do określonej maksymalnej szerokości i wysokości. Posiada również opcję wymuszenia rekompresji plików JPEG. Opcje konfiguracji znajdują się w Ustawienia > Prześlij obraz zmień rozmiar | Krótkie piksele | Aktywny | 1.8.6 | |
| Organizator skryptów | Zaawansowany edytor kodu dla Wordpress | dPlugin | Aktywny | 3.0.0 Beta 2 | Nasza recenzja |
| SzukajWP | Najlepsza wyszukiwarka WordPress, jaką możesz znaleźć | SzukajWP | Aktywny | 4.1.22 | |
| SzukajWP Live Ajax Search | Wzbogać swoje formularze wyszukiwania o wyszukiwanie na żywo, obsługiwane przez SearchWP (jeśli jest zainstalowany) | SzukajWP, LLC | Aktywny | 1.6.1 | Nasza recenzja |
| SearchWP Metryki | Zaawansowane metryki wyszukiwania z SearchWP | SzukajWP | Aktywny | 1.4.0 | |
| Wyszukaj skróty WP | Zapewnia skróty, które generują zarówno formularze wyszukiwania, jak i strony wyników dla wyszukiwarek SearchWP | SzukajWP | Aktywny | 1.8.2 | |
| Shareaholic — rozwijaj i angażuj swoją publiczność | Oficjalna wtyczka WordPress Shareaholic umożliwia dodawanie do swojej witryny nagradzanych przycisków udostępniania w mediach społecznościowych, powiązanych postów, analizy treści, zarabiania na reklamach i nie tylko. | Shareaholic | Aktywny | 9.7.1 | |
| Szwajcarski nóż | Pierwsza wtyczka, którą powinieneś zainstalować, gdy domyślne ustawienia tlenu nie wystarczają. | dPlugin | Aktywny | 1.3.7 | Nasza recenzja |
| Menedżer plików WP | Zarządzaj plikami WP. | mndpsingh287 | Aktywny | 7.1.2 | |
| Kreator sieci WP | Twórz zaawansowane układy siatki z wyszukiwaniem aspektowym w czasie rzeczywistym dla Twojego eCommerce, bloga, portfolio i nie tylko... | Loic Blascos | Aktywny | 1.5.9 | Nasza recenzja |
| WP Grid Builder - Meta Box | Zintegruj WP Grid Builder z wtyczką Meta Box. | Loic Blascos | Aktywny | 1.0.0 | |
| WP Grid Builder - Tlen | Zintegruj WP Grid Builder z wtyczką Oxygen. | Loic Blascos | Aktywny | 1.0.2 | |
| Formularz WS PRO | Twórz lepsze formularze WordPress | Formularz WS | Aktywny | 1.8.125 | Nasza recenzja |
| WS Form PRO - Zarządzanie użytkownikami | Dodatek do zarządzania użytkownikami dla WS Form PRO | Formularz WS | Aktywny | 1.4.1 |
*Przeglądamy wtyczki, których faktycznie używamy, o czym świadczy tutaj :).
Ważne jest, aby pamiętać, że używaliśmy Oxygen Builder 3.9 Beta 2. Mieliśmy również zainstalowane elementy WooCommerce, ale sam WooCommerce nie był w tym momencie.
Zgodnie z doniesieniami deweloperów, ta wersja Oxygen ładowała się na backendzie prawie dwa razy szybciej niż poprzednia.
Dodatkowo chcę zauważyć, że OxyExtras, WPGridbuilder, OxyMade i WSForm wszystkie dodały elementy do zaplecza konstruktora. Swiss Knife, narzędzie skin/workflow i Hydrogen Pack również ładują się do backendu.
Zasadniczo ten przedmiot testu to strona, którą wiele osób korzystających z programu Oxygen Builder ma doświadczenie w ładowaniu. Istnieje kilka dodatków, rozszerzeń i skryptów, które ładują się na zapleczu zarówno z konstruktora, jak i wtyczek innych firm.
Na koniec szybki rzut oka na moje WiFi:
Jak przebiega ten test
Ten test jest zarządzany przez bezpośrednie ładowanie Oxygen Buildera po kliknięciu „edytuj za pomocą tlenu” na zapleczu strony.
Przycisk zostaje naciśnięty i odliczanie zaczyna się tam. Gdy ikona koła zębatego zatrzyma się, a przeglądarka zostanie w pełni zainicjalizowana, test zostanie zatrzymany.
Należy pamiętać, że nie jest to całkowicie dokładne, ponieważ mierzę to ręcznie za pomocą stopera iPhone'a, ale powinno to dać dobre przybliżenie, które urządzenia i przeglądarki ładują tę wtyczkę najszybciej. Warto również zauważyć - strona była wcześniej ładowana na fontend, ale nigdy na backend builder jako administrator . Dostaję się do kreatora, ładując oferty.isotropic.co, przechodząc do górnego paska, klikając edytuj stronę, a następnie klikając przycisk edytuj za pomocą tlenu.
Celem tego testu nie jest szybki bieg. Chodzi o uzyskanie naprawdę rzeczywistych danych z tyłu i czasów ładowania tej wtyczki, aby sprawdzić, czy obawy są uzasadnione szybkością i wydajnością. Zamiast patrzeć na rzeczywiste dane czasowe, rozważ przyjrzenie się różnicom między tymi liczbami, jeśli chodzi o urządzenie i przeglądarkę.
Na koniec dołączyłem linki Amazon (partner) na wypadek, gdyby zainspirowało to kogokolwiek do zakupów pod wpływem impulsu.
Czasy ładowania programu Oxygen Builder według przeglądarki
Najpierw spróbujmy załadować go we wszystkich przeglądarkach zainstalowanych na moim Macu Mini M1. Statystyki zostaną zmienione podczas testowania według urządzenia, ale jest to 2020 M1 Mac Mini z 8 GB pamięci RAM i systemem Big Sur V11.3.1. To jest mój „codzienny pulpit”.
Zaczynamy od testu przeglądarki, aby określić, która z nich najszybciej ładuje Oxygen. Użyjemy tej przeglądarki podczas testowania różnych urządzeń.
Testujemy Safari V14.1, Chrome V95.0.4638.69 i Firefox V94.
- Firefox pojawia się w 05,59 sekundy.
- Chrome pojawia się po 17,52 sekundy.
- Safari pojawia się w 6,20 sekundy.
Chrome był tutaj oczywistym odstającym elementem. Uruchomiłem go ponownie, aby sprawdzić, czy nie było czkawki w ładowaniu - załadowanie za drugim razem zajęło tylko około 16,5 sekundy, więc myślę, że średnia jest stosunkowo dokładną liczbą.
Wniosek jest taki, że Firefox jest najszybszą przeglądarką. Jest to temat omawiany od jakiegoś czasu na oficjalnej grupie na Facebooku, więc miejmy nadzieję, że te dane empiryczne dowodzą, że powinieneś używać tej przeglądarki. Osobiście Firefox jest moją ulubioną przeglądarką do tworzenia stron internetowych, ponieważ zawiera mnóstwo wysokiej jakości narzędzi programistycznych. Jednak w porównaniu z chrome brakuje mu audytów bezpieczeństwa i wydajności.
Wykorzystamy tę przeglądarkę do testowania urządzeń.
Czasy ładowania programu Oxygen Builder według przeglądarki
W tym teście użyjemy wszystkich urządzeń w tej samej sieci Wi-Fi, korzystając z tej samej wersji przeglądarki Firefox, ładując tę samą stronę co poprzednio. Czynnikiem różnicującym będzie urządzenie i stojące za nim statystyki testowe. Oto skład.
2020 Mac Mini (już przetestowany)
- Jabłko M1 Chip
- 16 GB pamięci RAM
Ładuje tlen w 05,59 sekundy.
2019 XPS 13 9370
- Intel i7-8550U
- 16 GB pamięci RAM
Ładuje tlen w 11,54 sekundy.
2020 iPad Air 10,9 cala MYFT2LL/A
- Jabłko A14 Chip
- 4 GB pamięci RAM
Ładuje tlen w 11,96 sekundy.
Przeczytaj: Czy możesz tworzyć strony internetowe na iPadzie Pro?
2019 Dell Latitude 7400
- Intel i7 8655U
- 16 GB pamięci RAM
Ładuje tlen w 16,19 sekundy.
13-calowy Macbook Pro 2020
- Intel Core i5
- 16 GB pamięci RAM
- Karta graficzna Intel Iris Plus 645 1536 MB
Ładuje tlen w 9,66 sekundy.
2021 Macbook Pro 16 cali
- Chip Apple M1 Max
- 64 GB pamięci RAM
Ładuje tlen w 5,43 sekundy.
Wszystkie urządzenia są podczas testów podłączane do ładowarki. Przeglądarka Firefox jest jedyną otwartą aplikacją/programem. Być może zastanawiasz się, dlaczego mam dostęp do wszystkich tych urządzeń. Nie jestem osobiście właścicielem każdej z tych urządzeń elektronicznych, zamiast tego mam możliwość wypożyczenia ich na lokalnym uniwersytecie.
Wielkie dania na wynos
Po pierwsze, jak już kilkakrotnie wspomniano, jest to test niedoskonały. To nie było wykonywane w środowisku laboratoryjnym. Strony z mniej dynamicznymi danymi ładują się szybciej w narzędziu do tworzenia zaplecza, a strony z bardziej dynamicznymi danymi będą ładować się wolniej. To samo dotyczy obrazów, elementów DOM i skryptów.
Proponuję używać tych liczb arbitralnie. Zamiast mówić, że Oxygen załaduje się za X,XX sekund, użyj liczb, aby porównać przeglądarkę i urządzenia.
Na wynos 1: Sprawy przeglądarek
Jak konsekwentnie twierdzi Facebook, Firefox jest najszybszą przeglądarką, która ładuje Oxygen Builder. Osobiście używam wersji deweloperskiej Firebox.
Na wynos 2: Sprawy dotyczące urządzenia
Najszybsze dwa urządzenia to najnowsze urządzenia Apple wykorzystujące silikon Apple. To ma sens; te procesory są znacznie szybsze niż prawie wszystko inne na rynku; i nie są tak drogie. Podstawowy M1 Mac Mini kosztuje mniej niż 600 USD, a M1 Macbook Air kosztuje 899 USD.
Takeaway 2B: Wygląda na to, że procesor ma większe znaczenie niż pamięć RAM
Wygląda również na to, że im mocniejszy procesor, tym lepszy czas ładowania konstruktora zaplecza. Na przykład laptop z 64 GB pamięci RAM ładuje się podobnie do laptopa z 16 GB pamięci RAM. Wraz ze spadkiem mocy procesora spada również czas ładowania konstruktora.
Spodziewam się, że próba załadowania konstruktora na Chromebooku lub innym urządzeniu z niskimi statystykami może być trudna.
Końcowe przemyślenia
Średni czas ładowania Oxygen Backend dla tego testu wynosił około 10 sekund dla dużej, niezoptymalizowanej strony z mnóstwem dynamicznych danych. Ponadto istniało kilka dodatków, które ładowały własne elementy na stronie, wraz z pokaźną kolekcją niestandardowego, globalnego CSS. W mojej książce jest to bardzo akceptowalne. Staje się to jeszcze bardziej akceptowalne, gdy zmiany klas CSS i opcje globalne można zsynchronizować bez konieczności ponownego ładowania kreatora za pomocą wtyczki Collaboration.
Jako webdev, który używa Oxygen w większości projektów, szybkość kreatora nigdy nie miała na mnie wpływu, ale chciałem poważnie przyjrzeć się, jaka była dla niego najlepsza konfiguracja.
Jeśli masz jakieś własne numery porównawcze, możesz je opublikować w sekcji komentarzy poniżej.