8 безкоштовних інструментів для зменшення ваших файлів CSS, HTML та JavaScript

Мінімізація ваших файлів CSS, HTML та JavaScript має важливе значення для оптимізації вашого веб-сайту. Інтерес подвійний: технічний та SEO.

Потрібен графічний дизайнер ?

Опублікуйте своє оголошення на Graphiste.com і отримайте п’ятнадцять цитат.

Пітер Бірс
3D-модельєр

Жульєн Рамбальдіні
Відеодизайнер

Лулі Лабат
Дизайнер упаковки

Кевін Бенабдельхак
Веб-дизайнер

Джульєтта Бультель
Графічний дизайнер 2D Animator

Джонатан Зуарі
UX Designer

Олександра Керрек
Іконописець

Ви видалите непотрібний код із своїх файлів, покращите час завантаження сторінки та, відповідно, SEO.

Мініфікація: як це працює ?

Процес мінімізації має на меті видалити з вашого коду:

Непотрібні пробіли Коментарі розробника Розриви рядків Розділювачі блоків

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

Цей процес мініфікації файлів можна зробити вручну, але бажано скористатися інструментами, які роблять це автоматично! Ось підбірка найбільш часто використовуваних.

Спосіб 1: скопіюйте та вставте

Перша можливість - це мати Інтернет-інструмент і просто скопіювати та вставити свій код у вікно, передбачене для цієї мети. В якості альтернативи ви також можете розмістити URL-адресу свого файлу JavaScript або CSS безпосередньо.

Ми запрошуємо вас відкрити принцип двох інструментів.

Minifier.org

Дуже простий у використанні, Minifier.org швидко "очищає" ваш код і робить ваш сайт легшим та ефективнішим.

Безкоштовний онлайн-інструмент. Підтримувані файли: CSS, JS

Стиснути мій код

Набагато повніше, ми рекомендуємо стиснути мій код, якщо ви хочете скористатися такими параметрами, як:

Безкоштовний онлайн-інструмент. Підтримувані файли: CSS, JS, HMTL

Спосіб 2: інтегровані інструменти

Плагіни для WordPress CMS

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

Якщо ви використовуєте CMS на зразок WordPress, то переважно встановити інтегрований плагін, який дозволить вам автоматизувати процес.

Краще WordPress Minify

Better WordPress Minify - це дуже повний і потужний інструмент, який оптимізує сумісність з іншими плагінами та темами WordPress.

Безкоштовний плагін. Підтримувані файли: CSS, JS

AssetsMinify

Менш повний, ніж Better WordPress Minify, AssetsMinify все ще пропонує вибір виключити певні файли і, наприклад, стиснути сценарії чи ні.

Безкоштовний плагін. Підтримувані файли: CSS, JS

WP Super Minify

WP Super Minify - хороший плагін для мініфікації файлів, якщо вам не потрібно виключати деякі з них. Його невеликий додатковий елемент: він обчислює продуктивність, яку ви отримали після встановлення.

Безкоштовний плагін. Підтримувані файли: CSS, JS, HTML

Швидка швидкість зменшення

Fast Velocity Minify - це повний плагін, який також дозволяє очистити кеш, синхронізувати теги HTML5 та вибрати завантаження JavaScript у верхній або нижній колонтитул.

Безкоштовний плагін. Підтримувані файли: CSS, JS, HTML

Інтегровані інструменти для Symfony

Якщо ви розробляєте в PHP з фреймворком Symfony, ви також можете інтегрувати інструмент для мініфікації коду. Безкоштовний Encore Webpack дозволяє оптимізувати та автоматизувати процес зменшення файлів CSS та JavaScript .

Метод 3: хмарні інструменти

Ви нарешті можете вибрати інструмент, який виконає подвійний обов’язок.

Наприклад, Cloud Flare - це проксі. Тому він захищає ваш сайт від DDos-атак і пропонує безкоштовну опцію автоматичного зменшення ваших файлів CSS, JavaScript та HTML.

Останній крок, після налаштування інструменту зменшення чи плагіна, виміряйте результати. Інструмент GTmetrix допоможе вам проаналізувати, чи ефективна ваша мініфікація. Також виконайте тест до/після, порівнявши час завантаження домашньої сторінки зі швидкістю Google Page.