Рубрики
Live

100: настройка HTTP/2 + Server Push, что такое пушить шрифты и стили

Нас часто спрашивают «Что такое пушить шрифты или стили»? Технология HTTP/2 Server Push не новая, но её мало кто использует, потому что мало кто знает про это подробности.

В этом эфире мы показали, замерили и объяснили, что это за оптимизация такая и дали всё необходимое, чтобы разобраться.

Замерьте скорость вашего сайта и смотрите видео:

100: Как настроить HTTP/2 + Server Push, что значит пушить шрифты/стили
Сервер пуш технология во всех подробностях

Временные метки для видео:

  • 0:00 – Сегодня в эфире: о HTTP/2 + Server Push, как он влияет на скорость загрузки сайта, визуальная демонстрация работы и в конце делимся готовыми скриптами
  • 5:43 – Первые вопросы из зала: «TLS 1.3 + HTTP3 — есть ли смысл уже внедрять?»
  • 7:13 – Вопрос зрителя: «​У PageSpeed снова сменился алгоритм? В последнюю неделю он стал видеть скрипты, которые были отложены на 5.5 сек (VK, Яндекс Директ) БЕЗ использования ‘scroll’ в таймауте»
  • 7:57 – Об обновлениях Google PageSpeed Insights. Испытайте новейшую версию Lighthouse 6.1.1 на LOADING.express при проверке скорости загрузки своего сайта https://lh.loading.express/
  • 9:50 – Демонстрация презентации. Что такое HTTP/2 + Server Push или как происходит обмен данных между сервером и клиентом
  • 12:06 — Разница HTTP/2 с привычным HTTP/1. Насколько широко применим новый протокол обмена данных
  • 14:50 — Пошаговый разбор системы работы технологии HTTP/2, об альтернативных решениях подробно: 17:58
  • 16:37 — Вопрос из зала о push-notification: «Каким плагином заблочить пуш в Chrome и Mozilla?», объясняем разницу в значениях «пуш»
  • 17:42 — Комментарий из зала: «Выяснили, что пушить — делать пушистым, очень просто и не спутаешь»
  • 19:18 — Оптимальное использование кэш браузера
  • 20:32 — Как HTTP/2 push влияет на скорость загрузки сайта, сравнительный анализ с альтернативными решениями
  • 23:23 — Показатели DOMContentLoaded Time (параметр оценки времени полной загрузки страницы) на примерах HTTP/1 и HTTP/2
  • 24:11 — Вопрос из зала: «Что мешает скорости? На новый протокол перееду. Там только html. Это Joomla. Хост менять?»
  • 24:50 — Значения Page Load Time параметра демонстративно на диаграмме
  • 27:10 — Вопрос зрителя: «​Крутящийся прелоадер — чем является по метрике?»
  • 27:50 — Типичные ошибки при повторном запросе контента. Как их избежать или найти решение
  • 29:41 — Чем больше информации, тем медленнее сайт или как регулировать HTTP/2 + Server Push
  • 33:05 — Вопрос от зрителя о кэшировании: «Вот, сайт обновляется каждый час. А данные нужны прямо сейчас, допустим цены»
  • 34:26 — Вопрос из зала о сохраненных данных: «Local storage?»
  • 35:13 — Вопрос от зрителя: «На новый PHP 7.4 стоит переходить?»
  • 36:14 — Вопрос от зрителей о прошлом эфире: «​В предложенном вами коде для Adsense не используется setTimeout. При применении setTimeout блок не будет выводиться?«. Получить скрипт для Google AdSense по ссылке https://pay.loading.express/ob/ord/advertisement
  • 37:50 — Продолжение вопроса: «Если использовать link rel= “preload” для Адсенса, то при чистом КЭШе не появляется реклама. Она появится если перезагрузить страницу. У Вас такого не было?». Эфир об отложке рекламы https://www.youtube.com/watch?v=_lBZf2BbJAY
  • 38:32 — Вопрос о PHP последней версии: «При смене php может что-то необратимо сломаться, что даже при возврате на прежнюю версию останутся баги?»
  • 39:20 — Preload или как сообщить HTTP/2 + Server Push для загрузки только необходимых данных
  • 40:42 — Разбор PHP кода готового скрипта, подробнее — 45:24
  • 41:44 — О минимальных требованиях к сайту для использования HTTP/2
  • 42:44 — Риски использования незащищенного соединения без SSL (Secure Sockets Layer — протокол шифрования)
  • 48:18 — Как проверить работу Push скрипта
  • 49:02 — Советы по выбору правильного хостинг провайдера
  • 49:26 — Немного о HTTP/3 с использованием TCP/IP и UDP/IP (оба протоколы передачи данных)
  • 50:46 — Вопрос из зала о скрипте: «А как проверить, выполняется оно или нет?»
  • 51:33 — Демонстрация на Dev Tools (инструмент разработчика в Google Chrome) проверки Push
  • 54:55 — Важный вопрос из зала: «А куда вставлять этот код?»
  • 57:04 — Совет для правильного использования технологии HTTP/2 + Server Push
  • 57:43 — В каких случаях Brotli и GZip сжатие могут замедлить скорость сайта
  • 59:29 — Вопрос из зала: «Какой уровень сжатия рекомендуете GZip?», подробный ответ — 1:00:30
  • 1:00:50 — Итоги 100-ого эфира: скрипт для HTTP заголовок Preload, понятие HTTP/2 и его плюсы и минусы
  • 1:03:26 — Вопрос зрителя: «Можете на глазах у изумленной публики показать как-нибудь пример борьбы с корнем всея зла: js-long_task?»
  • 1:04:06 — Подробный ответ о Service Worker API: «Разбить (на какие куски, по сколько кб может), запуск в нужное свободное время (как определяется, что уже пора), service-worker?»
  • 1:06:45 — Интерактивная и наглядная загрузка, для анализа скорости отправки файлов сайта на примерах HTTP/1 и HTTP/2 + Server Push, подробнее 1:08:03
  • 1:07:15 — Продолжение вопроса 1:03:26 «Допустим, бесконечно грузится сайт как у вас reqidle никогда не наступит?»
  • 1:14:35 — Вопрос из зала: «Тестировать надо в идеальной среде, отключить wp плагины, wifi или 3g и влияние время ответа сервера?»
  • 1:16:16 — Почему оценка в LOADING.express отличается от времени реальной загрузки сайта клиента в браузере?
  • 1:18:16 — Предложение от зрителя: «Парни вам надо свой продукт пилить, простенький но свой) самую быструю тему на wp например. Из серии :«Просто заткнись и возьми мои деньги« я б купил)». Немного об предстоящих новостях
  • 1:21:51 — Вопрос из зала: «Московские студии часто заказывают вашу услугу? Много ли критики приходят?»
  • 1:24:37 — Вопрос: «У вас получается ускорить сайты на wpbakery? Или чаще советуете переделать сайт с нуля?»
  • 1:27:07 — Вопрос: «Сайты на тильде сама тильда не блочит за превышение допустимой нагрузки»

Автор: Алексей

Маркетолог в loading.express