Оптимизация кода сайта - сжимаем HTML, CSS, JavaScript

Печать

Опубликовано: 07.05.2015 12:57

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

Рад приветствовать Вас на моем сайте вновь! Сегодня речь пойдет об оптимизации кода сайта.

"Зачем оптимизировать код?" - спросите вы -" все ведь работает"! Конечно, пока работает, но:

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

Статья в тему: Как увеличить скорость сайта

Я думаю причины для того, чтобы оптимизировать код достаточно веские. Так давайте же рассмотрим основные методы сжатия кода и увеличения времени загрузки.

Оптимизируем HTML код

Сжимаем пробелы

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

Пример, было так:

<html>
  <head>
    <title>
        Привет, Мир!
    </title>
    <script>
    	var temp = 'Здравствуй, кодер!!!';
    </script>
  </head>
  <body>
    Привет, Мир!
    <pre>
          Привет,
            Мир!
    </pre>
  </body>
</html>

Конечно, хорошо и наглядно, но такой файл мы можем сжать до:

<html>
<head>
<title>Привет, Мир!</title>
<script>var temp = 'Здравствуй, кодер!!!';</script>
</head>
<body>Привет, Мир!<pre>Привет, Мир!</pre></body>
</html>

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

Перенос подключаемых файлов ниже

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

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

Было так, подключали файл перед выводом контента:

<html> 
  <head> 
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="style3.css">
    <script src="scrypt1.js"></script>
    <script src="scrypt2.js"></script>
    <script src="scrypt3.js"></script>
  </head> 
  <body>
    <p>
      Много контента...
    </p>
  </body>
</html>

То, для ускорения загрузки контента поместим внешние файлы вниз:

<html> 
  <head> 
  </head> 
  <body>
    <p>
      Много контента...
    </p>
  </body>
</html>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
<script src="scrypt1.js"></script>
<script src="scrypt2.js"></script>
<script src="scrypt3.js"></script>

Резолвинг DNS адресов

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

Пример:

1
2

<link rel="dns-prefetch" href="http://seo-love.ru"/>
<link rel="dns-prefetch" href="http://site.ru"/>

Сокращение ссылок URL

Отличный способ сократить размер файлов - это укорачивание доменного имени в ссылках. Для этого у атрибутов src и href указываются относительные пути.

Тут, длинные пути с доменом:

1
2

<link rel="stylesheet" href="http://site.ru/styles/style.css">
<a href="http://site.ru/foo">Анкор</a>

Теперь сократим пути:

1
2

<link rel="stylesheet" href="/styles/style.css">
<a href="foo">Анкор</a>

Оптимизируем CSS код

Объединение файлов стилей CSS в один

За счет уменьшение количества файлов достигается уменьшение HTTP запросов к серверу. Это особенно актуально для мобильных сетей, где максимальное количество подключений ограничено. А так же это хороший способ ускорить загрузку сайта.

Много файлов стилей:

<html> 
  <head> 
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="style3.css">
  </head> 
  <body>
    <p ckass="red big two">
      Много контента...
    </p>
  </body>
</html>

Один файл стилей:

<html> 
  <head> 
    <link rel="stylesheet" href="style.css">
  </head> 
  <body>
    <p ckass="red big two">
      Много контента...
    </p>
  </body>
</html>

Минимизируем CSS код

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

Обычный стиль:

<style>
div { background-image: url("bar.jpg"); }
/* Комментарий 1 */
#id, .Id {
  border: solid 1px #cccccc;
  margin: 5px 0 0 2px;
  float: right;
  color:#ff0000;
}
/* Комментарий 2 */
</style>

После минимизации:

1

<style>div{background-image:url("bar.jpg");}#id,.Id {border:solid 1px #cccc; margin: 5px 0 0 2px;float:right;color:#ff0000;}</style>

Перемещение CSS кода в тег HEAD

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

Было так:

<html>
  <head>
  </head>
  <body>
    <style type="text/css"> .class { color:red; } </style>
    <div class="class">
      Ваш текст...
    </div>
  </body>
</html>

Получили:

<html>
  <head>
    <style type="text/css"> .class { color:red; } </style>
  </head>
  <body>
    <div class="class">
      Ваш текст...
    </div>
  </body>
</html>

Перенос загрузки файлов со стилями CSS перед скриптами JS

Выполнив этот совет, мы получим увеличим скорость рендеринга страницы + распараллелим скачивание CSS и JS-файлов.

Оптимизируем JavaScript код

Объединение JS-файлов в один

Этот способ аналогичен с объединением всех CSS-файлов в один файл. Меньше запросов к серверу - выше скорость загрузки страницы.

Минимизация JavaScript кода

Этот прием позволяет максимально сжать файлы js. Минимизация это:

удаление лишних пробелов и переносов строк
замена длинных переменных на более короткие
удаление ненужных символов
и др.

Выводы

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

Спасибо за внимание!

Советуем почитать

Прогон сайта по каталогам. Эксперимент и его результаты	Вставка ссылки при копировании на JS	Разница между AdWords и AdSense
Как Работает Поисковая Система Google	Как не попасть под фильтр "Песочница"	Что лучше: много дешевых ссылок или мало, но дорогих?