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

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

Разработчик из 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
14:25 30 января 2020
"При переходах по ссылкам адреса страниц изменяется." при переходе на сайт с внешних источников или внутри сайта? Как именно изменяется?
Дмитрий Угниченко
17:20 31 января 2020
Ссылки изменяются в адресной строке при переходах по ссылкам внутри сайта.
sam_ty92
14:10 3 февраля 2020
на сайте, который вы приводите в качестве примера ("Да. Например, данный метод применяется на сайте philipwalton.com.") внутренние ссылки никак специфически не изменяются. есть какой-то конкретный пример или более подробные объяснения?
cross-fire
14:46 30 января 2020
Так объяснили, что можно было и со статьей не напрягаться.
Дмитрий Угниченко
17:20 31 января 2020
Смотрите, внедрение и написание кода сайта не является задачей поискового оптимизатора, так?
Поисковому оптимизатору следует понимать технологию в целом и понимать как проанализировать результат.
Информация подана в таком ключе.
petergriffinsell
15:01 30 января 2020
Сжатие увеличило скорость этого сайта в 3 раза!
serg61612
00:47 31 января 2020
Мой тоже
kaa
15:05 30 января 2020
Уточните, на данном ресурсе можно увеличить скорость загрузки?
x-shock
17:46 30 января 2020
Можно, у вас там большое кол-во скриптов. И тяжелые картинки. Напишите, x-shock@ yandex .r u
klondayknet
15:18 30 января 2020
Попробовали данный метод на двух сайтах и на первом действительно стали открываться страницы в полтора раза быстрее, на втором разницу не заметил, тоже самое и page speed insights показывает.
sobolev
15:18 30 января 2020
есть смысл использовать этот метод, будет эффект?
kontent.alma4
15:38 30 января 2020
попробуем внедрить на своем сайте спасибо за статью
ro.file.ru
15:42 30 января 2020
Результат +50%
sergey.psrf
15:42 30 января 2020
«При переходах по ссылкам адреса страниц изменяется» — Хотелось бы узнать подробнее об изменении адресов. Будет другой домен? Другой протокол? Метки?
Дмитрий Угниченко
14:29 1 февраля 2020
Адреса страницы изменяется как при обычных переходах ссылкам на сайту.
rybkin.v
15:51 30 января 2020
имеет смысл использовать на сайте
a-opt
15:53 30 января 2020
Попробую внедрить на интернет-магазине
nataliya84i
16:01 30 января 2020
Хочу протестировать
Спасибо за ценный материал
sanya.bazhenoff2015
16:06 30 января 2020
Ценная информация! Попробую на сайте
bagau1192
16:09 30 января 2020
Сделали
Стало заметно лучше, хотя шаблон по сам по себе громоздкий.
seo.blacktyres
16:16 30 января 2020
На какие типы страниц можно это сделать?
szbmsk
16:25 30 января 2020
Спасибо, попробуем на своем
registr123
16:31 30 января 2020
Вот же ж спамеры, они такие спамеры :))) Попробуете вы, ага. Попробуете поспамить в комментариях только
serjiogreat
16:32 30 января 2020
Пробовали. Не скажу, что результат есть, скорее незначительные подвижки
e.sinelnikov
16:52 30 января 2020
Подскажу вебмастеру пусть попробует на его. Вдруг у него выгорит и сайт будет как молния
prajenik
17:03 30 января 2020
странно ни на https://needsysadmin.ru ни на https://winservers.ru не дало результатов.. видимо несовместимость идет с плагинами и CMS основной для данных сайтов..
korniyko
17:04 30 января 2020
Одного не пойму, нафиг они спамят своими сайтами если ссылки закрыты. Лучше б книгу какую умную почитали )
rshabunya
17:21 30 января 2020
Гугл такие ссылки тоже индексирует, после рендеринга. Вот и спамят))
igorlevashov89
17:27 30 января 2020
Я бы тоже "поспамил" бы ссылками в комментах, но не буду. Мой ресурс ещё раскрученнее мегаиндекса, так что смысла в лишних телодвижениях нет.
brodjagaseti
17:38 30 января 2020
один спам) а не комментарии.
webapteka
18:06 30 января 2020
СЕО ))) Старое доброе СЕО.
Дмитрий Угниченко
14:32 1 февраля 2020
Поисковая оптимизаторы - целевая аудитория сайта)
x-shock
17:49 30 января 2020
Лол)) вот тебе и прооптимизировали – сделали ускорение за счет качественной структурной и серверной оптимизацией.
PageSpeed для мобильных - 78, для ПК - 99
webapteka
18:05 30 января 2020
Если смысл использовать на сайте который на платном тарифе от КлаудФларе? В мое случаи это https://www.careprost.ru
algoritm.sev
18:21 30 января 2020
Попробовали прокачать , особа прироста не видно
farshmac
18:45 30 января 2020
Подойдет ли для https://mos-camin.ru/
info
19:57 30 января 2020
Скорость сайта - https://flaris.ru/ по гугл спид высокий, поможет ли технология?
info
19:58 30 января 2020
Запрос страницы - https://mskroll.ru/rolstavni/ то в 10-ке, то в 100-ке, подозреваю из-за скорости работы сайта.
aleksandr.zaravin
20:32 30 января 2020
Для этого подойдет? https://astroalhimija.ru/
alexprofit8
20:41 30 января 2020
Если сайт-каталог на InstantCMS, данный метод позволит повысить скорость загрузки страниц? Пример сайта: http://www.vinterere.ru
archosaur2
20:46 30 января 2020
Помойка продам фен шишки надежные заклады
d.m.n.mix
21:25 30 января 2020
А если сайт на вордпрессе, и установлены плагины SG Optimizer и AMP for WP. я имею ввиду в них нет этой технологии?
candrey1984
22:27 30 января 2020
Пробуем на сайте https://svitmebliv2018.com.ua Ждемс результата
chippik2012
22:57 30 января 2020
Пожалуй, и мы попробуем на сайте https://utilizatsiya24.ru/. Благодарю за статью!
slake
23:10 30 января 2020
Помогите настроить для сайта http://clubferrum.ru Поможет ускорить загрузку?
svengali4
23:26 30 января 2020
Разве получится ещё разогнать https://optimakomp.ru/ ?
anna.nowak.doc
00:03 31 января 2020
Ребята, постоянные ошибки в текстах. Имейте уважение к читателям - корректируйте тексты! "Важный нюанс для SEO. При переходах по ссылкам адреса страниц изменяется." - изменяЮтся - это множественное число. А от слова "данный" рябит в глазах.
pitergir83
03:55 31 января 2020
Имеет ли смысл разгонять небольшой сайт
alternadvads
05:15 31 января 2020
Ладно, уговорили https://alternadv.com/
info
05:27 31 января 2020
Возможно, для https://zdorovenki.com.ua это действительно даст здоровый эффект. После внедрения, обязательно поделюсь информацией
tania0804
07:02 31 января 2020
Применив сервис-воркеры сайт ms-74.ru стал лучше индексироваться. Спасибо за информацию.
solovej7
08:17 31 января 2020
Сколько стоит и кто сделает перевод сайта на эту технологию https://uznayki.ru ?
ladut
08:40 31 января 2020
а на http://nporadonit.ru/ стоит ли?
anthoni1
09:26 31 января 2020
Хорошая статья, надо попробовать
aleksey.nomel
10:29 31 января 2020
Попробуем на https://doctor-gadgets.ru/ , и я туда же )
semantikafor
11:45 31 января 2020
Как думаете на http://balkon-v-omske.ru/ и http://дм-пром.рф будет работать?
shajhutdinov
11:55 31 января 2020
Скажите, если сайт работает через CDN сервер, эффект усилится, или наоборот? Мой сайт - https://salshow.kiev.ua/ построен на Wordpress
brutalromantic
15:12 31 января 2020
Подскажите подойдёт ли этот метод для интернет-магазинов? Какие могут быть проблемы и как их решать.
0897650
15:32 31 января 2020
попробую https://kuxnidmitrov.ru
admin
15:47 31 января 2020
забавно, пошел думать как прикрутить здесь: https://my-present.ru
Of-law
15:48 31 января 2020
Вопрос а как быть с игровым сайтом https://myflashgames.ru/ у которого загрузка идет на пралаксе? Загружает доп контент при пролистывании вниз? На ПК 98% скорость на Мобильных 88% по Гугл пейдж.
euroffer
16:28 31 января 2020
Понаставили тут ссылок)) Ребята я с вами 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
16:37 31 января 2020
Кто скажет поможет ли для интернет магазина https://www.imagebag.ru или поможет внедрить
aao
17:14 31 января 2020
Подскажите, на скорость этого сайта, https://avand-pro.ru/ данный метод повлияет? Можно как-то спрогнозировать?
bestmedmarket
20:30 31 января 2020
Подскажите подойдёт ли этот метод для сайтов интернет-магазинов? Например вот этого - https://bestmedmarket.com/shop/ , или этого - http://spbsidelki.ru/ . Какие могут быть проблемы и как их решать?
kornalexandr2
10:14 3 февраля 2020
мда... для новостников, наверное, большого смысла нет. например на сайтах https://nahabino.site/ или https://natoke.ru/ из общих частей только шапка и подвал, которые итак мало весят и быстро грузятся. весь остальной контент не попадет сюда. так что даже пробовать пока не буду
moder_chat_xuk
19:34 3 февраля 2020
А как данный метод можно применить для чата "Глобус"? http://mychatik.ru
Очень бы хотелось ускорить его загрузку и работу.
roman
12:19 4 февраля 2020
Мне тоже интересно как это сработает в интернет магазине. У меня есть магазин, который в принципе грузится и так достаточно шустро - https://floexpress.ru/ По google page speed дает 86. Имеет смысл прикладывать усилия?
vsud.spb.1
21:50 4 февраля 2020
Может ли это помочь мне на сайте у нас справочник организаций и есть много тяжелых страниц.
SEOquick SEOquick
18:08 6 февраля 2020
Если сайт тяжёлый и убрать с него всю «красоту» никак нельзя, используйте прогресс-бар. Он убирает фактор неопределённости, поэтому люди могут ждать загрузки в несколько раз дольше. Это компромиссный способ – проблему не решит, но поможет сократить число отказов.
vkusnie.den
11:56 7 февраля 2020
Кто сможет настроить для интернет магазина https://ofstk.ru и есть ли в этом смысл напишите на admin@ofstk.ru
greyson
13:47 10 февраля 2020
Сколько стоит и кто сделает перевод сайта на эту технологию https://sacralknowledge.info ?
devidbogdanov
22:34 24 февраля 2020
Добрый день Гуру. Я только учусь и мало вероятно, что в ближайшее время постигну данную науку. Мой сайт 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
12:42 25 февраля 2020
Реализовал фичу на своем сайте https://art-stomatology.odessa.ua/ в разы шустрее заработал!
aweda82
15:09 5 марта 2020
Обязательно потестирую. Раньше сайт https://shop-tepla.ru/ имел очень высокие результаты, всегда в зелёной зоне по данным гугл. После обновления алгоритма оценки скорости, показали сползли вниз в жёлтую
Для добавления комментария, пожалуйста, авторизуйтесь