Как повысить скорость загрузки страницы сайта.


В процессе разработки несложного сайта на Bootstrap 4, скорость загрузки самой тяжелой страницы (~2.5 мегабайта) была на достаточно хорошем уровне:

Загрузка страницы сайта. Вкладка Network браузера Хром
Загрузка страницы сайта. Вкладка Network браузера Хром

Ничто не предвещало проблем. Измерение скорости загрузки сайта для мобильных устройств на известном сервисе PageSpeeds Insight от Гугля …
… показало отличные результаты для недорогого хостинга, на котором сайт размещается:

Скорость загрузки страницы без скриптов аналитики
Оценка скорости загрузки страницы без скриптов Яндекс.Метрика и Google Аналитика

Но пришло время вставить в страницы коды Яндекс.Метрики и Google Analytics и «что-то пошло не так»:

Потери в скорости загрузки от 10-ти строчек кода скриптов составили 11%! Определенную погрешность вносит {мгновенная} нагрузка на сервер хостера в дата-центре, но все же этот оранжевый «недокруг», он так бесит…

Мне нравится оранжевый! Это же цвет солнца и апельсинов! В чем дело?»

А дело вот в чем. Поисковые системы…

  • учитывают скорость загрузки страниц при их ранжировании в выдаче,
  • медленная загрузка для коммерческих сайтов — это потеря выручки от посетителей (где-то даже оценили цену каждой последующей секунды после первых 4-х в тысячах долларов в месяц).

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

Что произошло и как быть с низкой скоростью загрузки страницы?

Поисковые системы Яндекс и Google в рекомендациях для вебмастеров советуют размещать коды своих скриптов аналитики как можно ближе к открывающему тегу <head>. Собственно, большинство вебмастеров так и поступает. Где-то встречалось обоснование, мол так посещение страницы будет зарегистрировано даже если пользователь не дождался загрузки страницы до конца…

Но далее рекомендации по оптимизации загрузки советуют отложить выполнение некритических скриптов страницы «на потом» при помощи

  • атрибута async у тега <script>,
  • размещения скриптов в коде страницы ближе к ее окончанию.

Явное противоречие, если мы имеем ввиду скрипты Яндекс.Метрики или Google Analytics…

Как же быть? Относить ли скрипты аналитики к критическим? Где их место на самом деле?

На помощь приходит здравый смысл. Если пользователь не дождался загрузки контента, то имеет место ситуации:

  1. страница ему не интересна или/и
  2. у вас проблема с длительной загрузкой контента.

Будет ли в сводке аналитики показатель отказов 87.35% (точно измеренный скриптом вначале кода страницы) или скажем 83% (приближенное значение без учета пользователей-«торопыг» или «нетерпеливых») — очевидно что на странице существует проблема.

Решение проблемы (1) выходит за рамки этой статьи. Проблему (2) легко диагностировать и устранить на этапе разработки страницы и больше к ней не возвращаться.

Так стоит ли знание показателя отказов с высокой точностью потери потенциальных «очков» которые поисковик «снимет» за медленную страницу?

Я полагаю что нет. В моем случае я ставлю на скорость и возвращаю 8% из потерянных 11% вот таким образом…

Скорость загрузки сайта. Ускоряем просто.

Экспериментальным путем было определено что атрибут “async” для тега <script>, когда дело касается скриптов аналитики, не приводит к какому либо заметному увеличению скорости загрузки страницы. Более ощутимый результат — успокаивающую «зелень» — приносит правильное место расположение скриптов.

Скрипты аналитики в конце файла. Оценка Page Insight
Оценка скорости загрузки страницы со скриптами Яндекс.Метрика и Google Аналитика в конце секции <body>

Если вы хотите повысить скорость загрузки сайта, то есть смысл разместить скрипты аналитики ближе концу файла т.е. закрывающему тегу </body>, после всего контента:

код скриптов аналитики после кода контента
Размещение кода Яндекс.Метрика и Google Аналитика перед закрывающим тегом </body>

В моем случае установка скриптов аналитики подобным образом стоила мне всего лишь 3% оценки скорости Google PageSpeeds Insight.

PS: Дополнительные пару процентов к оценке можно выиграть если использовать на странице только один инструмент для анализа посещаемости. Яндекс.Метрика показала себя более «тяжелой» как в выполнении своей задачи сбора статистики так и в плане загрузки самой себя в браузер. Вот, например, браузер ждет (и не дожидается) какую-то картинку advert.gif почти четверть секунды…

загрузка advert.gif скриптом Yandex.Metrica
Зачем нам загружать эту гифку!?


Оставить комментарий к статье

"Как повысить скорость загрузки страницы сайта."


Спасибо всем нашим читателям!