Тест времени загрузки серверной части Oxygen Builder
Опубликовано: 2022-04-10В этой статье мы рассмотрим время загрузки серверной части Oxygen Builder. Многие говорят, что это главный недостаток WordPress PageBuilder, поэтому мы решили протестировать его на нескольких разных устройствах. Давайте посмотрим, что было обнаружено.
Сначала мы сравним разные браузеры на одном устройстве. Затем мы сравним разные устройства, использующие один и тот же браузер. Это должно позволить нам определить не только то, какие устройства загружают Oxygen Builder быстрее всего, но и какие браузеры лучше всего подходят для этой задачи.
Мы будем исключать тестирование различных настроек хостинга, так как это усложняет сравнение. Кроме того: общеизвестно, что если вы используете дешевый хостинг, у вас будет медленное время загрузки как на передней, так и на задней части любого веб-сайта WordPress. Это полностью на вас, если это так. (Однако мы можем вернуться к этому в будущем).
Испытуемый
Наш испытуемый — относительно стандартный веб-сайт по созданию кислорода, созданный нами для нашей аудитории. Давайте посмотрим на первоначальную производительность страницы, размер и дополнительные аспекты.
Этот тестовый веб-сайт размещен на выделенном сервере DO Premium с 2 ГБ ОЗУ и стандартными настройками. Он управляется Cloudways, который является нашим рекомендуемым хостом из-за скорости, стоимости и поддержки. На момент тестирования мы не проводили никакой дополнительной оптимизации скорости на сайте. Настройки сервера остались нетронутыми с момента запуска экземпляра.
Читайте: Разбор пяти вариантов серверов Cloudway для хостинга WordPress
Примечание: это отличный вариант сервера для разработки и сайтов с низким трафиком, который вы можете легко масштабировать при запуске. Используйте код ISOTROPIC для скидки на Cloudways при регистрации и получите 3-дневную бесплатную пробную версию (без CC).
Тестируемая страница является главной страницей веб-сайта. На момент тестирования это выглядело так:
Основными элементами страницы, которые загружались, были элемент меню Oxygen Builder, настраиваемая панель поиска и удобная сетка демонстрационных сообщений (первый раздел), элемент WSForm Oxygen и карусель OxyExtras с повторителем внутри. У этого повторителя было более девяти постов и десятки условий, основанных на полях MetaBox.
Страница была общедоступной, так как DNS субдомена Deals.isotropic.co был проксирован через Cloudflare.
Общий размер страницы составил 5,05 МБ. В первую очередь это было связано с использованием оптимизированных изображений во время тестирования. Пожалуйста, помните, что это веб-сайт на ранней стадии разработки (я обещаю, что мы сделаем его быстро, прежде чем запустить). Я считаю, что этот тип веб-сайта — лучший способ протестировать обратную связь и скорость загрузки Oxygen Builder, поскольку он имитирует обычную среду разработки.
Используемые плагины были следующими:
| Имя | Описание | Дев | Статус | Используемая версия | Рассмотрение |
|---|---|---|---|---|---|
| Лучшие ссылки | Ultimate плагин для создания, сокращения, отслеживания и управления любым URL. Собирайте аналитические отчеты и с легкостью проводите успешные маркетинговые кампании. | WPDeveloper | Активный | 1.2.7 | |
| Лучшие ссылки Pro | Получите доступ к индивидуальной аналитике, управлению ролями, интеграции с Google Analytics и многим другим замечательным функциям для отслеживания и запуска успешных маркетинговых кампаний. | WPDeveloper | Активный | 1.1.0 | |
| Лучший поиск Заменить | Небольшой плагин для запуска поиска/замены в вашей базе данных WordPress. | Вкусные мозги | Активный | 1.3.4 | |
| Отключить уведомления администратора по отдельности | Плагин «Отключить уведомления администратора» дает вам возможность скрыть предупреждения об обновлениях и встроенные уведомления в панели администратора. | Креативное движение | Активный | 1.2.6 | |
| Отключить Гутенберг | Отключает редактор блоков Gutenberg и восстанавливает классический редактор и исходный экран редактирования сообщения. Предоставляет параметры для включения определенных типов сообщений, ролей пользователей и т. д. | Джефф Старр | Активный | 2.5.1 | |
| dPlugins DevKit | Плагин, созданный для установки и отладки dPlugins | devusrmk | Активный | 1.1.2 | |
| Эластичный отправитель электронной почты | Этот плагин перенастраивает функцию wp_mail() для отправки электронной почты с использованием API (через Elastic Email) вместо SMTP и создает страницу параметров, которая позволяет указать различные параметры. | Эластичная электронная почта Inc. | Активный | 1.2.3 | |
| Избранное | Простые и гибкие избранные кнопки для любого типа сообщений. | Кайл Филлипс | Активный | 2.3.2 | |
| Водородный пакет | Пакет усовершенствований Oxygen Builder, экономящих время. | Чистые плагины | Активный | 1.3.5 | Наш обзор |
| MalCare Security — бесплатный сканер вредоносных программ, защита и безопасность для WordPress | MalCare Security — бесплатный сканер вредоносных программ, защита и безопасность для WordPress | MalCare Безопасность | Активный | 4,63 | |
| Мета бокс | Создавайте настраиваемые мета-боксы и настраиваемые поля в WordPress. | MetaBox.io | Активный | 5.4.8 | Наш обзор |
| Мета бокс AIO | Все расширения Meta Box в одном пакете. | MetaBox.io | Активный | 1.15.1 | |
| Nextend Социальный вход | Nextend Social Login отображает кнопки входа в социальные сети для Facebook, Google и Twitter. | Nextendweb | Активный | 3.1.2 | |
| ОксиЭкстрас | Библиотека компонентов для кислорода. | ОксиЭкстрас | Активный | 1.3.8 | |
| Кислород 3.9 Бета 2 | БЕТА. ИСПОЛЬЗУЙТЕ НА СВОЙ РИСК. | Софлай | Активный | 3.9 Бета 2 | |
| Кислородные элементы для WooCommerce | Создавайте красивые веб-сайты WooCommerce. | Софлай | Активный | 1,4 | |
| OxyMade | На основе Tailwind CSS, служебный класс CSS Framework и инструменты для Oxygen Builder. | Анвеш | Активный | 1.5.2 | Наш обзор |
| Действительно простой SSL | Легкий плагин без каких-либо настроек, чтобы сделать ваш сайт SSL-проверенным | Очень простые плагины | Активный | 5.1.2 | |
| перенаправление | Управляйте всеми вашими переадресациями 301 и отслеживайте ошибки 404 | Джон Годли | Активный | 5.1.3 | |
| Изменить размер изображения после загрузки | Автоматически изменять размер загружаемых изображений в пределах указанной максимальной ширины и высоты. Также имеет возможность принудительного повторного сжатия файлов JPEG. Параметры конфигурации находятся в разделе «Настройки» > «Изменить размер изображения». | ShortPixel | Активный | 1.8.6 | |
| Организатор скриптов | Расширенный редактор кода для Wordpress | dПлагины | Активный | 3.0.0 Бета 2 | Наш обзор |
| ПоискWP | Лучший поиск WordPress, который вы можете найти | ПоискWP | Активный | 4.1.22 | |
| ПоискWP Live Ajax Search | Улучшите свои формы поиска с помощью живого поиска на базе SearchWP (если он установлен) | SearchWP, ООО | Активный | 1.6.1 | Наш обзор |
| Показатели SearchWP | Расширенные показатели поиска от SearchWP | ПоискWP | Активный | 1.4.0 | |
| Шорткоды SearchWP | Предоставляет шорткоды, которые генерируют как формы поиска, так и страницы результатов для поисковых систем SearchWP. | ПоискWP | Активный | 1.8.2 | |
| Shareaholic - Растите и привлекайте свою аудиторию | Официальный плагин Shareaholic для WordPress позволяет добавлять отмеченные наградами кнопки социальных сетей, похожие посты, аналитику контента, монетизацию рекламы и многое другое на ваш сайт. | Shareaholic | Активный | 9.7.1 | |
| Швейцарский нож | Первый плагин, который вы должны установить, когда стандартного Oxygen недостаточно. | dПлагины | Активный | 1.3.7 | Наш обзор |
| Файловый менеджер WP | Управляйте файлами WP. | мндпсингх287 | Активный | 7.1.2 | |
| Построитель сетки WP | Создавайте расширенные макеты сетки с многогранным поиском в реальном времени для вашей электронной коммерции, блога, портфолио и многого другого... | Лоик Бласкос | Активный | 1.5.9 | Наш обзор |
| WP Grid Builder — метабокс | Интегрируйте WP Grid Builder с плагином Meta Box. | Лоик Бласкос | Активный | 1.0.0 | |
| WP Grid Builder — Кислород | Интегрируйте WP Grid Builder с плагином Oxygen. | Лоик Бласкос | Активный | 1.0.2 | |
| WS Форма PRO | Создавайте лучшие формы WordPress | Форма WS | Активный | 1.8.125 | Наш обзор |
| WS Form PRO — Управление пользователями | Надстройка управления пользователями для WS Form PRO | Форма WS | Активный | 1.4.1 |
* Мы проверяем плагины, которые мы действительно используем, как показано здесь :).
Важно отметить, что мы использовали Oxygen Builder 3.9 Beta 2. У нас также были установлены элементы WooCommerce, но самого WooCommerce на данный момент не было.
Согласно отчетам разработчиков, эта версия Oxygen почти в два раза быстрее загружалась на сервер, чем предыдущая.
Кроме того, я хочу отметить, что OxyExtras, WPGridbuilder, OxyMade и WSForm добавили элементы в бэкенд компоновщика. Swiss Knife, скин/инструмент рабочего процесса и Hydrogen Pack также загружаются в серверную часть.
По сути, этот объект тестирования представляет собой страницу, которую многие пользователи Oxygen Builder имеют опыт загрузки. Существует несколько надстроек, расширений и скриптов, которые будут загружаться на серверную часть как из сборщика, так и из сторонних плагинов.
Наконец, вот краткий обзор моего WiFi:
Как выполняется этот тест
Этот тест администрируется путем прямой загрузки Oxygen Builder, нажав «редактировать с помощью Oxygen» на бэкэнде страницы.
Кнопка нажата, и таймер запускается. Как только значок шестеренки остановится и браузер будет полностью инициализирован, тест остановится.
Обратите внимание, что это не совсем точно, так как я измеряю это вручную с помощью секундомера iPhone, но это должно дать хорошее приблизительное представление о том, какие устройства и браузеры загружают этот плагин быстрее всего. Также стоит отметить, что страница была загружена ранее через шрифт, но никогда не загружалась через бэкэнд-билдер в качестве администратора . Я добираюсь до конструктора, загружая Deals.isotropic.co, переходя на верхнюю панель, нажимая страницу редактирования, а затем нажимая кнопку редактирования с кислородом.
Целью этого теста не является скоростной бег. Это нужно для того, чтобы получить действительно реальные данные о времени загрузки этого плагина, чтобы увидеть, оправданы ли опасения по поводу скорости и эффективности. Вместо того, чтобы смотреть на фактические цифры времени, подумайте о различиях между этими цифрами, когда речь идет об устройстве и браузере.
Наконец, я включил ссылки Amazon (партнерские) на случай, если это вдохновит кого-то на импульсивную покупку.
Время загрузки Oxygen Builder в зависимости от браузера
Во-первых, давайте попробуем загрузить его во всех браузерах, установленных на моем Mac Mini M1. Статистика будет пересчитана при тестировании по устройствам, но это M1 Mac Mini 2020 года с 8 ГБ оперативной памяти, работающий под управлением Big Sur V11.3.1. Это мой "повседневный рабочий стол".
Начнем с теста браузера, чтобы определить, какой из них загружает Oxygen быстрее всего. Мы будем использовать этот браузер при тестировании различных устройств.
Мы тестируем Safari V14.1, Chrome V95.0.4638.69 и Firefox V94.
- Firefox появляется за 05,59 секунды.
- Chrome занимает 17,52 секунды.
- Safari занимает 6,20 секунды.
Chrome был здесь очевидным исключением. Я запустил его еще раз, чтобы увидеть, есть ли сбои в загрузке - вторая загрузка заняла всего около 16,5 секунд, поэтому я думаю, что среднее значение является относительно точным числом.
Вывод здесь заключается в том, что Firefox является самым быстрым браузером. Эта тема уже некоторое время обсуждается в официальной группе Facebook, поэтому, надеюсь, эти эмпирические данные доказывают, что вам следует использовать этот браузер. Лично Firefox — мой любимый браузер для разработки веб-сайтов, поскольку в нем есть масса высококачественных инструментов для разработки интерфейсов. Однако по сравнению с Chrome ему не хватает проверок безопасности и производительности.
Мы будем использовать этот браузер для тестирования устройства.
Время загрузки Oxygen Builder в зависимости от браузера
Для этого теста мы собираемся использовать устройства в одной сети Wi-Fi, используя ту же версию Firefox, загружая ту же страницу, что и раньше. Отличительным фактором будет устройство и статистика тестирования, стоящая за ним. Вот состав.
Mac Mini 2020 года (уже протестирован)
- Чип Apple M1
- 16 ГБ ОЗУ
Заряжает кислород за 05,59 секунды.
2019 XPS 13 9370
- Intel i7-8550U
- 16 ГБ ОЗУ
Заряжает кислород за 11,54 секунды.
iPad Air 10,9 дюйма MYFT2LL/A, 2020 г.
- Чип Apple A14
- 4 ГБ ОЗУ
Заряжает кислород за 11,96 секунды.
Читайте: Можете ли вы разрабатывать веб-сайты на iPad Pro?
2019 Делл Широта 7400
- Intel i7 8655U
- 16 ГБ ОЗУ
Загружает кислород за 16,19 секунды.
Макбук Про 13 дюймов 2020 г.
- Intel Core i5
- 16 ГБ ОЗУ
- Intel Iris Plus Graphics 645 1536 МБ
Заряжает кислород за 9,66 секунды.
Макбук Про 16 дюймов 2021 г.
- Чип Apple M1 Max
- 64 ГБ ОЗУ
Заряжает кислород за 5,43 секунды.
Во время тестирования все устройства подключены к зарядному устройству. Браузер Firefox является единственным открытым приложением/программой. Вам может быть интересно, почему у меня есть доступ ко всем этим устройствам. Я лично не владею всей этой электроникой, вместо этого у меня есть возможность арендовать ее в местном университете.
Большие выводы
Во-первых, как упоминалось несколько раз, это несовершенный тест. Это не было выполнено в лабораторных условиях. Страницы с менее динамичными данными будут загружаться в конструкторе серверной части быстрее, а страницы с более динамичными данными будут загружаться медленнее. То же самое для изображений, элементов DOM и скриптов.
Я предлагаю использовать эти цифры произвольно. Вместо того, чтобы говорить, что Oxygen загрузится за X,XX секунд, используйте цифры для сравнения браузера и устройств.
Вывод 1: Браузер имеет значение
Как постоянно заявляет Facebook, Firefox — самый быстрый браузер для загрузки Oxygen Builder. Я лично использую версию для разработчиков Firebox.
Вывод 2: Устройство имеет значение
Два самых быстрых устройства — это новейшие устройства Apple, использующие силикон Apple. Это имеет смысл; эти процессоры намного быстрее, чем что-либо еще на рынке; и они не такие дорогие. Восстановленный базовый M1 Mac Mini стоит менее 600 долларов, а M1 Macbook Air — 899 долларов.
Вывод 2B: похоже, что процессор важнее оперативной памяти
Также похоже, что чем мощнее процессор, тем быстрее загружается backend Builder. Например, ноутбук с 64 ГБ ОЗУ загружается так же, как ноутбук с 16 ГБ ОЗУ. С падением мощности процессора падает и время загрузки билдера.
Я ожидаю, что попытка загрузить сборщик на Chromebook или другое устройство с низкой статистикой может быть сложной.
Последние мысли
Среднее время загрузки Oxygen Backend для этого теста составило около 10 секунд для большой неоптимизированной страницы с кучей динамических данных. Кроме того, было несколько надстроек, которые загружали собственные элементы на страницу, а также большая коллекция пользовательских глобальных CSS. Это очень приемлемо в моей книге. Это становится еще более приемлемым, когда изменения классов CSS и глобальных параметров можно синхронизировать без необходимости перезагрузки конструктора с помощью плагина Collaboration.
Как веб-разработчик, который использует Oxygen для большинства проектов, скорость сборки никогда не влияла на меня, но я хотел серьезно взглянуть на то, как лучше всего настроить его.
Если у вас есть собственные сравнительные цифры, не стесняйтесь публиковать их в разделе комментариев ниже.