07 марта 2020

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

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

Узнать, на сколько сторонний код увеличивает время загрузки страницы, можно при помощи сервиса PageSpeed Insights. Увеличить скорость загрузки сайта поможет удаление кода JavaScript и стилей CSS, неэффективно используемых социальных сетей.

Интересно определить, повышает ли увеличение скорости загрузки сайта позицию сайта в результатах поиска Google? Или как скорость загрузки сайта влияет на его посещаемость? На примере данного блога promotion.freewebmaster.info, хочу выяснить, какой код на сайте мешает ему загружаться. А загружается он не быстро, и с этим надо что-то делать.

Для начала, с помощью сервиса Google Search Console, зафиксирую, какую позицию в поиске, в среднем, занимает блог. Блог в сервис добавил недавно, поэтому данные только за три дня. И так, средняя позиция сайта - 29 и CTR - 4,9%. Напомню, что данные профиля доменного ресурса promotion.freewebmaster.info идентичны данным ресурсу с префиксом http://promotion.freewebmaster.info. Протокол https не использую, поэтому и страниц таких в индексации нет.

Как узнать статистику переходов с поиска Google?

Как ускорить работу сайта? Есть в GSC такой раздел, как "Улучшения" и должен тестировать скорость загрузки сайта. На данный момент эта экспериментальная функция, по-видимому, не работает, так как сообщается, что "недостаточно данных по этому типу устройств", даже на давно добавленном ресурсе, со статистикой в несколько лет. Согласно информации отчет о скорости загрузки в справке, если вы видите сообщение "Нет данных", возможно, в отчете об удобстве использования браузера Chrome недостаточно таких данных о ресурсе.

Как ускорить работу сайта при помощи PageSpeed Insights? Вы можете протестировать сайт при помощи PageSpeed Insights. Введенный в поле URL блога без префикса протокола, после анализа меняется на http://promotion.freewebmaster.info/. По результатам видим, что скорость загрузки сайта "для компьютеров" находится в зеленой зоне, с результатов 97.

Как ускорить работу сайта при помощи PageSpeed Insights?

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

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

Тестирование скорости загрузки мобильного шаблона сайта при помощи PageSpeed Insights

Тестирование скорости загрузки отдельной страницы сайта при помощи PageSpeed Insights, тоже показало неудовлетворительный результат в оранжевой зоне, с результатом 64.

Тестирование скорости загрузки страницы сайта при помощи PageSpeed Insights

Показатель тестирования скорости загрузки страницы мобильного шаблона сайта при помощи PageSpeed Insights, вообще, оказался в красной зоне.

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

Скорость загрузки веб-страниц и показатель отказов

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

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

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

Как оптимизировать код CSS или JavaScript? Увеличить скорость полной загрузки сайта, можно, удалив ненужный код CSS, JavaScript или отсрочив их исполнение. В разделе оптимизации, теста страницы, рекомендуется удалить неиспользуемый код CSS, что сэкономит 0,96 секунд.

Как оптимизировать код CSS или JavaScript?

Что бы удалить или отложить загрузку кода CSS, который не используется в верхней части страницы, для начала, надо его найти в шаблоне сайта. Так, сервис предлагает удалить, например, ссылку на внешний CSS ВКонтакте, размером в 354 KB.

https://vk.com/css/al/fonts_cnt.css?6906461068

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

Ранее, установил на сайт комментари ВКонтакте, и, вероятно, эти стили относятся к ним.

Код JavaScript комментариев ВКонтакте

Как я понял, именно код JavaScript комментариев ВКонтакте содержит ссылку на внешний .css файл и подгружает соответствующие стили. Все изменения, сделанные во внешнем CSS файле, будут отражаться на вашем сайте.

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

Как видим из изображения, ссылки на внешний CSS файл помещаются в раздел <head> контейнера комментариев.

Код JavaScript комментариев ВКонтакте

Думаю, не получится удалить ссылку на внешний .css файл без удаления скрипта комментариев в целом. В шаблоне, как и рекомендовано ВКонтакте, первая часть скрипта помещена в раздел <head>. При расположении первой части скрипта, непосредственно, пред второй, в месте отображения комментариев, показатель времени загрузки страницы для взаимодействия не улучшился. Обратите внимание, что код JavaScript исполняется, если элемент, с которому он обращается, уже появился на странице. При вставке первой части кода JavaScript после блока с формой комментариев DIV, комментарии не работают.

Тестирование скорости загрузки отдельной страницы сайта при помощи PageSpeed Insights, без кода комментариев ВКонтакте, показало немного лучший результат в оранжевой зоне - 79.

Тестирование скорости загрузки страницы сайта при помощи PageSpeed Insights

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


Комментариев нет:

Отправка комментария