0

Как увеличить скорость загрузки сайта (оптимизация)

Опубликовано 6 июня 2016 в рубрике SEO. . Автор: seouspeh

Яндекс и Google начали еще более трепетно относится к такому параметру, как скорость загрузки сайта. Если сайт еле грузится, то и место ему в последних рядах, а если шустрый — то может претендовать и на ТОП 5-10.

Так как же увеличить скорость загрузки сайта или оптимизировать ее для поисковых машин Гугл и Яндекс  — рассмотрим в этой статье…

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

Изначально давайте отметим понятие — полное время загрузки сайта — то есть это общее время, которое необходимо на все про все: соединение с сервером+отклик от сервера+загрузка всех файлов страницы сайта: картинки, стили и html содержимое. Рассмотрим поближе слагаемые:

  1. Время отклика сервера сайта — это промежуток времени, в течение которого сервер вернул вашему браузеру 1 байт (TTFB — time to first byte — это один из важнейших показателей)
  2. TTFB — первый байт полученный от сайта — является одним из факторов ранжирования — поэтому стоит ему уделить особое внимание. Современные движки (их большая часть) построены на php, а в этом случае сначала происходит соединение с базой данных и после интерпретации уже начинается процесс передачи TTFB. Поэтому тут важна конфигурация сервера, код вашей CMS — насколько он профессионально написан и удаленность человека, который ввел запрос в поисковик от сервера. Главнейший показатель — конфигурация сервера сайта, если все с этим плохо — то здесь мы встречаем понятие «тормознутый хостинг» — в народе. Профессионализм везде рулит! Отсюда и вытекает рейтинг хостингов — они также соревнуются по своим показателям.
  3. Далее идет время на загрузку файлов и их обработку — если вы например, сделали Landing Page на каком то Adobe конструкторе — то время загрузки будет больше, потому что там столько этого кода, что можно уже и самому научиться писать и даже мыслить на чистом html5. Также неоптимизированные картинки будут грузиться дольше, а в районах, где слабенький интернет — люди просто не дождутся загрузки вашего сайта — кто ж будет по полминуты или пару минут ждать?)
  4. Время до рендеринга страницы — это промежуток времени до начала отображения страницы, то есть до того как белый экран начинает сменять содержимое страницы сайта.

Как влияет скорость загрузки сайта на позиции в Яндекс и Google

Официально только Google сообщил об этом в 2010 году, Яндекс же только намекает — что, мол, выбирайте хостинг с прицелом на бесперебойную работу. Если будут постоянно технические работы и люди не будут получать доступ к вашему сайту, то ясно, что Яндекс вынужден будет понизить ваш сайт в выдаче, в принципе, так они делает, особенно это касается сайтов, которые получают трафик с Yandex в больших количествах. Например от 10-20 уников в день на запрос, то есть по какому то запросу сайт находится в первой десятке и, если все эти клики день или пару дней не будут находить отклик на вашем сайте, то снижение позиций очень вероятно!!!

Посмотрите на статистику (сообщает Яндекс):

  • страница грузиться более 10 секунд — 38% пользователей покидают сайт;
  • на мобилках еще строже: 74% пользователей покидают сайт, если не увидят его отображение уже в течением 5 секунд.

Что можно сделать для улучшения времени загрузки сайта

  1. оптимизировать движок сайта (особенно, если он самопоисный);
  2. оптимизировать картинки на сайте
  3. подключить CDN хостинг на SSD

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

Экспериментально доказано, что улучшение времени загрузки сайта на 100 мс увеличивает конверсию на 1%.

Показатели близкие к идеалу или реальности

  1. TTFB — до 300мс (Google рекомендует до 200 мс);
  2. время загрузки — 3-5с;
  3. время рендеринга до 1,5-2сек.

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

Ну что ж, теперь можно и перейти к практике:

Как узнать скорость загрузки сайта?

Скоростные характеристики вы можете узнать с помощью webpagetest.org — и, если все с этим плохо, то бейте тревогу! Надо что-то с этим делать! И причем срочно!

Рассмотрим пример:

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

  1. First view
  2. Repeat view

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

Ниже вы увидите диаграмму Ганта (она выявит все самые глубокие проблемы вашего сайта):

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

Также мы видим? Горизонтальные и вертикальные линии.

Основная расшифровка горизонтальных линий (по цвету):

  • поиск DNS — начинается с этого.
  • TCP-подключение — идет инициализация подключения;
  • время получения первого байта
  • загрузка контента

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

Основная расшифровка вертикальных линий (по цвету):

  • зеленая — начало рендеринга — белый экран начинает превращаться в сайт;
  • синяя — основные элементы страницы загружены

Что можно сделать для оптимизации скорости загрузки сайта

  1. во-первых, понять, а тот ли сервер вы выбрали, может он все делает долго? То есть встает вопрос о смене хостинга.
  2. Закрыть доступ ненужным разведчикам и паукам, типа ahrefs, linkpad, megaindex и других. Часто они могут нагружать сервер.
  3. Использовать CDN (ContentDeliveryNetwork) — это возможность распределять статические элементы сайта (CSS, скрипты JS, изображения и видео) через различные серверы мира. То есть, часто можно заметить, что jquery распространяется через cdn. То есть, если я в Нью-Йорке, то мне его отдаст ближайший сервер, тем самым уменьшая время на загрузку. Помимо сокращения времени загрузки — в связи с уменьшением расстояния, также уменьшается и нагрузка на ваш сервер.

Если много оранжевого по горизонтали — это значит ваш сервер не использует постоянное http соединение.

Если много синего по горизонтали — то это значит, ваши файлы много весят, часто это могут быть «тяжелые» картинки — оптимизируйте ваши изображения. Также можно сжать css и js файлы.

Рекомендовать к прочтению другом?


Еще интересное:



Комментирование закрыто.