access_time
15 сентября, 2017
hourglass_empty
2мин. чтения
person_outline
Renat
Ускорение Работы Сайта — Оптимизация CSS, HTML и JavaScript
Введение
Оптимизация (минификация) — это процесс удаления каких-либо ненужных символов, которые не нужны для выполнения кода. Минификация кода увеличит скорость загрузки вашей страницы, что приведет к довольным посетителям и лучшей работе поисковых систем. Проще говоря, это процесс удаления ненужных пробелов, новых строк, комментариев и разделителей блоков из вашего кода. Эти типы символов используются для более удобного чтения и визуальных целей, однако, они не обязательны для правильного выполнения кода. Как результат, оптимизация CSS, HTML и JavaScript ускорит время скачивания, разбора и выполнения кода.
Что вам понадобится
Перед тем, как вы начнете это руководство, вам понадобится следующее:
- FTP доступ
Шаг 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.
Руководства по теме:
Автор
Renat / @jmgclm
Избранные руководства
Оставьте ответ