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

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

Итак, чем быстрее будет грузиться ваш сайт — тем больше посетителей вы привлечете. Но как проверить эту скорость?

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

Для проверки скорости загрузки сайта существует множество онлайн-сервисов. О них можно почитать в статье Кто быстрее? 6+ инструментов для проверки скорости загрузки сайта. Но я хочу выделить только два, которыми пользуюсь сам: это сервисы поисковых систем Google и Яндекс.

Google: PageSpeed Insights

онлайн-сервис от Google

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

Яндекс: Проверка ответа сервиса

Второй сервис — это простой счетчик от Яндекса, который дает четкое понимание того, какова скорость загрузки сайта со стороны российского поисковика.

Находится он в Яндекс.Вебмастере под пунктом «Проверить ответ сервера» на странице «Мои сайты». Важно: проверить можно только те сайты, по которым подтверждено право собственности в Яндекс.Вебмастере.

Яндекс Вебмастер. Проверка кода ответа сервера.

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

Как увеличить скорость сайта

Иногда достаточно сменить хостинг на более дорогой, чтобы скорость загрузки сайта возросла. Или движок. Как известно, многие сайты построены на популярных CMS — WordPress, Joomla, Drupal, DLE, а эти движки сами по себе могут нагружать сервер даже без дизайна и других примочек. Но давайте разберем общие моменты, которые справедливы для всех движков.

1. Используйте Gzip-сжатие

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

Чтобы определить, включено ли сжатие для вашего сайта, обратите внимание на заголовок в ответе сервера Content-Encoding: gzip

Проверить ответ сервера можно с помощью того же Яндекс.Вебмастера или с помощью сервиса http://bertal.ru/.

2. Уменьшите количество HTTP-запросов

Большую часть времени браузер затрачивает на загрузку различных компонентов веб-страницы: таблиц стилей, Java-скриптов, изображений и т.п. По спецификации HTTP/1.1 большинство браузеров параллельно загружают не более двух элементов.

Для более быстрой загрузки можно использовать несколько способов:

  • объединение нескольких HTML и CSS-файлов в один;
  • использование CSS-спрайтов;
  • минимизация количества картинок и объединение их в один файл;
  • использование поддоменов для загрузки скриптов и изображений;
  • использование CDN-сервисов.

3. Помещайте CSS-файлы в начало страницы, а javascript — в конец

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

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

4. Минимизируйте CSS и javascript

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

5. Асинхронная загрузка JavaScript

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

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

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

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

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

Выводы: как я уже сказал, скорость загрузки сайта влияет на ранжирование в поисковых системах и непосредственно на конверсию сайта. На тему зависимости конверсии от скорости сайта есть отдельная презентация, а в этой статье мы рассмотрели только основные способы оптимизации скорости сайта. Таких методов может быть очень много — они индивидуальны для каждого сайта. Пользуйтесь подсказками от Google PageSpeed Insights и других онлайн-сервисов, показывающих последовательность загрузки элементов сайта.

Также читайте рекомендации Google для веб-мастеров. Шустрых вам сайтов, друзья!