- Купить SP Page Builder Pro у разработчика (без посредников и переплат).
- Видео обзор.
- Интеграция.
- Языки.
- Модуль SP Page Builder Pro.
- Меню.
- Оптимизация скорости загрузки SP Page Builder Pro.
SP Page Builder Pro – платный русскоязычный конструктор лендингов для сайтов на Joomla с очень гибкими настройками, множеством объектов и готовых шаблонов.
Видео обзор
- Интеграция (Подключение) – 00:00:30.
- Языки – 00:01:20.
- Обслуживание (Maintenace) – 00:01:49.
- Меню – 00:02:23.
- Модуль – 00:02:55.
- Оптимизация скорости загрузки в SP Page Builder Pro – 00:03:30.
- Оптимизация скорости загрузки в Joomla – 00:06:42.
- Оптимизация скорости загрузки в Helix Ultimate – 00:07:26.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.
Ссылки из видео:
За счёт инструментов, доступных в компоненте, можно создавать весьма сложные модульные сетки (макеты) страниц. В предыдущей статье «Обзор SP Page Builder Pro (часть 7). Создание лендинга на Джумла» мы рассмотрели часть объектов, которые доступны в расширении. В этой статье поговорим об интеграции с другими компонентами, модуле, пункте меню и затронем вопрос оптимизации скорости загрузки сайта.
В цикле уроков по самостоятельному созданию сайтов на Joomla 4 рассмотрен пример работы с SP Page Builder Lite.
В обзоре участвует последняя, на момент написания статьи (16.02.2021), русскоязычная версия SP Page Builder Pro 3.7.9 в Joomla 3.9.24. Сайт с быстрым стартом на базе Helix Ultimate 1.1.2.
Интеграция
В данном разделе (рисунок ниже) Вы можете включить интеграцию компонента с материалами Joomla, SP Simple Portfolio и K2.
Рассмотрим пример с материалами Joomla. Интеграция заключается в том, что прямо в материале Joomla можно использовать инструменты, объекты и шаблоны SP Page Builder Pro для создания страниц (рисунок ниже).
При этом всегда можно переключиться на обычный редактор Joomla, если Вам не нужно создать обычную страницу материала.
Языки
В разделе Языки (рисунок ниже) можете установить один из переводов для компонента. Доступен русский, украинский, английский, французский, немецкий и другие языки. Обратите внимание, перевод может быть неполным, неточным и содержать ошибки. Это связано с тем, что над переводом работают «волонтёры».
Модуль SP Page Builder Pro
У данного компонента есть модуль (рисунок ниже), где можете создавать страницы точно так же, как это происходит в компоненте. Но при этом модуль можно выводить в любой позиции шаблона на сайте.
Меню
Для вывода страниц, которые создавали в компоненте, предназначен пункт меню тип SP Page Builder – Page. В его настройках пункта меню (рисунок ниже) Вы указываете страницу, которую ранее создали в компоненте, и больше каких-то особых настроек тут нет.
Оптимизация скорости загрузки SP Page Builder Pro
Для полноценной оптимизации скорости загрузки нужно специализированное расширение типа JCH Optimize Pro, JSpeed, Speed Cache или аналогичные.
Ниже рассмотрим ускорение сайта только при помощи встроенных возможностей SP Page Builder Pro 3.7.9, Joomla 3.9.24 и шаблона «Politicas» 1.0 на фреймворке Helix Ultimate 1.1.2.
Тестирую главную страницу быстрого старта шаблона (рисунок ниже).
Приведу результат тестирования страницы в Google PageSpeed Insights до внесения изменений. Это лучший результат из трёх.
А вот результат тестирования страницы в Google PageSpeed Insights после внесения изменений. Это лучший результат из трёх.
До внесения изменений было:
- для мобильных – 45.
- Для компьютеров – 78.
После внесения изменений стало:
- для мобильных – 60.
- Для компьютеров – 91.
Рассмотрим, какие опции активированы и как, примерно, они влияют на результирующую оценку.
В настройках компонента (рисунок ниже):
- Production Mode – Да. Это дало, примерно, 1-2 балла. Активация данной опции потребует очистки кэша компонента в его настройках при внесении изменений на страницы сайта.
- Загрузить FontAwesome – Нет. Это дало, примерно, 1-2 балла. Если Вы используете иконки FontAwesome, тогда не нужно отключать эту опцию.
- Lazy Load – Да. Это дало, примерно, 1-3 балла. В качестве заполнителя (опция Placeholder Image) я задал собственное изображение в формате PNG 1х1 пиксель (размер 67 байт). Изображение заполнителя загружалось с того же домена, что и сайт. В моём примере данная опция очень мало повлияла на результирующую оценку, так как размер картинок на странице сам по себе очень маленький. В реальной ситуации отложенная загрузка может весьма существенно влиять на оценку.
- Отключить Анимации CSS – Да. Это дало, примерно, 1-2 балла.
Указываю диапазон баллов, так как при трёх замерах скорости выдавался разный результат.
В Joomla 3.9.24 в Система – Общие настройки – Система включил опцию Системный кэш (Прогрессирующее кэширование). Это дало, примерно, 1-3 балла. Отмечу, что в реальной ситуации кэширование сайта может существенно снизить нагрузку на хостинг и снизить время генерации страницы. А это, в свою очередь, может положительно сказываться на скорости загрузки сайта.
В настройках шаблона «Politicas» 1.0:
- В Typography, во всех вкладках Body, Headings (h1-h6), Navigation, Custom и Update Font List вместо шрифтов Google выбрал системный шрифт (рисунок ниже). Это дало, примерно 3-5 балла. Обратите внимание, что это «убивает» дизайнерскую идею. Так как шрифты Google могут быть выбраны не случайно, а для придания некой «эксклюзивности». Плюс, если контент сайта уже добавлен, то после смены шрифтов, возможно, понадобится поправить его или некоторые стили. Так как один и тот же текст, написанный разными шрифтами, может быть разной длины.
- В Advanced, во вкладке Compression, включил опции Compress CSS Files и Compress Javascript Files. Это дало, примерно, 10-15 баллов. Но эти опции стоит включать только тогда, если сайт уже закончен, иначе придётся часто очищать кэш. Плюс, сжатие JS файлов может вызвать ошибки в работе сайта. Для этого в настройках есть поле Exclude Javascript Files, в которое можно ввести имена файлов, для их исключения из сжатия. Чем больше файлов Вы исключите, тем хуже будет оценка оптимизации сайта.
Как видите, настройки оптимизации, доступные в компоненте, а также в самой Joomla, не сильно повлияли на результаты оптимизации в моём тесте. Самый ощутимый прирост, как и ожидалось, дало сжатие CSS и JS файлов. Если Ваш шаблон базируется не на фреймворке Helix Ultimate, то может не быть таких опций. Хотя они есть и в шаблонах на фреймворке EF4 (от Joomla-Monster.com), и у других шаблонов.
Даже если в настройках шаблона такого нет, можно использовать бесплатный плагин JCH Optimize или другие альтернативные расширения.
Как видите, у SP Page Builder Pro есть несколько вариантов отображения созданных в нём страниц: пункт меню, модуль, интеграция с материалами Joomla, K2 и SP Simple Portfolio. А несколько встроенных опций могут помочь оптимизировать скорость загрузки страниц на этом компоненте, пусть и не так ощутимо.
В следующей статье «Как пользоваться SP Page Builder 4 (часть 1)» мы поработаем с новой версией данного компонента.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Купить Pro версию у разработчика (без посредников и переплат).
- Официальный сайт компонента.
- Документация компонента (на нагл.).
