Создать красивый, адаптивный сайт с безупречным дизайном мечта любого фронтенд-разработчика. Но не всегда красота и быстрая загрузка сайта идут в паре. Как раз все наоборот. Одним из критериев успешного проекта по созданию сайта на Gantry5 является скорость загрузки страницы.
Проверить скорость загрузки любой страницы Вашего сайта это можно на https://developers.google.com/speed/pagespeed/insights/. И здесь начинаются проблемы.
Сайт на платформе JOOMLA - GANTRY5 с одним лишь меню без модулей Gantry5 (particles и atoms) дает отменные показатели скорости загрузки 95% для компьютеров и 79% для мобильных устройств, но стоит лишь подключить на страницу 1 бесплатный модуль + uikit3, то эта скорость может упасть до показателей 75% и 50% соответственно. Чем больше модулей,тем меньше скорость загрузки страницы - это безоговорочная аксиома. Иногда доходит до скорости загрузки 1%. Возникает вопрос, как совместить "красоту сайта" и скорость загрузки.
Опытным путем установлено, что существенно ( 25-30% ) - на скорость загрузки влияет фрейемворк UIKIT3. Скорость загрузки падает также при подключении видеобеграунда в секции - еще дополнительные 30-50%. Конечно, это нестрашно, если загрузка длится 3-5 секунд от силы, но если этот показатель доходит до 15 секунд - надо что-то менять.
Во-первых, уменьшить количество подключаемых стилей CSS (scss) и количество скриптов - отфильтровать лишь самые необходимые --> использовать частицы и атомы, без которых сайт вообщее будет никаким.
Чтобы удержать клиента при длительной загрузке страницы используют анимированные прелоадеры загрузки. Есть и бесплатные прелоадеры Gantry5, которые можно дополнить своими элементами. Здесь необходимо различать, что прелоадеры могут быть как particle-элементами, так и atom-элементами
Atoms - это служебные частицы Gantry5, которые загружаются со своими стилями и скриптами автоматически при загрузке любой страницы сайта, построенного на Gantry5, независимо, используется частица-атом конкретно на этой странице сайта или нет. Чрезмерное увлечение неработающими стилями чревато медленной загрузкой страницы.
Во-вторых, можно использовать альтернативные методы использования частиц на сайте - не через служебные частицы, а через модуль Ganry5 --> Custom HTML. И здесь всё зависит от вашей фантазии, нужно лишь знать основополагающие принципы сайтостроения: как подключать готовые или скопированные скрипты и стили.
Одним из альтернативных методов подключения стиля является использование тега <style> ..... <style> в самой частице Custom HTML (базовым способом в Gantry5 является подключение стиля через папку custom с помощью файла custom.scss)
Необходимый javascript требует обязательного использования в частице Cutom HTML тега <script> ... </script> и может потребовать опиcания самого скрипта для конкретной ситуации - при этом следует соблюдать очередность модуль-скрипт --> (script --> DOM) или (DOM --> script.ready)
Подключение картинок и изображений требует для корректного отображения длинного или короткого пути - через корневую папку images или custom/images - в зависимости от конкретной ситуации:
Вообщем, своих тонкостей для Gantry5 хватает - нужна лишь практика и здравый смысл.
Продолжение следует ...