Повышение производительности страниц

Повышение производительности страниц

21.12.2016

Задача быстрой загрузки страниц всегда стояла перед разработчиками - это важно во всех аспектах работ над сайтом. Быстрая загрузка страниц повышает конверсию, а поисковая система Google считает быструю загрузку страниц важным фактором ранжирования.

Важным улучшением является обновление функционала для тега link - появилась возможность предварительной загрузки контента страниц.

DNS

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

Теперь есть возможность заранее сообщить браузеру, что необходимо установить IP домена используя dns-prefetch. При стандартной работе браузера обработка подключения начинается в момент обнаружения скрипта, а при использовании dns-prefetch браузер заранее проверяет возможность подключения к стороннему сайту. Внешний вид директивы в коде:

<link rel="dns-prefetch" href="//highspeedsite.ru/">

Расширяем соединение

Возможности dns-prefetch позволяют просто установить куда подключиться, однако есть более широкие возможности. Используя preconnect можно по сути открыть соединение и приготовить все для загрузки контента. В качестве примера используем подключение к сервису Яндекс.Метрика:

<link rel="preconnect" href="//mc.yandex.ru/metrika/">

Важной особенностью является необходимость указывать более точнее расположение необходимых файлов.

Предварительная выборка

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

<link rel="prefetch" href="/podhod/">

Главная проблема данной технологии - поддержка в браузерах, скорее всего в ближайшее время данная технология будет внедрена. В настоящий момент это ничего не даст страницам.

Приоритетная загрузка

Используя preload можно загружать файлы и скрипты, которые будут использованы на данной странице - в момент отрисовки страницы ничего не блокируется и в целом все происходит как обычно. Самый очевидный пример - загрузка шрифтов:

<link rel="preload" href="/fonts/roboto.woff2" as="font">

В примере добавлен атрибут "as" - он информирует браузер о типе загружаемого ресурса.

Отрисовка "за кулисами"

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

<link rel="prerender" href="/landing-page/">

Все это является подсказками для браузера и итоговый процесс загрузки страниц он определяет самостоятельно основываясь на большом количестве факторов. Это точно не является "лекарством" от медленной загрузки сайта, однако поможет ускорить работу сайта на современных браузерах с хорошим интернет-соединением.