<
  • Главная
Статьи

Прискорення Роботи Сайту - Оптимізація 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.

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



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью