- Вступ Оптимізація (мініфікація) - це процес видалення будь-яких непотрібних символів, які не потрібні...
- Крок 1 - Виявлення неоптимізованих файлів CSS, HTML, JavaScript.
- Крок 2 - Заміна неоптимізованих файлів
- Варіант 1 - Ручна заміна
- Варіант 2 - CMS плагіни
- Варіант 3 - CloudFlare
- Крок 3 - Тестування змін
- висновок
Вступ
Наша команда-партнер Artmisto
Оптимізація (мініфікація) - це процес видалення будь-яких непотрібних символів, які не потрібні для виконання коду. Мініфікація коду збільшить швидкість завантаження вашої сторінки, що призведе до задоволеним відвідувачам і кращій роботі пошукових систем. Простіше кажучи, це процес видалення непотрібних прогалин, нових рядків, коментарів і роздільників блоків з вашого коду. Ці типи символів використовуються для більш зручного читання і візуальних цілей, проте, вони не обов'язкові для правильного виконання коду. Як результат, оптимізація CSS, HTML і JavaScript прискорить час завантаження, розбору і виконання коду.
Що вам знадобиться
Перед тим, як ви почнете це керівництво, вам знадобиться наступне:
Крок 1 - Виявлення неоптимізованих файлів CSS, HTML, JavaScript.
На даному етапі ми рекомендуємо використання GTMetrix . Після аналізу тестового сайту WordPress, ми отримали список файлів, які можуть бути оптимізовані.
Крок 2 - Заміна неоптимізованих файлів
ВАЖЛИВО! Безпека понад усе. Перед збереженням будь-яких змін, переконайтеся в наявності резервної копії вашого сайту або окремих файлів, які будуть замінені.
Варіант 1 - Ручна заміна
Одним з переваг GTMetrix є можливість миттєвого перегляду оптимізованих версій CSS, JS і HTML файлів, після натискання кнопки See optimized version (Побачити оптимізовану версію) біля файлу. Після цього, оптимізований файл може бути або викачаний, або відкритий в браузері. Замініть старі файли використовуючи FTP клієнт або скопіюйте і замініть сам код.
Варіант 2 - CMS плагіни
Користувачі WordPress можуть використовувати для досягнення тих же цілей такі плагіни як Better WordPress Minify або W3 Total Cache . Ви можете звернутися до цього керівництву для більш докладної інструкції по установці плагіна W3 Total Cache.
Варіант 3 - CloudFlare
CloudFlare - це безкоштовний сервіс який прискорює і захищає ваш сайт виступаючи в якості проксі між відвідувачем і сервером сайту. Він пропонує захист від DDoS атак, і що найголовніше, він безкоштовний. Одна з функцій якої включає в себе безкоштовний тариф, це оптимізація CSS, HTML і JS. Ви можете включити оптимізацію ресурсів в розділі Speed → Auto-Minify:
ВАЖЛИВО! Не рекомендується використовувати оптимізацію CloudFlare, якщо ви вже використовуєте CMS плагіни для оптимізації. Також, CloudFlare НЕ оптимізує сторонні скрипти і посилання (Facebook, VK, Twitter)
Крок 3 - Тестування змін
Після заміни файлів / коду на їх оптимізовану версію, останнім етапом стане перевірка змін. Ви можете зробити це запустивши повторний аналіз на сайті GTMetrix . Для порівняння, ось результати тестового сайту після заміни файлів на оптимізовані:
висновок
У цьому короткому посібнику ви навчилися, як прискорити роботу сайту оптимізацією CSS, JavaScript and HTML.
Керівництва по темі:
