Использование rel=»preconnect» для повышения производительности

Использование rel=»preconnect» для повышения производительности

Эта диаграмма прекрасно иллюстрирует процесс:

Использование rel=»preconnect» для повышения производительности

Несколько лет назад Робин проделал отличную работу, чтобы собрать информацию обо всех подобных вещах. Похоже, лучшая практика сейчас — использовать эти два:

Использование rel=»preconnect» для повышения производительности

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

<link rel=»preconnect» href=»http://example.com»>
<link rel=»dns-prefetch» href=»http://example.com»>

12 <link rel=»preconnect» href=»http://example.com»><link rel=»dns-prefetch» href=»http://example.com»>

Для всех доменов, которые не являются основным доменом, с которого вы загружаете документ. Беглый взгляд на ресурсы CSS-Tricks прямо сейчас дает:

secure.gravatar.com
static.codepen.io
res.cloudinary.com
ad.doubleclick.com
s3.buysellads.com
srv.buysellads.com
www.google-analytics.com

1234567 secure.gravatar.comstatic.codepen.iores.cloudinary.comad.doubleclick.coms3.buysellads.comsrv.buysellads.comwww.google-analytics.com

Это будет 14 дополнительных тегов в первых нескольких пакетах данных при каждом запросе на этом сайте. Звучит как однозначное преимущество, но я бы хотел проверить это, прежде чем приступить к делу.

Энди Дэвис провел недавно несколько экспериментов:

Использование rel=»preconnect» для повышения производительности

Этот материал заставляет меня думать о Instant.page (который только что вышел в версии 2 ), он представляет собой небольшой причудливый скрипт, который предварительно загружает вещи, основанные на взаимодействиях. Теперь это расширение браузера (FasterChrome), которое я пробовал. Не могу сказать, что замечаю огромную разницу, но я почти всегда работаю на быстрых интернет-соединениях.

Автор: Chris Coyier

Просмотров:

Добавить комментарий