Что такое предварительная загрузка
Разбираем различия между HTTP Preload и HTTP/2 Push
HTTP Preload и HTTP/2 Server Push используются для ускорения загрузки веб-приложения. В этой статье мы рассмотрим сходства и различия HTTP Preload и HTTP/2 Push. А также узнаем, когда нужно использовать каждую из них.
Что такое HTTP/2 Push?
Что такое HTTP Preload?
HTTP Preload – это еще одна технология, которую можно использовать для предварительной отправки определенных ресурсов клиенту. Но директива Preload работает не так, как HTTP/2 Push.
С помощью директивы Preload можно указать браузеру запрашивать определенные высокоприоритетные ресурсы, необходимость которых он определяет только после анализа HTML-файла.
Сходства и различия
HTTP Preload и HTTP/2 Push предоставляют браузеру необходимые ресурсы заранее. Тем не менее, существует несколько важных различий между этими технологиями. Например:
Когда использовать Preload, а когда Push?
Нельзя применять Preload и Push для ускорения доставки всех используемых ресурсов одновременно. Вместо этого вы должны заранее отправлять только первоочередные ресурсы.
Несколько примеров использования Push :
Примеры использования Preload :
Использование Preload и HTTP/2 Push с KeyCDN
KeyCDN поддерживает HTTP/2 Push, если установить заголовок Link с директивой Preload. После этого KeyCDN будет отправлять ресурсы с помощью push:
Но если вы не хотите использовать push, установите атрибут nopush. Кроме этого, если реализация HTTP/2 не принимает принудительно отправленные ресурсы, клиент будет рассматривать их как обычный предварительно загружаемый (preload) ресурс.
Итоги
HTTP Preload и HTTP/2 Push являются полезными механизмами. Но для эффективного их использования нужно провести проверку изменения скорости загрузки страниц. Не торопитесь и поэкспериментируйте с Preload и Push в своем собственном приложении.
Пожалуйста, оставьте свои мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, лайки, дизлайки, подписки!
Пожалуйста, оставляйте ваши отзывы по текущей теме статьи. За комментарии, дизлайки, лайки, отклики, подписки низкий вам поклон!
Предварительная загрузка в PHP 7.4
Перевод данной статьи подготовлен специально для студентов курса «Backend разработчик на PHP».
В PHP 7.4 добавлена предварительная загрузка — возможность, которая позволяет значительно повысить производительность кода.
О предзагрузке в двух словах.
Поговорим о новой возможности подробнее.
Больше, чем Opcache
Да, предварительная загрузка основывается на opcache, но это не совсем одно и то же. Opcache берет исходные файлы PHP, компилирует их в опкоды, после чего сохраняет скомпилированные файлы на диск.
Опкоды можно считать низкоуровневым представлением вашего кода, которое легко интерпретируется во время выполнения. Таким образом, opcache позволяет пропустить этап трансляции исходных файлов в то, что, собственно, и необходимо интерпретатору PHP во время выполнения. Заметная экономия!
Тем не менее можно сэкономить еще больше. Скомпилированные при помощи opcash файлы ничего не знают о других файлах. Если у вас есть класс А, являющийся расширением класса B, их все равно нужно будет связать во время выполнения. Кроме того, opcache проверяет, изменились ли исходные файлы, и при обнаружения изменений аннулирует их кэши.
И тут на помощь приходит предварительная загрузка: она не только компилирует исходные файлы в опкоды, но и связывает зависимые классы, трейты и интерфейсы. Она сохраняет такой «скомпилированный» фрагмент исполняемого кода (то есть кода, который может использовать PHP-интерпретатор) в памяти.
Когда на сервер поступает запрос, тот может использовать части кодовой базы, которая уже была загружена в память, без лишних затрат времени.
О каких же «частях кодовой базы» идет речь?
Предварительная загрузка на практике
Для корректной предварительной загрузки разработчик должен указать серверу, какие файлы нужно загрузить. Это делается с помощью простого PHP-скрипта, так что бояться нечего.
Вот как вы можете подключить этот скрипт в php.ini:
А вот пример реализации:
Предупреждение о невозможности предварительно загрузить несвязанный класс
Появилось предупреждение Can’t preload unlinked class? Дело в том, что перед предзагрузкой файлов нужно также предварительно загрузить их зависимые объекты — интерфейсы, трейты и родительские классы.
Если возникнут какие-либо проблемы с зависимостями классов, то вас предупредят об этом при запуске сервера:
Обратите внимание, что opcache_compile_file() только распарсит файл, но не выполнит его. Это значит, что если у класса есть зависимости, которые не были предварительно загружены, то и сам класс не может быть предварительно загружен.
Это не критично: сервер будет работать, как обычно, но в вашем распоряжении не будет всех файлов, которые вы хотели предварительно загрузить.
Именно поэтому нужно внимательнее подбирать файлы для предварительной загрузки, чтобы избежать проблем с зависимостями. Делать это вручную — задача неблагодарная и трудоемкая, так что разработчики уже трудятся над автоматизированными решениями.
Поддержка composer
Наиболее перспективное автоматизированное решение готовят разработчики composer, который уже используется в большинстве современных PHP-проектов.
Требования к серверу
Есть еще два важных момента, о которых должен помнить разработчик при использовании предварительной загрузки.
На практике вам понадобится выделенный (виртуальный) сервер, чтобы оптимизировать предварительно загруженные файлы для отдельного проекта. Имейте это в виду.
Производительность
Теперь перейдем к самому важному вопросу: действительно ли предварительная загрузка повышает производительность?
Разумеется! Бен Морел (Ben Morel) поделился результатами сравнительного тестирования, которые можно найти в той же теме по composer, на которую мы ссылались выше.
И еще, что интересно. При желании вы можете предварительно загрузить только так называемые hot classes — классы, которые часто используются в вашей кодовой базе. Тесты Бена Морела показывают, что загрузка всего около 100 таких классов обеспечивает более высокий рост производительности, чем предварительная загрузка всего сразу. В первом случае производительность повышается на 17 %, во втором — на 13 %.
Разумеется, выбор классов для предварительной загрузки зависит от конкретного проекта. Разумнее всего для начала просто предварительно загрузить как можно больше. Если же вам так важны эти несколько процентов разницы в производительности, то придется контролировать код во время выполнения.
Все эти операции, конечно же, можно автоматизировать, и это, вероятно, будет сделано в будущем.
Сейчас важно, что в composer будет добавлена поддержка предзагрузки, что избавит от необходимости самостоятельно создавать файлы для нее. Эту функцию очень легко настроить на сервере при условии, что он находится в полном вашем распоряжении.
Будете ли вы использовать предварительную загрузку в новой версии PHP 7.4? Появились мысли или замечания? Напишите мне в Twitter или по электронной почте.
Традиционно ждем ваши комментарии и плюсы, если считаете статью интересной 🙂
Что такое предварительная загрузка
значит загрузить файлы игры сможешь 7 апреля.
значит загрузить файлы игры сможешь 7 апреля.
Я просто загружу их, или смогу поиграть?
Я просто загружу их, или смогу поиграть?
просто загрузишь, чтоб когда игра выйдет не пришлось качать весь объём, а начать играть сразу(ну или придёться докачать какую-то часть).
Предварительная загрузка ключевых запросов
Поэтому, при проведении аудита PageSpeed Insights, может появиться данная рекомендация. Её необходимо устранить произведя корректные настройки.
Что такое предзагрузка и зачем она нужна
Почему так происходит? Получив запрос. Браузер сам решает какой контент на странице ему загружать первым. При этом он опирается на подсказки разработчика, который указывает о важности той или иной информации. К примеру, ресурсы CSS он загрузит в первую очередь, раньше чем изображения, сценарии и прочее.
Но, как человек знающий свою страницу лучше браузера, вы можете сообщить ему, что ряд ключевых запросов обязательно понадобятся позже. И неплохо было бы начать их предварительную загрузку как можно раньше. Сделать это можно используя тег .
Указав его, вы можете сообщить браузеру, что данный ресурс является необходимой частью кода и начать извлекать его требуется при малейшей же возможности. На практике, указание выглядит таким образом:
В обоих случаях приоритет ресурса остался неизменным. Разница лишь в том, что получив от вас информацию, браузер сможет начать загрузку заранее, так как уже оповещён о необходимости данной информации для адекватной работы.
Как это выглядит на практике
Рассмотрим мифический сайт со своей цепочкой критических запросов. К примеру, выглядит она таким образом:
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 тоже не поддерживает этот тег.