Тенденции заставляют учитывать тот факт, что приблизительно 85% всех интернет-запросов от общего числа делаются не с персональных компьютеров и не через Wi-Fi, а посредством мобильных устройств. Это значит, что для соединения используется 3G, а в лучшем случае — 4G. И этот сигнал довольно медленный. Именно с учётом данных обстоятельств, тестирующий сервис от Google PageSpeed Insights, создаёт в процессе проведения диагностики имитацию соединения 3G. Это позволяет понять, с какой скоростью страницу будет видеть большинство пользователей. На основании оценок и выявленных недочётов,осуществляется в том числе и ранжирование сайта поисковой системой.
PageSpeed Insights — отличный сервис тестирования для страниц, работающих на WordPress. Он не только даёт свою оценку скорости сайта, но и показывает критические места, которые на неё влияют. Они отражены в аудитах, на основании которых стоит проводить оптимизацию. Но, делать выводы исключительно на его основании не стоит. Да, этого хватит, чтобы пройти аудит Google, но вовсе не достаточно для действительно эффективной работы сайта. Когда наша команда берётся за оптимизацию, мы осуществляем аналитику на основании целого ряда показателей, не ограничиваясь только инструментом Lighthouse. Это даёт полное понимание происходящего на странице. Исправление недочётов осуществляется поэтапно и в строго определённой последовательности. Так как одна ошибка может тянуть за собой и другие. А соответственно, если нарушить алгоритм — придётся возвращаться к ней снова и снова. После проведённой нами оптимизации, сайты получают нужное ускорение и полностью соответствуют требованиям поисковых систем.
Одним из рекомендованных пунктов, которые содержит аудит PageSpeed Insights, является «Показ всего текста во время загрузки веб-шрифтов». Что это и что с ним делать разберёмся в данном материале.
Веб-шрифты — плюсы и минусы
Шрифты, которые используются для отображения на сайте делятся на две категории — системные и веб. Первые используются браузерами по умолчанию и они уже давно всем приелись. Вторые — выглядят интереснее, их больше и появляется возможность подобрать нужный в соответствии со стилистикой страницы. Именно веб-шрифты используются при создании логотипов, баннеров, слоганов и прочего. Их используют на подавляющем большинстве сайтов. Это относится к плюсам.
Минус здесь тоже есть. А именно, взаимодействие веб-шрифтов с браузерами. Что происходит в процессе отображения страницы. Пока браузер не распознает все веб-шрифты, он не загрузит текст и пользователь будет вынужден смотреть на белый экран. В лучшем случае, любоваться каким-нибудь изображением. И дело не только в том, что они тяжелее. Просто, взаимодействие с браузерами работает именно таким образом. А если интернет-соединение ещё и слабое, то ожидание текста может занять мучительные секунды.
Что делать с загрузкой показом текста во время загрузки веб-шрифтов
То, что веб-шрифты никогда не смогут загружаться с такой же скоростью, как и системные — необходимо понять и принять. Но, что делать со спецификой их обработки браузерами. Позволить пользователям бесконечно ждать, пока на экранах их устройств появится весь текст — непозволительная роскошь. Так это не работает, ждать никто не будет. А значит, нужно искать выход из сложившейся ситуации. И такой выход есть и использование свойства font-display.
Font-display в свою очередь, состоим из четырёх элементов:
● Block — полностью скрывает текст до момента его загрузки
● Swap – в процессе загрузки показывает системный шрифт, а затем меняет его на кастомный
● Fallback — по своему опционалу похож на swap, только имеет тайминг-аут показатели. Если за отведёное время веб-шрифты не будут полностью обработаны и загружены, то на странице будет и дальше отображаться системный
● Optional — выставлен по умолчанию со значением auto.
Все перечисленные опции могут добавляться только к правилу @font-face и распространяются исключительно на те шрифты, которые указаны в нём. Выглядит это приблизительно следующим образом:
@font-face {
font-family: Source Serif;
src: url(/path/to/sourceserif-regular.woff2) format(«woff2»),
url(/path/to/sourceserif-regular.woff) format(«woff»);
font-display: swap;
}
Таким образом, получается загрузить сначала системные шрифты и только после них, использовать кастомные. Это позволяет пользователю получить информацию значительно быстрее.
Пока шрифты загружаются, браузер в любом случае текст показывать не будет. Для него это лишнее действие. Поэтому, его придётся заставить. И делается это с помощью класса fonts-loaded. Используя данный инструмент можно создать два селектора — первый будет показывать шрифты без обработки, а второй — уже с ней. И работать они будут асинхронно. Чего мы и добиваемся.
Для этого в <head> подгружаем библиотеку шрифтов с их асинхронной загрузкой и вызываем для каждой из моделей метод load. Он либо сменит системный шрифт на веб, либо отменит его загрузку, если её не получится реализовать.
Что делать с «белой вспышкой»
При этом, если попробовать загрузить интернет-страницу на медленном соединении, получится визуально увидеть процесс замены. И кстати, пользователей это довольно сильно бесит. В тот момент, когда один шрифт меняется другим, возникает своеобразная белая вспышка, которая длиться миллисекунды, но для глаза она уловима. К тому же, страница перегружается, хоть юзер этого и не понимает. Но, человек вполне может заметить, что его текст немного «уплыл» — стал выше или ниже по экрану.
Происходит это из-за того, что системные и веб-шрифты в любом случае — разные. Если речь идёт о нескольких буквах или небольшом предложении — этого никто не заметит. Но в случае с большим фрагментом текста — всё видно отчётливо. И происходит это потому, что шрифты имеют разные размеры.
Сделать с процессом их замены ничего не возможно — так будет, пока не изобретут чего-нибудь новенького. Но вот создать визуальный обман пользователя вполне реально и сверх усилий для этого прикладывать не потребуется. Для этого необходимо подогнать их под общие размеры. Для этого существуют специальные программы-агрегаторы, к примеру Font style matcher. Полностью сделать размер всех букв идентичными не получится, но в целом, скачки текста станут незаметными.
