Узнать, на сколько сторонний код увеличивает время загрузки страницы, можно при помощи сервиса PageSpeed Insights. Увеличить скорость загрузки сайта поможет удаление кода JavaScript и стилей CSS, неэффективно используемых социальных сетей.
Интересно определить, повышает ли увеличение скорости загрузки сайта позицию сайта в результатах поиска Google? Или как скорость загрузки сайта влияет на его посещаемость? На примере данного блога promotion.freewebmaster.info, хочу выяснить, какой код на сайте мешает ему загружаться. А загружается он не быстро, и с этим надо что-то делать.
Для начала, с помощью сервиса Google Search Console, зафиксирую, какую позицию в поиске, в среднем, занимает блог. Блог в сервис добавил недавно, поэтому данные только за три дня. И так, средняя позиция сайта - 29 и CTR - 4,9%. Напомню, что данные профиля доменного ресурса promotion.freewebmaster.info идентичны данным ресурсу с префиксом http://promotion.freewebmaster.info. Протокол https не использую, поэтому и страниц таких в индексации нет.
Как ускорить работу сайта? Есть в GSC такой раздел, как "Улучшения" и должен тестировать скорость загрузки сайта. На данный момент эта экспериментальная функция, по-видимому, не работает, так как сообщается, что "недостаточно данных по этому типу устройств", даже на давно добавленном ресурсе, со статистикой в несколько лет. Согласно информации отчет о скорости загрузки в справке, если вы видите сообщение "Нет данных", возможно, в отчете об удобстве использования браузера Chrome недостаточно таких данных о ресурсе.
Как ускорить работу сайта при помощи PageSpeed Insights? Вы можете протестировать сайт при помощи PageSpeed Insights. Введенный в поле URL блога без префикса протокола, после анализа меняется на http://promotion.freewebmaster.info/. По результатам видим, что скорость загрузки сайта "для компьютеров" находится в зеленой зоне, с результатов 97.
При тестировании была произведена имитация загрузки страницы с помощью инструмента Lighthouse, так как в отчете Chrome недостаточно данных о фактической скорости загрузки.
Скорость загрузки мобильного варианта блога находится в оранжевой зоне, с результатов 70, и оставляет желать лучшего.
Тестирование скорости загрузки отдельной страницы сайта при помощи PageSpeed Insights, тоже показало неудовлетворительный результат в оранжевой зоне, с результатом 64.
Показатель тестирования скорости загрузки страницы мобильного шаблона сайта при помощи PageSpeed Insights, вообще, оказался в красной зоне.
Показатель отказов. В справке GSC указывается, почему важна скорость загрузки сайта: низкая скорость загрузки веб-страниц сильно ухудшает показатель отказов.
Согласно справке Google Analytics, отказ – это сеанс с просмотром одной страницы на вашем сайте, например, если пользователь открыл одну страницу сайта и покинул его. Продолжительность сеанса с просмотром одной страницы всегда считается равной 0 секунд, поскольку после первого обращения ничего больше не происходит и система не может вычислить реальную продолжительность сеанса.
Высокий показатель отказов плох для сайтов, зайдя на которые нужно совершить определенные действия, но если у вас блог, то сеансы с просмотром одной страницы совершенно естественны и высокий показатель отказов не имеет значения. Однако, проанализировать общий высокий показатель отказов может быть полезным для конкретной страницы - вдруг у нее слишком низкая скорость загрузки.
Время загрузки для взаимодействия. В приведенном выше тесте страницы, в разделе имитации загрузки, время загрузки страницы для взаимодействия находится в красной зоне, с низким результатом в 5,3 сек. То есть, отрисовка контента уже произошла, текст появился, но некоторые виджеты не появились, например блок комментариев. Таким образом, страница не полностью готова к взаимодействию с пользователем. Подробнее о показателе.
Как оптимизировать код CSS или JavaScript? Увеличить скорость полной загрузки сайта, можно, удалив ненужный код CSS, JavaScript или отсрочив их исполнение. В разделе оптимизации, теста страницы, рекомендуется удалить неиспользуемый код CSS, что сэкономит 0,96 секунд.
Что бы удалить или отложить загрузку кода CSS, который не используется в верхней части страницы, для начала, надо его найти в шаблоне сайта. Так, сервис предлагает удалить, например, ссылку на внешний CSS ВКонтакте, размером в 354 KB.
https://vk.com/css/al/fonts_cnt.css?6906461068
На всякий случай протестировал страницу блога со встроенным в браузер VPN, так как соцсеть заблокирована провайдером, но результат был такой-же, что естественно, ведь тестирование проходит на сервере Google, а не в браузере.
Ранее, установил на сайт комментари ВКонтакте, и, вероятно, эти стили относятся к ним.
Как я понял, именно код JavaScript комментариев ВКонтакте содержит ссылку на внешний .css файл и подгружает соответствующие стили. Все изменения, сделанные во внешнем CSS файле, будут отражаться на вашем сайте.
В коде шаблона сайта, как и в исходном коде страницы, открытом с помощью меню вкладки инструментов браузера Firefox, я не нашел ссылки на внешний .css файл ВКонтакте. Список всех таких ссылок, удалось обнаружить, только с помощью инструмента "Инспектор" меню веб-разработки браузера. Слева от вкладки "Инспектор" надо нажать на иконку в виде стрелки в квадрате и навести курсор мыши на исследуемый элемент на странице. В моем случае исследуемым элементом был блок комментариев ВКонтакте.
Как видим из изображения, ссылки на внешний CSS файл помещаются в раздел <head> контейнера комментариев.
Думаю, не получится удалить ссылку на внешний .css файл без удаления скрипта комментариев в целом. В шаблоне, как и рекомендовано ВКонтакте, первая часть скрипта помещена в раздел <head>. При расположении первой части скрипта, непосредственно, пред второй, в месте отображения комментариев, показатель времени загрузки страницы для взаимодействия не улучшился. Обратите внимание, что код JavaScript исполняется, если элемент, с которому он обращается, уже появился на странице. При вставке первой части кода JavaScript после блока с формой комментариев DIV, комментарии не работают.
Тестирование скорости загрузки отдельной страницы сайта при помощи PageSpeed Insights, без кода комментариев ВКонтакте, показало немного лучший результат в оранжевой зоне - 79.
Комментарии ВКонтакте не эффективны для блогов подобной тематики и, как оказалось, увеличивают время загрузки сайта. По итогам тестирования, на данном этапе, решил закомментировать в шаблоне (сделать не рабочими) скрипты комментариев и кнопки ВКонтакте.
Интересно определить, повышает ли увеличение скорости загрузки сайта позицию сайта в результатах поиска Google? Или как скорость загрузки сайта влияет на его посещаемость? На примере данного блога promotion.freewebmaster.info, хочу выяснить, какой код на сайте мешает ему загружаться. А загружается он не быстро, и с этим надо что-то делать.
Для начала, с помощью сервиса Google Search Console, зафиксирую, какую позицию в поиске, в среднем, занимает блог. Блог в сервис добавил недавно, поэтому данные только за три дня. И так, средняя позиция сайта - 29 и CTR - 4,9%. Напомню, что данные профиля доменного ресурса promotion.freewebmaster.info идентичны данным ресурсу с префиксом http://promotion.freewebmaster.info. Протокол https не использую, поэтому и страниц таких в индексации нет.
Как ускорить работу сайта? Есть в GSC такой раздел, как "Улучшения" и должен тестировать скорость загрузки сайта. На данный момент эта экспериментальная функция, по-видимому, не работает, так как сообщается, что "недостаточно данных по этому типу устройств", даже на давно добавленном ресурсе, со статистикой в несколько лет. Согласно информации отчет о скорости загрузки в справке, если вы видите сообщение "Нет данных", возможно, в отчете об удобстве использования браузера Chrome недостаточно таких данных о ресурсе.
Как ускорить работу сайта при помощи PageSpeed Insights? Вы можете протестировать сайт при помощи PageSpeed Insights. Введенный в поле URL блога без префикса протокола, после анализа меняется на http://promotion.freewebmaster.info/. По результатам видим, что скорость загрузки сайта "для компьютеров" находится в зеленой зоне, с результатов 97.
При тестировании была произведена имитация загрузки страницы с помощью инструмента Lighthouse, так как в отчете Chrome недостаточно данных о фактической скорости загрузки.
Скорость загрузки мобильного варианта блога находится в оранжевой зоне, с результатов 70, и оставляет желать лучшего.
Тестирование скорости загрузки отдельной страницы сайта при помощи PageSpeed Insights, тоже показало неудовлетворительный результат в оранжевой зоне, с результатом 64.
Показатель тестирования скорости загрузки страницы мобильного шаблона сайта при помощи PageSpeed Insights, вообще, оказался в красной зоне.
Показатель отказов. В справке GSC указывается, почему важна скорость загрузки сайта: низкая скорость загрузки веб-страниц сильно ухудшает показатель отказов.
Согласно справке Google Analytics, отказ – это сеанс с просмотром одной страницы на вашем сайте, например, если пользователь открыл одну страницу сайта и покинул его. Продолжительность сеанса с просмотром одной страницы всегда считается равной 0 секунд, поскольку после первого обращения ничего больше не происходит и система не может вычислить реальную продолжительность сеанса.
Высокий показатель отказов плох для сайтов, зайдя на которые нужно совершить определенные действия, но если у вас блог, то сеансы с просмотром одной страницы совершенно естественны и высокий показатель отказов не имеет значения. Однако, проанализировать общий высокий показатель отказов может быть полезным для конкретной страницы - вдруг у нее слишком низкая скорость загрузки.
Время загрузки для взаимодействия. В приведенном выше тесте страницы, в разделе имитации загрузки, время загрузки страницы для взаимодействия находится в красной зоне, с низким результатом в 5,3 сек. То есть, отрисовка контента уже произошла, текст появился, но некоторые виджеты не появились, например блок комментариев. Таким образом, страница не полностью готова к взаимодействию с пользователем. Подробнее о показателе.
Как оптимизировать код CSS или JavaScript? Увеличить скорость полной загрузки сайта, можно, удалив ненужный код CSS, JavaScript или отсрочив их исполнение. В разделе оптимизации, теста страницы, рекомендуется удалить неиспользуемый код CSS, что сэкономит 0,96 секунд.
Что бы удалить или отложить загрузку кода CSS, который не используется в верхней части страницы, для начала, надо его найти в шаблоне сайта. Так, сервис предлагает удалить, например, ссылку на внешний CSS ВКонтакте, размером в 354 KB.
https://vk.com/css/al/fonts_cnt.css?6906461068
На всякий случай протестировал страницу блога со встроенным в браузер VPN, так как соцсеть заблокирована провайдером, но результат был такой-же, что естественно, ведь тестирование проходит на сервере Google, а не в браузере.
Ранее, установил на сайт комментари ВКонтакте, и, вероятно, эти стили относятся к ним.
Как я понял, именно код JavaScript комментариев ВКонтакте содержит ссылку на внешний .css файл и подгружает соответствующие стили. Все изменения, сделанные во внешнем CSS файле, будут отражаться на вашем сайте.
В коде шаблона сайта, как и в исходном коде страницы, открытом с помощью меню вкладки инструментов браузера Firefox, я не нашел ссылки на внешний .css файл ВКонтакте. Список всех таких ссылок, удалось обнаружить, только с помощью инструмента "Инспектор" меню веб-разработки браузера. Слева от вкладки "Инспектор" надо нажать на иконку в виде стрелки в квадрате и навести курсор мыши на исследуемый элемент на странице. В моем случае исследуемым элементом был блок комментариев ВКонтакте.
Как видим из изображения, ссылки на внешний CSS файл помещаются в раздел <head> контейнера комментариев.
Думаю, не получится удалить ссылку на внешний .css файл без удаления скрипта комментариев в целом. В шаблоне, как и рекомендовано ВКонтакте, первая часть скрипта помещена в раздел <head>. При расположении первой части скрипта, непосредственно, пред второй, в месте отображения комментариев, показатель времени загрузки страницы для взаимодействия не улучшился. Обратите внимание, что код JavaScript исполняется, если элемент, с которому он обращается, уже появился на странице. При вставке первой части кода JavaScript после блока с формой комментариев DIV, комментарии не работают.
Тестирование скорости загрузки отдельной страницы сайта при помощи PageSpeed Insights, без кода комментариев ВКонтакте, показало немного лучший результат в оранжевой зоне - 79.
Комментарии ВКонтакте не эффективны для блогов подобной тематики и, как оказалось, увеличивают время загрузки сайта. По итогам тестирования, на данном этапе, решил закомментировать в шаблоне (сделать не рабочими) скрипты комментариев и кнопки ВКонтакте.
Комментариев нет:
Отправить комментарий