В этом эфире мы постарались коротко и ясно рассказать, что такое 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 – До следующего эфира!