Вы часто будете видеть эту рекомендацию, если будете использовать @font-face для загрузки шрифтов.
Чтобы понять, почему вы получаете эту рекомендацию, вы должны учитывать, как браузер получает и анализирует информацию.
- HTML загружен, браузер просматривает все ресурсы для загрузки, найденные в HTML, и начинает их загрузку и анализ.
- Браузер обнаруживает файл CSS и загружает его , Когда этот файл CSS загружен и проанализирован, ваш браузер находит ссылку на ваш шрифт 'font-awesome', а затем добавляет его в список загружаемых файлов.
- Браузер загружает этот шрифт, но намного позже, чем это необходимо.
Добавив preload к элементу, ваш заказ сначала изменится на HTML, затем CSS и одновременно шрифт-офигенный шрифт, что означает Ключевой актив загружается ранее.
Почему это важно?
Чтобы понять, почему это важно, вам нужно понять «критические запросы» - это все активы, необходимые для того, чтобы вывести « над сгибом ».
Над сгибом находится контент, который вы можете увидеть, не прокручивая страницу.
Теперь, если у вас есть любой значок, показанный на этом 'над сверните «контент», тогда ваш шрифт с потрясающим шрифтом станет частью вашей «цепочки критических запросов», т. е. контента, который необходим для рисования всего, что выше сгиба.
Используя preload, вы получаете шрифт чем раньше (на 2 шага, а не на 3, как показано ранее), то ваш контент выше сгиба может быть визуализирован быстрее, и поэтому ваш сайт отображается для более быстрой загрузки - это основной фактор скоринга PSI и реального преобразования Скорость улучшений.
Должен ли я использовать rel = "preload" тогда?
В большинстве случаев да, если это рекомендуется, это уменьшает глубину цепочки критических запросов и обычно приводит к более быстрому времени загрузки , Однако вам нужно проверить цепочку критических запросов, чтобы убедиться, что она не является ложно-положительной (PSI не идеален).
Самый простой способ проверить это - открыть инструменты разработчика, включив дросселирование 3G в сети. и затем посмотрите, отображается ли на странице быстрее с или без preload.
Это мой лучший вариант для сценария, приведенного в вопросе?
В этом примере нет , но только потому, что font-awesome вообще не очень хорошая идея.
Что вы действительно хотите сделать, так это полностью избавиться от font-awesome. Icon Fonts - это устаревшая и ужасная практика, которую применяют мы, веб-разработчики, которая просто не уйдет go.
Вместо загрузки файла размером более 50 КБ (для каждого «веса» используемых шрифтов) плюс 30 КБ CSS, почему бы не использовать вместо этого встроенные SVG.
Встроенные SVG имеют несколько преимуществ , но ключевые из них: -
- Как они есть встроенный в HTML, который вы удаляете при минимум один сетевой запрос (обычно 2-3) - отлично подходит для скорости.
- Они крошечные - типичный значок - менее 1 КБ в распакованном виде - с 10 значков, которые вы сказали, что используете, это всего 10 КБ до архивирования. Сравните это с 180kb zip для шрифтов с потрясающими шрифтами, CSS et c. и вы можете увидеть улучшение производительности.
- Поскольку вы ввели свои значки в пределах HTML, вы уменьшаете длину «цепочки критических запросов», чтобы вы могли получать до 1 секунды начальных визуализаций страниц (очевидно, вам необходимо встроить все критические значения CSS требуется также для вышеупомянутого сгиба.)
- Самая важная причина - люди используют пользовательские таблицы стилей на ваших сайтах. Например, люди с дислексией могут предпочесть определенный шрифт, так как его легче читать, поэтому они могут заставить сайт использовать этот шрифт. Ваши красивые «иконки шрифтов» превращаются в страшные «недостающие квадратные квадраты гибели», что делает действительно трудным узнать, на что они нажимают. Доступность становится все более и более важной!
Примечание к пункту 2 - причина, по которой шрифты значков настолько велики, что они содержат сотни значков. Можно уменьшить их, чтобы они были немного меньше, чем встроенные SVG, но такая оптимизация часто пропускается и на самом деле отнимает больше времени, чем простое включение и ссылки на SVG. Я просто подумал, что добавлю это для полноты.