Как ускорить сайт, минимизируя HTML, CSS и JavaScript


Скорость загрузки сайта является важным показателем как для поисковой системы, так и для пользователя. Доля мобильного интернета растет вместе с количеством мобильных устройств, и люди предъявляют к сайтам все больше требований – в том числе касающихся быстрой загрузки контента. А запуск нового алгоритма ранжирования Google для мобильного поиска – Speed Update – обязует уделять больше внимания скорости загрузки мобильных сайтов.

Рассмотрим два способа ускорить сайт – ручной и с помощью программ-минимизаторов.

Что такое минимизация кода

В инструменте Google для проверки скорости загрузки PageSpeed в результате проверки страницы сайта можно встретить следующие рекомендации:

«minify HTML» — сократить код HTML;
«minify CSS» — сократить код CSS;
«minify JavaScript» — сократить код JavaScript.

Результат проверки сайта в Google PageSpeed и рекомендации сервиса

Выполнение этих рекомендаций позволит увеличить скорость загрузки страницы и таким образом повлиять на один из важных показателей ранжирования сайта в поисковых системах.

Минимизация кода — это процедура удаления избыточного и лишнего кода, не влияющего на работу и отображение ресурса в браузере. Например, удаление комментариев и форматирования, неиспользуемого кода, сокращение имен переменных и функций и т.д.

Ручная минимизация кода

Рассмотрим для примера простую HTML-страницу:

<html>

<head>

<style>

/* container for main page */

.container { font-size: 100% }

.container { width: 70% }

</style>

</head>

<body>

<!-- start container content -->

<div>…</div>

<!-- end container content -->

<script>

Metrics(); // use metrics

</script>

</body>

</html>

В ней содержатся код HTML, стили CSS и код JavaScript. Для всех этих типов есть разные правила написания кода и комментариев. Как минимизировать эту страницу?

1. Комментарии в коде пишутся для программистов, чтобы им было проще ориентироваться в проекте при разработке.

Примеры:

<!-- start container content --> – для HTML
// use metrics – для JavaScript
/* container for main page */ – для CSS.

При просмотре кода страницы в браузере комментарии чаще всего выделены зеленым цветом:

Вид комментариев в исходном коде страницы

Они не влияют на отображение страницы в браузере, и для уменьшения количества символов и веса страницы их можно удалить.

2. CSS-стили содержат два объявления для класса container, которые можно объединить в одно. При этом другие стили затронуты не будут, и тем самым мы сократим размер страницы:

.container { font-size: 100% } .container { width: 70% } для браузера означает то же, что и .container { font-size: 100; width: 70%}. Такие конструкции можно часто встретить в больших CSS-файлах, если у программиста не было времени искать уже существующее CSS-правило для элемента, и он решил прописать новое внизу документа.

3. Пробелы и табуляция нужны для удобства чтения документа разработчиком, их тоже можно удалить.

В итоге минимизированный код этой страницы будет выглядеть так:

<html><head><style>.container{font-size:100%;width:70%}</style></head><body><div>…</div><script>Metrics();</script></body></html>

Код уменьшился с 335 символов до 131, но сохранил свою полную работоспособность. Вес страницы при этом уменьшился на 40%, что увеличило скорость ее загрузки в 3 раза.

Несмотря на то, что данный код неудобно читать человеку, для браузера нет разницы между исходной страницей и минимизированной. Жертвуя этим удобством, мы позволяем браузеру загружать файлы меньшего размера, тем самым уменьшая время загрузки, и экономим пользователю деньги, затрачиваемые на интернет-трафик.

Для разработчиков нужно сохранять страницу в удобном для просмотра и редактирования виде, со всеми отступами и комментариями. То есть на тестовом сервере сайта сокращать код подобным образом не нужно. Если тестового сервера нет, необходимо сделать две копии всех ваших файлов (одна должна содержать полный код, другая – сокращенный) и проследить, чтобы в публикацию уходили файлы с меньшим весом.

Сервисы для минимизации кода

Существует множество сервисов и программ для минимизации кода. От использования online-сервисов советуем отказаться – ради безопасности и предотвращения утечки исходного кода вашего сайта третьим лицам. Сторонний сайт может без вашего ведома сохранить код в базе данных и использовать его в дальнейшем по своему усмотрению.

Пример работы сервиса для минимизации кода – интерфейс

Если все же намерены использовать онлайн-сервис, следует удостовериться, что он работает на JavaScript и выполняется только со стороны клиента. Для этого нужно отключить в браузере JavaScript и попробовать выполнить минимизацию.

Например, в Google Chrome это делается в меню Настройки > Настройки контента > JavaScript:

Как отключить JavaScript в Google Chrome

О том, как выключить JavaScript в других браузерах, легко найти информацию в сети.

Если после отключения JavaScript сервис выдаст ошибку, значит, он работает на технологии JavaScript, и код выполняется непосредственно в браузере, без передачи на сервер. Соответственно, сервис не сможет записать его в свою базу данных для дальнейшего использования.

Поскольку 100% гарантий в вопросе безопасности не существует, мы советуем пользоваться надежными сервисами, требующими локальной установки. Например, проверенными программами для сокращения кода, которые советует Google:

для HTML – HTMLMinifier;
для CSS – CSSNano и csso;
для JavaScript – UglifyJS.

Они показывают хорошие результаты, имеют множество настроек и всю необходимую документацию, а также интегрируются с любой средой разработки.

Как альтернативу можно использовать хорошо зарекомендовавший себя компрессор от Yahoo YUI Compressor. Также существует официальный аддон от Google для автоматизации минимизации кода – PageSpeed Module, который можно установить на сервера Apache и Nginx.

Удаляя комментарии, особенно при использовании сторонних инструментов, стоит проследить, чтобы случайно не удалить код вида

<!—noindex--> <!--/noindex-->.

Этот код имеет важное значение для поисковой системы. Он используется для сокрытия элементов страницы от поисковых систем, и его удаление может повлиять на поисковую выдачу сайта.

Выводы

Сокращение кодов HTML, CSS и JS не является приоритетной рекомендацией по ускорению загрузки вашего сайта и по значимости стоит ниже настроек сжатия, уменьшения веса изображений и т.д. Но использование техник, описанных в этой статье, поможет существенно сократить время загрузки сайта, повысить удобство пользования вашим ресурсом и улучшить его показатели в поисковой выдаче.

Комментариев нет
5/5 (100%) 1 голос(ов)
5 1
Просмотров: 1513
 

Оставить комментарий


Имя*
E-Mail (не публикуется)
Комментарий*