Следующая статья поможет вам: Как убедиться, что текст остается видимым во время загрузки веб-шрифта
При проведении аудита производительности нашего веб-сайта с помощью распространенных инструментов, таких как Google PageSpeed Insights, мы часто получаем некоторые предупреждения. Обычно мы игнорируем эти предупреждения и не пытаемся их исправить, и в результате эти предупреждения оказываются вредными для UX (пользовательский опыт), SEO (поисковая оптимизация), производительности веб-сайта и множества других сопутствующих факторов. В этой статье мы узнаем об очень популярном предупреждении Lighthouse «Убедитесь, что текст остается видимым во время загрузки веб-шрифта» и узнаем, как исправить его различными способами.
Изучение предупреждения «Убедитесь, что текст остается видимым во время загрузки веб-шрифта»
Если вы разработчик или владелец веб-сайта, вы могли столкнуться с этим распространенным предупреждением при проведении аудита производительности веб-сайта на Статистика PageSpeed. Это предупреждение является рекомендацией от Lighthouse, чтобы помочь вам выделить проблему отсутствия видимости текста на веб-странице во время загрузки веб-страницы.
В настоящее время это распространенная проблема, потому что люди часто выбирают причудливые или эстетически приятные шрифты, и для этого они используют современные библиотеки шрифтов, такие как Font Awesome, Google Fonts или Adobe Fonts, которых, к сожалению, нет в системе посетителя. поэтому их нужно сначала загрузить из Интернета, чтобы отобразить на веб-странице. Это трудоемкий процесс, и поэтому Lighthouse принимает это к сведению и выдает нам предупреждение «Убедитесь, что текст остается видимым во время загрузки веб-шрифта». По сути это означает, что текст должен оставаться видимым, даже если веб-шрифт еще не загружен.
Основная причина, по которой текст должен отображаться во время загрузки веб-шрифта, заключается в следующем. Пользовательский опыт. Мы никогда не должны заставлять посетителя видеть пустой текстовый экран и ждать, пока шрифты загрузятся в его системе, потому что это может привести к ухудшению работы конечного пользователя, и поэтому Lighthouse отмечает это как что-то важное для разработчика/владельца веб-сайта. решить как можно скорее.
Теперь, когда мы знаем, о чем это предупреждение, давайте углубимся в несколько связанных концепций, которые могут помочь нам лучше понять его и лучше отобразить связанные отношения.
Что такое вспышка невидимого текста (FOIT)?
Вспышка невидимого текста (FOIT) — это общий термин, используемый для описания явления, когда веб-шрифты используются на веб-странице. Когда вы открываете новую веб-страницу, браузеру требуется значительное количество времени для загрузки веб-шрифта, поскольку ему необходимо сначала загрузить соответствующие файлы шрифтов. Такие шрифты по умолчанию недоступны в системе посетителя, поэтому текст этого веб-шрифта остается невидимым в течение этого периода загрузки. Этот период загрузки может быть заметен, потому что обычно это файлы большего размера. Это называется вспышкой невидимого текста (ФОИТ). Эта концепция особенно хорошо связана с нашим предупреждением Lighthouse «Убедитесь, что текст остается видимым во время загрузки веб-шрифта», потому что он отражает ту же проблему невидимости текста из-за загрузки веб-шрифта.
FOIT часто может возникать при плохом подключении к Интернету, поскольку браузеру требуется больше времени для загрузки веб-шрифта или когда на веб-странице используется несколько веб-шрифтов. Эта проблема может быть еще более заметной на мобильных устройствах.
Отображение шрифта: подкачка, запасной вариант или необязательный
Чтобы устранить проблему FOIT, можно использовать несколько методов, в том числе предварительную загрузку шрифта или свойства отображения шрифта, которые обеспечивают доступность резервного шрифта, который может немедленно отображать текст, а тем временем веб-шрифт может загружаться правильно, а затем отображаться.
Существует три разных свойства отображения шрифта: подкачка, резервный вариант и необязательный.
Давайте кратко рассмотрим каждый из них и то, как они влияют на FOIT.
1. Отображение шрифтов: поменять местами
Давайте кратко рассмотрим, как мы можем добавить это свойство на сайт WordPress на уровне кода.
В файле CSS вашего проекта, куда загружается ваш веб-шрифт, вы можете добавить font-display: swap внутри правила @font-face, которое загружает веб-шрифт. Свойство @font-face внутри вашего файла CSS будет выглядеть примерно так:
Это поможет вам исправить FOIT, и в результате вы больше не увидите предупреждение «Убедитесь, что текст остается видимым во время загрузки веб-шрифта» в Google Lighthouse PageSpeed Insights.
2. Отображение шрифта: запасной вариант
Это свойство похоже на свойство font-display: swap one, но оно идет на один уровень вперед, чтобы решить проблему FOIT. Итак, предположим, что веб-шрифт, который необходимо загрузить, недоступен, что тогда произойдет? Именно здесь в игру вступает font-display: fallback. Он делает почти то же самое, что и свойство swap, за исключением того, что он также обрабатывает вариант использования, когда веб-шрифт недоступен или не может быть загружен должным образом. Что он делает, так это просто говорит браузеру продолжать использовать резервный шрифт на тот случай, если веб-шрифт, который необходимо загрузить, недоступен по какой-либо известной или неизвестной причине (причинам).
Использование font-display: откат может привести к мигание нестилизованного текста (FOUT) если загрузка веб-шрифта занимает значительное время, потому что резервный шрифт будет отображаться до тех пор, пока веб-шрифт не будет готов.
3. Отображение шрифта: опционально
Это свойство ведет себя аналогично font-display: fallback, за исключением того, что здесь браузер получает указание использовать веб-шрифт только в том случае, если он доступен, а в противном случае использовать резервный шрифт. По сути, это также означает, что, скажем, если загрузка веб-шрифта занимает много времени, браузер может вообще не отображать резервный шрифт, что в результате может привести к FOIT.
В целом, если вы сравните все эти три свойства, font-display: swap кажется лучшим свойством для преодоления проблемы FOIT, за которым следует font-display: fallback, у которого есть недостаток, заключающийся в получении FOUT, если веб-шрифт приличное количество времени для загрузки, а затем отображение шрифта: необязательно. Выбор между отображением шрифта: запасной вариант или font-display: optional является самоуверенным и зависит от ваших предпочтений.
Как невидимый текст во время загрузки веб-шрифта влияет на UX и SEO?
UX (пользовательский опыт) и SEO (поисковая оптимизация) являются двумя наиболее важными факторами для любого современного веб-сайта в настоящее время, и очень важно знать, как на них влияет невидимый текст во время загрузки веб-шрифта. Давайте рассмотрим оба из них ниже.
UX (пользовательский опыт)
Увидеть невидимый текст может оказаться кошмаром для конечного пользователя. Ни один посетитель не захочет посетить вашу веб-страницу и увидеть невидимый текст или какие-то необъяснимые сдвиги и изменения макета, потому что веб-шрифт загружается в фоновом режиме. Это, безусловно, приводит к плохой опыт конечного пользователя и может разочаровать посетителей вашего сайта и, возможно, никогда больше не посетить ваш сайт. Невидимый текст затрудняет пользователям чтение содержимого веб-страницы, особенно если текст является важной частью взаимодействия с пользователем, например, навигационные ссылки или заголовки, кнопки призыва к действию и т. д.
Такие показатели, как ЛКП (Самая большая содержательная краска), ЦЛС (кумулятивный сдвиг макета) и FID (First Input Delay) — это три ключевых показателя, которые определяют удобство работы конечного пользователя с веб-страницей, в том числе скорость ее загрузки и отклика на действия пользователя. Невидимый текст весьма негативно влияет и на эти, и на другие подобные показатели.
Давайте исследуем влияние невидимого текста на них.
1. Самая большая содержательная краска (ЛКП)
Допустим, у вас есть страница WordPress, на которой используются некоторые веб-шрифты, недоступные в системе посетителя по умолчанию. Таким образом, когда посетитель посещает вашу веб-страницу, его браузер начинает загружать файлы шрифтов, прежде чем он сможет отобразить любой текст, использующий эти шрифты. Если на веб-странице есть невидимый текст в то время, когда браузер загружает веб-шрифты, браузеру, возможно, придется дождаться загрузки файлов шрифтов, прежде чем он сможет отобразить видимый текст на экране.
В результате может возникнуть значительная задержка в LCP, если самая большая краска представляет собой текст, потому что браузер должен сначала дождаться загрузки файлов шрифтов, прежде чем он сможет отобразить самый большой видимый контент на странице.
2. Совокупный сдвиг макета (CLS)
Невидимый текст во время загрузки веб-шрифта отрицательно влияет на кумулятивное смещение макета (CLS) во многих отношениях. Чтобы помочь нам лучше понять, давайте возьмем пример процесса загрузки веб-страницы. Когда веб-страница загружается, браузеру необходимо загрузить и отобразить все ресурсы, необходимые для отображения этой страницы, включая любые пользовательские шрифты, которые могут использоваться на этой странице. В случае, если пользовательский шрифт недоступен, браузер может использовать резервный шрифт, что может привести к тому, что текст будет отображаться иначе, чем после загрузки пользовательского шрифта. В результате можно наблюдать неожиданные изменения макета, поскольку текст переходит в другое положение или размер после загрузки пользовательского шрифта.
3. Задержка первого ввода (FID)
Обычно FID не зависит от загрузки шрифта. Это происходит потому, что текстовые элементы, даже если они не отображаются должным образом, все равно могут быть интерактивными.
Как невидимый текст во время загрузки веб-шрифта влияет на оценку Google PageSpeed Insights?
Оценка Google PageSpeed Insights рассчитывается на основе различных факторов, включая LCP, CLS, FID и некоторые другие показатели. Мы уже видели, как невидимый текст негативно влияет как на LCP, так и на CLS. Если веб-шрифты на веб-странице вызывают отрицательные задержки в этих показателях, это, вероятно, отрицательно скажется на PageSpeed, даже если страница загружается быстро на поверхности. В целом, мы видим, что невидимый текст играет важную роль в негативном влиянии на общий балл PageSpeed Insights для веб-страницы.
К сумма это вверх, эффект невидимого текста во время загрузки веб-шрифта неблагоприятен для UX.
Хотите мгновенно ускорить свой сайт?
Получите 90+ баллов PageSpeed автоматически с помощью 10Web Booster ⚡
На любом хостинге!
Получите 10Web Booster, это бесплатно
SEO (поисковая оптимизация)
Чтобы понять, как невидимый текст во время загрузки веб-шрифта влияет на SEO, нам нужно в целом понять, как поисковые системы ранжируют веб-сайты. Поисковые системы используют содержимое веб-страницы, чтобы определить, о чем эта страница, и правильно ее проиндексировать. В общем, эффекта особого не будет, так как этот невидимый текст остается только во время загрузки, а потом все становится нормально. Это может повлиять в случае, если шрифт не может быть загружен должным образом и остается невидимым позже, или если отображение текста занимает слишком много времени.
Однако важно и другое влияние: плохой UX (предыдущий раздел) означает плохие сигналы посетителей и низкие показатели CWV и PageSpeed. Все это негативно влияет на SEO, поскольку алгоритмы ранжирования в поиске учитывают пользовательские сигналы и показатели производительности при ранжировании результатов на странице результатов поиска.
В целом невидимый текст во время загрузки веб-шрифта отрицательно влияет как на UX, так и на SEO. Поэтому мы должны попытаться исправить предупреждение «Убедитесь, что текст остается видимым во время загрузки веб-шрифта» как можно скорее, иначе нам придется столкнуться с множеством негативных последствий, если мы этого не сделаем.
Как обеспечить видимость текста во время загрузки веб-шрифта? (Вордпресс исправление)
У нас была достойная дискуссия вокруг самой проблемы и связанных с ней терминов и концепций. Сейчас Давайте погрузитесь глубоко в решения или исправления этой проблемы. Есть два способа WordPress решить эту проблему. Один — это ручное исправление, а другой — исправление с помощью плагина WordPress. Давайте кратко рассмотрим их оба ниже.
Исправить вручную
Существует несколько ручных способов, с помощью которых вы можете попытаться убедиться, что текст остается видимым во время процесса загрузки веб-шрифта. Некоторые из основных перечислены и описаны ниже.
1. Укажите резервный шрифт
Отличный способ решить эту проблему — указать резервный шрифт, который будет использоваться до завершения загрузки веб-шрифта. Реализовать его также просто. Все, что вам нужно сделать, это добавить правило CSS в таблицу стилей вашего сайта (CSS), который задает для свойства font-family общедоступный системный шрифт, например Arial или Helvetica. или любой системный шрифт без засечек, доступный на устройстве.
Следующий фрагмент кода иллюстрирует, какое правило CSS следует применять в вашем файле CSS.
2. Используйте свойство font-display в правиле CSS font-face
Ранее мы уже обсуждали, как различные свойства отображения шрифта, т. е. swap, fallback и optional, помогают нам предотвратить FOIT и, как следствие, помогают нам избавиться от предупреждения «Убедитесь, что текст остается видимым во время загрузки веб-шрифта». Если вам нужны дополнительные сведения, прокрутите страницу до этого раздела еще раз.
3. Предварительно загрузите веб-шрифт
Это эффективный метод, так как при предварительной загрузке веб-шрифта вы загружаете его и делаете доступным заранее, поэтому при загрузке страницы не требуется время на загрузку веб-шрифта.
Реализовать это довольно просто. Все, что вам нужно сделать, это добавьте элемент ссылки в заголовок вашего HTML-документа, который указывает на файл шрифта.
Давайте посмотрим фрагмент кода, который наглядно иллюстрирует нам, какой элемент ссылки добавить в заголовок вашего HTML-документа.
4. Используйте системные шрифты
Вся проблема возникает, когда вы используете веб-шрифты, верно? Итак, как насчет того, чтобы избавиться от веб-шрифтов в качестве основных шрифтов и назначить системные шрифты (шрифты, которые уже доступны на устройстве конечного пользователя) в качестве основных шрифтов? Это просто устранило бы проблему. Но есть компромисс для этого. Системные шрифты иногда не очень эстетичны, поэтому вам нужно смириться с этим небольшим компромиссом. Но это что-то самоуверенное, поскольку все зависит от ваших предпочтений и типа контента веб-страницы, который есть на вашем сайте.
Используя системные шрифты, мы можем гарантировать, что текст останется видимым, даже если веб-шрифты загружаются дольше. Следующий фрагмент кода показывает нам, как вы можете изменить свой файл CSS, чтобы добавить список системных шрифтов в качестве основных шрифтов по умолчанию.
5. Используйте подмножества шрифтов
Подмножества шрифтов — это настраиваемые версии веб-шрифтов, которые включают только символы, используемые на конкретной веб-странице. Уменьшая размер файла шрифта, подмножества шрифтов могут ускорить загрузку веб-шрифтов и снизить вероятность исчезновения текста в процессе загрузки. Некоторые сервисы веб-шрифтов, например Гугл шрифтыпредложите возможность генерировать подмножества шрифтов.
Подводя итог, можно сказать, что, используя один или несколько из вышеупомянутых ручных методов, вы можете убедиться, что текст остается видимым во время загрузки веб-шрифта.
Исправить с помощью плагина WordPress
Плагины WordPress могут быть отличным вариантом, если вы не хотите идти по ручному маршруту и хотите, чтобы подходящий плагин решал проблему с невидимым текстом во время загрузки веб-шрифтов. Есть несколько достойных вариантов плагинов на выбор, но мы рекомендуем вам выбрать лучший из доступных, 10Веб-бустер. С 10Web Booster вам не нужно ничего кодировать, плагин работает из коробки и автоматически оптимизирует загрузку шрифтов.
Он использует различные методы оптимизации, в том числе следующие, для решения проблемы невидимого текста во время загрузки веб-шрифта:
- Загрузка критических шрифтов – включен по умолчанию и в большинстве случаев может решить проблему самостоятельно.
- Замена шрифта – отключен по умолчанию.
- Ленивая загрузка шрифта – отключено по умолчанию.
Первого метода оптимизации, т.е. загрузки критических шрифтов, обычно достаточно для решения проблемы, но могут быть случаи, когда его можно и не использовать. Давайте рассмотрим несколько случаев, когда критическая загрузка шрифтов не будет идеальной техникой для реализации.
1. Когда необходимо загрузить несколько начертаний и стилей шрифта
Если вы используете веб-шрифт с несколькими начертаниями или стилями, загрузка всех необходимых файлов шрифтов может занять больше времени, даже при критической загрузке шрифта. В этом случае можно использовать замену шрифта для временного отображения запасного шрифта, пока не будет загружен требуемый шрифт. Это гарантирует, что текст всегда будет виден пользователям, даже во время загрузки веб-шрифта.
2. Когда на сайте много контента
Если на вашем веб-сайте много контента, загрузка критически важных шрифтов может занять больше времени, и пользователи могут столкнуться с задержкой при просмотре любого текста. В этом случае отложенная загрузка шрифтов может использоваться для загрузки шрифтов по запросу, когда пользователь прокручивает содержимое. Этот метод может помочь сократить время начальной загрузки страницы, обеспечивая более быстрый доступ пользователей к содержимому.
3. Когда веб-шрифт не важен для пользователя
Если веб-шрифт не является критическим компонентом вашего веб-сайта и его отсутствие не оказывает существенного влияния на взаимодействие с пользователем, вы можете использовать замену шрифта, чтобы заменить его системным шрифтом или веб-безопасным шрифтом. Это гарантирует, что текст всегда будет виден, даже если веб-шрифт не загружается.
Таким образом, в таких нескольких случаях использования методы 2 и 3 могут быть использованы для решения проблемы.
Хотите мгновенно ускорить свой сайт?
Получите 90+ баллов PageSpeed автоматически с помощью 10Web Booster ⚡
На любом хостинге!
Начать бесплатно
Все еще не можете решить проблему с загрузкой веб-шрифта? (исправлены распространенные проблемы)
В дополнение к приведенным выше решениям, если вы по-прежнему сталкиваетесь с проблемой загрузки веб-шрифтов и сталкиваетесь с одной из следующих распространенных проблем, вам стоит прочитать этот раздел.
Убедитесь, что текст остается видимым во время загрузки веб-шрифта — Google Fonts
При использовании некоторых пользовательских веб-шрифтов Google вы могли столкнуться с тем же предупреждением «Убедитесь, что текст остается видимым во время загрузки веб-шрифта». Обычно это происходит потому, что файл шрифта сначала необходимо загрузить и загрузить шрифт, прежде чем шрифт можно будет отобразить, время загрузки может быть долгим, или шрифт может даже не загрузиться, и в результате текст содержимого может быть невидимым или отображаться резервным шрифтом.
Для решения этой проблемы можно использовать следующие методы. Мы рассмотрели их в предыдущих разделах.
- Используйте свойство «font-display»
- Используйте системные шрифты или веб-шрифты в качестве запасного варианта.
- Уменьшите размер файла шрифта, используя подмножества шрифтов.
Убедитесь, что текст остается видимым во время загрузки веб-шрифта – Потрясающий шрифт
Выбор подходящего веб-шрифта для иконок полностью зависит от вас. Может быть Шрифт потрясающий, материальные символы или набор локальных иконок. Однако какую бы библиотеку шрифтов вы ни использовали, просто убедитесь, что шрифт(ы) хорошо оптимизирован, правильно и быстро загружается и не вызывает каких-либо заметных ошибок или предупреждений, таких как «Убедитесь, что текст остается видимым во время загрузки веб-шрифта».
Шрифты Font Awesome также можно обрабатывать и использовать таким образом, что вы не получите это предупреждение. Вы можете использовать следующие методы, чтобы избавиться от этого предупреждения при использовании Font Awesome.
1. Используйте скрипт асинхронной загрузки Font Awesome
Font Awesome предоставляет нам скрипт асинхронной загрузки, который загружает веб-шрифты отдельно от остального содержимого веб-страницы, что может помочь предотвратить блокировку рендеринга текста.
Вы можете просто реализовать этот метод сценария, добавив следующий сценарий в раздел заголовка вашего HTML-файла.
Note: вам нужно заменить «your_kit_id» на идентификатор вашего набора Font Awesome.
2. Определите резервные шрифты в стеке шрифтов
Предположим, что веб-шрифты Font Awesome не загружаются или по какой-то причине заблокированы. Теперь в этом случае нам понадобятся некоторые запасные шрифты для отображения вместо веб-шрифтов, которые не удалось загрузить по какой-либо известной или неизвестной причине. Вы можете определить список резервных шрифтов в стеке шрифтов. Это могут быть системные шрифты или веб-шрифты, доступные на большинстве устройств.
Давайте посмотрим, как мы можем это сделать с помощью небольшого фрагмента кода, который определяет код, который необходимо добавить в ваш файл CSS ниже:
Добавление такого запасного шрифта покажет какой-то символ вместо шрифта awesome, например букву «i». Нехорошо, но лучше, чем ничего, по крайней мере будет указано, что какая-то иконка есть.
3. Предварительно загрузите Font Awesome CSS
Другим решением может быть предварительная загрузка Font Awesome CSS, чтобы веб-шрифты загружались быстрее и уменьшали вероятность FOUT (Flash of Unstyled Text).
В следующем фрагменте кода показано, как предварительно загрузить Font Awesome CSS с помощью скрипта тега ссылки.
При использовании атрибута «as» со значением «стиль» Font Awesome CSS будет предварительно загружен как таблица стилей.
Убедитесь, что текст остается видимым во время загрузки веб-шрифта – Местные шрифты
Как правило, это предупреждение относится только к веб-шрифтам, но давайте предположим, что вы все еще видите это предупреждение, несмотря на использование локальных шрифтов, тогда следующие шаги могут помочь вам избавиться от предупреждения.
1. Оптимизируйте загрузку ваших локальных шрифтов
Вы можете использовать библиотеку загрузки шрифтов, такую как FontFaceObserver, для асинхронной загрузки ваших локальных шрифтов, что означает, что шрифт будет загружаться в фоновом режиме, в то время как текст отображается с использованием резервного шрифта. Это гарантирует, что текст останется видимым во время загрузки шрифта.
2. Уменьшите размер ваших локальных шрифтов
Загрузка больших файлов шрифтов может занять много времени, что может привести к задержке рендеринга вашего текста. Вы можете уменьшить размер ваших локальных шрифтов, используя инструмент подстановки шрифтов, такой как FontSquirrel, чтобы удалить все ненужные символы из файла шрифта.
3. Используйте CDN
Использование CDN может оказаться умной техникой. Они распределяют веб-контент по нескольким серверам, что приводит к ускорению загрузки и, как следствие, повышению производительности и надежности веб-сайта. Локальные шрифты также можно кэшировать и хранить через CDN, так же, как локальные файлы CSS и JS, или локальные изображения, или всю веб-страницу.
Контент, загружаемый через CDN, обычно быстрее, чем контент, загружаемый с сервера веб-сайта. Подводя итог, можно сказать, что CDN может оказаться весьма эффективным методом, помогающим устранить предупреждение «Убедитесь, что текст остается видимым во время загрузки веб-шрифта» для локальных шрифтов.
4. Используйте стек системных шрифтов
Системные шрифты предустановлены на большинстве устройств и обычно загружаются быстрее, чем веб-шрифты или локальные шрифты. Используя стек системных шрифтов, вы можете гарантировать, что текст на вашем веб-сайте всегда будет виден, даже если файл шрифта не загружается.
Если вы будете следовать этим методам, надеюсь, вы избавитесь от этого предупреждения «Убедитесь, что текст остается видимым во время загрузки веб-шрифта» даже при использовании локальных шрифтов.
Заключение
Подводя итог, это предупреждение является очень важным, поскольку мы видели, как это может негативно повлиять на многие вещи, включая SEO, UX, наше ядро PageSpeed Insights и многое другое. Поэтому, следуя любому из подходящих методов, которые мы обсуждали, чтобы исправить это предупреждение, мы можем избавиться от этого предупреждения Lighthouse.
Но если вы не хотите заниматься этой проблемой вручную, то наш плагин 10Web Booster должен стать для вас отличным выбором для устранения этого предупреждения.
Хотите мгновенно ускорить свой сайт?
Получите 90+ баллов PageSpeed автоматически с помощью 10Web Booster ⚡
На любом хостинге!
Получите 10Web Booster, это бесплатно
