Как устранить блокировку CSS, которая является шрифтами?

я в настоящее время я использую шрифты Google, которые включены в моем тег через рельсы application.scss так:Как устранить блокировку CSS, которая является шрифтами?

`@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');`

Google PageSpeed говорит мне нужно «Ликвидировать оказывать блокирование JavaScript и CSS в вышеприведенном в раз content "Когда я перемещаю шрифт CSS в нижнюю часть страницы, всякий раз, когда страница загружает всю страницу, перескакивает.

Как я могу сделать шрифты Google неблокирующими, но не иметь страницу, на которой JUMPs заканчивает загрузку? Благодаря

источник

2017-01-22 AnApprentice

Это именно то, что блокирует. Если вы не хотите показывать свою страницу до загрузки шрифтов, вам нужна блокирующая нагрузка. – SLaks

Что вы говорите, это 'FOIT'. Вот несколько статей, которые помогут вам. 1. https://css-tricks.com/fout-foit-foft/ 2. https://www.lockedowndesign.com/load-google-fonts-asynchronously-for-page-speed/ 3. https: // www.filamentgroup.com/lab/font-events.html –

@SLaks благодарит, я получаю это, но там должны быть некоторые трюки, чтобы сделать страницу не прыжком/дрожанием и т. д. – AnApprentice

Вы можете прочитать хорошую статью об этой проблеме here

Дело в том, что вы не сможете избавиться от этой проблемы конкуру (если пользовательский шрифт не имеет точно такие же свойства, как шрифт заменяется).

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

Так что да, длинный рассказ, вы можете либо иметь производительность, либо вы можете избежать FOUC, но не оба.

источник

2017-01-22 03:47:34

Как устранить блокировку CSS, которая является шрифтами?

ответ

Смежные вопросы