Конструктор сайтов Joomla Gridbox поставляется со встроенными инструментами повышения производительности (Performance Tools). В этом руководстве мы покажем, как ускорить ваш сайт с помощью инструментов Gridbox, а также подробно объясним базовые принципы работы каждого из них.
1. Подключение и запуск инструментов производительности
Для активации инструментов ускорения выполните следующие шаги:
- 1. Установите приложение Gridbox — Performance.
- 2. В панели управления нажмите на иконку Site ➝ Performance.
2. Сжатие кода (Code Compression)
Инструменты минификации кода в Gridbox сжимают и объединяют исходный код для повышения производительности сайта на Joomla:
- ■ Минификация кода (Code minification): Удаляет все лишние символы (пробелы, переносы строк, комментарии) из исходных файлов HTML, CSS и JavaScript. Минификация кода ускоряет время загрузки страниц за счет уменьшения физического размера исходных файлов.
- ■ Объединение файлов (Combining files): Заменяет множество отдельных исходных файлов CSS и JavaScript на один единый CSS-файл и один JavaScript-файл. Это существенно снижает количество HTTP-запросов к серверу. Чем меньше число HTTP-запросов, тем быстрее браузер загружает страницу.
3. Кэширование страниц и браузера (Page and Browser Caching)
Локальное хранение статических элементов сайта (CSS, JavaScript, изображения) сокращает время загрузки страницы. Таким образом, каждый раз, когда пользователь повторно посещает ту же страницу, она отдается из кэша. Такой подход делает сайты чрезвычайно быстрыми, улучшает показатели SEO и повышает удобство использования (usability):
- ■ Кэш страниц (Page cache): Технология кэширования, которая сохраняет готовую сгенерированную страницу целиком в кэше на стороне сервера, что многократно минимизирует время отклика сервера (Time to First Byte / TTFB) при отображении страницы.
- ■ Кэш браузера (Browser cache): Если страница уже была закэширована браузером пользователя, сайт отправляет браузеру заголовок
304 Not Modified(без изменений), благодаря чему серверу не требуется заново передавать страницу посетителю.
4. Оптимизация изображений (Image Optimization)
Конструктор сайтов Gridbox предоставляет 2 способа оптимизации изображений на сайте: ручной и автоматический.
Ручное сжатие изображений (Compressing images manually)
В конструктор Gridbox встроен собственный фоторедактор (Photo Editor), который позволяет уменьшать размер и вес файлов изображений (качество), обрезать, кадрировать, корректировать цвета и накладывать фильтры. С помощью Gridbox Photo Editor вы можете оптимизировать каждое изображение индивидуально под требования конкретного элемента на вашем сайте.
Автоматическое сжатие изображений (Automatic image compression)
Инструмент автоматического сжатия и изменения размера изображений представляет собой алгоритм, который уменьшает габариты и вес картинок методом оптимизации.
Чтобы включить автоматическое сжатие и изменение размера изображений:
- Нажмите на иконку Site ➝ Performance ➝ Images.
- Активируйте переключатель Compress Images.
- Задайте максимальный размер (Max. size) и качество (Quality).
- При необходимости включите конвертацию изображений в современный формат WebP.
Все сжатые изображения автоматически сохраняются в системной папке .../images/compressed. При отключении опции автоматического сжатия изображений папка compressed вместе со всеми находящимися внутри сжатыми изображениями будет удалена.
Адаптивные изображения (Adaptive images)
Функция Adaptive Images автоматически генерирует отдельные копии изображений под каждое разрешение экрана мобильного устройства и отдает посетителю соответствующую оптимизированную версию.
Ленивая загрузка изображений (Lazy load images)
Ленивая загрузка изображений — это метод оптимизации производительности, при котором загружаются только те изображения, которые находятся в видимой области экрана (viewport). Изображения, находящиеся ниже экрана, не загружаются до тех пор, пока пользователь не начнет прокручивать страницу вниз.
Чтобы включить Lazy Load на вашем Joomla сайте, переведите переключатель Lazy Load Images в активное положение.
5. Сводная таблица параметров и настроек Performance
Полный перечень всех опций оптимизации производительности в Gridbox:
| Параметр / Инструмент | Принцип работы и назначение | Тип данных / Опция |
|---|---|---|
| Code Minification | Удаление лишних символов из HTML, CSS и JS для уменьшения веса файлов. | Переключатель (Yes/No) |
| Combining Files | Склейка разрозненных файлов CSS и JS в один для сокращения количества HTTP-запросов. | Переключатель (Yes/No) |
| Page Cache | Серверное кэширование сгенерированных страниц для максимального снижения времени отклика. | Переключатель (Yes/No) |
| Browser Cache | Отправка заголовка 304 Unchanged для загрузки статики напрямую из кэша браузера. | Переключатель (Yes/No) |
| Compress Images | Алгоритмическое автоматическое сжатие изображений и изменение их размеров. | Переключатель (Yes/No) |
| Max Size & Quality | Установка максимального разрешения в пикселях и степени компрессии (качества) картинок. | Числовые значения / Ползунок |
| Convert to WebP | Автоматическое конвертирование графических файлов в легковесный формат WebP. | Переключатель (Yes/No) |
| Adaptive Images | Генерация отдельных версий изображений под разрешения мобильных экранов. | Переключатель (Yes/No) |
| Lazy Load Images | Отложенная подгрузка изображений только по мере прокрутки страницы пользователем. | Переключатель (Yes/No) |
Включение связки Convert to WebP + Adaptive Images + Lazy Load дает максимальный прирост баллов в Google PageSpeed Insights (в «зеленую зону» 90+ на мобильных). При этом помни: если на этапе верстки ты заменил картинку, а она не обновилась на фронтенде — просто очисти системный кэш или проверь папку /images/compressed.