Главная → Спрашивали? →

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

Скорость загрузки страниц вашего сайта — очень важный параметр не только для его посетителей, но и для поисковых систем. По скорости загрузки поисковик может судить о качестве сайта. Выполнение рассмотренных в статье рекомендаций возможно как на этапе создания веб сайта, так и в процессе его дальнейшего обслуживания. Техническая поддержка сайта после его разработки является той задачей, к которой необходимо относиться со всей ответственностью и не пренебрегать ею. Рассмотрим рекомендации от Google, призванные оптимизировать (уменьшить) скорость загрузки вашего сайта.

Итак, приступим:

Избегайте ошибочных запросов

Часто ваш HTML- или CSS-код может запрашивать какое либо изображение или файл. В том случае, если запрашиваемый объект не найден или не существует, скорость работы сайта существенно замедляется и увеличивается нагрузка на сервер, приводя к большому количеству неправильных запросов несуществующего объекта. И таких запросов намного больше, чем можно себе представить.

Исправление ошибочных запросов гораздо проще нахождения их. Если вы нашли какой-либо неправильный запрос, просто уберите ненужный код из HTML- или CSS-файла или скорректируйте его.

Крайне важно контролировать скорость загрузки страницы и отслеживать обращения к несуществующим ресурсам!

Заказать ускорение сайта
Увеличим скорость загрузки и исправим ошибки

Избегайте методов «@import»

Использование таких методов в CSS-файлах, как @import, может замедлять скорость загрузки стилей в частности и страниц в целом. Наибольшая сложность заключается в последовательной загрузке стилей (друг за другом) вместо использования возможности их параллельной (одновременной) загрузки. Это добавляет дополнительные шаги в процесс загрузки сайта.

Просмотрите все ваши файлы на наличие директив импорта. Выглядеть они могут следующим образом:

@import url("style.css")

Заменить их необходимо на прямое подключение стилей в HTML-коде:

<link rel="style.css" href="style.css" type="text/css">

Объединяйте CSS-файлы

Каждый CSS-файл, который использует страница вашего сайта, добавляет время и снижает скорость загрузки страницы (подключение → загрузка, подключение → загрузка и т.д.). Иногда использование нескольких файлов стилей неизбежно (например, в том случае, когда с дизайном сайта проще и целесообразней работать при помощи нескольких файлов), но по возможности необходимо объединять их в один файл.

Для этого сделайте простую операцию copy-paste из нескольких файлов в один! Один CSS-файл будет содержать ровно столько же полезной информации для сайта, но увеличит скорость загрузки!

После объединения файлов не забудьте удалить лишние подключения старых файлов в HTML-коде страниц.

Избегайте функции «document.write» в HTML

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

Проверьте весь ваш HTML-код на наличие директив document.write, которые могут выглядеть так:

document.write('<script src="script.js"></script>');

Вместо этого используйте просто подключение внешнего скрипта при помощи такого вызова в HTML-коде страницы:

<script src="script.js"></script>

Объединяйте внешние JS-файлы

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

По аналогии с объединением CSS-файлов, необходимо объединять и JS-файлы в один (по возможности). Качество выполнения прописанных в них функций от этого не пострадает, однако положительно скажется на скорости загрузки веб-страниц.

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

Объединяйте изображения в CSS-спрайты

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

Количество обращений к серверу и, соответственно, скорость загрузки страниц можно уменьшить, объединяя несколько изображений в один CSS-спрайт (CSS-sprite). Вместо загрузки большого количества изображений ваш браузер теперь будет загружать одно! И в этом — прелесть CSS-спрайтов! Конечно, это в большей степени касается объединения нескольких небольших изображений, используемых в элементах оформления WEB-страницы (фоны меню, смайлы, углы, иконки и пр.).

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

На примере двух изображений (рупора и смайла), объединенных в один спрайт, для отображения рупора напишем следующий CSS-стиль:

.rupor {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}

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

.smile {width:50px; height:50px; background:url(images/sprite.png) 0 –50px;}

Соответствующие им фрагменты HTML-кода будут такими:

Для рупора:

<div class="rupor"></div>

И для смайла:

<div class="smile"></div>

Заказать увеличение скорости сайта
Повысим скорость загрузки и исправим ошибки

Откладывайте загрузку JavaScript

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

Только обозначенное ниже решение позволит загружать внешний скрипт ТОЛЬКО после полной загрузки страницы и не вызовет предупреждение «Defer loading of javascript» в инструментах для веб-мастеров от Google. Вот он, рекомендуемый Google, метод:

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "script.js";
      document.body.appendChild(element);
   }
   if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
   else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
   else window.onload = downloadJSAtOnload;
</script>

Данный код «говорит» браузеру о необходимости дождаться завершения полной загрузки страницы и последующего исполнения скрипта script.js.

Важно понимать, что нельзя помещать в этот код какой-либо JS-скрипт, необходимый для правильной загрузки страницы. Необходимо разделить все скрипты на две группы. Первая группа — скрипты для правильной загрузки страницы, вторая — скрипты, исполнение которых можно отложить на «после загрузки» (например, какие-то события от мышки и т.п.). И лишь скрипты из второй группы возможно помещать в указанный код.

Почему важно откладывать загрузку скриптов?

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

Включите сжатие Gzip

Сжатие HTML- и CSS-файлов при помощи компрессии Gzip может сэкономить от 50 до 70 процентов объема загружаемой с веб-сервера информации. После запроса пользователя в таком случае сервер будет передавать в ответ сжатый документ. А это автоматически снизит нагрузку на сервер и уменьшит время загрузки страниц вашего web-сайта.

Включить компрессию можно добавлением определенного кода в файл .htaccess, размещаемый в корневой папке вашего сайта на хостинг-площадке.

Необходимо создать файл .htaccess или, если он уже существует, добавить в него следующий код:

<ifModule mod_gzip.c>
   mod_gzip_on Yes
   mod_gzip_dechunk Yes
   mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
   mod_gzip_item_include handler ^cgi-script$
   mod_gzip_item_include mime ^text/.*
   mod_gzip_item_include mime ^application/x-javascript.*
   mod_gzip_item_exclude mime ^image/.*
   mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Этот код будет указывать серверу на необходимость сжимать часто используемые на сайте файлы и передавать из пользователю в сжатом виде.

Существует и еще один (и, наверное, не последний) вариант кода для размещения в файле .htaccess, предназначенный для включения компрессии Gzip (такой код мы используем на своем сайте):

# Compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
SetOutputFilter DEFLATE

После включения Gzip одним из перечисленных выше способов вы можете проверить степень сжатия страниц вашего сайта. Для этого пройдите по ссылке https://www.gidnetwork.com/tools/gzip-test.php и введите адрес сайта в поле «Web Page URL». Результат может быть примерно таким:

Обратите внимание на процент сжания — почти 74%. Согласитесь, это достаточно серьезное сокращение объема передаваемых данных.

Включите функцию «keep-alive»

Для отображения веб-страниц браузер должен постоянно закачивать определенные данные с веб-сервера. В первую очередь браузеру передается HTML-файл и дополнительные данные (CSS-файлы, изображения, скрипты). Если функция keep-alive не включена, для загрузки страницы может потребоваться много времени: для запроса каждого файла будет открыто свое сетевое соединение. В случае с включенной функцией keep-alive между браузером и сервером создается своего рода «разговор», действующий в рамках одного соединения.

По умолчанию параметр keep-alive включен, но могут возникать ситуации, когда ваш сайт, все же, не использует его или он отключен в параметрах вашего хостинга. Для включения keep-alive необходимо добавлять HTTP-заголовок в запросы при помощи все того же файла .htaccess:

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Если же у вас есть доступ к конфигурационному файлу Apache-сервера, включить keep-alive можно следующим способом:

# KeepAlive: Whether or not to allow persistent connections (more than
# one request per connection). Set to "Off" to deactivate.
KeepAlive On

# MaxKeepAliveRequests: The maximum number of requests to allow
# during a persistent connection. Set to 0 to allow an unlimited amount.
# We recommend you leave this number high, for maximum performance.
MaxKeepAliveRequests 100

# KeepAliveTimeout: Number of seconds to wait for the next request from the
# same client on the same connection.
KeepAliveTimeout 100

Заказать ускорение сайта
Прикрутим турболёт и исправим ошибки

Встраивайте небольшие фрагменты CSS

Для того, чтобы избежать загрузку лишних файлов с небольшими фрагментами CSS-стилей, необходимо встраивать эти фрагменты непосредственно в HTML-код страниц сайта. Загрузка одного HTML-файла с внедренным CSS происходит гораздо быстрее, чем загрузка двух файлов (HTML + CSS).

Для этого необходимо прописать стили в раздел <head></head> HTML-кода страницы следующим образом:

<style type="text/css">
...
</style>

У данного метода есть и плюсы, и минусы. К плюсам относится тот факт, что браузеру не приходится запрашивать и скачивать много файлов. С другой стороны — и это, несомненно, минус — CSS-стили, размещенные в HTML-файле, не кэшируются. А кэширование, как известно, также помогает браузеру не производить лишних операций чтения статичной информации, коей могут являться CSS-стили. Стили, размещенные в коде страниц сайта, загружаются каждый раз снова и снова при переходе от страницы к странице сайта. Это не имеет значения, если стили вашего web-сайта небольшие по объему. Но если CSS очень много, то тут, конечно, потребуется отделение стилей от исходного HTML-кода.

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

Встраивайте небольшие фрагменты JavaScript

Встраивание небольших фрагментов JS-кода, по аналогии со встраиванием CSS, также уменьшает количество обращений к серверу и положительно влияет на скорость загрузки сайта.

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

<script type="text/javascript">
...
</script>

Используйте кэширование

При отображении интернет-браузером какой-либо страницы сайта происходит загрузка кода, стилей, скриптов, изображений, логотипа и других ресурсов. При переходе посетителя от страницы к странице браузеру снова приходится подгружать необходимую ему информацию. Но в большинстве случаев делать это незачем: достаточно большая часть повторяющихся данных уже предварительно загружена от предыдущих страниц сайта. И для того, чтобы не приходилось снова и снова загружать одинаковую информацию (ту, которую браузер уже «помнит»), необходимо использовать кэширование.

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

Для того, чтобы включить кэширование, необходимо добавить следующий код в уже знакомый нам файл .htaccess:

<IfModule mod_expires.c>
ExpiresActive On
   ExpiresByType image/jpg "access 1 year"
   ExpiresByType image/jpeg "access 1 year"
   ExpiresByType image/gif "access 1 year"
   ExpiresByType image/png "access 1 year"
   ExpiresByType text/css "access 1 month"
   ExpiresByType text/html "access 1 month"
   ExpiresByType application/pdf "access 1 month"
   ExpiresByType text/x-javascript "access 1 month"
   ExpiresByType application/x-shockwave-flash "access 1 month"
   ExpiresByType image/x-icon "access 1 year"
   ExpiresDefault "access 1 month"
</IfModule>

Параметры access 1 year или access 1 month устанавливают время кэширования для выбранного типа данных. Вы можете настроить эти значения самостоятельно на свое усмотрение.

Альтернативный код для включения кэширования через файл .htaccess:

# Кэшировать html и htm файлы на 6 часов
<FilesMatch ".(html|htm)$">
Header set Cache-Control "max-age=21600"
</FilesMatch>

# Кэшировать css, javascript и текстовые файлы на одну неделю
<FilesMatch ".(js|css|txt)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>

# Кэшировать флэш и изображения на месяц
<FilesMatch ".(flv|swf|ico|gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

# Отключить кэширование для исполняемых файлов
<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>

Во втором примере время кэширования max-age задается в секундах.

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

Оптимально минимизированный код стилей CSS занимает меньше объема и как следствие — минимизирует скорость загрузки. При этом неважно, используете ли вы встроенные в HTML-код стили или в виде отдельных подключаемых файлов.

Объясним на примерах что означает термин «минимизация CSS».

«Обычный» CSS-код может выглядеть так:

body {
   background-color: #ff0000;
}

h1 {
   color: red;
   text-align: right;
}

Такой же, но минимизированный код выглядит следующим образом:

body{background-color:#ff0000;}
h1{color:red;text-align:right;}

И это еще не всё. Если подходить к минимизации совсем «сурово», то можно отказаться от переносов на новую строку (2 байта экономии на каждом переносе) и не добавлять точку с запятой в конце каждого стиля (1 байт экономии на каждой точке с запятой).

Уменьшая код таким образом, можно существенно сэкономить на его объеме и значительно выиграть в скорости загрузки страниц вашего сайта!

Заказать увеличение скорости
Ускорим сайт и исправим ошибки

Минимизируйте DNS-запросы

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

Одним из ярких примеров таких обращений могут служить кнопки социальных сетей (Одноклассники, ВКонтакте, Facebook, Twitter, Google+ и т.д.): при их формировании на вашем сайте происходят обращения к внешним сайтам. Другой пример — использование (подключение) Google Web Fonts. Каждый шрифт требует использование двух DNS-запросов.

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

Минимизируйте редиректы

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

Редиректы означают необходимость обращения к одному файлу при обращении к другому. И они осуществляются во многих направлениях. Пример — редирект 301 — постоянное перенаправление с одного адреса на другой. Это, наверное, один из наиболее часто встречающихся редиректов, который используется при перенаправлении сайта с www на сайт без www (или наоборот) для исключения дублирования индексации сайтов-зеркал.

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

При использовании редиректов придерживайтесь простых правил:

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

Оптимизируйте порядок вызова стилей и скриптов

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

Когда интернет-браузер загружает страницу, он читает HTML-код и начинает последовательно вызывать ресурсы, которые указаны в коде (CSS-стили, скрипты, изображения и т.д.). Когда браузер начинает загружать скрипт, он останавливает загрузку чего-либо еще до тех пор, пока скрипт не прочитан (загружен) полностью. Google утверждает, что типичная веб-страница проводит от 80 до 90 процентов времени в ожидании загрузки из сети. Чтобы минимизировать это время, необходимо просто правильно размещать вызовы ресурсов на страницах и придерживаться следующих правил:

• Объединяйте несколько внешних JavaScript-файлов в один;
• Подключайте внешний CSS-файл перед подключением внешнего JavaScript-файла;
• Не используйте внутренний JavaScript (в HTML-коде страницы) между вызовом внешнего CSS-файла и подключением других ресурсов.

Заказать оптимизацию сайта
Ускорим загрузку сайта и исправим ошибки

Используйте изображения правильных размеров

Очень часто на сайтах веб-мастера не задумываются о правильных размерах изображений: для отображения маленьких рисунков (миниатюр) часто используются большие изображения с принудительной установкой малых размеров через параметры width и height.

HTML, конечно, может отображать изображения любого указанного вами размера. Однако необходимо понимать, что в случае уменьшения большого изображения до миниатюры браузеру потребуется время для загрузки полного изображения. А это все — лишнее время. В обратном случае (принудительное увеличение малых изображений до больших размеров) заметно страдает качество.

Для правильного размещения изображений необходимо:

• Использовать изображения нужных размеров: при размещении на странице миниатюры следует использовать миниатюры изображений, для больших фотографий — изображения соответствующего размера;
• Указывать точные размеры изображений: в атрибутах width и height тэга <img> необходимо указывать точные изображения загружаемых картинок. В противном случае браузер может отобразить их в искаженном виде;
• Не пренебрегать атрибутами width и height: если вы не указываете эти параметры, при медленной загрузке информация на странице может «прыгать», браузер будет формировать страницу не один раз, а дважды или более раз (в зависимости от количества изображений на странице): сначала браузер прочитает и разместит текст без учета размера изображений, затем подгрузятся картинки, «вклинятся» в текст и переместят его по-другому. Если же вы заранее укажете браузеру на размеры изображений, он уже будет знать про отведенное для них место и ему не придется помногу раз перекраивать web-страницу.

Пример из личного опыта

Во время аудита одного из наших «подопечных» сайтов мы обнаружили ну просто гигантское изображение — размером 4049×2699 пикселей. На странице оно принудительно сжималась средствами браузера путем указания ей требуемых размеров. Исходное изображение (залито красным цветом), помимо огромного размера, занимало 5.74 МБ (6 026 239 байт) на хостинге. Оптимизированное изображение (залито зеленым цветом) размером 250×167 пикселей стало «весить» всего 10.5 КБ (10 805 байт). Уменьшение в 557(!) раз налицо:

Использование этих несложных правил позволит вашему сайту загружаться быстрее!

Используйте файл .htaccess

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

На всякий случай рекомендуется делать резервную копию этого файла перед его изменением!

.htaccess — это файл, размещаемый в корневой (и не только в корневой) папке вашего сайта, в нем указываются параметры работы сервера и сайта, которые обычно используются в конфигурационных файлах web-сервера. Редактируется этот файл при помощи обычного текстового редактора.

Информацию по работе с файлом .htaccess вы можете на соответствующих интернет-ресурсах.

По материалам сайта www.feedthebot.com

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

Одними из самых популярных сервисов для проверки скорости загрузки сайтов являются:

• Google PageSpeed Insights
• GTmetrix