Ускорение загрузки ресурсов для сайта с помощью: preconnect, prefetch, prerender, preloading.
К оптимизации работы веб-приложения можно подходить с нескольких сторон и сегодня мы взглянем на эту проблему с позиции оптимизации загрузки ресурсов.
Обычно, когда заходит разговор об оптимизации фронтенда, мы говорим о различных видах компрессии ресурсов, что необходимо для ускорения загрузки страницы. Мы помним, пользователь должен получать информацию максимально быстро.
Существует и другой способ оптимизации: предварительная загрузка контента. В свое время W3C добавили набор новых функций в link, так называемые Resource Hints, с помощью которых можно указать браузеру, какие именно ресурсы могут понадобиться пользователю в следующий момент. Как разработчики, мы знаем свои приложения лучше браузеров и эти инструменты помогают нам донести до них информацию о приоритете и востребованности ресурсов в будущем.
DNS-prefetch
Чтобы загрузить что-либо со стороннего сайта, браузеру нужно установить его IP адрес, используя DNS. Конечно, это занимает какое-то время. С помощью dns-prefetch можно установить IP адрес указанного домена в фоне браузера. Например:
Пример кода
Сообщите браузеру по каким адресам могут находиться ресурсы Вашей страницы
Preconnect
Работает так же, как dns-prefetch, только шире. Кроме DNS устанавливает TCP/TLS связь:
Пример кода
Prefetch
Если мы знаем, что какой-то конкретный ресурс будет нужен в будущем, мы можем указать браузеру запросить его и сохранить в кэш для дальнейшего использования. Это может быть картинка или скрипт, вообще что угодно что можно поместить в кэш браузера:
Пример кода
Subresource
Инструмент, аналогичный prefetch, только используется для того чтобы задать ресурсу самый высокий приоритет предварительной загрузки. Например, может использоваться для ресурса, который будет нужен на текущей странице и должен быть доступен максимально быстро.
Prerender
Этот инструмент позволяет загрузить всё содержимое указанной страницы в фоне. Работает, как если бы мы открыли страницу в скрытой вкладке. Все ресурсы будут скачены, DOM построен, CSS применен, JS исполнен. И когда пользователь перейдет по ссылке, то эта страница откроет моментально и встанет вместо текущей.
Пример кода
Этот инструмент должен использовать при 100% уверенности что пользователь перейдет по ссылке, иначе вы излишне нагружаете фронтенд, заставляя браузера скачивать и рендерить ненужный контент.
Preloading
Эта возможность еще не работает, но уже добавления в спецификацию. Работает как prefetch, только срабатывает в любом случае, нравится это браузеру или нет.
Пример кода
В дополнение
Перед заключением хочу привести несколько распространенных приемов предварительной загрузки ресурсов с помощью CSS, JavaScript и Ajax. Подход у этих приемов один: заставить браузер выполнить загрузку ресурса, для того, чтобы при повторном обращении к этому ресурсу он уже был готов.
Чтобы выполнить предварительную загрузку картинки с помощью CSS, можно воспользоваться таким приемом:
Тем самым мы добавляем выбранную картинку в бэкграунд некоего (любого) элемента и сдвигаем его, чтобы картинка не отображалась пользователю.
Для предварительной загрузки опять же картинок с помощью JavaScript есть простейший прием:
Здесь, вместо использования CSS свойства мы используем JS-элемент.
С помощью Ajax можно выполнять предварительную загрузку не только изображений:
Файлы предзагружены, осталось только правильно их обернуть и добавить в :
Заключение
Все перечисленные возможности, будучи просто подсказками для браузера об используемых в приложении ресурсах, не могут гарантировать повышение производительности и решить все проблемы, связанные с низкой скоростью загрузки страниц. Но вкупе с продуманной структурой приложения, его контента и установленной моделью поведения пользователей, они могут стать мощным инструментом оптимизации.
Поделиться
Для авторов
Хотите стать соавтором блога, рассказать аудитории о новинках в мире веб и все что с ним связано? Тогда присылайте ваши материалы и мы опубликуем их.
Ускоряем загрузку ресурсов для сайта: preconnect, prefetch, prerender, preloading…
Сегодня мы рассмотрим «HTML5 Link Prefetch», а именно dns-prefetch, prefetch, preconnect, subresource, prerender и еще неработающий preload. HTML5 Link Prefetch уменьшит время загрузки для ресурсов, которые нам понадобятся позже.
Dns-prefetch
Пример для Amazon CDN:
Preconnect
Похоже на dns-prefetch, только круче. Помимо DNS устанавливает TCP, TLS связь. Помогает предгрузить соединение для веб сокетов. Поддержка браузерами и пример:
Prefetch
Указываем браузеру что этот ресурс потребуется нам и браузер загрузит его с низким приоритетом и положит в кэш.
Браузер может не загрузить большие файлы при медленном соединении, а Firefox загружает ресурсы только в режиме простоя. Поддержка браузерами и пример:
Subresource
То-же что и prefetch, только с высоким приоритетом. Поэтому я бы рекомендовал добавлять этот атрибут для критических стилей. Поддержка браузерами и пример:
Prerender
Этот параметр заранее загружает ресурс или страницу и всё её содержимое в фоне. Это как открытие страницы в фоновой вкладке. Браузер загрузит все ресурсы, построит DOM, применит CSS и JS. А когда пользователь перейдет по ссылке, скрытая страница станет заместо текущей и загрузится моментально.
В Google поиске давно действует такая штука под названием Instant Pages, Microsoft недавно объявили что они будут использовать prerender в Bing на IE11. Поддержка браузерами и пример:
Preloading
Эта штука еще не работает, но её внесли в спецификацию. Работает так-же как и prefetch, но браузер всегда загрузит ресурс. Аналог прелоадеров для картинок, только нативный. Пока он не поддерживается, используйте prefetch. Пример:
Добавление через JavaScript
Не обязательно указывать эти теги в HTML, генерируйте по мере необходимости для нужных ресурсов:
Дополнительная информация
На этом сайте я использую prefetch для подготовке к загрузке файла, который подсвечивает код, если такой блок находится на странице. Dns-prefetch для ускорения загрузки яндекс метрики. И скрипт, для ускорения переходов между страницами:
Если браузер не поддерживает HTML5 Link Prefetch, то проигнорирует эти атрибуты, поэтому их можно безопасно использовать.
Cсылки
Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.
Оптимизация верстки под retina дисплеи
Подготавливаем верску сайта под ретина дисплеи, оптимизируем верстку и изображения.
Безопасное использование CDN для jQuery, Angular, Bootstrap и других библиотек
Безопасно загружаем JavaScript библиотеки из публичных CDN с fallback-ом на локальную библиотеку. Jquery, Angular JS, Bootstrap и другие.
Код. Плейсхолдер для [contenteditable]
Placeholder полифил для contenteditable элемента
Как называть переменные
Мой взгляд на соглашения наименования переменных, функций, методов и классов
Ускорение сайта с помощью браузера
Скорость загрузки сайта – важный пункт технической оптимизации сайта.
Ранее мы уже рассказывали о 12 способах, как увеличить этот показатель в данной статье. В случае если все рекомендации выполнены, а скорость сайта желает лучшего, можно воспользоваться специальными директивами и ресурсными подсказками для браузеров (Resource Hints), чтобы увеличить показатели скорости вашего сайта.
В этой статье будут рассмотрены следующие директивы и ресурсные подсказки для браузеров:
С помощью этих подсказок мы сообщаем браузеру о ресурсах, которые посетитель сайта может использовать в ближайшее время. Браузер можно обучить обрабатывать указанные ресурсы и сохранять их в локальный кеш. В случае, если это произойдет, процесс загрузки на стороне пользователя будет намного быстрее.
Сразу обозначу, что это не является для браузера прямой инструкцией, а имеет рекомендательный характер.
В случае, если все ресурсы браузера заняты более важным процессом, он спокойно проигнорирует такие подсказки.
Второй важный момент: стоит понимать, что благодаря этим подсказкам скорость по Google PageSpeed не увеличится в разы.
Эти подсказки помогут скорее посетителю сайта и практически не повлияют на оценочные баллы PageSpeed.
Данные директивы относительно недавно появились, поэтому на старых версиях браузеров они не поддерживаются. Если вы хотите их использовать, следует обновить свой браузер.
Версии браузеров, поддерживающие те или иные ресурсные подсказки, можно посмотреть по ссылкам:
Разберемся с директивами по очереди. Предлагаю начать с dns-prefetch.
Dns-prefetch
Сейчас почти на всех сайтах используются сторонние ресурсы, такие как системы аналитики, онлайн-консультанты и прочие. Обработка и поиск нужного Dns браузером занимает какое-то время. Браузер начинает обрабатывать эту информацию в момент обнаружения внешнего ресурса в html-коде страницы.
В такой ситуации нам и поможет подсказка dns-prefetch, с ее помощью мы заранее сообщим браузеру о том, что в дальнейшем будет использоваться внешний ресурс, и вот его адрес. То есть браузер заранее будет знать, к какому dns необходимо обратиться во время загрузки нужного скрипта, что ускорит весь процесс.
Обработка dns-prefetch происходит в фоновом режиме во время просмотра пользователем страницы сайта.
Например, так мы сообщим о том, что надо проверить связь с dns Яндекса.
Следующая директива preconnect.
Preconnect
Отвечает за предварительное соединение. С ее помощью браузером устанавливается соединение до того, как отправлен HTTP-запрос.
TCP (Transmission Control Protocol, протокол управления передачей) – один из основных протоколов передачи данных интернета. Представляет собой поток данных с предварительной установкой соединения. Осуществляет повторный запрос данных в случае их потери, а также устраняет дублирование при получении двух копий одного пакета, гарантируя тем самым целостность передаваемых данных.
TLS (англ. transport layer security – протокол защиты транспортного уровня) – протокол, обеспечивающий защищённую передачу данных между узлами в сети Интернет.
Данный протокол широко используется в приложениях, работающих с сетью Интернет, таких как веб-браузеры, работа с электронной почтой, обмен мгновенными сообщениями и IP-телефонии.
Рассмотрим пример использования preconnect для Яндекс.Метрики:
Практическое сравнение preconnect и dns-prefetch
Скорость сайта без использования подсказок, TLS-соединение:
Скорость сайта без использования подсказок, TCP-соединение:
Добавим к TLS-соединению подсказки и получим вот такую картину.
TLS-соединение с использованием preconnect:
TLS-соединение с использованием dns-prefetch:
Теперь можно наглядно увидеть различие между dns-prefetch и preconnect: для второго вместе с обращением к dns сразу выполняется обмен пакетами для установки TCP- или TLS-соединения. И в дальнейшем, когда происходит непосредственно обработка скрипта в коде, из цепочки загрузки исключаются эти этапы, что сокращает скорость загрузки.
Как видно из графиков, с помощью подсказок мы заранее сообщаем браузеру о том, что в дальнейшем мы будем использовать внешний ресурс Яндекса, и нужно сразу получить информацию о его dns.
Стоит учесть, что это усредненное значение из выборки тестов, были единичные случаи, когда загрузка происходит быстрее, а также наоборот.
Prefetch
Эта подсказка сообщает браузеру о том, что указанный ресурс может понадобиться пользователю в будущем при перемещении по сайту. Браузер начнет загружать этот ресурс во время простоя, то есть тогда, когда страница уже полностью загрузилась – после загрузки ресурс сохранится в кеше браузера.
Prefetch имеет низкий приоритет среди остальных подсказок, его стоит использовать для ресурсов, которые понадобятся в будущем.
Однако в режиме простоя браузер не будет находиться вечно. Из этого вытекает вопрос, что будет с ресурсами, для которых указана директива prefetch, после того как пользователь перейдет на другую страницу и прервет режим простоя?
Ответ прост: браузер сохранит в кэше загруженную часть и вернется к дальнейшей загрузке снова, используя заголовок Content-Range, когда страница будет полностью загружена.
С помощью атрибута as указывается тип ресурса. Это помогает браузеру выбрать приоритет загрузки для предварительной выборки.
Также позволяет браузеру понять, совместим ли запрос с политикой безопасности контента в соответствии с атрибутом as. С помощью этого атрибута браузер может посылать подходящие заголовки accept, основываясь на типе ресурса.
Атрибут as может иметь следующие значения:
Нужно иметь в виду, что данная директива во время простоя браузера потребляет трафик. И если пользователь в итоге не обратится к данному ресурсу, этот трафик будет потрачен зря.
Пример из практики использования Prefetch
Допустим, мы знаем, что логотип сайта точно будет использоваться при дальнейшем просмотре. Давайте добавим в код подсказу браузеру о том, что нужно сохранить в кэш это изображение.
Добавим в код страницы:
Проверим в браузере Google Chrome. Нужно открыть вкладку сеть (network) и найти там соответствующее изображение.
В строке Status Code увидим надпись (from prefetch cache), это означает что изображение закэшировалось и, соответственно, загрузилось из специального Prefetch-кеша.
Preload
Эта подсказка так же, как и Prefetch, служит для предварительной загрузки ресурсов, но имеет более высокий приоритет и используется для текущей навигации пользователя. То есть эта подсказка работает не для будущих страниц, а для страницы, на которой находится пользователь.
Ресурсы, для которых прописана директива Preload, имеют средний приоритет для браузера, и будут загружаться раньше, чем к ним обратится пользователь.
Это полезно для загрузки скриптов и таблиц стилей.
Если необходима предварительная загрузка связей с разрешенными CORS-ресурсами, необходимо добавить атрибут crossorigin.
Cross-origin resource sharing (CORS; с англ. – «совместное использование ресурсов между разными источниками») – технология современных браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена.
Так же, как и Prefetch, имеет атрибут As, используется для тех же целей.
По истечении 3 секунд после загрузки ресурса, если он не используется, Google Chrome выведет соответствующее предупреждение:
Не стоит использовать Preload для большого количества ресурсов, я бы рекомендовал применять его для предварительной загрузки шрифтов, и не более четырех раз. Чрезмерное использование этой подсказки может негативно влиять на загруженность сервера и соответственно скорость.
Prerender
И в завершении подсказка Prerender. С ее помощью можно предварительно загрузить в кэш браузера целую страницу. Нужно быть уверенным в том, что пользователь точно посетит указанную страницу, так как Prerender является одной из наиболее ресурсопотребляемых директив и может послужить причиной падения пропускной способности, особенно при использовании мобильных устройств.
Происходит следующее: строится полноценная html-страница, затем строится структура DOM-элементов с загрузкой всех скриптов и таблицами стилей. В связи с этим страница при открытии загружается очень быстро.
DOM (от англ. Document Object Model – «объектная модель документа») – это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.
К сожалению, эту подсказку пока поддерживает наименьшее количество браузеров – Google Chrome и Microsoft Edge последних версий.
Добавление такой подсказки может быть полезно, например, в случае разбиения статей на несколько частей.
Также можно использовать для страниц акций, скидок.
Заключение
С помощью использования ресурсных подсказок и директив можно повысить скорость загрузки сайта на стороне пользователя.
Эти подсказки не создадут существенного прироста по параметрам Google PageSpeed, однако могут быть полезны для пользователей.
Важно понимать, что нет нужды добавлять все подряд в предзагрузку, так как есть вероятность, что предзагруженный ресурс не будет использован, и тем самым вы только усложните код. Нужно иметь четкое представление о том, как пользователь будет себя вести на определенной странице, это поможет правильно использовать подсказку.
Поисковая оптимизация сайтов, использующих SPA-приложения
Директор SEO-отдела агентства «Двигус» Денис Логанов и руководитель группы разработки проектов «Ситилинк» Константин Осипов — об инструментах, которые помогут индексировать в поисковых системах AJAX-сайты.
При создании новых высоконагруженных веб-сервисов и сайтов разработчики стремятся использовать современные технологии. В силу этого всё большую популярность набирают различные JavaScript-фреймворки и библиотеки (Angular, React, Vue, Inferno и прочие), которые, безусловно, помогают создавать SPA (Single Page Application) приложения с лучшим на сегодня опытом взаимодействия, позволяют разрабатывать легко масштабируемые, удобные в поддержке веб-приложения.
Но у SPA-приложений имеется один существенный недостаток, сейчас поисковые роботы всё ещё плохо индексируют сайты, контент на которых рендерится с помощью JavaScript.
Поисковые боты были изначально разработаны для обхода статичных HTML-страниц и не умели интерпретировать JavaScript-код. Это означает, что части страницы, загруженные через AJAX, оставались невидимы для поисковых роботов, так как передача данных осуществляется после загрузки станицы. AngularJS и вовсе полностью охватывает асинхронную модель, и именно это создаёт проблемы для поисковых ботов.
Этот факт не позволяет в полной мере использовать современные технологии в разработке сайтов, сильно зависящих от поисковой индексации, так как оптимизация SPA-приложений технически очень сложная и требует значительных трудозатрат на реализацию изоморфных или универсальных приложений.
Если не выполнить процедуру правильной подготовки проекта к индексации поисковыми системами, то значительная часть страниц сайта не попадает в индекс, а также контент на самих страницах будет лишь частично распознаваться поисковиками. Следовательно, такая проблема будет явно влиять на ранжирование ресурса и его динамику по SEO-продвижению.
Preload, prefetch и другие теги
Есть много способов повышения веб-производительности. Один из них — предзагрузка контента, который понадобится позже. Префетчинг CSS, предварительный рендеринг полной страницы или резолвинг доменного имени. Делаем всё заранее, а потом мгновенно отображаем результат! Звучит круто.
Вкратце расскажем, что они делают и когда их использовать.
preload
Браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
Синтаксис
href указывает на ресурс, который вы хотите скачать.
as может быть чем угодно, что можно скачать в браузере:
Когда использовать
Используйте предзагрузку, когда ресурс понадобится в самое ближайшее время. Например:
Не злоупотребляйте предзагрузкой. Если загружать всё подряд, сайт не ускорится волшебным образом, скорее наоборот, это помешает браузеру грамотно планировать работу.
Подробности
prefetch
Здесь тоже браузер ничего не делает с ресурсом после загрузки. Скрипты не выполняются, таблицы стилей не применяются. Ресурс просто кэшируется и немедленно предоставляется по запросу.
Синтаксис
href указывает на ресурс, который вы хотите скачать.
as может быть чем угодно, что можно скачать в браузере:
Когда использовать
Для загрузки ресурсов с других страниц, если нужен ресурс с другой страницы, и вы хотите предварительно загрузить его, чтобы потом ускорить рендеринг этой страницы. Например:
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции, он может проигнорировать её, например, на медленном соединении.
preconnect
Браузер должен установить соединение, если извлекает какие-то ресурсы с нового стороннего домена. Например, если загружает шрифты Google Fonts, React из CDN или запрашивает ответ JSON с сервера API.
Установка нового соединения обычно занимает несколько сотен миллисекунд. Она производится один раз, но всё равно отнимает время. Если вы заранее установили соединение, то сэкономите время и быстрее загрузите ресурсы с этого домена.
Синтаксис
href указывает на доменное имя, для которого нужно определить IP-адрес. Можно указывать с префиксом ( https://domain.com ) или без него ( //domain.com ).
Когда использовать
Используйте для доменов, которые скоро понадобятся для загрузки оттуда важного стиля, скрипта или изображения, но вы пока не знаете URL ресурса. Например:
Не злоупотребляйте. Установка и поддержание соединения — дорогостоящая операция как для клиента, так и для сервера. Используйте этот тег максимум для 4-6 доменов.
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции и может проигнорировать её, например, если уже установлено много соединений или в каком-то другом случае.
Что включает в себя процесс подключения. Для подключения к каждому сайту браузер должен выполнить следующие действия:
dns-prefetch
Браузер должен определить IP-адрес домена, если будет извлекать какие-то ресурсы с нового стороннего домена. Например, загружать шрифты Google Fonts, React из CDN или запрашивать ответ JSON с сервера API.
Для каждого нового домена разрешение записи DNS обычно занимает около 20−120 мс. Это влияет только на загрузку первого ресурса с данного домена, но всё равно представляет задержку. Если осуществить разрешение DNS заранее, то мы сэкономим время и загрузим ресурс быстрее.
Синтаксис
href указывает на доменное имя, для которого нужно установить IP-адрес. Можно указывать с префиксом ( https://domain.com ) или без него ( //domain.com ).
Когда использовать
Используйте для доменов, которые скоро понадобятся для загрузки оттуда ресурсов, о которых браузер не знает заранее. Например:
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции, поэтому может не выполнять резолвинг DNS, например, если на странице много таких тегов или в каком-то другом случае.
Чтобы определить IP-адрес, браузер должен выполнить запрос к DNS-серверу. Он занимает 20−120 мс при подключении к новому стороннему домену.
DNS кэшируется, хотя и не очень надёжно. Некоторые ОС и браузеры кэшируют DNS-запросы: это сэкономит время при повторных запросах, но на кэширование нельзя полагаться. В Linux оно обычно вообще не работает. У Chrome есть кэш DNS, но он живёт только минуту. Windows кэширует DNS-ответы в течение пяти дней.
prerender
Синтаксис
href указывает на URL, для который вы хотите запустить рендеринг в фоновом режиме.
Когда использовать
Подробности
Необязательный тег. Браузер не обязан следовать этой инструкции и может проигнорировать её, например, на медленном соединении или при недостаточном объёме свободной памяти.
Ради экономии памяти Chrome не выполняет полный рендеринг, а только предзагрузку NoState. Это означает, что Chrome загружает страницу и все её ресурсы, но не делает рендеринг и не выполняет JavaScript.
Firefox и Safari вообще не поддерживают этот тег. Это не нарушает спецификацию, так как браузеры не обязаны выполнять данную инструкцию; но всё равно печально. Баг реализации в Firefox был открыт в течение семи лет. Есть сообщения, что Safari тоже не поддерживает этот тег.