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

Прискорення завантаження сайту - оптимізація css, js та картинок (зображень) (adwex.minified) - рішення для Бітрікс

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

"Модуль 'Ускорение загрузки сайта' для Битрикс маркетплейса – инновационное решение для оптимизации CSS, JS и картинок, сокращающее время загрузки сайта и повышающее его производительность. Ускорьте свой сайт и улучшите пользовательский опыт с помощью этого эксклюзивного модуля!"
0
3 100 грн.
Прискорення завантаження сайту - оптимізація css, js та картинок (зображень) (adwex.minified) - рішення на Бітрікс


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

Пишіть пропозиції щодо покращення або зауваження щодо роботи на пошту support@adwex.ru


Мінімізація
Модуль створює файли з мінімізованим кодом усередині. У коді забираються прогалини,
переноси рядків та коментарі, скорочуються колірні позначення. Це зменшує
вага файлів, а відтак і час завантаження.



Вбудовування (inline)
Завдяки вбудованню CSS зменшується кількість запитів до сервера, користувач
отримує CSS код разом зі сторінкою. Іноді, якщо CSS файли великі, це
призводить до зменшення оцінки в Google PageSpeed, щоб цього не відбувалося,
увімкніть опцію «Вбудовувати лише невеликі файли» - у цьому випадку
кількість запитів до сервера скорочується, а розмір HTML коду збільшується,
але не критично.

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

Модуль створює файли з мінімізованим кодом усередині. Це зменшує вагу файлів.
Т.к. JS код може бути різним, для роботи можна
використовувати одну з чотирьох бібліотек:
  • Patchwork
  • PHPWee
  • JSMin
  • MatthiasMullie
Зображення
Насамперед на швидкість завантаження сайту впливають зображення. Модуль оптимізує
як вже завантажені файли, і лише завантажені в автоматичному режимі. Для
мінімізації використовується різні бібліотеки, результат їхньої роботи порівнюється
і залишається файл із найменшою вагою.

У версії 2.0.5 додано конвертацію зображень у формат WebP. WebP зображення
створюються з оптимізованих, зберігаються окремо від оригіналів, і показуються
тільки в сучасних браузерах.
Зауважте, що конвертація працює не на всіх хостингах. Після встановлення
у налаштуваннях модуля можна перевірити хостинг на підтримку формату.


Порівняйте якість зображень до оптимізації, після, і у форматі WebP[ TR][ /TABLE]
До оптимізаціїПісля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 Мбайт)


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

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

Оптимізація HTML
Модуль також стискає загальний код HTML. Це експериментальна функція, ми рекомендуємо
використовувати її лише на невеликих сайтах або сайтах, де контент рідко змінюється
(Новини, корпоративні, блоги). Для мініфікації використовуються бібліотеки:
  • Patchwork
  • PHPWee
  • TinyHtml
  • Shaun

Для стиснення зображень використовуються різні бібліотеки: optipng, pngquant,
jpegoptim, svgo, ImageMagick. Рекомендується встановити їх на вашому хостингу перед
оптимізацією зображень.

При оптимізації зображень оригінали НЕ зберігаються, тому, перед
Оптимізацією зображень рекомендуємо зробити бекап файлів.
Використовуємо такий варіант оптимізації зображень з таких причин: [/ P]

  • зображення можна оптимізувати заздалегідь, щоб користувачеві не потрібно
    було чекати, коли відбудеться оптимізація «на льоту»;
  • економиться місце на хостингу;
  • при збереженні оригіналів потрібно стежити за видаленням файлів. Приклад:
    на сторінку додали новий файл, а старий видалили. Для нового файлу буде створено
    оптимізована копія, але копія для старого файлу також залишиться, адже
    її не видалили. Згодом, це може позначитися на місці;
[P]Не залежите від працездатності сторонніх сервісів, т.к. всі операції
відбуваються на вашому сервері.
[P]JS та CSS файли оптимізуються тільки якщо вони підключені через API Бітрікса.

Для роботи модуля потрібен PHP версії >5.6. Для швидкої та стабільної роботи
сайту, рекомендується PHP версії вище 7.1

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

Результати роботи модуля залежать від індивідуальних особливостей сайту та можуть відрізнятись від наведених прикладів. Щоб перевірити роботу модуля на вашому сайті, протестуйте його у демо-режимі. Якщо вам потрібна допомога з налаштування модуля, напишіть у службу підтримки.

Версія 4.1.0

Поліпшено сумісність модуля зі стандартними функціями стиснення CSS та JS Бітріска
Покращено оптимізацію підвантаження шрифтів та відображення текстів під час завантаження сторінок
Версія 4.0.1

1. Додана підтримка PHP 8.0, 8.1
Щоб оновити наявну версію:
- для тих сайтів, де використовується php нижче 8.0, досить просто оновити модуль
- якщо ви вже переключили свій сайт на php 8, необхідно видалити та стерти модуль, потім завантажити та встановити заново
2. Реалізовано автоматичне видалення старих стислих версій html файлів
3. Додано налаштування часу життя стислих html файлів у кеші
Версія 3.1.0

Додано сервіс "Пробна конвертація у WEBP" для перевірки конвертації у WEBP будь-яких файлів. Файл вибирається на локальному комп'ютері, конвертується засобами сервера і повертається у вигляді завантажуваного файлу вже у форматі WEBP. При обробці завантаженого файлу використовуються поточні налаштування якості конвертації у модуль WEBP.
Оптимізовано застосування скрипту Lazy Load на стороні браузера для сторінок, на яких немає зображень, які потребують Lazy Load.
У налаштуваннях модуля додано опцію кешування на стороні браузера вбудованих CSS.
Додано спеціальну опцію відключення обробки модулем сторінки "Помилка 404".
Версія 3.0.0

Додано функцію LazyLoad для фонових зображень, що задаються в атрибуті style різних тегів.
Додана опція для налаштування попереднього завантаження шрифтів, які видає Google PageSpeed Insights у розділі "Налаштуйте попереднє завантаження ключових запитів".
Додана можливість задавати додаткові регулярні вирази для пошуку та конвертації у WebP зображень, які задаються в коді сторінки через нестандартні атрибути HTML-тегів, всередині інлайн-скриптів чи стилів та для різних особливих варіантів верстки сторінок.
Значно покращено сумісність функцій LazyLoad та WebP модуля з іншими механізмами лінивого завантаження (LazyLoad) зображень, що застосовуються у різних готових рішеннях та індивідуальних проектах.
Версії 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 рекомендуємо ретельно перевірити функціональність сайту.

Наш модуль вже успішно використовують на наших проектах

file_download Завантажити Модуль Маркет
file_download Завантажити Модуль Маркет