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

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

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

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

• 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:01 – Как preload влияет на показатели Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/

• 11:43 – Вопрос из зала о параметрах замера скорости: «Где можно почитать сколько процентов в калькуляции PageSpeed занимают параметры CLS/FCP/LCP? Вы где-то говорили, что CLS – 5%». Ссылка на калькулятор

• 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/

• 28:33 – Вопрос из зала: «prerender картинки тоже загружает?». Использовать prefetch или preload? – 29:50

• 28:55 – Рассказываем, когда предпочтительней внедрять prefetch/preconnect/prerender

• 29:50 – Вопрос из зала о Lighthouse 6.3: «Новый лайтхаус ругается на уязвимую/старую версию jquery. Знаю, нужно уходить от jquery, но не всё так просто. Значит, когда PageSpeed выкатит новую версию, то отнимутся баллы из-за уязвимого jquery?». Ссылка для замера скорости сайта https://lh.loading.expresshttps://lh.loading.express

• 31:29 – Вопрос зрителя о JQuery: «Какая версия jquery на данный момент самая оптимальная, чтобы не было уязвимостей и точно беспроблемно встала на любой проект?»

• 32:15 – О JQuery. Обновление WordPress 5.5

• 33:10 – Вопрос из зала: «prerender — не будет мешать аналитике\метрике?». Как проверить работу prerender – 34:30

• 34:13 – Вопрос зрителя: «Есть смысл использовать preconnect со счетчиками (например, лив интернетом), как советует лайтхаус?»

• 35:23 – Какой формат эфира вам нравится больше. Поделитесь со своим мнением!

• 36:22 – До следующего эфира!