Как повысить производительность в Интернете с помощью (Preload, Preconnect, Prefetch)

Сегодня я покажу простые методы, позволяющие ускорить загрузку вашего сайта.

Во-первых, нам нужно знать, что такое Preload, Preconnect и Prefetch.

Предварительная загрузка: когда мы используем предварительную загрузку в теге ссылки, он отправляет запрос на раннюю выборку для получения ресурса. В основном используется для получения ресурса с высоким приоритетом, который используется в текущем маршруте.

Предварительное подключение: разрешает квитирование DNS и TCP.

Предварительное подключение DNS: разрешает только DNS.

Предварительная выборка: помогает получить ресурс и поместить его в кеш всякий раз, когда
ресурсы должны взять его из кеша вместо того, чтобы делать еще один запрос.

Думаю, у вас может возникнуть сомнение, в чем разница между предварительной загрузкой и предварительной выборкой. предварительная загрузка используется для ресурсов с высоким приоритетом, а предварительная выборка используется для ресурсов с низким приоритетом.

Теперь посмотрим на живой пример сайта Vuejs.

По умолчанию веб-сайт vuejs не использует ничего из вышеперечисленного.

Давайте проверим производительность сайта vue в Интернете с помощью аудита Chrome.

Вы видели 43% производительности на моей машине?

После того, как я использую Preconnect и Preload.

Сейчас производительность 78%.

Вот пример, который вы можете проверить на собственном компьютере.

Теперь давайте посмотрим, какие популярные сайты используют эти вышеупомянутые подсказки по ресурсам.

Амазонка

Github

Netflix

Если у вас есть сомнения, не стесняйтесь спрашивать.

Другие мои интересные посты о производительности

Как работает браузер

✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst ? Подпишитесь на CodeBurst на Twitter , просмотрите ?️ Дорожная карта веб-разработчиков на 2018 год и ?️ Изучите веб-разработку с полным стеком .

См. также:  Вы должны узнать, что реально, а что подделано!
Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: