Несколькими постами ранее я рассматривал набор модулей для оптимизации фронтенда сайта на Drupal, и продолжая эту тему хотелось бы сказать о паре модулей,https://web.archive.org/web/20210918053003/http://www.master-web.info/moduli-optimizatsii-frontenda-drupal/которые дополнят арсенал средств для улучшения производительности вашего сайта Drupal.
Итак, вы уже оптимизировали ваши CSS и JS файлы, поработали над оптимизацией картинок, которые загружаются в стилях вашего сайта, и теперь самое время обратить ваше внимание на картинки, которые будут загружаться в контента сайта. И здесь есть две ключевых стратегии на сегодня, обе желательно выполнять: разные картинки для мобильного и десктопа, отложенная загрузка больших изображений. И, к счастью, для этого есть модули Drupal.
Picture
Модуль позволяет поставлять различные варианты изображений для различных устройств основываясь на брикпоинтах (breakpoints), которые вы установите для вашего сайта. Именно поэтому модуль имеет зависимость от модуля Breakpoints. Примечательно, что модуль Picture использует известный полифил picturefill 2.0, который позволяет задействовать модуль, для правильного внедрения адаптивных изображений в многих версиях браузеров оптимальным способом.
Image Lazyloader
Это небольшой модуль будет автоматически подгружать изображения добавленные на сайт с помощью системного модуля Image по мере появления картинок в видимой области браузера.
Доступные настройки:
1) Включить/Выключить
2) Дистанция — расстояние картинки от видимой области браузера до момента, как она начнет загружаться
3) Плейсхолдер — картинка до загрузки
4) Иконка загрузчика — будет показана пока картинки будет грузиться
5) Исключенные страницы — список страниц на которых вы не хотите включать модуль
Для других картинок:
Также вы можете использовать функционал модуля для картинок, которые были вставлены не посредством модуля Image.
Нужно установить такие атрибуты:
1) src = путь к плейсхолдеру
2) data-src = путь к самой картинке
3) width = ширина картинке (лучше указать)
4) height = высота картинки (лучше указать)
5) Блок-контейнер
Пример:
<div class="image-container"> <img alt="Image" data-src="/sites/default/files/actual_image.jpg" /> </div> |
Вот на этом и все. Модулей всего два, но вместе с оптимизацией CSS и JS они дадут хороший прирост производительности вашего сайт.
Спонсоры статьи: