Как ускорить сайт с помощью тега

"Предвидя«Браузеры - это будущее высокоскоростного интернет-серфинга, принося нам ресурсы, которые мы хотим даже прежде чем мы узнаем, что мы хотим их. Сегодняшние браузеры уже делать немного прогнозы то и дело ускорять выборку и рендеринг документов. Чтобы перейти к следующему шагу, мы смотрим не на кого, кроме веб-разработчиков.

Разработчики имеют довольно хорошая идея из как их сайты перемещаются, и который ресурсы запрашиваются чаще всего и, таким образом, они могут предсказать некоторые будущие операции, которые браузеры должны выполнить для сайтов. Все, что нужно сейчас, это чтобы разработчики нашли способ передать эти прогнозы в браузеры а также использовать их с пользой. Это где некоторые специальные «ссылки HTML» приходят.

Обновление HTTP-запросов

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

Вот что происходит дальше:

1. Джо печатает по-человечески запоминающийся адрес сайта в адресной строке браузера и нажимает «Enter».
2. Как только он получил этот адрес, браузер запрашивает у DNS-сервера (комплименты ISP) IP-адрес, указанный Джо..
3. DNS-сервер обязывает.
4. Теперь, когда браузер знает IP-адрес, он отправляет сообщение (на диалекте TCP) на сервер веб-сайта с просьбой о соединении.
5. Если сервер жив и исправен, он отправляет ответ, подтверждающий запрос браузера, а браузер отвечает и подтверждает сообщение сервера. (ЗаметкаДа, это крайне разветвленная версия TCP-рукопожатия между клиентом и сервером.)
6. Когда рукопожатия закончились, между двумя.
7. Теперь браузер меняет свой стиль диалекта на HTTP и запрашивает у сервера сайт.
8. Сервер, зная домашнюю страницу веб-сайта, возвращает только то, что получено браузером и показано Джо, который очень терпеливо ждет перед компьютером.

Типичный HTTP-запрос проходит все чтобы (и не только) получить документ через интернет. Так что если какой-либо из этих процессов может быть запущен, когда это возможно, мы можем сократить время ожидания доставки нужных нам ресурсов.

Связи HTML-ссылок

W3C определяет 4 отношения HTML-ссылки (отн для отношений) по имени ДНС для упреждающей, preconnect, упреждающей, а также PreRender. Вместе они называются (W3C) "Ресурс Подсказки". Теперь посмотрим что они могут сделать а также где они могут быть использованы.

1. DNS Prefetch

В DNS prefetch, разрешение доменного имени (он же получает соответствующий IP-адрес от DNS-сервера) выполняется заранее.

Допустим, на веб-сайте есть справочная страница с множеством ссылочных ссылок на родственный сайт. Когда пользователь заходит на страницу ссылки, появляется высокая вероятность что пользователь перейдет на родственный сайт. Итак, ранний поиск DNS для дочернего сайта может сократить время, необходимое для открытия сайта (тем самым улучшая пользовательский опыт).

это уменьшение задержки через предварительную выборку DNS можно сделать, добавив этот код на страницу ссылки.

Когда браузер обрабатывает этот код на странице ссылок, он добавляет DNS-поиск дочернего сайта в свои очереди задач, а когда он свободен от других высокоприоритетных задач в очереди, он запускает DNS-разрешение родственный сайт.

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

Эта функция доступна практически во всех современных браузерах, кроме Safari, по состоянию на март 2016 года..

2. Предварительное подключение

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

W3C перечисляет идеальный вариант использования для предварительного подключения: переадресовывает. Разработчики используют перенаправления по ряду причин.

В этом случае следующий запрос браузера (перенаправленный сайт) 100% предсказуемо, и может быть предварительно подключенным к, в уменьшить задержку навигации.

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

По состоянию на март 2016 года это доступно в Chrome, Opera и Firefox.

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

С упреждающей, для ресурса, браузер начинает реализацию DNS-разрешения доменного имени ресурса, затем выполняет TCP-соединение с сервером ресурса, делает HTTP-запрос, и, наконец, извлекает и сохраняет предварительно выбранный ресурс в кеше браузера.

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

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

Предварительная загрузка поддерживается в Chrome, Firefox и Opera.

4. Предоплата

Только для HTML-страниц можно выполнить предварительную визуализацию. Предварительно представленная страница HTML офлайн, и отображается на экране, когда это действительно нужно пользователю. Rendering стоит больше вычислительной работы и ресурсов памяти; Кроме того, для отображения страницы браузеру могут потребоваться дополнительные ресурсы (например, изображения, добавленные на страницу), что приведет к более последовательные запросы браузером.

Так, PreRender должен быть использовать с осторожностью, и не перегружен. При добавлении следующего кода страница «О программе» будет предварительно отображена.

Предварительный просмотр уже доступен в Chrome, IE и Opera с марта 2016 года..

Несколько вещей для заметки

(1) Ни один из вышеупомянутых указаний ресурса не гарантирует выполнение и завершение различных этапов запроса, для которого он сделан, потому что, когда браузер уже занят обработкой запросов, необходимых для операций текущей страницы, на которой находится пользователь, и выполнения этих оптимизаций может мешать текущим задачам пользователя.

Итак, все ставится в очередь и выполняется, когда браузер чувствует себя достаточно свободным, чтобы сделать это.

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

(2) W3C определяет Атрибут HTML-ссылки называется вероятность подсказки, пр (со значением от 0 до 1) для этих подсказок ресурса, которые могут использоваться для обеспечения вероятности запросов, которые будут сделаны в будущем. Я еще не видел, чтобы этот атрибут был реализован ни одним браузером. Например, в следующем коде указано, что 80% вероятности, что xyzsite будет запрошен в будущем, и 30% для страницы about..

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