0  /  18

Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Установка модуля

В разделе описаны первые шаги по работе с модулем: Установка модуля и дополнительного серверного программного обеспечения.

Установка демо-версии модуля

Демо-режим модуля позволяет бесплатно установить и протестировать модуль в течении 21 дня. После этого для продолжения функционирования модуля необходимо приобрести на него лицензию.

Для установки модуля в демо режиме выполните следующие шаги:

Шаг 1.

Зайдите по ссылке http://marketplace.1c-bitrix.ru/solutions/ammina.optimizer/, нажмите кнопку «Попробовать».

Установка демо-версии модуля Ammina.Optimizer

Укажите адрес вашего сайта (Например https://www.ammina-test.ru/) и нажмите кнопку «Попробовать»

Указываем сайт, на который устанавливается демо-версия модуля Ammina.Optimizer

Шаг 2.

Откроется страница загрузки модуля на сайт. Проверьте, что напротив модуля стоит галочка и нажмите кнопку «Загрузить»

Загрузка модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Во всплывающем окне поставьте все галочки и нажмите кнопку «Применить»

Соглашение при установке модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Шаг 3.

Дождитесь загрузки модуля и нажмите кнопку «Установить»

Установка модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Заполните контактную форму и нажмите кнопку «Далее»

Регистрация модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Модуль установлен. Если в качестве сервера у вас используется выделенный сервер, VDS, виртуальная машина VMBitrix, то мы рекомендуем установить дополнительное серверное программное обеспечение.

Установка модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения) завершена


Установка платной версии модуля

Платный режим (без ограничений по времени работы) становится доступен после приобретения лицензии на модуль на сайте компании 1С-Битрикс либо на сайте веб-студии Ammina.

Для установки модуля в платном режиме выполните следующие шаги:

Шаг 1.

Зайдите по ссылке http://marketplace.1c-bitrix.ru/solutions/ammina.optimizer/, нажмите кнопку «Купить».

Купить модуль Ammina.Optimizer

Оплатите покупку и дождитесь письмо с кодом купона для активации модуля на вашем сайте.

Получен купон модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Шаг 2.

Откройте страницу «Marketplace-> Обновление решений -> Активация купона» и в поле «Введите купон» укажите полученный купон купленного решения. Нажмите кнопку «Активировать купон» и дождитесь сообщения об успешной активации.

Активация купона модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Откроется страница загрузки модуля на сайт. Проверьте, что напротив модуля стоит галочка и нажмите кнопку «Загрузить»

Загрузка модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Шаг 3.

Дождитесь загрузки модуля и нажмите кнопку «Установить»

Установка модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Заполните контактную форму и нажмите кнопку «Далее»

Регистрация модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Модуль установлен. Теперь необходимо сделать минимальные настройки и действия, чтобы начать пользоваться модулем.

Установка модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения) завершена


Установка дополнительного серверного ПО (необязательный, но рекомендуемый этап)

Модуль позволяет осуществить оптимизацию сайта без установки дополнительного программного обеспечения на сервер.
Однако, мы рекомендуем (при использовании выделенного сервера, VDS, виртуальной машины VMBitrix, наличии доступа по SSH и прочих подобных условиях, позволяющих установить на хостинге дополнительное программное обеспечение) осуществить данные действия для улучшения минификации файлов CSS и JavaScript.

Установка дополнительного программного обеспечения состоит из нескольких шагов:

  • Войти на сервер по SSH
  • Установить программные пакеты NPM, Node.JS
  • Установить модули NPM: Uglify-JS, Uglify-JS2, Terser, Babel-Minify, HTML-Minifier глобально (рекомендуется) или локально
  • На странице настроек модуля проверить правильность путей к исполняемым файлам NPM модулей (которые будут вами использоваться для минификации) и при необходимости прописать верные
  • На странице настроек модуля выбрать соответствующие библиотеки для минификации JS и HTML
  • Проверить остальные настройки модуля и активировать минификацию

Установка программного обеспечения:

Для различных операционных систем различается только 2-й шаг (в зависимости от операционной системы и менеджера пакетов)

Шаг 1. Войдите на ваш хостинг по протоколу SSH

Шаг 2. Для операционных систем на базе CentOS (VMBitrix).

Установите программные пакеты, выполнив команду:

sudo yum install npm nodejs jpegoptim optipng pngquant gifsicle php-imagick libwebp-tools

Шаг 2. Для операционных систем на базе Ubuntu/Debian.

Установите программные пакеты, выполнив команду:

sudo apt install npm nodejs-legacy jpegoptim optipng pngquant gifsicle php-imagick webp

Шаг 3. Установка пакетов NPM

Установите модули NPM глобально (как команды ниже), либо локально (без параметра -g и команды sudo):

sudo npm install uglify-js uglify-js2 terser babel-minify html-minifier svgo -g

После этого вам необходимо на странице настроек указать пути (при локальной установке) к исполняемым файлам модулей и выбрать соответствующие библиотеки минификации.

Дополнительные настройки хостинга

Для корректного управления кешированием на уровне браузера посетителя и для правильной обработки статических файлов фронтэнд сервером nginx, необходимо на сервере откорректировать некоторые конфигурационные файлы.

В зависимости от типа хостинга, необходимо сделать:

Если у вас виртуальный хостинг.

В файл .htaccess, расположенный в корневой папке сайта необходимо добавить в конец файла следующие директивы:

AddType image/webp webp

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType image/jpeg "access plus 30 day"
  ExpiresByType image/gif "access plus 30 day"
  ExpiresByType image/png "access plus 30 day"
  ExpiresByType image/webp "access plus 30 day"
  ExpiresByType text/css "access plus 30 day"
  ExpiresByType application/javascript "access plus 30 day"  
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|txt)$">
    Header set Cache-Control "max-age=31536000"
  </FilesMatch>
  <FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png|webp|woff|woff2|svg|ttf|otf|eot)$">
    Header set Cache-Control "max-age=31536000"
  </FilesMatch>
</IfModule>

Напишите в техподдержку вашего хостинг-провайдера письмо следующего содержания:

Добрый день.

Прошу в настройки хоста [адрес вашего сайта] nginx добавить директиву следующего содержания:
location ~* ^.+.(jpg|jpeg|gif|png|ico|css|bmp|js|woff|woff2|webp|ttf|svg|eot)$ {
	expires 30d;
	add_header Cache-Control max-age=31536000;
}
Это необходимо для правильного управления кешированием на стороне браузера посетителя.

Заранее благодарю.

В некоторых хостинг-панелях есть возможность редактировать конфигурационный файл nginx. Если такая возможность есть, то вышеуказанную директиву вы можете добавить самостоятельно.

Если у вас хостинг VDS или выделенный сервер.

В конфигурационный файл хоста, либо в общий включаемый файл конфигурации для всех хостов, добавьте следующую директиву:

location ~* ^.+.(jpg|jpeg|gif|png|ico|css|bmp|js|woff|woff2|webp|ttf|svg|eot)$ {
	expires 30d;
	add_header Cache-Control max-age=31536000;
}

Так же вам необходимо проверить, что файлы webp, woff2, woff, ttf, otf, eot, jpg, jpeg, png, gif, css, js обрабатываются как статичные файлы (т.е. отдаются непосредственно с диска без обращения к бекэнд серверу)

Настройка композитного режима

Обратите внимание на эту аннотацию, прежде чем настраивать и включать композитный режим.
Использование композитного режима позволяет значительно ускорить отдачу контента страницы посетителю, но в связи с особенностями композитного режима и особенностями работы аудита Google Page Speed Insight, оценка последнего будет падать, по сравнению с оценкой без композитного режима. Это связано в первую очередь с дополнительным обращением браузера сайта за данными (фоновым ajax запросом).
Несмотря на то, что оценка упадет, сайт станет работать быстрее, т.к. модуль Ammina Optimizer выполняет комплекс работ, которые в т.ч. влияют на скорость рендеринга (отображения) страниц сайта.
Данные раздел описывает действия, которые необходимо провести для правильной настройки композитного режим вместе с модулем оптимизации.
Обратите внимание, что прежде, чем настраивать и включать композитный режим, необходимо провести полную настройку модуля оптимизации без композитного режима. Только в этом случае можно получить максимальные результаты скорости работы сайта. Корректная настройка позволит правильно обрабатывать поддержку браузером посетителя изображений в формате WebP.

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

Возможны 2 варианта:

  • Без настройки nginx - обычно встречается на виртуальных хостингах и на VDS, которые не используют конфигурацию BitrixVM. В этом случае запрос идет непосредственно на бэкэнд веб-сервера и ядро битрикса самостоятельно определяет, отдавать данные из композитного кэша, либо необходимо сначала кэш данной страницы сформировать.
  • С настройкой nginx - обычно встречается при использовании виртуальной машины BitrixVM, если было выполнено задание по настройке nginx для композитного кэша. В этом случае, при наличии композитного кеша страницы, обращение к бэкэнду не происходит и контент страницы отдается посетителю непосредственно nginx.

Настройка, если нет отдельной конфигурации nginx для работы с композитным кэшем.

Для корректной отдачи контента композитного кеша необходимо, чтобы первым файлом, который будет выполнятся до подключения ядра битрикса, был файл /bitrix/modules/ammina.optimizer/system/prepend.php

Подключить данный файл можно 2 способами:

  1. Добавить код в файл /bitrix/header.php, чтобы содержимое файла выглядело следующим образом:
    <? @include($_SERVER['DOCUMENT_ROOT'] . "/bitrix/modules/ammina.optimizer/system/prepend.php");
    require_once($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog.php"); ?>
    
  2. Добавить директиву в файл .htaccess,
    php_value auto_prepend_file [DOCUMENT_ROOT]/bitrix/modules/ammina.optimizer/system/prepend.php
    
    заменим шаблон [DOCUMENT_ROOT] на путь к корневой папке вашего сайта. Узнать данный путь можно выполнив в консоли PHP-запроса команду:
    echo $_SERVER['DOCUMENT_ROOT']; 
    

Настройка при наличии конфигурации nginx для работы с композитным кэшем (BitrixVM)

Обратите внимание, что инструкция ниже дана для конфигурации BitrixVM. При использовании другой конфигурации программного обеспечения сервера, настройку можно произвести по аналогии в зависимости от имеющихся настроек nginx.

В этом случае необходимо зайти на ваш сервер по протоколу SSH под пользователем root.

Разместить файл ammina_composite.conf по пути /etc/nginx/bx/conf/ammina_composite.conf

Скачать данный файл можно по этой ссылке: скачать файл

После этого в конфигурациях хостов nginx (по пути /etc/nginx/bx/site_avaliable/ будут находится конфиги виртуальных хостов nginx, названия файлов могут быть разные. Например - s1.conf ssl.s1.conf и тп) необходимо добавить подключение вышеуказанного файла, добавив директиву include bx/conf/ammina_composite.conf; перед первым упоминанием переменных композитного режима. Пример приведен на скриноте ниже:

Подключение настроек композитного режима для модуля Ammina.Optimizer

После этого необходимо выполнить команду service nginx restart

Административные страницы

В разделе описаны административные страницы модуля.

Страница настроек модуля

Данная страница позволяет настроить параметры модуля Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Страница настроек модуля расположена по адресу административной части сайта: Настройки -> Настройки продукта -> Настройки модулей -> Ammina.Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)

Общие параметры

  • Не использовать оптимизацию на страницах - Выключает все виды оптимизации на указанных страницах. Правила определения страниц
  • Использовать оптимизацию для JSON данных - Позволяет оптимизировать AJAX запросы, которые возвращают JSON данные (например возвращается HTML код, или пути к файлам изображений)
  • Использовать оптимизацию на страницах AJAX запросов - Разрешает оптимизировать AJAX запросы
  • API ключ к Google PageSpeed Insights - Ключ доступа к API сервиса Google PageSpeed Insights, который позволяет проводить мониторинг параметров оптимизации непосредственно из административной части сайта. Получить ключ прямо сейчас

Настройки оптимизации CSS

  • Активировать оптимизацию CSS - Включает оптимизацию CSS файлов
  • Не использовать оптимизацию CSS на страницах - Выключает оптимизацию CSS на указанных страницах. Правила определения страниц
  • Включить CSS из файлов в качестве inline в HTML код страницы - Позволяет включить CSS стили в HTML код страницы. Не рекомендуется использовать при большом объеме CSS кода на странице
  • Поместить inline CSS из файлов перед закрывающим тегом body - При включенном режиме "Включить CSS из файлов в качестве inline в HTML код страницы" помещает Inline CSS перед закрывающем тегом BODY. Если данный параметр выключен - то размещение inline CSS начинается в месте первого подключаемого CSS файла.
  • Добавить стилю определения шрифта @font-face свойство font-display - Добавляет объявлениям веб-шрифтов в CSS файлах значение режима отображения. Рекомендуется значение fallback. Подробная информация на сайте Google
  • Минифицировать CSS файлы - При включении данного параметра файлы CSS будут минифицированы
  • Библиотека минификации CSS файлов - При помощи какой библиотеки будет производится минификация. В зависимости от написания CSS некоторые библиотеки могут некорректно производить минификацию. Мы рекомендуем использовать библиотеку Node YUI Compressor, но для ее использования необходима установка дополнительно ПО на хостинге.
  • Включить в CSS файлы изображения из файлов в виде inline кода - Прописывает в коде CSS файлы изображений, указанные в файлах CSS в виде inline кода. Позволяет сократить количество запросов к серверу и ускорить отображение сайта
  • Максимальный размер включаемого в CSS inline изображения из файла, байт - Максимальный размер файлов изображений, включаемых в виду inline кода в CSS. Рекомендуется размер не более 10 кБайт, чтобы накладные расходы не увеличивали время загрузки файлов стилей.
  • Не оптимизировать CSS файлы - Исключает из объединения всех CSS файлов в один данные файлы. Правила определения страниц
  • Не минимизировать CSS файлы - Выключает минимизацию данных CSS файлов. Правила определения страниц
  • Отправлять заголовок Link для предзагрузки CSS файлов - Автоматически отправляет заголовок предварительной загрузки оптимизированного CSS файла после получения браузером посетителя заголовка (вместо загрузки данного файла после анализа HTML кода страницы браузером)
  • Путь к исполняемому файлу YUI Compressor - При использовании библиотеки Node YUI Compressor необходимо указать полный путь к файлу yuicompressor. При глобальной установке данного NPM модуля, чаще всего, нет необходимости менять данный параметр.
  • Оптимизировать CSS файлы со сторонних сайтов - Включает обработку CSS файлов с других сайтов. В этом случае данные файлы будут закэшированы на сервере, оптимизированы и объединены с основным файлом оптимизации.
  • Исключить из оптимизации CSS файлы со сторонних сайтов - Исключает их оптимизации CSS файлы с других сайтов. Правила определения страниц
  • Тип обработки подключенный шрифтов Google Fonts - Если на странице используется подключение шрифтов GoogleFonts, то можно включить данную опцию. ВНИМАНИЕ! Опция является экспериментальной. Рекомендуется включать данную опцию в режиме «Обработать и вставить как Inline CSS» и оценивать накладные расходы от включения данной опции и выигрыш производительности. Кроме того необходимо периодически очищать кэш в папке /bitrix/cache/css/ammina.optimizer/SITE_ID/googlefonts/ (в зависимости от свободного места и посещаемости сайта от 1 дня до 1 месяца). В следующих версиях модуля выйдет агент для автоматической очистики данного кэша.

Настройки оптимизации JS

  • Активировать оптимизацию JS - Включает оптимизацию JavaScript файлов
  • Не использовать оптимизацию JS на страницах - Выключает оптимизацию JS файлов на указанных страницах. Правила определения страниц
  • Минифицировать JS файлы - При включении данного параметра файлы JS будут минифицированы
  • Библиотека минификации JS файлов - При помощи какой библиотеки будет производится минификация. В зависимости от написания JS, некоторые библиотеки могут некорректно производить минификацию. Мы рекомендуем использовать библиотеку Node Uglify JS, но для ее использования необходима установка дополнительно ПО на хостинге.
  • Не оптимизировать JS файлы - Исключает из объединения всех JS файлов в один данные файлы. Правила определения страниц
  • Не минимизировать JS файлы - Выключает минимизацию данных JS файлов. Правила определения страниц
  • Отправлять заголовок Link для предзагрузки JS файлов - Автоматически отправляет заголовок предварительной загрузки оптимизированного JS файла после получения браузером посетителя заголовка (вместо загрузки данного файла после анализа HTML кода страницы браузером)
  • Дополнительная обработка файлов ядра при подключении сторонних библиотек не через $APPLICATION->AddHeadScript(); - опция включает дополнительную обработку JS файлов при нештатном подключении JS файлов. Данная опция устраняет ошибку в консоли JavaScript вида «BX.debug: Arguments { 0: "message undefined: .....", ...}»
  • Путь к исполняемому файлу UglifyJS - При использовании библиотеки Node Uglify JS необходимо указать полный путь к файлу uglifyjs. При глобальной установке данного NPM модуля, чаще всего, нет необходимости менять данный параметр.
  • Путь к исполняемому файлу YUI Compressor - При использовании библиотеки Node YUI Compressor необходимо указать полный путь к файлу yuicompressor. При глобальной установке данного NPM модуля, чаще всего, нет необходимости менять данный параметр.
  • Оптимизировать JS файлы со сторонних сайтов - Включает обработку JS файлов с других сайтов. В этом случае данные файлы будут закэшированы на сервере, оптимизированы и объединены с основным файлом оптимизации.
  • Исключить из оптимизации JS файлы со сторонних сайтов - Исключает их оптимизации JS файлы с других сайтов. Правила определения страниц

Настройки оптимизации изображений «на лету»

  • Активировать оптимизацию изображений - Включает оптимизацию изображений
  • Не использовать оптимизацию изображений на страницах - Выключает оптимизацию изображений на указанных страницах. Правила определения страниц
  • Не оптимизировать изображения - Выключает оптимизацию указанных изображений. Правила определения страниц
  • Активировать поддержку WebP изображений - При включенной опции, если браузер пользователя поддерживает формат WebP для изображений, файлы изображений будут преобразованы и отправлены пользователю в данном формате. Во всех остальных случаях, файлы изображений будут оптимизированы библиотекой PHP IMagick.
  • Качество сохраняемого изображения - С каким качеством сохранять оптимизированные изображения. Рекомендуется значение от 60 до 85.
  • Активировать оптимизацию изображений в теге IMG - Включает оптимизацию изображений, находящихся в теге IMG.
  • Активировать оптимизацию изображений, указанных в правилах background[-image] - Если изображения прописаны в HTML коде в виде фоновых изображений в свойстве style, то данный параметр включает их оптитмизацию.
  • Активировать оптимизацию изображений, указанных в коде, как заключенные в кавычки и находящиеся в папке /upload/ - Данный параметр включает поиск всех изображений в HTML коде страницы, которые находятся в каталоге /upload/ и оптимизирует их
  • Активировать преобразование файлов PNG из каталога /upload/ в JPG формат - преобразует изображения из каталога /upload/ в формате PNG в формат JPG/WebP.
  • Активировать преобразование файлов GIF из каталога /upload/ в JPG формат - преобразует изображения из каталога /upload/ в формате GIF в формат JPG/WebP.
  • Также преобразование файлов из каталогов - Так же преобразует файлы в формат JPG/WebP из данных каталогов.
  • Оптимизировать файлы изображений со сторонних сайтов - Включает обработку файлов изображений с других сайтов. В этом случае данные файлы будут закэшированы на сервере, оптимизированы и будут доступны для посетителей непосредственно с сайта.
  • Исключить из оптимизации файлы изображений со сторонних сайтов - Исключает их оптимизации файлы изображений с других сайтов. Правила определения страниц

Настройки оптимизации HTML

  • Активировать оптимизацию HTML - Включает минификацию HTML кода. Включение данной опции возможно, но не всегда рекомендуется, т.к. накладные расходы минификации могут привысить выигрыш по времени от такой минификации
  • Не использовать оптимизацию HTML на страницах - Выключает оптимизацию JS файлов на указанных страницах. Правила определения страниц
  • Библиотека минификации HTML файлов - При помощи какой библиотеки будет производится минификация. В зависимости от HTML кода, наличия inline CSS и JS в коде страницы мы рекомендуем использовать библиотеку PHP Wee для минификации HTML кода.
  • Сжимать inline JS (для библиотек PHPWee и Node HTML-Minifier) - При включении данного параметра также будет проведена минификация JS кода, расположенного непосредственно в коде страницы
  • Сжимать inline CSS (для библиотек PHPWee и Node HTML-Minifier) - При включении данного параметра также будет проведена минификация CSS, расположенного непосредственно в коде страницы
  • Путь к исполняемому файлу HTML-Minifier - При использовании библиотеки Node HTML-Minifier необходимо указать полный путь к файлу html-minifier. При глобальной установке данного NPM модуля, чаще всего, нет необходимости менять данный параметр.

Дополнительные опции

  • Дополнительные заголовки Link (каждый с новой строки) - Отправляет дополнительные заголовки предзагрузки Link. Примеры использования:

    для файлов стилей:

    <ПУТЬ_К_ФАЙЛУ_СТИЛЕЙ>; rel=preload; as=style

    для файлов скриптов:

    <ПУТЬ_К_ФАЙЛУ_СКРИПТА>; rel=preload; as=script

    для файлов шрифтов:

    <ПУТЬ_К_ФАЙЛУ_ШРИФТА>; rel=preload; as=font; crossorigin
  • Очистить кэш файлов CSS и JS - После сохранения настроек очищает кэш оптимизированных CSS и JS файлов

Правила определения страниц

Для определения страниц, указанных в настройках, может применяться любой из 3-х способов для каждого правила (с новой строки):

полное совпадение текущей страницы от корня сайта:

/mypagepath/file.php

частичное совпадение с текущей страницы:

PART:pagepathpart

регулярное вырожение preg для сравнения с текущей страницы:

PREG:preg_regular_text

Страницы для аудита и мониторинга

Мониторинг страниц - аудит выбранных страниц при помощи инструмента Lighthouse от Google

В данном разделе находится список страниц для аудита. Для того, чтобы провести аудит страницы достаточно добавить полный URL адрес страницы и выбрать пункт контекстного меню «Проверить«

Список страниц для мониторинга

У каждой страницы показывается текущий статус, дата последней проверки, данные аудитов последней проверки и насколько изменились данные при последней проверке страницы.

Основные контекстные и групповые команды и их значения

  • Проверить - запускает проведение аудита страницы 1 раз. Аудит проводится при помощи агента. Результаты, обычно, становятся доступны через 1-2 минуты после запуска проверки
  • Запустить мониторинг 1 раз в сутки - Запускает проведение аудита данной страницы 1 раз в сутки.
  • Запустить мониторинг 1 раз в неделю - Запускает проведение аудита данной страницы 1 раз в неделю.
  • Остановить мониторинг - Останавливает все запущенные периодические мониторинги страниц

Добавление и редактирование страницы для аудита

На данной странице можно добавить новую страницу сайта для аудита и мониторинга, просмотреть результаты последнего аудита и перейти к подробным результатам последнего аудита страницы сайта.

Редактирование страницы сайта для аудита

История аудитов страниц сайта

В данном разделе находится список всех аудитов страниц сайтов, добавленных в модуле. Отображается адрес страницы, дата аудита и итоговые оценки каждого типа аудита для десктопов и мобильных устройств.

История аудитов страниц сайта

Подробная информация об аудите страницы

Аудит страницы сайта - результат автоматизированного анализа с целью повышения качества веб-страницы. Он проводит анализ производительности, доступности, SEO и других параметров сайта. Результаты аудита позволяют узнать, на что следует обратить внимание, для повышения качества веб-страницы.

Для получения данных аудита вам необходимо добавить страницу сайта для аудита и проверить данную страницу. Спустя примерно 1-2 минуты, станут доступны подробные результаты аудита данной страницы.

Результаты аудита страницы

Аудит проводится как для десктопов, так и для мобильных устройств. Результирующие оценки при проведении нескольких аудитов могут различаться в пределах нескольких баллов и являются допустимой погрешностью измерений.

Общая информация.

В разделе отображается общая информация о проведенном аудите - начальный и конечный URL аудита, User Agent и версия инструмента LightHouse.

Общая информация о проведенном аудите

Общая информация

В разделе отображается общая информация о проведенном аудите - начальный и конечный URL аудита, User Agent и версия инструмента LightHouse.

Общая информация о проведенном аудите

Производительность

В разделе отображается информация о производительности страницы. Необходимо исправить пункты, помеченные красным цветом и, по возможности, исправить пункты, помеченные оранжевым цветом.

Так же в данном разделе, при наличии цепочек запросов на странице сайта, будет указан список заголовков Link для копирования в настройки модуля для предзагрузки данных файлов. Это позволит сократить время обработки страницы браузером посетителя.

Аудит с целью выявления данных цепочек, рекомендуется проводить после активации и настройки CSS, JS оптимизаций и оптимизации изображений.

Результаты аудита производительности

Accessibility (доступность)

В разделе отображается информация о проведенном аудите доступности. Для улучшения качества сайта, рекомендуется исправить пункты, помеченные красным и оранжевым цветом.

Результаты аудита доступности

Best practices (Хорошая практика при разработке сайта)

В разделе отображается информация об аудите хорошей практики. Для улучшения качества сайта, рекомендуется исправить пункты, помеченные красным и оранжевым цветом.

Результаты аудита хорошей практики

SEO (данные SEO анализа)

В разделе отображается информация о проведенном аудите SEO. Для улучшения качества сайта для поисковых систем и улучшения результатов индексирования, рекомендуется исправить пункты, помеченные красным и оранжевым цветом.

Результаты аудита SEO

Progressive Web Application (прогрессивное веб-приложение)

В разделе отображается информация о проведенном аудите PWA. Для улучшения качества сайта, рекомендуется исправить пункты, помеченные красным и оранжевым цветом.

Результаты аудита PWA

Оптимизация сайта

В разделе описан порядок действий по оптимизации сайта, а также особенности оптимизации стилей, скриптов, изображений и HTML.

Порядок действий для оптимизации сайта

Оптимизация производительности сайта - ПРОЦЕСС улучшения показателей сайта за счет устранения обнаруженных ошибок, сокращения количества и уменьшения объемов файлов сайта.

Для получения качественного результата оптимизации сайта при помощи данного модуля, рекомендуется выполнять оптимизацию сайта по шагам. До начала выполнения оптимизации, рекомендуется провести аудит основных типов страниц сайта для сравнения итоговых результатов оптимизации.

Перед началом работ рекомендуем в настройках главного модуля в разделе «Оптимизация CSS» снять все галочки, за исключением пункта «Переместить весь Javascript в конец страницы»

Настройки главного модуля

Вы можете оставить пункт «Подключать минифицированные версии CSS и JS файлов», но ТОЛЬКО ПРИ УСЛОВИИ, что на 100% уверены в том, что все ваши JS и CSS файлы минифицированы заранее. В этом случае при включении оптимизаций CSS и JS в модуле, вам нужно снять галочку использования минификации файлов.

Остальные параметры данного блока не рекомендуется включать.

Всегда рекомендуется выполнять 3 вида оптимизации и дополнительный 4-й шаг.

  • Шаг 1 - Оптимизация CSS
  • Шаг 2 - Оптимизация JS
  • Шаг 3 - Оптимизация изображений
  • шаг 4 - аудит страниц и включение дополнительных заголовков предзагрузки цепочек с данных страниц. Обычно бывает достаточно аудита главной страницы сайта и включения цепочек запросов в предзагрузку с нее.

По желанию, так же, можно включить оптимизацию HTML, но при этом необходимо следить, чтобы выигрыш от такой оптимизации не был меньше накладных расходом на оптимизацию и не снижал производительсть сайта в целом.

Каждый шаг состоит из 2 основных частей, повторяемых в цикле, до получения удовлетворительного результата:

  • Изменение параметра - Установка или снятие того или иного параметра оптимизации
  • Анализ результата - Проверка основных типов страниц сайта на возникновение ошибок при использовании данного параметра. При необходимости, параметр меняется и шаг повторяется с начала.

Оптимизация CSS

Оптимизация CSS сайта - уменьшение количества и размера подключаемых к странице CSS файлов и сокращение количества сопутствующих файлов (файлов изображений).

Настройка оптимизации CSS в минимальном варианте заключается в активации режима оптимизации CSS и выбора библиотеки минификации CSS.

Настройки главного модуля

Вы можете не включать опцию «Минифицировать CSS файлы», но при условии, что уверены в том, что все ваши CSS файлы минифицированы заранее и в настройках главного модуля включен соответствующий режим подключения минифицированных версий CSS. (Примечание: в редких случаях, если нет возможности использовать библиотеку Node YUI Compressor, а остальные библиотеки корректно не минифицируют CSS файлы, можно включить оптимизацию CSS без включения минификации. Объем передаваемых данных будет больше, но в любом случае, результат от оптимизации будет присутствовать за счет объединения файлов и оптимизации изображений, используемых в CSS файлах. Так же обратитесь в нашу службу технической поддержки по адресу support@ammina.ru, чтобы мы могли найти и устранить ошибку некорректной работы подсистемы минификации.)

Так же вы можете исключить из оптимизации (указанные файлы не будут объединяться в общий оптимизированный файл) или минификации (не будет использоваться минификация для указанных фалов) отдельные CSS файлы. Обычно указание таких файлов может понадобиться, если ни одна из библиотек корректно не обрабатывает некоторые файлы. При этом исключение из минификации этих файлов, все равно положительно скажется на скорости работы сайта.

После того, как была выбрана библиотека, корректно обрабатывающая CSS сайта, можно продолжить оптимизацию CSS.

Inline CSS

При условии, что размер CSS файлов относительно небольшой (условно - до 100 кБайт), то можно включить режим «Включить CSS из файлов в качестве inline в HTML код страницы»

В этом случае оптимизированные и минифицированные CSS стили будут включены в HTML код страницы в теге style. Будьте внимательны при включении данной опции и проверьте, что накладные расходы от ее использования не увеличились. При включении CSS стилей inline увеличивается размер HTML кода на каждом хите посещения страницы, но при этом уменьшается количество запросов на каждый хит. При выключенной опции размер HTML кода уменьшается, увеличивается количество запросов, но при этом полученные CSS файлы кэшируются на стороне посетителя. Кроме того, при включении опции «Отправлять заголовок Link для предзагрузки CSS файлов», браузер пользователя начинает подгрузку файлов стилей с момента получения данного заголовка, не дожидаясь этапа окончания разбора HTML кода в DOM дерево страницы в браузере.

Google Fonts

Если ваш сайт использует шрифты Google Fonts, то вы можете включить опцию «Тип обработки подключенный шрифтов Google Fonts». Рекомендуется использовать режим «Обработать и вставить как Inline CSS». В этом случае, данные шрифты будут вставлены в виде inline CSS в HTML коде страницы.

В идеальном случае рекомендуется, при наличии возможности, располагать все веб-шрифты локально, без использования сторонних ресурсов.

Данная опция по оптимизации Google Fonts будет работать при включенной опции «Оптимизировать CSS файлы со сторонних сайтов».

Оптимизация JavaScript

Оптимизация JavaScript сайта - уменьшение количества и размера подключаемых к странице JS файлов с целью сокращения количества запросов к серверу.

Перед началом работ рекомендуем в настройках главного модуля в разделе «Оптимизация CSS» снять все галочки, за исключением пункта «Переместить весь Javascript в конец страницы». Это позволит исключить блокирование отображения страницы JavaScript кодом.

Настройка оптимизации JS в минимальном варианте заключается в активации режима оптимизации JS и выбора библиотеки минификации JS.

Настройки оптимизации JS файлов

Вы можете не включать опцию «Минифицировать JS файлы», но при условии, что уверены в том, что все ваши JS файлы минифицированы заранее и в настройках главного модуля включен соответствующий режим подключения минифицированных версий JS. (Примечание: в редких случаях, если нет возможности использовать библиотеку Node Uglify JS, а остальные библиотеки корректно не минифицируют JS файлы, можно включить оптимизацию JS без включения минификации. Объем передаваемых данных будет больше, но в любом случае, результат от оптимизации будет присутствовать за счет объединения файлов. Так же обратитесь в нашу службу технической поддержки по адресу support@ammina.ru, чтобы мы могли найти и устранить ошибку некорректной работы подсистемы минификации.)

Так же вы можете исключить из оптимизации (указанные файлы не будут объединяться в общий оптимизированный файл) или минификации (не будет использоваться минификация для указанных фалов) отдельные JS файлы. Обычно указание таких файлов может понадобиться, если ни одна из библиотек корректно не обрабатывает некоторые файлы. При этом исключение из минификации этих файлов, все равно положительно скажется на скорости работы сайта.

После того, как была выбрана библиотека, корректно обрабатывающая JS сайта, можно продолжить оптимизацию JS.

Если на вашем сайте подключение JS файлов осуществляется не стандартным способом ($APPLICATION->AddHeadScript();), то вам, скорее всего, понадобится включение опции дополнительной обработки файлов ядра при подключении сторонних библиотек.

Если все действия не привели к исчезновению ошибок, то обратитесь в нашу службу технической поддержки по адресу support@ammina.ru .

Оптимизация изображений

Оптимизация изображений сайта - уменьшение размера и оптимизация используемых на странице изображений.

Настройка оптимизации изображений в минимальном варианте заключается в активации режима оптимизации изображений.

Настройки оптимизации изображений

Укажите качество сохраняемого изображения (рекомендуем в диапазоне от 60 до 90) и включите/выключите поддержку WebP формата изображений.

Так же укажите дополнительные каталоги, в которых хранятся файлы изображений сайтов.

Оптимизация HTML

Оптимизация HTML сайта - уменьшение размера HTML кода за счет удаления незначащих символов (переносы строк и тп).

Настройка оптимизации HTML в минимальном варианте заключается в активации режима оптимизации HTML и выбора библиотеки минификации HTML. В большинстве случаев достаточно библиотеки PHPWee с выключенными дополнительными опциями сжатия Inline JS и CSS.

Настройки оптимизации HTML