Рубрики
Live

112: Всё про DNS-prefetch, preconnect, prefetch, preload, prerender

В этом эфире мы постарались коротко и ясно рассказать, что такое DNS-prefetch, preconnect, prefetch, preload, prerender и когда это нужно использовать, а когда это может быть вредно для скорости загрузки сайта.

Проверяйте скорость сайта из Санкт-Петербурга:

112: Всё про DNS-prefetch, preconnect, prefetch, preload, prerender
Watch this video on YouTube.
38 минут, ролик размечен тайм-кодами, для удобства просмотра

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

  • 0:00 – Обратный отсчет
  • 2:09 – Всем привет в 112-ый раз! Сегодня расскажем о dns-prefetch, preconnect, prefetch, preload, prerender
  • 2:52 – О том, когда стоит использовать тег link rel и к чему приводит их чрезмерное использование
  • 4:32 – Для каких ресурсов используют тег link rel=»prefetch»
  • 6:34 – Может ли prefetch замедлить загрузку сайта
  • 7:25 – Как и где прописывать <link rel = “prefetch” href = “https://loading.express”>
  • 9:18 – Preload загружает ресурсы с первостепенным приоритетом
  • 10:13 – Что означает as= “style”
  • 11:43 – Вопрос из зала о параметрах замера скорости: «Где можно почитать сколько процентов в калькуляции PageSpeed занимают параметры CLS/FCP/LCP? Вы где-то говорили, что CLS – 5%». Ссылка на калькулятор https://googlechrome.github.io/lighthouse/scorecalc
  • 12:50 – Вопрос зрителя о preload: «Использовал preload для загрузки SVG-лого (8 кб) для первого экрана. И стало хуже — отнимает 4 балла (в среднем после 7 замеров). Аналогичная история, если маленький CSS первого экрана через preload». О сервисе для сжатия svg формата SVGO – 14:03 (https://jakearchibald.github.io/svgomg/)
  • 14:43 – Вопрос про загрузку от зрителя: «Как-то бы напрямую задавать приоритеты: low, high и прочее»
  • 15:52 – Что такое dns-prefetch: <link rel = “dns-prefetch” href = “https://loading.express”>
  • 16:59 – Как готовится сервер к соединению со сторонним доменом
  • 18:04 – Вопрос из зала: «Чем dns-prefetch отличается от prefetch»
  • 19:41 – preconnect для установления соединения: <link rel = “preconnect” href = “https://loading.express”>
  • 20:37 – Почему для preload не используются сторонние домены
  • 21:03 – prerender заключает в себе уже свойства preload и preconnect. <link rel = “prerender” href = “https://loading.express”>
  • 22:40 – Пример использования prerender
  • 24:47 – Почему «предзагрузка» не замедляет сайт, принцип загрузки страницы с тегом link rel
  • 25:10 – Не все браузеры поддерживают prefecth/preconnect/preload/prerender. Проверить браузер на их поддержку через сервис https://caniuse.com/
  • 26:18 – Свойства css заменяют тяжелый код js. Говорим о position: sticky
  • 27:33 – Нативная поддержка браузера в приоритете. Чтобы добавить поддержку браузером css свойств используйте – Polyfill https://polyfill.io/v3/
  • 28:33 – Вопрос из зала: «prerender картинки тоже загружает?». Использовать prefetch или preload? – 29:50
  • 28:55 – Рассказываем, когда предпочтительней внедрять prefetch/preconnect/prerender
  • 29:50 – Вопрос из зала о Lighthouse 6.3: «Новый лайтхаус ругается на уязвимую/старую версию jquery. Знаю, нужно уходить от jquery, но не всё так просто. Значит, когда PageSpeed выкатит новую версию, то отнимутся баллы из-за уязвимого jquery?». Ссылка для замера скорости сайта https://lh6.loading.express/
  • 31:29 – Вопрос зрителя о JQuery: «Какая версия jquery на данный момент самая оптимальная, чтобы не было уязвимостей и точно беспроблемно встала на любой проект?»
  • 32:15 – О JQuery. Обновление WordPress 5.5
  • 33:10 – Вопрос из зала: «prerender — не будет мешать аналитике\метрике?». Как проверить работу prerender – 34:30
  • 34:13 – Вопрос зрителя: «Есть смысл использовать preconnect со счетчиками (например, лив интернетом), как советует лайтхаус?»
  • 35:23 – Какой формат эфира вам нравится больше. Поделитесь со своим мнением!

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

Маркетолог в ax.digital и в loading.express. Трехкратный отец.