Содержание
Сегодня я покажу простые методы, позволяющие ускорить загрузку вашего сайта.
Во-первых, нам нужно знать, что такое Preload, Preconnect и Prefetch.
Предварительная загрузка: когда мы используем предварительную загрузку в теге ссылки, он отправляет запрос на раннюю выборку для получения ресурса. В основном используется для получения ресурса с высоким приоритетом, который используется в текущем маршруте.
Предварительное подключение: разрешает квитирование DNS и TCP.
Предварительное подключение DNS: разрешает только DNS.
Предварительная выборка: помогает получить ресурс и поместить его в кеш всякий раз, когда
ресурсы должны взять его из кеша вместо того, чтобы делать еще один запрос.
Думаю, у вас может возникнуть сомнение, в чем разница между предварительной загрузкой и предварительной выборкой. предварительная загрузка используется для ресурсов с высоким приоритетом, а предварительная выборка используется для ресурсов с низким приоритетом.
Теперь посмотрим на живой пример сайта Vuejs.
По умолчанию веб-сайт vuejs не использует ничего из вышеперечисленного.
Давайте проверим производительность сайта vue в Интернете с помощью аудита Chrome.
Вы видели 43% производительности на моей машине?
После того, как я использую Preconnect и Preload.
Сейчас производительность 78%.
Вот пример, который вы можете проверить на собственном компьютере.
Теперь давайте посмотрим, какие популярные сайты используют эти вышеупомянутые подсказки по ресурсам.
Амазонка
Github
Netflix
Если у вас есть сомнения, не стесняйтесь спрашивать.
Другие мои интересные посты о производительности
✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst ? Подпишитесь на CodeBurst на Twitter , просмотрите ?️ Дорожная карта веб-разработчиков на 2018 год и ?️ Изучите веб-разработку с полным стеком .