Как исправить ошибку «Убедитесь, что текст остается видимым во время загрузки веб-шрифта» в PageSpeed

Вы получаете сообщение об ошибке « Убедитесь, что текст остается видимым во время загрузки веб -шрифта» при проверке информации о скорости страницы в Google и не знаете, как решить эту проблему? Как правило, я знаю, как решить эту проблему на пользовательском веб-сайте на основе PHP или HTML, но когда дело доходит до WordPress, у меня тоже возникают проблемы.

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

Почему отображается ошибка «Убедитесь, что текст остается видимым во время загрузки веб-шрифта» в PageSpeed

При тестировании вашего веб-сайта с помощью Google PageSpeed ​​Insight вы, возможно, заметили ошибку «Убедитесь, что текст остается видимым во время загрузки веб-шрифта», и при нажатии на ошибку будут показаны полные URL-адреса файлов шрифтов.

Как вы можете видеть на изображении выше, я также получаю сообщение об ошибке «убедитесь, что текст остается видимым во время загрузки веб-шрифта» на этом веб-сайте, и когда я нажимаю на него, он показывает полные URL-адреса файлов шрифтов Google.

Почему показывает ошибку?

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

Как исправить вспышку невидимого текста?

Исправление вспышки невидимого текста также может исправить ошибку «убедитесь, что текст остается видимым во время загрузки веб-шрифта» на вашем веб-сайте, и решить эту проблему очень просто.

Вы можете легко решить эту проблему, добавив

 Отображение шрифта: поменять местами;

код в вашем текущем

 @шрифт-лицо {

}

Свойство CSS.

Но что такое @font-face?

@font-face — это простое правило CSS, с помощью которого вы можете применить собственный шрифт к тексту. Он имеет такие расширения, как woff2, woff, ttf и т. д. Например, код @font-face будет выглядеть так:

 @шрифт-лицо {

семейство шрифтов: Roboto, без засечек;

Отображение шрифта: поменять местами; // ---> Это решит эту проблему.

стиль шрифта: обычный;

вес шрифта: 400;

источник: URL-адрес (Roboto.woff2);

}

Теперь мы применяем этот шрифт в абзаце, используя;

 п {

семейство шрифтов: Roboto, без засечек;

размер шрифта: 18px;

}

Когда веб-сайт загружается, он указывает, что к тегу абзаца применен шрифт « Roboto », и сразу же начинается загрузка шрифта, используемого в теге абзаца. Пока он не скачает шрифт, текст остается невидимым.

Вот почему он показывает ошибку « убедитесь, что текст остается видимым во время загрузки веб-шрифта» в скорости страницы и добавляет font-display: swap; в вашем текущем @font-face CSS может решить эту проблему.

Как исправить эту проблему в WordPress

Если вы используете WordPress и он показывает эту ошибку в анализе скорости страницы, вы можете легко решить эту проблему, выполнив простые действия. Я поделился инструкциями по устранению этой ошибки как для локальных шрифтов, так и для шрифтов Google.

Решение для шрифтов Google

Изначально Google Fonts не будет добавлять font-display: swap; правило для своего шрифта, но теперь они поддерживают новый параметр запроса для применения font-display: swap; добавив параметр &display=swap в конец файла шрифта Google.

Вот как это выглядит;

Если вы разработчик тем или знаете, как редактировать файлы тем в WordPress, вы можете легко добавить параметр &display=swap в файл шрифта Google.

Но если вам неудобно редактировать файлы темы WordPress, вы все равно можете использовать различные плагины, такие как Asset CleanUp , чтобы добавить этот параметр и решить проблему «убедиться, что текст остается видимым во время загрузки веб-шрифта».

Как решить эту проблему с помощью плагина «Asset CleanUp»

Чтобы применить параметр display=swap в файле Google Fonts, вам необходимо загрузить и установить плагин Asset CleanUp из библиотеки WordPress, который доступен бесплатно.

После того, как вы загрузили и активировали плагин, нажмите «Очистка активов » на панели администратора WordPress>, а затем нажмите « Настройки » в разделе «Очистка активов», чтобы открыть страницу оптимизации.

Когда вы окажетесь на странице настроек , нажмите на опцию « Google Fonts ». Когда вы нажимаете на опцию Google Fonts , она открывает настройки, откуда вы можете легко управлять различными настройками для оптимизации файлов шрифтов Google.

Некоторые из этих настроек могут включать в себя;

После того, как вы находитесь в настройках файлов шрифтов Google, в настройках « Применить шрифт-дисплей: значение свойства CSS » и измените его с « Не применять (по умолчанию) » на « заменить (наиболее часто используемый) », и он добавит &display= поменять параметр на все ваши файлы шрифтов Google.

Решение для шрифтов тем и плагинов

Большую часть времени ваша тема или плагин WordPress загружает другие шрифты, такие как шрифтовые шрифты или шрифты значков, и также показывает ту же проблему в Google PageSpeed ​​Insight.

Это также легко исправить, но для этого требуются некоторые знания в области редактирования WordPress. Если вам неудобно редактировать коды, вы также можете использовать премиум-версию плагина « Asset CleanUp Pro » для автоматического добавления font-display: swap; Свойство CSS в вашей теме WordPress или таблицах стилей плагинов.

Чтобы решить эту проблему с помощью Asset CleanUp Pro, выберите параметр «Очистка активов» в панели администратора WordPress>, а затем нажмите « Настройки » в разделе «Очистка активов», чтобы открыть страницу оптимизации.

Когда вы окажетесь на странице « Очистка активов » > « Настройки », нажмите « Локальные шрифты », чтобы открыть настройки настройки для локальных шрифтов.

После того, как в вашем браузере были открыты настройки настройки « Локальные шрифты », выберите « обмен (наиболее часто используемый) » из данного параметра выбора в разделе « Применить шрифт-дисплей: значение свойства CSS », чтобы автоматически добавить шрифт-отображение: обмен; во всех ваших таблицах стилей.

Подведение итогов

В этом руководстве мы постарались объяснить, как можно решить проблему «убедиться, что текст остается видимым во время загрузки веб-шрифта» или «вспышка невидимого текста» в анализе скорости страницы.

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

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