Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

Тест производительности: самые продаваемые темы WordPress на ThemeForest

by
Length:LongLanguages:

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

Производительность является одним из самых важных аспектов любого веб-сайта, но похоже, что это то, что люди редко, принимают во внимание при покупке тем WordPress. В этом обзоре мы рассмотрим десять самых продаваемых тем на Themeforest, в порядке их появления, проведем их через некоторые базовые тесты производительности и оценим их сверху вниз.

The Chosen Themes

Список самых продаваемых тем WordPress на ThemeForest обновляется еженедельно, но вы часто увидите знакомых игроков, занимающих верхние места в течение некоторого времени. Мы взяли первую десятку (см. Ниже) и продемонстрировали их друг против друга с помощью некоторых общих тестов производительности.

2017s Best Selling WordPress Themes - updated weekly
Лучшие продажи WordPress Тем - обновляется еженедельно

Тесты

Для тестирования веб-сайтов доступно множество инструментов, мы выбрали некоторые классические: инструменты Google Pagespeed Insights, Webpagetest.org, Pingdom и Chrome dev tools. Большинство будет давать отзывы о том, как быстро загружается веб-страница, ее общий вес, насколько эффективно передаются ее ассеты, в конечном счете давая какую-то общую оценку. Мы запустили демо каждой темы с помощью этих инструментов и сопоставили цифры (см. Таблицу в конце поста).

В дополнение к этим тестам мы использовали плагин Accessibility Audit для инструментов Chrome dev tools. Это не связано с производительностью как таковой, но результаты всегда дают представление о том, как создавалась тема.

Некоторые примечания:

  • Все эти демо размещены отдельными авторами тем. Не все спецификации хостинга являются одинаковыми.
  • Была выбрана случайная демоверсия, в которой было доступно несколько вариантов. WooCommerce, BuddyPress или любые другие плагины платформы были устранены там, где это возможно. Также не использовались ориентированные на изображение темы (например, портфолио фотографий).
  • Все URL-адреса тестировались из Калифорнии, где это было возможно.
  • Точные результаты могут меняться изо дня в день.
  • Тематические демонстрации часто создаются для визуального воздействия, наполненного высококачественными изображениями и максимально возможной функциональностью. Это означает, что демонстрации редко являются точным отражением того, как результирующий веб-сайт может выглядеть и вести себя. Вероятно, что с вашей собственной копией вы бы лучше оценивали результаты всех этих демоверсий.

 Avada

Creative demo
Avada: Creative demo
  • Pagespeed insights для мобильных устройств: 46%
  • Pagespeed insights для настольных компьютеров: 48%
  • Webpagetest.org: Straight A, за исключением большого F при сжатии изображений. AAAFA☑
  • Pingdom: 91% (класс A)
  • Скорость загрузки Pingdom: 1,94 с
  • Chrome dev tools вес страницы: 2.8Мб
  • Аудит доступности: оценка 94% (отлично). Атрибуты ARIA соответствуют лучшим практикам, элементы хорошо структурированы, метатеги используются правильно.

Тяжелые изображения имеют огромное влияние на оценку низких показателей страниц в скорости; 77,2% от веса страницы приписывается изображениям. Файлы, такие как avada-creative-home1.jpg, могли бы быть уменьшены с 344,6 КБ до ~ 40 КБ без особых усилий. Конечно, справедливо сказать, что с здравым смыслом ваша собственная установка Avada может быть сделана намного легче и быстрее. Приятно видеть, что Avada построена с учетом доступности.

The7

The7 Construction demo
The7: Construction demo
  • Pagespeed insights для мобильных устройств: 64%
  • Pagespeed для настольных компьютеров: 91%
  • Webpagetest.org: A по всем направлениям. AAAAA☑
  • Pingdom: 68% (класс D)
  • Скорость загрузки Pingdom: 1,51 с
  • Chrome dev tools вес страницы: 1.3Мб
  • Аудит доступности: оценка 83% (неплохо). В некоторых элементах изображения отсутствуют атрибуты alt, коэффициент контрастности цвета может быть лучше на некотором тексте (относительно его фона). Но в целом элементы хорошо структурированы, а доступность надежная.

Вообще говоря, это демо загружается довольно быстро; его изображения и ассеты не слишком тяжелы, а страница может использоваться относительно рано при загрузке. Однако его оценка Pingdom не является оптимальной. Улучшения могут быть сделаны путем комбинирования некоторых JavaScript, также CSS, в то время как кэширование может быть упрощено, не форсируя номера версий на имена файлов (например: /assets/css/settings.css?ver=5.4.5.2).

BeTheme

BeTheme 3D demo
BeTheme: 3D demo
  • Pagespeed insights для мобильных устройств: 76%
  • Pagespeed для настольных компьютеров: 87%
  • Webpagetest.org: A по всем направлениям. AAAAA☑
  • Pingdom: 98 (класс A)
  • Скорость загрузки Pingdom: 1,27 с
  • Chrome dev tools вес страницы: 1.8Мб
  • Аудит доступности: 80% Уменьшает контрастность (это довольно темная тема) и ее неполное использование ролей ARIA.

Эта тема загружается очень быстро. Большая ее часть видимого контента имеет приоритет, включая основные стили, встроенные в head, и многое из того, что загружено, минимизируется и конкатенируется. Как это часто бывает, изображения составляют львиную долю веса страницы (69,5%), поэтому нетрудно получить эту домашнюю страницу демо с золотым порогом в 1Мб.

Impreza

Impreza Restaurant demo
Impreza: Restaurant demo
  • Pagespeed insights для мобильных устройств: 63%
  • Pagespeed для настольных компьютеров: 68%
  • Webpagetest.org: FAABF☒
  • Pingdom: 80% (класс B)
  • Скорость загрузки Pingdom: 2,34 с
  • Chrome dev tools вес страницы: 2.5Мб
  • Аудит доступности: 94% (отлично). Правильно используемые атрибуты для элементов, включая роли ARIA. Заметные имена элементов и хорошо описанный контент.

Хотя скорость загрузки демо ресторана Impreza неплохая, ее производительность упирается на более чем на 2МБ изображений. Также следует отметить отсутствие CDN и плохое время отклика сервера; два аспекта, которые относятся к размещению этого демо и тем, которые вы можете легко улучшить.

Enfold

Enfold Gym demo
Enfold: Gym demo
  • Pagespeed insights для мобильных устройств: 60%
  • Pagespeed для настольных компьютеров: 60%
  • Webpagetest.org: AAADB☒
  • Pingdom: 70% (класс C)
  • Скорость загрузки Pingdom: 2,79 с
  • Chrome dev tools вес страницы: 5.2Мб
  • Аудит доступности: 89% Одна из демоверсий с высокой скоростью для доступности, демонстрирующая основную мощь в качестве сборки.

Опять же, ни один CDN не использовался для размещения этого демо, из за чего теряется несколько баллов на webpagetest.org. Отсутствие HTTPS также могло заработать черную метку Enfold. Как обычно, это демо попадает в ловушку того, чтобы быть как можно более визуально ошеломляющей, жертвуя весом страницы для качества изображения. При более чем 5Мб это супертяжело, но размер изображения всегда легко исправляется.

X

X Church demo
X: Church demo
  • Pagespeed insights для мобильных устройств: 77%
  • Pagespeed insights для настольных компьютеров: 74%
  • Webpagetest.org: DFAAB☒
  • Pingdom: 87% (класс B)
  • Скорость загрузки Pingdom: 2,45 с
  • Chrome dev tools вес страницы: 2.1Мб
  • Аудит доступности: 91% Очень здоровый показатель A11y, поддающийся только на отсутствии атрибутов alt на некоторых изображениях, низкий коэффициент контрастности в некоторых областях (эта церковная тема довольно приглушена) и отсутствие атрибута title на iframe. Тем не менее, учитывая, что iframe - это встраивание YouTube, в котором нет стандартного атрибута title, мы прощаем это.

Это демо является одним из немногих, которое делает разумную работу, сохраняя накладные расходы на изображение до минимума; webpagetest оценивает его в 97/100 для сжатия изображения. Вместо этого его низкие оценки в значительной степени зависят от хостинга; нет CDN, нет HTTPS, плохого начального времени отклика и отсутствия "keep alive" - иначе известный как постоянное HTTP-соединение, что легко может быть включено. Как всегда, легкие улучшения, которые вы сами могли бы ввести в действие.

Bridge

Bridge Spa demo
Bridge: Spa demo
  • Pagespeed insights для мобильных устройств: 70%
  • Pagespeed для настольных компьютеров: 83%
  • Webpagetest.org: DAAAF☒
  • Pingdom: 85% (класс B)
  • Скорость загрузки Pingdom: 2,12 с
  • Chrome dev tools вес страницы: 1.6Мб
  • Аудит доступности: 91% (очень хорошо). Есть небольшие точки, понижающие общий балл, но атрибуты ARIA соответствуют лучшим практикам, а элементы страницы имеют различающиеся имена, хорошо описывают их контент и правильно структурированы.

Одна из более легких демо, но слайдеры изображений всегда могут увеличить вес страницы, даже с хорошо оптимизированными изображениями, подобными этим. Минимизация HTML и других ассетов помогла бы оценить количество страниц в сети, а улучшенный хостинг снова сделает чудеса - лучшее время отклика сервера, CDN и кеширование - низко висящие плоты.

Flatsome

Flatsome Go Explore demo
Flatsome: Go Explore demo
  • Pagespeed insights для мобильных устройств: 53%
  • Pagespeed для настольных компьютеров: 57%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 96% (класс A)
  • Скорость загрузки Pingdom: 1,02 с
  • Chrome dev tools вес страницы: 3.7Мб
  • Аудит доступности: 83% Точки, потерянные на фронте A11y, при неправильном выборе кнопок (кнопки значков списка желаний WooCommerce не могут быть прочитаны должным образом на экране), а некоторые ссылки одинаково расплывчаты. Низкая контрастность некоторых элементов и дублированные идентификаторы элементов также являются легкими для исправления.

Низкая оценка от Pagespeed Insights, хотя другие показатели подсчета очков абсолютно любят Flatsome! Хороший хостинг обеспечивает эффективную работу страницы (авторы темы это отмечают), ассеты сведены к минимуму, а ленивые загрузки изображений помогают, в противном случае была бы страница среднего веса с прогрессивной загрузкой.

Jupiter

Jupiter Bellona template
Jupiter: Bellona template
  • Pagespeed insights для мобильных устройств: 38%
  • Pagespeed для настольных компьютеров: 44%
  • Webpagetest.org: AAAFA☑
  • Pingdom: 92% (класс A)
  • Скорость загрузки Pingdom: 1,07 с
  • Chrome dev tools вес страницы: 3.3Мб
  • Аудит доступности: 91% (очень хорошо). Из-за впечатляющего характера графики (которою я люблю, кстати), текст на некоторых изображениях создает слабые коэффициенты контрастности. Структура страницы и описательное использование элементов, а также надлежащее использование ARIA - компенсируют недостатки контраста.

Это прозвучит, как заезженная пленка, но потратив пять минут на оптимизации изображений, можно значительно уменьшить накладные расходы на этом демо. home-bg-08.jpg сам весит почти целый мегабайт; прогнав его через TinyPNG, он сразу же сбрасывает 87%. Почему бы и нет? Как показывают Pingdom и Webpagetest, большинство других аспектов производительности очень хороши.

Newspaper

Newspaper Tech news
Newspaper: Tech news
  • Pagespeed insights для мобильных устройств: 76%
  • Pagespeed insights для настольных компьютеров: 77%
  • Webpagetest.org: AAAAA☑
  • Pingdom: 93% (класс A)
  • Скорость загрузки Pingdom: 1,19 с
  • Chrome dev tools вес страницы: 1.5Мб
  • Аудит доступности: 86% Хорошая оценка - может быть улучшена путем правильного описания ссылок и кнопок, которые фактически используются для элементов управления JavaScript, переключателей и т. п.

Отличные оценки по всем направлениям, применяются стандартные улучшения (оптимизация изображений, сжатие/конкатенация JS и CSS), но имейте в виду, что это демо также снабжено большими дополнениями, продвигающими другие версии темы (добавлены сложности, которые вряд ли понадобится в собственной версии). Без особых усилий это демо могло бы войти в весовой класс sub-1Mb.

Таблица результатов

Принимая во внимание все предостережения, которые мы перечисляем на этом пути, эта таблица ставит темы в определенном порядке. Рейтинг Pingdom является довольно круглым счетом, чтобы основываться на нем; вы увидите, что вес страницы, скорость загрузки и даже показатели Pagespeed Insights попадают в аналогичный шаблон (до некоторой степени).

Статистика Pagespeed Insights (средняя) Pingdom Скорость загрузки Вес страницы
BeTheme 81.5% 98% 1,27 с
1.8Мб
Flatsome 55% 96% 1,02 с
3.7Мб
Newspaper 76.5% 93% 1,19 с 1.5Мб
Jupiter 41% 92% 1,07 с 3.3Мб
Avada 46.5% 91% 1,94 с 2.8Мб
X 75.5% 87% 2,45 с
2.1Мб
Bridge 76.5% 85% 2,12 с
1.6Мб
Impreza 65.5% 80% 2,34 с 2.5Мб
Enfold 60% 70% 2.79 s 5.2Мб
The7 78% 68% 1,51 с 1.3Мб

Как сделать ваши WordPress темы более производительными

Купив тему WordPress, как бы вы ее оптимизировали?

Это вас не удивит: простой первый порт захода при оптимизации вашего сайта - это ваши изображения. Удалите ненужные изображения, сжимайте те, которые вам нужны, сохраняйте JPEG как "прогрессивные" (так что есть хотя бы что-то, что можно увидеть, пока они загружаются), и вы получите хорошие результаты при старте. Вы также можете установить плагин Lazy Loading, чтобы сделать шаг дальше. Мы видели, что очень немногие из этих демо приостанавливают оптимизацию изображений, но это по крайней мере означает, что вы сможете улучшить свои оценки.

Что касается заведомо изменчивых показателей Pagespeed Insights, вы заметите, что все эти демо (за исключением одного) лучше подходят для настольных компьютеров, чем их мобильные версии. Это больше не отражает способ использования веба, поэтому чтобы Google (и пользователи) были довольны, нужно уделить пристальное внимание мобильной производительности. Mobile first подход также поможет вашему SEO.

Как вы можете это сделать? Конкатенация CSS и JavaScript с WordPress может быть сложной. Использование сторонних плагинов означает, что файлов может быть много, и вы не будете иметь большого контроля над ними без помощи. Тем не менее, сделайте все возможное, чтобы включить жизненно важные стили "начального вида" в head, и сделать ваш сайт максимально эффективным, предотвратив "блокирующие" скрипты которые могут замедлять процесс загрузки. Если слайдер в верхней части главной страницы требует, чтобы вся страница была загружена до того, как она появится, Google будет наказывать вас.

Помимо этого, рассмотрите свой хостинг. Включение сжатия GZIP. HTTPS тоже не повредит. Также используйте кеширование; установка и настройка W3 Total Cache - это детская игра. Используйте CDN, если ваш контент предназначен для широкой аудитории. Наконец, ознакомьтесь с этими учебниками и курсами для получения более подробной информации и помощи по этому вопросу:

Ресурсы по повышению производительности для WordPress

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.