Сайт

Ускорение Работы Сайта – Оптимизация CSS, HTML и JavaScript

ускорение работы сайта - оптимизация css, html, javascript

Введение

Оптимизация (минификация) – это процесс удаления каких-либо ненужных символов, которые не нужны для выполнения кода. Минификация кода увеличит скорость загрузки вашей страницы, что приведет к довольным посетителям и лучшей работе поисковых систем. Проще говоря, это процесс удаления ненужных пробелов, новых строк, комментариев и разделителей блоков из вашего кода. Эти типы символов используются для более удобного чтения и визуальных целей, однако, они не обязательны для правильного выполнения кода. Как результат, оптимизация CSS, HTML и JavaScript ускорит время скачивания, разбора и выполнения кода.

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

  • FTP доступ

Шаг 1 — Обнаружение неоптимизированных файлов CSS, HTML, JavaScript.

На данном этапе мы рекомендуем использование GTMetrix. После анализа тестового сайта WordPress, мы получили список файлов, которые могут быть оптимизированы.

оптимизация css

оптимизация javascript

Шаг 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 speed

cloudflare speed autominify

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

Шаг 3 — Тестирование изменений

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

оптимизация css 2оптимизация javascript

Заключение

В этом кратком руководстве вы научились, как ускорить работу сайта оптимизацией CSS, JavaScript and HTML.

Руководства по теме:

Добавить комментарий

Нажмите здесь, чтобы оставить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Присоединяйтесь к тысячам других подписчиков по всему миру

и получайте самые свежие руководства на вашу электронную почту

Пожалуйста, подождите...

Спасибо за подписку!

Начните экономить сейчас!

Хостинг и доменное имя от

руб.95
00