Я видел несколько постов о сравнении этих двух методов, я буду связывать посты внизу, но меня смущают мои собственные результаты теста скорости.
Во время тестирования скорости / оптимизации нашего сайта яобнаружил, что '<' ссылка '>' для шрифтов Google:
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400' rel='stylesheet' type='text/css'>
отображается как ресурс блокировки рендеринга с потенциальной экономией рабочего стола в 230 мс, на мобильном 780 мс.
ИспользованиеФрагмент @import для того же шрифта:
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
Я удалил '<' ссылку '>' из головы и поместил это в одну из наших таблиц стилей (которая также живет в голове), но не сделал этого 'не заметить каких-либо изменений в потенциальной экономии времени для этой таблицы стилей после выполнения большего количества тестов скорости / оптимизации.Единственное отличие, которое я заметил, заключается в том, что ссылка на шрифты Google больше не указана в ресурсах, блокирующих рендеринг.
Я не совсем понимаю, почему результаты для потенциальной экономии времени в таблице стилей, которая теперь содержит @importсниппет вообще не увеличился, хотя это может быть из-за того, что я в корне неправильно понимаю показатели скорости.Буду очень признателен за любые идеи, предупреждения или предложения.
Полусвязанные сообщения:
Которые загружаются быстрее @ font-face или link
Включая ссылку или импорт Google Web Fonts?