Ускорение загрузки сайта — оптимизация css, js и картинок (изображений)

Описание

Adwex.Minified — модуль для быстрой оптимизации загрузки сайта. Модуль оптимизирует
стилевые файлы, файлы скриптов и изображения. Также добавлены дополнительные
возможности: инлайн стилей (inline), конвертация изображений в формат WebP, прекконект
к службам метрики, ленивая загрузка изображений.

Пишите предложения по улучшению или замечания по работе, на почту support@adwex.ru

ускорение загрузки сайта - оптимизация css, js и картинок (изображений)
Минимизация
Модуль создает файлы с минимизированным кодом внутри. В коде убираются пробелы,
переносы строк и комментарии, сокращаются цветовые обозначения. Это уменьшает
вес файлов, а следовательно и время загрузки.

ускорение загрузки сайта - оптимизация css, js и картинок (изображений)

Встраивание (inline)
Благодаря встраиванию CSS уменьшается количество запросов к серверу, пользователь
получает CSS код сразу вместе со страницей. Иногда, если CSS файлы большие, это
приводит к уменьшению оценки в Google PageSpeed, для того, чтобы этого не происходило,
включите опцию «Встраивать только небольшие файлы» — в этом случае
количество запросов к серверу сокращается, а размер HTML кода увеличивается,
но не критично.

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

ускорение загрузки сайта - оптимизация css, js и картинок (изображений)
Модуль создает файлы с минимизированным кодом внутри. Это уменьшает вес файлов.
Т.к. JS код может быть самым разным, для работы можно
использовать одну из четырех библиотек:

  • Patchwork
  • PHPWee
  • JSMin
  • MatthiasMullie
ускорение загрузки сайта - оптимизация css, js и картинок (изображений)
Изображения
В первую очередь на скорость загрузки сайта влияют изображения. Модуль оптимизирует
как уже загруженные файлы, так и только загружаемые в автоматическом режиме. Для
минимизации используется различные библиотеки, результат их работы сравнивается
и остаётся файл с наименьшим весом.

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

Сравните качество изображений до оптимизации, после, и в формате WebP

До оптимизации       После       WebP
1.png (2,02 Мбайт) 1_compresed.png (0,72 Мбайт) 1_webp.webp (0,15 Мбайт)
2.png (3,39 Мбайт) 2_compresed.png (0,71 Мбайт) 2_webp.webp (0,39 Мбайт)
ускорение загрузки сайта - оптимизация css, js и картинок (изображений)

Шрифты
Если на сайте используется подключаемые шрифты Fonts.Google (решения Аспро,
BXReady, INTEC и др.), то с помощью модуля вы сможете оптимизировать их загрузку.

В последних версиях Битрикс добавляет загрузку шрифта Open Sans. Если он вам не
нужен или он уже подключается из другого места, его можно убрать с помощью
соответствующей опции.

Оптимизация HTML
Модуль также сжимает итоговый код HTML. Это экспериментальная функция, мы рекомендуем
использовать ее только на небольших сайтах или сайтах, где контент редко изменяется
(новостные, корпоративные, блоги). Для минификации используются библиотеки:

  • Patchwork
  • PHPWee
  • TinyHtml
  • Shaun

ускорение загрузки сайта - оптимизация css, js и картинок (изображений)
Для сжатия изображений используются различные библиотеки: optipng, pngquant,
jpegoptim, svgo, ImageMagick. Рекомендуется установить их на вашем хостинге перед
оптимизацией изображений.

При оптимизации изображений, оригиналы НЕ сохраняются, поэтому, перед
оптимизацией изображений рекомендуем сделать бэкап файлов.
Используем такой вариант оптимизации изображений по следующим причинам:

  • изображения можно оптимизировать заранее, чтобы пользователю не нужно
    было ждать, когда произойдет оптимизация «на лету»;
  • экономится место на хостинге;
  • при сохранении оригиналов, нужно следить за удалением файлов. Пример:
    на страницу добавили новый файл, а старый удалили. Для нового файла создастся
    оптимизированная копия, но копия для старого файла, также останется, ведь
    её не удалили. Со временем, это может сказаться на занимаемом месте;

Вы не зависите от работоспособности сторонних сервисов, т.к. все операции
происходят на вашем сервере.

JS и CSS файлы оптимизируются только если они подключены через API Битрикса.

Для работы модуля нужен PHP версии >5.6. Для быстрой и стабильной работы
сайта, рекомендуется PHP версии 7.1-7.3

Также рекомендуем настроить на сервере HTTP/2, это необходимо как для быстрой
загрузки, так и для безопасности вашего сайта.

Версии 2.9.2:

Добавлена поддержка PHP 7.4
Улучшена поддержка WebP при работе модуля с готовым решением «Аспро Максимум»

Версия 2.8.0

В настройки модуля добавлен список исключения относительных URL сайта, для которых (включая вложенные) модуль не должен применяться.
Добавлен список исключения для применения LazyLoad к отдельным страницам и/или разделам сайта
Улучшена проверка поддержки WebP на уровне сервера.
Улучшен поиск ресурсов .js и .css при использовании сжатия скриптов и стилей.

Версия 2.7.0

Улучшено качество конвертирования в WebP больших изображений
Улучшена поддержка решений Intec

Версия 2.5.0

Добавлено выключение модуля без удаления. Режим работы только для администраторов.
Ускорена работа модуля
LazyLoad стал приятным
Атрибут data-amwebp-skip — для отмены конвертации в WebP. Атрибут data-amlazy-skip — для отмены добавления ленивой загрузки

Версия 2.0.5
Ковертация изображений в WebP. Оптимизация работы
Версия 1.4.2
Добавлен оптимизированный инлайн стилей
Версия 1.4.0
Оптимизация загрузки шрифтов с Fonts.Google
Версия 1.2.4
Поддержка модуля imageMagick
Версия 1.2.2
Отлов ошибки с битыми файлами
Новая опция для тех кто использует встраивание CSS в HTML
Версия 1.1.11
Сжатие HTML работает только если шаблон начинается с
Версия 1.1.8
Добавлена функция встраивания CSS в код HTML
Добавлена новая библиотека для сжатия HTML
Версия 1.1.0
Была добавлена экспериментальная функция сжатия итогового html. После включения сжатия html рекомендуем тщательно проверить функциональность сайта.

4 отзыва

5.00 средний рейтинг

4 из 4 (100%)
покупателей рекомендовали это решение

5
4
4
0
3
0
2
0
1
0

Седых Станислав
Седых Станислав
24.05.2018

Оказался самым первым покупателем.  Конечно же «quot;первый блин комом»quot;. Но разработчик модуля моментально отреагировал  и исправил  ситуацию,  а я , как дилетант в этом деле, запаниковал и подумал что  сайту пришел  конец.  Я ошибался.   Надеюсь , что этот модуль  существенно поможет в ускорении работы сайта

Верхотуров Роман
Верхотуров Роман
23.08.2019

Хотелось бы выразить огромную благоданость авторам за данный модуль и за молниеносное реагирование на просьбу о добавлении нового функционала.
В процессе обращений служба поддержки осуществила настройку и оптимизацию расширения под мой сайт. Это просто праздник какой-то!
Результаты превзошли все мои ожидания и сайт словно получил новый виток жизни.
На скриншоте можно ознакомиться с показателями до оптимизации и после:
До использования решения: https://prnt.sc/owjdah
После: https://prnt.sc/owjj7n

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

Это расширение должно быть в арсенале каждого интернет-магазина на битрикс по умолчанию.

rass-lyubov
rass-lyubov
22.11.2019

Данный модуль порекомендовали хостеры.
Постоянно приходилось переходить с одного тарифа хостинга на другой более дорогой, так как не хватало места на диске, дошли уже до самого высокого тарифа с местом в 50ГБ и опять место закончилось.
Установили данное решение, место на диске сократилось вдвое, по пейдж спид сразу в зеленой зоне 99 баллов, сайт стал работать шустро.
Техподдержке отдельная благодарность. Быстрые ответы на вопросы, сами все установили и настроили, мне вообще не пришлось о чем-то беспокоится.
Подсказали по работе сайта, ответили на все вопросы, помогли в дополнительных технических вопросах.
Ребята молодцы, работать одно удовольствие с такими профессионалами в своем деле!
Сайт https://discountbaby.ru/

Мазаев Константин
Мазаев Константин
09.06.2020

В маркетплейсе, есть по сути всего 3 недорогих решения такой важной проблемы как скорость загрузки сайта. 1) Есть возможность купить узкоспециализированные модули в районе 1500 руб., которые решают узкий спектр задач (или задачу) по оптимизации — не факт что решат проблему целиком, легко может не хватить функций или дело может быть не в той бабине. 2) Купить данный модуль за 3000 руб., который комплексно подходит к проблеме за довольно скромную сумму. 3) Купить вариант от 5000 руб. и выше с большим перечнем опций. Я остановился на этом варианте и не пожалел. Идеальное соотношение цена — возможности. Благодаря комплексному подходу модуля удаётся значительно ускорить загрузку сайта, который довольно сильно просажен по скорости ввиду комплекса проблем. Очень простая настройка модуля. Модуль безусловно эффективен. Думаю он способен снять проблему скорости загрузки у 90 % сайтов. Остальные 10% — это или большие/нагруженные проекты (в них вообще лучше не использовать подобные модули) или сайты сделанные с очевидным незнанием азов сайтостоительства, упоротые во всех местах. Данный модуль я настроил за 15 мин. При этом экономия 12 000 руб. 15 т.р. стоит ускорение работы сайта в конторе средней ценовой категории. Рекомендую к покупке. Успехов разработчикам.

Оставить отзыв

Ваш email не будет опубликован Обязательные поля отмечены *