Оптимизация кода сайта — базовое руководство

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

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

Оптимизация кода сайта - пошаговое руководство

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

Оптимизация HTML

Сжатие пробелов

С помощью объединения повторяющихся пробелов и переносов строк можно уменьшить итоговый размер страницы и, соответственно, уменьшить время на итоговую загрузку страницы. Данный метод нельзя на прямую использовать для следующих тегов: <pre>, <textarea>, <script> и <style>.

Пример, часто бывает так

Привет,   Мир!Привет, Мир! <pre> Привет, Мир! </pre>

Но, в итоге код можно уменьшить до

<html>
<head>
<title>Привет, Мир!</title>
<script> var x = 'Привет,   Мир!';</script>
</head>
<body>
Привет, Мир!
<pre>
      Привет,
        Мир!
</pre>
</body>
</html>

Уменьшение объема контента в верхней части кода страницы

Для достижение максимальной скорости загрузки страницы в верхней части html кода нужно использовать, только тот контент (JavaScript, CSS), который необходим для загрузки первого экрана. Весь остальной код, желательно разместить в нижней части страницы. Ко всему этому, нужные блоки CSS и JavaScript можно встроить прямо в html код страницы.

Пример, такой оптимизации

Если документ HTML выглядит следующим образом:

<html> 
  <head> 
    <link rel="stylesheet" href="small.css">
  </head> 
  <body>
    <div class="blue">
      Привет, мир!
    </div>
  </body>
</html>

а файл стилей small.css имеет вид

  .yellow {background-color: yellow;} 
  .blue {color: blue;} 
  .big { font-size: 8em; } 
  .bold { font-weight: bold; }

то нужный код CSS встроить можно таким образом:

<html> 
  <head> 
    <style> 
      .blue{color:blue;} 
    </style> 
    </head> 
  <body> 
    <div class="blue">
      Привет, мир! 
    </div> 
  </body> 
</html> 
<link rel="stylesheet" href="small.css">

В итоге файл small.css будет подгружаться после загрузки страницы.

Предварительный резолвинг DNS

С помощью данной оптимизиции вы можете сообщить браузеру по каким адресам могут находятся внешние ресурсы на данной странице (например, картинки, файлы стилей, javascript). Это позволяет сразу выполнять преобразование DNS имён.

Например, таким образом можно ускорить загрузку для систем аналитики

<link rel="dns-prefetch" href="http://mc.yandex.ru"/>
<link rel="dns-prefetch" href="http://www.google-analytics.com"/>

Удаление домена из URL в атрибутах href и src

Можно сократить код сайта путем преобразования абсолютных URL в относительные для атрибутов href и src.

Это выглядит следующим образом: до удаление домена

<html>
  <head>
  <base href="http://www.site.com/">
  </head>
  <body>
    <a href="http://www.example.com/bar">Анкор </a>
  </body>
</html>

После удаление домена

<html>
  <head>
  <base href="http://www.example.com/">
  </head>
  <body>
    <a href="bar">Анкор</a>
  </body>
</html>

Оптимизация CSS

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

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

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

Пример, до

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles/file1.css">
    <link rel="stylesheet" type="text/css" href="styles/file2.css">
    <link rel="stylesheet" type="text/css" href="styles/file3.css">
</head>
  <body>
    <div class="blue yellow big bold">
      Привет, мир!
    </div>
  </body>
</html>

После

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles/allinone.css">
  </head>
  <body>
    <div class="blue yellow big bold">
     <pre>Привет, мир!</pre>
    </div>
  </body>
</html>

Минимизация CSS

Минимизация файлов стилей состоит в следующем:

удаление всех комментариев;
удаление пробелов;
сокращение название цветов.

Например,

<style>
      body { background-image: url("foo.png"); }
      /* This comment will be stripped */
      #iddy, .anotherId {
        border: solid 1px #cccccc;
        padding: 1.2em;
        float: left;
        color:##ff0000;
      }
    </style>

Можно сжать до

<style>body{background-image:url(("foo.png"}#iddy,#anotherId{border:solid 1px #ccc;padding:1.2em;float:left;color:red}</style>

Перемещение CSS в секцию HEAD

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

Пример,

<html>
  <head>
  </head>
  <body>
    <style type="text/css"> .big { font-size: 8em; } </style>
    <div class="big">
      Привет, мир!
    </div>
  </body>
</html>

После

<html>
  <head>
    <style type="text/css"> .big { font-size: 8em; } </style>
  </head>
  <body>
    <div class="big">
      Привет, мир!
    </div>
  </body>
</html>

Перемещение файлов со стилями CSS перед JavaScript скриптами

Данное дейстивие позволит

лучше распаралеллелить скачивание CSS и JacaScript-файлов
увеличить скорость рендеринга страницы

Перенос небольших описаний стилей в HTML

Перенос небольших описаний стилей до 1КБ может помочь вам сократить число запросов к серверу.

Оптимизация JavaScript

Объединение всех JavaScript в один файл

Аналогично, объединению файлов CSS, данная оптимизация для JavaScript позволит уменьшить необходимое количество HTTP запросов при загрузке страницы.

Минимизация JavaScript

Минимизация JavaScript позволяет убрать лишние символы из исходного файла и специальными способами уменьшить размер кода (например, замена длинных переменных на более короткие).

Например, можно сделать с помощью этого сервиса: http://developer.yahoo.com/yui/compressor/.

Оптимизация изображений

Отложенная загрузка изображений

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

значительно сократить объемы первоначально загружаемой информации
сократить нагрузку на сервер

Комбинирование изображений

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

Сервисы для проверки оптимизация вашего сайта

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

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

Хорошие статьи в продолжение:

— Robots.txt — инструкция для SEO

— Ответы сервера — практичная методичка

— 301 редирект – самое полное руководство

А что вы думаете про оптимизацию кода сайта?

Оцените статью