Прискорення Роботи Сайту - Оптимізація CSS, HTML і JavaScript

  1. Вступ Оптимізація (мініфікація) - це процес видалення будь-яких непотрібних символів, які не потрібні...
  2. Крок 1 - Виявлення неоптимізованих файлів CSS, HTML, JavaScript.
  3. Крок 2 - Заміна неоптимізованих файлів
  4. Варіант 1 - Ручна заміна
  5. Варіант 2 - CMS плагіни
  6. Варіант 3 - CloudFlare
  7. Крок 3 - Тестування змін
  8. висновок

Вступ

Оптимізація (мініфікація) - це процес видалення будь-яких непотрібних символів, які не потрібні для виконання коду. Мініфікація коду збільшить швидкість завантаження вашої сторінки, що призведе до задоволеним відвідувачам і кращій роботі пошукових систем. Простіше кажучи, це процес видалення непотрібних прогалин, нових рядків, коментарів і роздільників блоків з вашого коду. Ці типи символів використовуються для більш зручного читання і візуальних цілей, проте, вони не обов'язкові для правильного виконання коду. Як результат, оптимізація 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. Ви можете включити оптимізацію ресурсів в розділі SpeedAuto-Minify:

ВАЖЛИВО! Не рекомендується використовувати оптимізацію CloudFlare, якщо ви вже використовуєте CMS плагіни для оптимізації. Також, CloudFlare НЕ оптимізує сторонні скрипти і посилання (Facebook, VK, Twitter)

Крок 3 - Тестування змін

Після заміни файлів / коду на їх оптимізовану версію, останнім етапом стане перевірка змін. Ви можете зробити це запустивши повторний аналіз на сайті GTMetrix . Для порівняння, ось результати тестового сайту після заміни файлів на оптимізовані:

висновок

У цьому короткому посібнику ви навчилися, як прискорити роботу сайту оптимізацією CSS, JavaScript and HTML.

Керівництва по темі:

Номера

Номерной фонд гостиницы насчитывает 173 номера различных категорий.

Забронировать отель можно прямо сейчас: Бронирование онлайн