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

11.12.2018
Просмотров: 53

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

Итак, существует 2 варианта увеличения скорости для сайта – вручную и при участии программ минимизации.

Минимизация кода – что это?

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

  • «minify HTML» – уменьшить HTML-код;
  • «minify CSS» – уменьшить CSS-код;
  • «minify JavaScript» – уменьшить JavaScript-код.

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

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

Сокращаем код вручную

Рассмотрим этот вариант, взяв обычную HTML-страницу:

primer HTML stranitsy

Она содержит коды HTML и JavaScript, а так же CSS-стили. У каждого из них существует свой порядок составления кодировки и примечаний. Как же добиться минимизации этого веб-сайта?

Примечания в кодировке необходимы программистам, чтоб упростить ориентирование во время создания проекта. Например:

  • в HTML – <!-- start container content -->
  • в JavaScript - // use metrics
  • в CSS - /* container for main page */

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

Стили CSS имеют 2 объявления в классе container, и их стоит соединить воедино. Остальные стили не пострадают, а размер страницы сократится. Имеем исходник:

  • .container { font-size: 100% }
  • .container { width: 70% }

Получаем .container { font-size: 100; width: 70%}, что для браузера обозначает то же самое, что и исходник.

Конструкции такого вида чаще всего встречаются в крупных CSS-файлах. Это происходит из-за недостатка времени у разработчика на поиск уже созданного CSS-правила для элемента, поэтому он прописывает его в нижней части документа наново.

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

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

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

Таким образом, используя простые действия, удалось сократить количество знаков с 334 до 130, сохраняя при этом полную работоспособность. А вес web-ресурса снизился на 40%, что повлекло троекратное возрастание темпа его отображения.

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

Для программистов стоит сохранять страницу с комфортным вариантом просмотра для корректировки, содержащую все отступы и комментарии. Это значит, что на тестовом сервере web-страницы так уменьшать код не стоит. Если же такого сервера не имеется, тогда создайте 2 копии файлов. Одну с полным кодом, вторую – с сокращенным. А также нужно проконтролировать, чтоб в публикацию шли файлы, которые весят меньше.

С какими сервисами можно минимизировать коды

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

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

В Google Chrome, к примеру, это можно сделать, пройдя путь: Меню > Настройки > Настройка контента > [removed]. По поводу отключения JavaScript в прочих web-браузерах пошаговые руководства для этого имеются интернете.

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

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

  • HTMLMinifier;
  • CSSNano или csso;
  • UglifyJS.

У них неплохие характеристики, содержат много настроек и документов, а еще способны интегрироваться в любую среду программирования.

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

Избавляясь от комментариев, особенно с применением сторонних программ, нужно позаботиться о сохранности кода noindex-->.

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

Итог

Минимизирование кодов HTML, CSS и JavaScript далеко не первостепенная задача для увеличения скорости работы сайта, да и значение ее гораздо меньше, чем, к примеру, настройка сжатия, уменьшение веса картинок и т.п. Однако, применение представленных методик позволит снизить время отклика сайта, улучшить комфорт его использования и повысить значение в поисковой выдаче.

Партнеры

Благодарим наших партнёров за ценное и плодотворное сотрудничество.

Партнеры - фото 1
Партнеры - фото 2
Партнеры - фото 3
Партнеры - фото 4
×
ЕСТЬ ВОПРОСЫ? СВЯЖИТЕСЬ С НАМИ:
Наши менеджеры свяжутся с Вами в ближайшее время.