Чтобы не мелькали шрифты в Хроме

Описание задачи:

На страницах используются значки-иконки из Font Awesome. После того, как был подключен Cloudflare CDN, у локальных ресурсов вроде fontawesome.woff2 появились хедеры вроде vary:Accept-Encoding.

Вероятно, именно это привело к тому, что ресурсы fontawesome в Chrome v56, v57 (latest) перестали загружаться (from memory cache), а стали (from disk cache).

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

Нужно, чтобы контент страницы не скакал, чтобы иконки показывались сразу. Чтобы было ощущение one-page-app, будто меняется только контент, но не меню и хедеры вокруг.

Причины:

В браузерах вроде FF или IE проблемы мерцания не наблюдается. Только в браузерах на движке хрома.

Хром обрабатывает директивы @font-face следующим образом: хотя содержимое и прочитано, указанные файлы не будут загружены вплоть до момента, пока данный шрифт не будет впервые использован. В моём случае, иконки font-awesome добавлялись только лишь через css-псевдоклассы :before и :after, вероятно поэтому браузер уже отрисовывал содержимое страницы, но шрифт, даже из дискового кеша, не успевал брать. Лишь из мемори кеша шрифт успевал браться, но этот тип кеша поломали заголовки cloudflare.

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

Не важно, что и шрифт, и все стили объявлены в <head>. Хром всё равно будет мелькать шрифтами.

Решение:

Решением могли бы быть:
а) всё-таки добиться опять попадания файла шрифта в chrome memory cache.
б) использовать элемент из этого шрифта нативно в теле страницы, а не через псевдоклассы.

Но мне это не подошло. Решение следующее:

preload

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

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

Всё работает. Ура!

Обсуждение

avatar

wpDiscuz