Новый способ: Как ускорить загрузку сайта и улучшить поведенческие факторы?
30 января 2020
Автор: User

Новый способ: Как ускорить загрузку сайта и улучшить поведенческие факторы?

Разработчик из Google опубликовал пример использования сервис-воркеров для ускорения загрузки страниц.

Как внедрить данный метод на продвигаемых сайтах?

Какие будут результаты?

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

Метод был протестирован на практике. Результаты после внедрения являются убедительны.

Разберемся с вопросом далее.

Сервис-воркеры для ускорения сайта


Какая проблема решается и каким способом? При передаче данных от сервера к клиенту пересылается вся HTML-страница. В большинстве случаев на сайтах есть различные повторяющиеся элементы.

Такая передача данных выглядит неидеальной.

Загрузка страниц сайта без сервис-воркеров

Например, в секции head из уникальных элементов есть такие:

  • Schema;
  • Мета-теги;
  • Title.

Большая часть всех прочих элементов не изменяется. К таким элементам относятся preload, prefetch, код javascript и иные пакеты.

На разных больших сайтах доля таких элементов на странице исчисляется мегабайтами.

Service workers позволяют кешировать данные на странице

Загрузка таких данных ведет к следующим негативным сценариям:

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

Есть смысл такие элементы повторно не загружать.

Как так сделать? Например, ускорить страницы сайта используя сервис-воркеры. Суть метода заключается в объединении многократно используемых фрагментов на сайте с обновляемым контентом страницы.

Зафиксируем. Сервис-воркер может запросить с сервера только необходимый минимум данных, а затем провести компоновку элементов в итоговый документ.

Такими данными могут быть как текст, файлы, так и данные в формате JavaScript Object Notation.

Систему управления следует настроить так, чтобы на сайте для каждой из страниц генерировались две версии. Первая версия генерируется для всех клиентов, у которых не поддерживаются сервис-воркеры или выключен javascript. Для данной группы ничего не меняется, все как и раньше. Никаких изменений.

Скрипт для проверки:

if (!('serviceWorker' in navigator)) {
  // нельзя использовать
  return
}

Вторая версии страниц генерируется для клиентов, у которых включены сервис-воркеры. Следует разбить контент на такие части:

  • Начальный фрагмент страницы сайта. /shell-start.html;
  • Часть с уникальным контентом. /<page-slug>/index.content.html;
  • Завершение страницы /shell-end.html.

Сервис-воркер может изменять ресурс. Суть в следующем:

  • При первом открытии сайта блоки shell-start и shell-end кешируются;
  • Далее при переходе по страницам сервис-воркер ходит за >уникальным контентом и объединяет контент с shell-start и shell-end.

Кеширование части страницы с применением сервис-воркера

Важный нюанс для SEO. При переходах по ссылкам адреса страниц изменяются.

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

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

В результате браузер на лету получает мета-данные, CSS для построения структуры и так далее. В параллельном потоке проходит извлечение обновляемых данных из сервера.

Увеличение скорости загрузки страниц сайта с применением сервис-воркеров

Вопросы и ответы


Тестировался ли данный метод на практике?


Да. Исходя из тестирования данного метода на практике, в ряде случаев удалось повысить скорость загрузки страниц в разы.

Результаты следующие:

  • Нагрузка снижена на 47.6%;
  • Первые элементы на страницы стали отрисовываться на 52.3% быстрее.

Метрика характеризующая скорость отрисовки первых элементов на сайте называется first contentful paint. Сравнение по метрике first contentful paint в формате с сервис-воркером и без.

Результаты по ускорению сайта с использованием кеширования и сервис-воркеров

Если закешировать полностью весь head, как в таком случае изменить текст в Title?


Следует отдавать шаблоны с контейнерами, в которые прокидывать требуемые данные.

<script>document.title = '{{ page.title }}'</script>

В каких случаях данный способ является наиболее эффективен?


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

Есть ли примеры?


Да. Например, данный метод применяется на сайте philipwalton.com.

Какие минусы у сервис-воркеров?


У сервис-воркеров есть время на разогрев, измеряемое в миллисекундах.

Выводы


Существует разные способы по оптимизации скорости загрузки сайтов.

Сервис-воркеры позволяют решить спектр разных задач. Как пример, скрывать от поисковых систем контент на странице:

  • Текст;
  • Часть страницы;
  • Ссылки.

Рекомендованный материал в блоге MegaIndex по теме скрытия части контента по ссылке далее — Как скрыть от поисковых систем часть контента на странице (текст, часть страницы, ссылки)? И зачем?

Еще на практике сервис-воркеры применяются для проверки клиента на предмет поддержки разных форматов, чтобы затем отправлять с сервера графику не в формате png, а в webp.

А еще использование сервис-воркеров позволяет повысить скорость загрузки страниц сайта.

Способ заключается в создании прокси, который применяется для реализации следующих задач:

  • Загрузка лишь изменяемой части контента на странице;
  • Кеширование контента, который не изменяется.

Данный подход ускорения загрузки сайта является новым и нестандартным.

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

  • В значимой мере увеличить скорость загрузки страниц сайта;
  • Минимизировать объем передаваемого трафика.

Увеличение скорости загрузки страниц приводит к оптимизации поведенческих факторов ранжирования.

Рекомендованный материалы в блоге MegaIndex на тему оптимизации поведенческих факторов сайта далее — Белые способы влияния на кликовые поведенческие факторы в поисковой выдаче.

В результате минимизации объема передаваемого трафика между клиентом и сервером:

  • Уменьшается нагрузка на мобильные устройства. Меньше расходуется батарейка мобильного устройства;
  • Уменьшается нагрузка на сервер сайта.

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

Анализ сниппетов

Ряд поисковых оптимизаторов и вебов внедрили сервис-воркеры после прочтения предыдущей статьи на тему скрытия контента. Крайне рад таким результатам.

Как поисковый оптимизатор, вы можете поставить перед разработчиками задачу по внедрению service workers, чтобы значительного сократить объем данных, которые пользователи запрашивают с вашего сервера. Как следствие, улучшить метрики рендеринга и загрузки страниц. В результате улучшить поведенческие факторы. Пример реализации на GitHub.

Остались ли у вас вопросы, замечания или комментарии по теме увеличения скорости загрузки страниц сайта? Пишите вопросы и мнения в комментариях.

Обсуждение

sam_ty92
"При переходах по ссылкам адреса страниц изменяется." при переходе на сайт с внешних источников или внутри сайта? Как именно изменяется?
User
Ссылки изменяются в адресной строке при переходах по ссылкам внутри сайта.
sam_ty92
на сайте, который вы приводите в качестве примера ("Да. Например, данный метод применяется на сайте philipwalton.com.") внутренние ссылки никак специфически не изменяются. есть какой-то конкретный пример или более подробные объяснения?
cross-fire
Так объяснили, что можно было и со статьей не напрягаться.
User
Смотрите, внедрение и написание кода сайта не является задачей поискового оптимизатора, так?
Поисковому оптимизатору следует понимать технологию в целом и понимать как проанализировать результат.
Информация подана в таком ключе.
petergriffinsell
Сжатие увеличило скорость этого сайта в 3 раза!
serg61612
Мой тоже
kaa
Уточните, на данном ресурсе можно увеличить скорость загрузки?
x-shock
Можно, у вас там большое кол-во скриптов. И тяжелые картинки. Напишите, x-shock@ yandex .r u
klondayknet
Попробовали данный метод на двух сайтах и на первом действительно стали открываться страницы в полтора раза быстрее, на втором разницу не заметил, тоже самое и page speed insights показывает.
sobolev
есть смысл использовать этот метод, будет эффект?
kontent.alma4
попробуем внедрить на своем сайте спасибо за статью
ro.file.ru
Результат +50%
sergey.psrf
«При переходах по ссылкам адреса страниц изменяется» — Хотелось бы узнать подробнее об изменении адресов. Будет другой домен? Другой протокол? Метки?
User
Адреса страницы изменяется как при обычных переходах ссылкам на сайту.
rybkin.v
имеет смысл использовать на сайте
a-opt
Попробую внедрить на интернет-магазине
nataliya84i
Хочу протестировать
Спасибо за ценный материал
sanya.bazhenoff2015
Ценная информация! Попробую на сайте
bagau1192
Сделали
Стало заметно лучше, хотя шаблон по сам по себе громоздкий.
seo.blacktyres
На какие типы страниц можно это сделать?
szbmsk
Спасибо, попробуем на своем
registr123
Вот же ж спамеры, они такие спамеры :))) Попробуете вы, ага. Попробуете поспамить в комментариях только
serjiogreat
Пробовали. Не скажу, что результат есть, скорее незначительные подвижки
e.sinelnikov
Подскажу вебмастеру пусть попробует на его. Вдруг у него выгорит и сайт будет как молния
prajenik
странно ни на https://needsysadmin.ru ни на https://winservers.ru не дало результатов.. видимо несовместимость идет с плагинами и CMS основной для данных сайтов..
korniyko
Одного не пойму, нафиг они спамят своими сайтами если ссылки закрыты. Лучше б книгу какую умную почитали )
rshabunya
Гугл такие ссылки тоже индексирует, после рендеринга. Вот и спамят))
igorlevashov89
Я бы тоже "поспамил" бы ссылками в комментах, но не буду. Мой ресурс ещё раскрученнее мегаиндекса, так что смысла в лишних телодвижениях нет.
brodjagaseti
один спам) а не комментарии.
webapteka
СЕО ))) Старое доброе СЕО.
User
Поисковая оптимизаторы - целевая аудитория сайта)
x-shock
Лол)) вот тебе и прооптимизировали – сделали ускорение за счет качественной структурной и серверной оптимизацией.
PageSpeed для мобильных - 78, для ПК - 99
webapteka
Если смысл использовать на сайте который на платном тарифе от КлаудФларе? В мое случаи это https://www.careprost.ru
algoritm.sev
Попробовали прокачать , особа прироста не видно
farshmac
Подойдет ли для https://mos-camin.ru/
info
Скорость сайта - https://flaris.ru/ по гугл спид высокий, поможет ли технология?
info
Запрос страницы - https://mskroll.ru/rolstavni/ то в 10-ке, то в 100-ке, подозреваю из-за скорости работы сайта.
aleksandr.zaravin
Для этого подойдет? https://astroalhimija.ru/
alexprofit8
Если сайт-каталог на InstantCMS, данный метод позволит повысить скорость загрузки страниц? Пример сайта: http://www.vinterere.ru
archosaur2
Помойка продам фен шишки надежные заклады
d.m.n.mix
А если сайт на вордпрессе, и установлены плагины SG Optimizer и AMP for WP. я имею ввиду в них нет этой технологии?
candrey1984
Пробуем на сайте https://svitmebliv2018.com.ua Ждемс результата
chippik2012
Пожалуй, и мы попробуем на сайте https://utilizatsiya24.ru/. Благодарю за статью!
slake
Помогите настроить для сайта http://clubferrum.ru Поможет ускорить загрузку?
svengali4
Разве получится ещё разогнать https://optimakomp.ru/ ?
anna.nowak.doc
Ребята, постоянные ошибки в текстах. Имейте уважение к читателям - корректируйте тексты! "Важный нюанс для SEO. При переходах по ссылкам адреса страниц изменяется." - изменяЮтся - это множественное число. А от слова "данный" рябит в глазах.
pitergir83
Имеет ли смысл разгонять небольшой сайт
alternadvads
Ладно, уговорили https://alternadv.com/
info
Возможно, для https://zdorovenki.com.ua это действительно даст здоровый эффект. После внедрения, обязательно поделюсь информацией
tania0804
Применив сервис-воркеры сайт ms-74.ru стал лучше индексироваться. Спасибо за информацию.
solovej7
Сколько стоит и кто сделает перевод сайта на эту технологию https://uznayki.ru ?
ladut
а на http://nporadonit.ru/ стоит ли?
anthoni1
Хорошая статья, надо попробовать
aleksey.nomel
Попробуем на https://doctor-gadgets.ru/ , и я туда же )
semantikafor
Как думаете на http://balkon-v-omske.ru/ и http://дм-пром.рф будет работать?
shajhutdinov
Скажите, если сайт работает через CDN сервер, эффект усилится, или наоборот? Мой сайт - https://salshow.kiev.ua/ построен на Wordpress
brutalromantic
Подскажите подойдёт ли этот метод для интернет-магазинов? Какие могут быть проблемы и как их решать.
0897650
попробую https://kuxnidmitrov.ru
admin
забавно, пошел думать как прикрутить здесь: https://my-present.ru
Of-law
Вопрос а как быть с игровым сайтом https://myflashgames.ru/ у которого загрузка идет на пралаксе? Загружает доп контент при пролистывании вниз? На ПК 98% скорость на Мобильных 88% по Гугл пейдж.
euroffer
Понаставили тут ссылок)) Ребята я с вами https://asngear.biz
По поводу service worker. Это актуально для тех кто использует http 1 +, а вот те кто пользуется http2 и имеет service push, не рекомендую его использовать т.к он понижает протокол с h2 до h1.1. Можете сами это проверить через dev tool в chrome во вкладке network - protocol. ну либо почитать тут https://stackoverflow.com/questions/54513933/requests-served-from-serviceworker-are-downgraded-from-http-2-to-http-1-1
hilys
Кто скажет поможет ли для интернет магазина https://www.imagebag.ru или поможет внедрить
aao
Подскажите, на скорость этого сайта, https://avand-pro.ru/ данный метод повлияет? Можно как-то спрогнозировать?
bestmedmarket
Подскажите подойдёт ли этот метод для сайтов интернет-магазинов? Например вот этого - https://bestmedmarket.com/shop/ , или этого - http://spbsidelki.ru/ . Какие могут быть проблемы и как их решать?
kornalexandr2
мда... для новостников, наверное, большого смысла нет. например на сайтах https://nahabino.site/ или https://natoke.ru/ из общих частей только шапка и подвал, которые итак мало весят и быстро грузятся. весь остальной контент не попадет сюда. так что даже пробовать пока не буду
moder_chat_xuk
А как данный метод можно применить для чата "Глобус"? http://mychatik.ru
Очень бы хотелось ускорить его загрузку и работу.
roman
Мне тоже интересно как это сработает в интернет магазине. У меня есть магазин, который в принципе грузится и так достаточно шустро - https://floexpress.ru/ По google page speed дает 86. Имеет смысл прикладывать усилия?
vsud.spb.1
Может ли это помочь мне на сайте у нас справочник организаций и есть много тяжелых страниц.
SEOquick SEOquick
Если сайт тяжёлый и убрать с него всю «красоту» никак нельзя, используйте прогресс-бар. Он убирает фактор неопределённости, поэтому люди могут ждать загрузки в несколько раз дольше. Это компромиссный способ – проблему не решит, но поможет сократить число отказов.
vkusnie.den
Кто сможет настроить для интернет магазина https://ofstk.ru и есть ли в этом смысл напишите на admin@ofstk.ru
greyson
Сколько стоит и кто сделает перевод сайта на эту технологию https://sacralknowledge.info ?
devidbogdanov
Добрый день Гуру. Я только учусь и мало вероятно, что в ближайшее время постигну данную науку. Мой сайт https://bankimfo.ru/ он состоит на 60% из фотоконтента, смотрю на результаты и рекомендации волосы встают дыбом, всё красное.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbankimfo.ru%2F&tab=desktop&hl=ru&authuser=1
Может кто знает, где ознакомиться с пошаговым внедрением данной технологии, желательно с наглядными примерами действий.
Всем спасибо Всем Успехов!
bobyr.vladimir
Реализовал фичу на своем сайте https://art-stomatology.odessa.ua/ в разы шустрее заработал!
aweda82
Обязательно потестирую. Раньше сайт https://shop-tepla.ru/ имел очень высокие результаты, всегда в зелёной зоне по данным гугл. После обновления алгоритма оценки скорости, показали сползли вниз в жёлтую
bagau1192
На нашем сайте minikuhonka.ru не такая высокая скорость как хотелось бы. Кто знает, с чего начать и как внедрить этот код правильно?
bagau1192
На нашем сайте https://minikuhonka.ru не такая высокая скорость как хотелось бы. Кто знает, с чего начать и как внедрить этот код правильно?
Для добавления комментария, пожалуйста, авторизуйтесь