Ammina Optimizer: Оптимизация и ускорение загрузки сайта (CSS, JS, HTML, изображения, WebP, Lazy)
Модуль « Ammina Optimizer: Оптимизация и ускорение загрузки сайта (CSS, JS, HTML, изображения, WebP) » позволяет значительно ускорить ваш сайт для пользователя, улучшить дружественность сайта для поисковых систем, провести аудит сайта в режимах для десктопа и мобильных устройств по параметрам производительности , SEO , доступности , Best Practices и Progressive Web Application .
Модуль построен по принципу «All-In-One» и предоставляет полный комплекс инструментов для ускорения загрузки и отображения вашего сайта в браузере посетителей.
С помощью модуля вы можете значительно сократить количество и объем загружаемых файлов (запросов к серверу) стилей (CSS), Java Script (скриптов), оптимизировать изображения , используемые на вашем сайте, уменьшить размер кода HTML и загрузка вашего сайта будет происходить быстрее.
Все это позволит ускорить загрузку и отрисовку страницы на стороне посетителя, улучшить ранжирование поисковыми системами и в конечном итоге увеличить конверсию на вашем сайте.
оптимизации JS файлов со сторонних сайтов
JS файлов на сайте
В дополнение к модулю мы разработали симулятор работы модуля на вашем сайте. Вы можете увидеть текущие результаты проверки сайта через Google Page Speed и примерные показатели после установки и настройки модуля на вашем сайте.
Обратите внимание, что сервис позволяет получить ориентировочные данные, т.к. сервис проводит работу по оптимизации без учета индивидуальных настроек модуля.
Работать с модулем можно начать абсолютно бесплатно. В течении 21 дня можно протестировать модуль в демо-режиме в полнофункциональном режиме .
Мы оказываем техническую поддержку как ДО так и ПОСЛЕ приобретения модуля.
Обращайтесь к нам и мы поможем установить и настроить модуль, проконсультируем по работе с ним и, если возникнет необходимость, доработаем функционал.
Мы всегда готовы помочь вам!
Подробная документация по установке, настройке и приёмам работы с модулем находится по адресу: https://www.ammina.ru/documentation/course4/chapter098/?LESSON_PATH=97.98
5.3.5, 08.10.2023
Небольшие исправления в связи с обновлением интерфейсов в главном модуле битрикс
5.3.4, 12.09.2023
Небольшие исправления
5.3.3, 23.06.2023
Небольшие исправления
5.3.2, 31.05.2023
Исправление ошибки после обновления главного модуля битрикс до версии 23.300.0
5.3.1, 15.02.2023
Небольшие исправления в сборе статистики оптимизированных файлов
5.3.0, 13.02.2023
1. Для lazy изображений добавлен аттрибут data-origin (для SEO-продвижения).
2. Добавлено сохранение истории изменения настроек оптимизации.
3. Добавлен импорт/экспорт настроек оптимизации.
4. Добавлено удаление lazyload изображений (в случае невозможности отключения данного функционала штатно).
5. ДОбработка Javascript стилей только для тегов не содержащих аттрибут type, либо содержащих в данном аттрибуте text/javascript или application/javascript.
5.2.0, 12.01.2023
1. Для тегов img добавлена возможность асинхронного декодирования изображений (включено по умолчанию)
2. Добавлен тип заглушки blur (размытие) для lazyLoad изображений
3. Добавлено преобразование картинок в CSS в формат WebP (включено по умолчанию)
4. Улучшена совместимость с PHP 8.1
5.1.5, 19.12.2022
Добавлена возможность запрещения работы модуля на отдельных доменах
5.1.4, 05.12.2022
1. Добавлены параметры отображаемой статистики оптимизации.
2. Добавлено ограничение времени запросов к серверу оптимизации на 1 хите
5.1.3, 06.11.2022
Добавлена возможность отключения работы отложенной загрузки локальных скриптов для некоторых групп пользователей
5.1.2, 06.11.2022
Небольшие исправления
5.1.1, 06.11.2022
Небольшие изменения
5.1.0, 05.11.2022
1. Реализована отложенная загрузка изображений, iframe. 2. Улучшена работа фоновой загрузки основных скриптов сайта 3. Улучшена работа фоновой загрузки CSS файлов
5.0.3, 10.10.2022
Для тегов img добавлена возможность пропустить оптимизацию изображения. Для таких тегов необходимо добавить аттрибут data-skip-optimize=»true»
5.0.2, 06.10.2022
Небольшие исправления
5.0.1, 02.10.2022
Небольшие улучшения
5.0.0, 02.10.2022
Первая очередь обновлений 5-й версии модуля. Внимательно прочитайте данную информацию:
Перед обновлением обязательно сделайте бэкап сайта.
Новое в версии:
1. Все изображения на сайте выводятся либо в формате webp либо в оригинальном формате.
2. Все оптимизации статических файлов осуществляются на серверах производителя решения. Это позволяет снизит нагрузку на сайты клиентов.
3. Добавлена технология отложенной фоновой загрузки всех JS скриптов
4. Добавлена технология отложенной фоновой загрузки CSS стилей.
5. Для полноценной работы модуля с версии 5.0 необходима актуальная лицензия на модуль.
Подробности об обновлении можно прочитать по данной ссылке: https://www.ammina-shop.ru/ammina.optimizer.5.0/
3.10.3, 21.09.2022
Небольшое исправление ошибок из-за обновления битрикс 21.09.2022
3.10.2, 26.07.2022
Удалена поддержка BitrixCDN в связи с прекращением поддержки данной технологии 1С-Битрикс
3.10.1, 02.09.2021
Небольшие улучшения
3.10.0, 26.06.2021
1. Добавлена разблокировка скриптов аспро в последних обновлениях
2. Добавлено удаление (перевод в inline формат) дополнительного запроса к файлу setTheme.php решений аспро
3. Добавлена возможность перемещения скрипта скорости битрикс (который показывается на рабочем столе в админке) в шапку для сбора показателей, более соответствующих действительности. (Обратите внимание: при откладывании данного скрипта счетчик выдавал неверно увеличенные значения за счет того, что выполняется позже. Но при этом не было дополнительного запроса к серверам битрикс при первичном рендеринге. При отключении данной функции и включении откладывания данного скрипта, счетчик начинает выдавать завышенные показатели скорости работы сайта).
3.9.3, 09.02.2021
Небольшие исправления агента очистки
3.9.2, 27.01.2021
Исправление ошибки разрастания кеша при использовании CSS и JS outline
3.9.1, 26.01.2021
Для настроек оптимизации Только классы/идентификаторы, Игнорируемые классы/идентификаторы в группе CSS->Критический CSS добавлена возможность указания префикса PART: для сравнения по вхождению указанного текста в фильтруемый класс/идентификатор
3.9.0, 15.01.2021
1. В агент автоочистки кеша добавлена проверка существования оригинального файла изображения. Если файл не существует, то оптимизированный файл удаляется
2. Улучшена работа с антикеширующими параметрами подключения JS и CSS файлов
3. В разделе настроек оптимизации Изображения — Прочие настройки добавлена возможность не оптимизировать оригинальные (jpg, png, gif) файлы. При включении опции выполняется только оптимизация изображений в webp-формат
3.8.7, 22.12.2020
Добавлено двойная перекодировка CSS файлов для сайтов в кодировке WINDOWS-1251
3.8.6, 26.11.2020
Улучшение работы композитного режима (определение поддержки webp для переходных версий safari)
3.8.5, 26.11.2020
Небольшие улучшения
3.8.4, 25.11.2020
1. Улучшена работа композитного режима
2. Улучшено определение поддержки webp для переходных версий macOS (с 10 на 11) / iOS (с 13 на 14)
3. Для аттрибута href тегов добавлен запрет инлайнизации изображений
3.8.3, 20.11.2020
Небольшие исправления
3.8.2, 19.11.2020
Небольшие исправления для композитного режима
3.8.1, 18.11.2020
Небольшие исправления
3.8.0, 18.11.2020
Добавлена поддержка mbstring.func_overload=0 (для версии главного модуля 20.100.0 и выше)
3.7.5, 13.11.2020
Улучшена работа в композитном режиме для некоторых решений (в т.ч. Аспро)
3.7.4, 27.10.2020
Добавлена поддержка srcset аттрибутов изображений для оптимизации
3.7.3, 27.10.2020
Небольшие улучшения
3.7.2, 27.10.2020
Небольшие исправления
3.7.1, 09.10.2020
Небольшие исправления для композитного режима
3.7.0, 09.10.2020
1. Добавлена автоматическая настройка оптимизации при установке модуля.
2. Небольшие исправления и улучшения.
3.6.7, 10.09.2020
Улучшена поддержка композитного режима для старых версий 1С-Битрикс
3.6.6, 25.08.2020
Незначительные исправления
3.6.5, 24.08.2020
Добавлена поддержка @import в CSS файлах
3.6.4, 23.08.2020
Улучшение обработки для Windows-1251 кодировки
3.6.3, 30.07.2020
Небольшие улучшения
3.6.2, 29.07.2020
Небольшие улучшения
3.6.1, 29.07.2020
Улучшена работа композитного режима для старых версия 1с-битрикс
3.6.0, 29.07.2020
1. Добавлена поддержка unicode-range для шрифтов
2. Улучшена поддержка GoogleFonts
3. Добавлено исправление порядка указания типа шрифтов в правилах font-face
4. Добавлен поиск картинок во всех аттрибутах HTML-тегов
5. Улучшена работа алгоритма Defer скриптов. Обратите внимание, что defer работает не на всех сайтах. При включении проверяйте наличие ошибок Javascript в консоли и работоспособность сайта.
6. Добавлен перенос скриптов динамических блоков в композитном режиме вниз страницы
7. В меню административной панели публичной части сайта добавлен пункт временного отключения модуля на странице (при помощи параметра в URL)
8. Добавлено кеширование настроек, независимое от использования автокеширования ядра 1С-битрикс
После обновления включите в настройках оптимизации модель поиска изображений по-умолчанию (либо укажите необходимые опции).
3.5.9, 16.07.2020
1. Добавлена автоматическая предзагрузка всех объявленных скриптов
2. Добавлено удаление тегов link с аттрибутом rel=preload и prefetch (Если ранее сайт оптимизировали, чтобы избегать двойной предзагрузки)
3. Нормализована работа defer скриптов. Позволяет отложить выполнение скриптов до момента окончания отрисовки HTML страницы. В настоящее время в режиме beta. Включается в настройке оптимизации в разделе JavaScript — Дополнительные настройки JS — Установить аттрибут Defer. В стабильный режим и состояние «Включено по умолчанию» будет переведена после подробного тестирования.
3.5.8, 14.07.2020
Исправлена ошибка двойного ajax-хита композитного режима в демо-версии модуля, которая появлялась на некоторых конфигурациях.
3.5.7, 29.06.2020
Небольшие исправления
3.5.6, 27.06.2020
Небольшие улучшения для defer JS скриптов
3.5.5, 27.06.2020
Добавлено ограничение на количество предзагружаемых изображений
3.5.4, 27.06.2020
1. Добавлен аттрибут defer для JavaScript тегов
2. Добавлена предзагрузка изображений
3.5.3, 25.06.2020
Незначительные изменения
3.5.2, 23.06.2020
Улучшена поддержка откладывания выполнения JivoSite
3.5.1, 22.06.2020
Небольшие правки
3.5.0, 20.06.2020
1. Добавлены 3 модели обработки JS скриптов.
2. Установлена модель обработки JS скриптов по умолчанию с полным сохранением порядка всех файлов
3. Улучшена обработка критического CSS для предзагрузки приоритетных шрифтов
3.4.7, 18.06.2020
Улучшена поддержка старых версий битрикса
3.4.6, 16.06.2020
Улучшена работа отложенных скриптов
3.4.5, 16.06.2020
Исправление незначительной ошибки при загрузке гугл-шрифтов
3.4.4, 16.06.2020
Добавлена отложенная загрузка VK OpenAPI
3.4.3, 16.06.2020
Добавлена отложенная загрузка для redhelper.ru
3.4.2, 16.06.2020
Улучшение для отложенной загрузки Google Tag Manager
3.4.1, 16.06.2020
Добавлена отложенная загрузка скриптов Яндекс метрика, GoogleTagManager, Google аналитика, Google рекапча, Roistat.com, Bitrix.info — скрипт скорости сайта, Bitrix spread — скрипт распространения cookies по доменам, Bitrix24 — виджеты bitrix24 и корпоративного портала, JivoSite — виджет онлайн-чата, Regmarkets.ru — скрипты сервиса, LiveTex.ru — онлайн чат, Talk-Me.ru — онлайн чат, Yandex chat — онлайн чат, SendPulse.com — скрипты сервиса, Mail.ru рейтинг, Rambler.ru — ТОП 100, Скрипты Яндекс карт, Facebook.com для ускорения загрузки сайта.
После обновления модуля включите в настройке оптимизации отложенную загрузку в блоке Основные параметры — Отложенная загрузка (либо по умолчанию, либо укажите необходимые настройки)
3.4.0, 15.06.2020
1. Удалены библиотеки CSS минификации, кроме Sabberworm.
2. Удалены PHP библиотеки JS минификации.
3. Добавлено автоматическое получение ключа асинхронной оптимизации AmminaAPI.
4. Добавлена упрощенная быстрая настройка оптимизации
5. Добавлена краткая инструкция в меню модуля
3.3.12, 16.05.2020
Добавлена возможность отключения оптимизации некоторых фреймов в композитном режиме (добавлением во фрейм конструкции )
3.3.11, 11.05.2020
Небольшие улучшения
3.3.10, 09.05.2020
Улучшено определение устройств Apple для исключения преобразования в WebP формат картинок
3.3.9, 19.03.2020
Улучшена поддержка композитного режима для кодировки Windows-1251
3.3.8, 17.03.2020
Небольшие улучшения
3.3.7, 17.03.2020
Добавлено логирование ошибочных и медленных запросов к внешним ресурсам (Включено по умолчанию. Отключается в настройках модуля)
3.3.6, 17.03.2020
Незначительные исправления
3.3.5, 17.03.2020
Незначительные улучшения и исправления
3.3.4, 07.03.2020
1. Добавлена возможность разблокировки перемещения скриптов в head
2. Добавлена возможность преобразования InlineCSS в файлы и объединения в единую сборку. Необходимо, например, для решений Intec
3. Добавлена возможность преобразования InlineJS в файлы и объединения в единую сборку. Необходимо, например, для правильной работы LazyLoad в решении Aspro.Max
4.Небольшие улучшения
3.3.3, 24.02.2020
Незначительные улучшения
3.3.2, 14.02.2020
Улучшена работа в композитном режиме
3.3.0, 08.02.2020
Реализована полная поддержка композитного режима работы сайта вместе с модулем оптимизации (учитывается поддержка браузерами изображений WebP формата). Подробности настройки режима описаны в документации к модулю https://www.ammina.ru/documentation/course4/lesson139/?LESSON_PATH=97.98.139
3.2.20, 28.12.2019
1. Исправлена ошибка дублирования агентов очистки кэша. После обновления модуля пересохраните настройки модуля в разделе Настройки — Настройки продукта — Настройки модулей — Ammina Optimizer: Оптимизация сайта (CSS, JS, HTML, изображения)
2. Добавлена возможность перезаписи необрабатываемых HTMLEntity на HTMLCodes (например DOMDocument некорректно обрабатывает +. Необходимо его заменить на HTML код +. Данные замен вносятся в разделе настройки оптимизации Основные настройки — Прочие параметры. Соответствия можно найти на сайте https://www.toptal.com/designers/htmlarrows/symbols/
3.2.19, 20.11.2019
Исправление ошибки разрастания кеша CSS и JS. После обновления модуля необходимо очистить кеш CSS и JS на странице модуля Сервисы -> Ammina Optimizer -> Статистика -> Статистика кэша -> вкладка Очистка кэша. Кэш изображение очищать нет необходимости.
3.2.18, 20.11.2019
Небольшое исправление текста в настройках модуля
3.2.17, 17.11.2019
Добавлена автоматическая очистка кэша модуля (агентом). Включение функции происходит в настройках модуля
3.2.16, 05.11.2019
Улучшена поддержка русских названий файлов
3.2.15, 28.10.2019
Улучшена обработка Critical CSS при использовании селекторов CSS вида :not(.class) После обновления необходимо очистить CSS кэш модуля
3.2.14, 14.09.2019
1. Добавлены глобальные настройки модуль: Не использовать модуль на страницах, позволяющая отключить модуль глобально на указанных страницах/разделах (в дополнение к системному перечню)
2. Добавлены глобальные настройки модуль: Не использовать модуль в режиме правки в публичной части (отключает работу модуля в режиме правки в публичной части)
3.2.13, 11.09.2019
Добавлена проверка и замена невалидных UTF-8 символов
3.2.12, 09.09.2019
Незначительные правки
3.2.11, 03.09.2019
1. Добавлена опция Разблокировать запрет перемещения data-skip-moving для скриптов, находящихся в теге body
2. Добавлена опция Замена спецсимвола • на валидный. Применяется, например, в решении Битроник 2
3. Исправление ошибки обработки скриптов при использовании предоптимизации шаблонов компонентов
3.2.10, 03.09.2019
Добавление ajax страниц системных компонентов битрикса в стандартные исключения модуля (sender.*, report.* и некоторых других)
3.2.9, 01.09.2019
Незначительные исправления и улучшения
3.2.8, 31.08.2019
Добавлена возможность указания нескольких доменов при оптимизации на серверах Ammina
3.2.7, 30.08.2019
Добавлена экспериментальная опция «Проверять невалидные символы начала тегов». Необходима при наличии в HTML коде HTML-небезопасных символов
3.2.6, 26.08.2019
1. Добавлен параметр «Переместить весь JavaScript в конец страницы» — аналог параметра главного модуля 1С-Битрикс. Позволяет более быстро выполнять данную функцию при большом объеме страницы. (ВНИМАНИЕ. Пересохраните настройку оптимизации и проверьте правильность настроек на странице «Проверка библиотек» модуля)
2. Улучшена работа автоматического определения критических шрифтов для заголовков предзагрузки
3. В панели администратора в публичной части добавлены функции сброса кэша CSS, JS, изображений (раздельно) для текущей страницы
3.2.5, 20.08.2019
Улучшена работа критического CSS
3.2.4, 19.08.2019
Добавлена проверка оптимизированных файлов изображений. При длине файла 0 байт он пересоздается.
3.2.3, 18.08.2019
Улучшена обработка предзагрузки веб-шрифтов
3.2.2, 17.08.2019
Исправление ошибки формирования правил критического CSS при использовании в правилах @font-face значения свойства font-family с пробелами без кавычек. Рекомендуется очистить CSS кэш после обновления модуля
3.2.1, 16.08.2019
1. Отключение поддержки WebP для устройств на базе iOS (iPhone, iPad) для всех браузеров
2. Исправление ошибки загрузки удаленных файлов, URL которых не содержит указание протокола (//)
3.2.0, 11.08.2019
- В файл /bitrix/php_interface/init.php добавить строку include_once($_SERVER[‘DOCUMENT_ROOT’] . «/bitrix/php_interface/ammina.optimizer.init.php»);
- В файлах template.php необходимых для предоптимизации шаблонов компонентов разместить 2 функции: AMOPTStartComponentTemplate(); в начале шаблона и AMOPTEndComponentTemplate(); в конце шаблона. Учитывайте, что шаблон компонента должен кэшироваться (стоять соответствующая настройка компонента) и в настройках оптимизации модуля стоять обработка соответствующего типа запроса.
3.1.5, 01.08.2019
Незначительное исправление работы инсталлятора модуля
3.1.4, 01.08.2019
1. Оптимизирована работа критического CSS
2. Устранена ошибка с кодировками при некторых типах ajax запросов
3.1.3, 31.07.2019
1. Исправлена ошибка при сохранении бинарных файлов при помощи функции битрикс $APPLICATION->SaveFileContent 2. Добавлено выделение в меню модуля пунктов настроек, для которых есть настройки 3. Исправлена ошибка оптимизации файлов, имеющих в своем названии пробельные и русские символы
3.1.2, 30.07.2019
1. Добавлена обработка файлов в CSS с удаленного сервера 2. Переименован класс Mobile_Detect для предотвращения конфликат в названиях классов на некоторых сайтах 3. Добавлена экспериментальная функция исправления кодировки (для сайтов UTF-8, если в коде страницы есть символы WINDOWS-1251, то после них DOMDocument меняет всю кодировку текста. Данная функция исправляет этот недостаток) 4. Для критического CSS добавлена возможно включения обязательных классов и идентификаторов для выделения критического CSS
3.1.1, 29.07.2019
Добавлена возможность блокировки работы модуля программным путем на отдельных страницах. Для этого можно определить константу AMMINA_OPTIMIZER_STOP со значением true
3.1.0, 29.07.2019
1. Добавлена обработка AJAX, JSON запросов
2. Добавлена экспериментальная поддержка автокомпозитного режима
3. Улучшен интерфейс просмотра статистики об оригинальных и оптимизированных файлах
4. Перевод модуля 3-й версии в стабильный режим.
ВНИМАНИЕ. После обновления модуля вам необходимо проверить и при необходимости создать хотя бы одну настройку модуля в меня сервисы.
При возникновении вопросов, обратитесь в нашу службу технической поддержки support@ammina.ru
3.0.11, 28.07.2019
1. Исправление ошибки и улучшение обработки тегов script
2. Оптимизирована отправки запросов для оптимизации к серверу оптимизации AmminaServer
3. Улучшена процедура сбора статистики об оригинальных и оптимизированных файлах
4. Добавлен агент фоновой оптимизации изображений. Активируется в настройках модуля
3.0.10, 26.07.2019
1. Исправление ошибки и улучшение обработки тегов script
2. Оптимизирована отправки запросов для оптимизации к серверу оптимизации AmminaServer
3.0.9, 23.07.2019
Обработка ошибки определения композитного режима для 17-й версии битрикс
3.0.8, 23.07.2019
Исправление ошибки обработку JS файлов со сторонних сайтов
3.0.7, 23.07.2019
1. Добавлена обработка CSS со сторонних сайтов
2. Добавлена обработка Google Fonts
3.0.6, 22.07.2019
1. Добавлена возможно включения/выключения обработки идентификаторов тегов в CriticalCSS
2. Добавлена возможность исключения отдельных классов и идентификаторов тегов в CriticalCSS
3. Добавлена возможность использования только отдельных классов и идентификаторов тегов в CriticalCSS
4. Добавлено ограничение на количество вариантов CriticalCSS
3.0.5, 22.07.2019
1. Добавлен интерфейс показа статистики кэша модуля в административной части
2. Добавлен интерфейс показа оригинальных и оптимизированных модулем файлов в административной части
3.0.4, 20.07.2019
Улучшена обработка CriticalCSS
3.0.3, 20.07.2019
Добавлена обработка ошибки кодировки некоторых файлов CSS и JS (наблюдается на решениях Aspro)
Улучшена работа функционала Critical CSS
3.0.2, 19.07.2019
Улучшена совместимость с сайтами, работающими не в UTF-8 кодировке
3.0.1, 17.07.2019
Улучшена поддержка сайтов с кодировкой отличной от UTF-8
3.0.0, 17.07.2019
Большое обновление модуля.
1. Добавлено тестирование доступных библиотек оптимизации
2. Добавлена возможность оптимизации CSS, JS файлов и изображений на серверах Ammina
3. Новый интерфейс управления настройками оптимизации (настройки находятся в меню Сервисы. Глобальные параметры находятся в настройках модуля)
4. Разделение настроек для десктопных устройств и мобильных, разделение настроек по сайтам, разделение настроек для различных страниц
5. Поддержка Critical CSS
6. Добавлено автоматическое формирование заголовков предзагрузки файлов шрифтов
7. Добавлен базовый функционал отладки оптимизации (время работы модуля)
8. Улучшение алгоритма парсинга страницы для оптимизации
9. Оптимизация JPG, PNG, GIF, SVG изображений.
10. Улучшено определение поддержки браузером формата WebP, заголовков предзагрузки.
11. Улучшена совместимость с композитным режимом
12. Добавлен автоматический LazyLoad изображений
13. Добавлен интерфейс получения ключа для оптимизации на серверах Ammina
14. Добавлен базовый сброс кэша оптимизации в публичной части сайта
15. Добавлена возможность Inline изображений в HTML страницы
16. Прочие мелкие исправления.
Уважаемые друзья! Модуль практически полностью переделан. По сравнению с предыдущими версиями значительно улучшена производительность работы.
В настоящее время версия 3.0.0 выпущена в бета-режиме.
Просьба дождаться стабильной версии 3.1, либо обратиться в нашу службу технической поддержки для обновления до текущей версии модуля.
В ближайшие дни будет добавлен дополнительный функционал модуля, улучшен интерфейс настроек модуля, добавлены подсказки и он будет переведен в режим стабильной версии.
2.6.6, 30.05.2019
Добавлена поддержка CDN 1с-битрикс. После включения/выключения, изменения настроек CDN пересохраните настройки модуля Ammina.Optimizer
Оптимизация CSS и javascript на сайте
Несомненным трендом конца того и началом этого года является ускорение работы сайта. Если раньше ускорение работы сайта рекомендовалось специалистами по usability, мол, медленно работающий сайт отпугивает пользователя, то сейчас об ускорении работы сайта начали говорить seo оптимизаторы. Есть мнение, что скорость работы сайта уже учитывается поисковыми системами с целью оценки качественности и авторитетности сайта. Возникает вопрос, как мы можем простыми средствами сократить время загрузки сайта?
Помимо ранее упомянутых спрайтов, еще одним решением будет оптимизация JS и CSS файлов. Первое, все JS и CSS файлы сайта могут быть обледенены в один большой JS и один большой CSS файл. Данная мера сократит количество обращений к серверу, что в свою очередь сократить время загрузки сайта. Второе, код данных файлов может быть сокращен за счет удаления пробелов и специальных символов, а так же оптимизации кода, что сократит размер файла, и так же поможет улучшить показатели скорости загрузки сайта.
Как и при любой оптимизации перед любыми изменениями необходимо измерить (замерить) первоначальные значения. Посмотреть количество запросов к серверу и количество загружаемого кода можно через онлайн сервисы, например pingdom.com или воспользоваться расширением для Chrome и Firefox под названием Yslow.
После проведения контрольных замеров можно начать объединять файлы, соединяя JS файлы в один JS файл, а CSS файлы в один CSS файл. При этом придется вносить изменения в коды разных сниппетов, которые самостоятельно подгружают файлы javascript и файлы стилей в шаблоны. Когда все файлы будут объединены необходимо проверить их работоспособность. Осуществить проверку JS файлов проще всего используя консоль в Chrome (F12 — Консоль), которая сразу сообщит о возникновении ошибок при обработке скриптов.
Как оптимизировать CSS и JS для более быстрой загрузки сайтов
От автора: для чего нужно оптимизировать CSS и JavaScript? Когда дело касается онлайн-бизнеса, пользовательское восприятие является ключевым фактором. Неважно, ведете ли вы нишевый блог, SaaS сайт или интернет-магазин. Если вы не заботитесь о том, как пользователи воспринимают ваш продукт, не надейтесь, что они когда-либо что-нибудь купят.
Впрочем, любой бренд может улучшить опыт взаимодействия пользователя с сайтом, обращая внимание на некоторые факторы.
Примером таковых является скорость загрузки. Большинство владельцев веб-сайтов это упускают из виду.
Увеличение скорости загрузки интернет-страницы с восьми до двух секунд может увеличить коэффициент конверсии до 74 процентов. Это значит, что медленный сайт может стоить вам практически половины потенциальных клиентов.
Полная картина с помощью PageSpeed Insights
Чтобы выявить проблемы вашего веб-сайта, которые влияют на скорость загрузки страницы, можно использовать Google PageSpeed Insights. Это бесплатный инструмент, который автоматически сканирует и стационарную, и мобильную версии сайта.
Кроме обнаружения проблемных моментов, PageSpeed Insights также предоставляет много полезных рекомендаций. Владельцы сайтов, которые никогда не задумывались о скорости загрузки страницы, могут обратить внимание на следующие моменты:
На данном изображении показано, что CSS и JavaScript замедляют ваш сайт. Хотя это и похоже на задачу для продвинутых веб-разработчиков, их очень легко оптимизировать с помощью соответствующих инструментов. Давайте сразу рассмотрим, что нужно сделать, чтобы минимизировать CSS и JavaScript ресурсы.
Определить код, который нужно минимизировать
Минимизация кода – это процесс удаления символов, которые не выполняют никакие функции, кроме улучшения читаемости кода.
Например, однострочные комментарии помогают разработчикам понять, что делает конкретный раздел кода. Это действительно облегчает анализ кода и исправление багов, но, в то же время, значительно увеличивает размер.
При минимизации мы убираем эти лишние символы и тем самым уменьшает траффик и увеличивает скорость загрузки страницы. С помощью PageSpeed Insights вы легко можете определить, какой код нужно минимизировать. Просто нажмите ссылку «Показать, как исправить» и найдите данный ресурс через систему управления контентом (CMS) или через FTP.
Например, если веб-сайт работает на WordPress, тогда весь код должен быть доступен для редактирования в панели «Редактор». Ее можно найти в разделе «Внешний вид» панели администрирования.
Оптимизация кода
Теперь, когда вы определили, какой код нужно минимизировать, пора узнать, как это сделать. Наверное, самый легкий способ минимизировать код – это применить автоматизированные инструменты. Если речь идет о CSS и JavaScript, то наилучшими инструментами для минимизации кода являются CSS Minifier и JSCompress.
Использование CSS Minifier
CSS Minifier – это бесплатный и простой инструмент для сжатия CSS-ресурсов. Все, что вам нужно сделать, это вставить код в поле ввода, задать уровень сжатия и нажать кнопку «Minify».
Процесс минимизации кода может занять от нескольких секунд до минуты, в зависимости от его размера. Новый код можно вставить через интерфейс CMS или FTP.
Важно: В качестве меры предосторожности, не забудьте сделать копии кода перед тем, как вносить в него изменения. Проще всего сделать офлайн копии или копии в облаке.
Чтобы проверить, сработала ли минимизация, выполните еще один тест через PageSpeed Insights. CSS файл, который недавно был сжат, не должен больше выдавать сообщение «минимизируйте CSS».
Использование асинхронной загрузки для JavaScript
В отличии от CSS, оптимизация JavaScript выполняется немного сложнее. Перед тем, как пропустить код через JSCompress, нужно сначала рассмотреть вариант асинхронной загрузки кода.
Асинхронную загрузку часто называют «отложенной загрузкой», но, в контексте JavaScript, такой вид загрузки работает посредством функций динамической загрузки.
Чтобы осуществить асинхронную загрузку, просто добавьте тэг async в код вызова .js-файла. Это можно сделать в исходном HTML-коде вашего веб-сайта. Ниже приведен пример того, как это сделать:
Как оптимизировать css и js на сайте онлайн
Оптимизация JavaScript способствует ускорению загрузки страниц и улучшает ранжирование сайта поисковыми системами. Уменьшить размер скриптов можно вручную либо с помощью онлайн-сервисов.
Почему важно оптимизировать JavaScript
Благодаря JS-скриптам страницы выглядят более привлекательными в глазах пользователей. Они создают динамичные эффекты, всплывающие окна и другие объекты, которые отличаются большим весом. Пример эффекта с использованием кода JavaScript:
Чем больше прописано таких скриптов, тем дольше грузится страница. Не в ущерб ее дизайну можно сократить код JavaScript и тем самым упростить загрузку динамичных эффектов. Ведь если этого не сделать, страница может подвисать до тех пор, пока полностью не загрузится код JS.
Как уменьшить размер кода JavaScript
Используйте онлайн-инструменты, которые автоматически преобразуют весь код. В нем удаляются пробелы, комментарии, лишние строки. Некоторые сервисы сокращают переменные, задают им упрощенную кодировку. Рассмотрим на примере сервис JavaScript Compressor. Вставьте код в верхнее поле и нажмите на кнопку «Compress»:
После нажатия кнопки в нижнем поле появится уменьшенный в размере код. Если включить функции Base 62 encode и Shrink variables, кроме удаления пробелов с комментариями будут меняться переменные с использованием кодирования по технологии Base 62.
Перед сжатием кода создайте его резервную копию на компьютере, чтобы избежать сбоев в работе сайта в случае возникновения ошибок.
Еще одним популярным инструментом сокращения кода скриптов считается Closure Complier от Google. Интерфейс сервиса состоит из двух вертикальных полей. Вставлять код JS нужно в левое поле:
В качестве альтернативы автоматического сжатия или после него можно использовать ручную проверку. Например, удалить пробелы и комментарии можно через онлайн-сервис, а все остальные манипуляции выполнить вручную во избежание поломки кода. Вот что можно сделать:
Обновить алгоритм загрузки скриптов. Чтобы в итоге код весил меньше, а грузился быстрее. Желательно перенести все скрипты из тега в конец тега для ускорения загрузки страницы.
Сократить имена переменных. Например, var здесь_расположены_все_записи_для_сайта замените на var архив.
Упростить формат записи. Например, при уменьшении числового значения на единицу, заменить строку на «—». Аналогично для плюса:
Было: i=i+1; j=j-1; Стало: i++; j--;
Сократить переменные с математическими действиями. Например, вместо i=i+5 можно использовать i+=5, а вместо j=j*7 написать j*=7. Аналогично со всеми действиями.
Применить короткую версию условия. Было:
if( age >= 21) < var message = "Разрешено"; >else
var message = age >= 21 ? "Разрешено" : "Запрещено";
Использовать шаблонные строки $<> для объединения переменных вместо «+». Было:
constant welcome = 'Здравствуйте' + Name + ' ' + Surname + '!';
constant welcome = `Здравствуйте $ $ !`;
При этом важно учитывать, что шаблонные строки нового стандарта JavaScript могут не работать на старых версиях.
Оптимизация JavaScript в WordPress может быть проведена с помощью встроенных плагинов. Например, Minify Fix. Для других CMS существуют аналогичные модули и расширения. При включении сжатия важно проверять корректность загрузки страниц.
Заключение
Оптимизировать JavaScript с целью сокращения его размера можно вручную и с помощью онлайн-инструментов. Каждая манипуляция по сжатию должна сопровождаться параллельной проверкой страниц сайта.
После удаления пробелов, комментариев, лишних строк замените обычные переменные на их сокращенные версии. Оптимизация кода JS для сайтов на WordРress и других СMS может проводиться с помощью встроенных плагинов.
Ручная оптимизация JavaScript дает не такой большой эффект, как подключение дополнительных плагинов. Для более эффективного сжатия лучше использовать библиотеки Gulp, Webpack и другие.
Эта статья — часть модуля «Аудит сайта» в Serpstat
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.