Как уберечь CSS от рендеринга, блокирующего мой сайт?

Question

Я пытаюсь оптимизировать скорость загрузки моей мобильной веб-страницы, и для этого я использую веб-сайт:

• https://developers.google.com/speed/pagespeed/insights

Этот сайт оценивает мой источник и говорит мне, что я могу улучшить. На моем сайте я загружаю шрифт:

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

и, видимо, это блокирует рендеринг моей страницы. Теперь, если бы это был JavaScript, я мог бы использовать async слово в теге, и это решило бы проблему, но это не файл javascript, который я загружаю!

Есть ли какой-либо способ, чтобы этот ресурс не блокировал мой браузер и заставлял его ждать, пока он не загрузится?

Answer 1

Вы можете сделать это с помощью JavaScript:

<script>
(function() {
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.href = "//fonts.googleapis.com/css?family=Open+Sans:400,700";
    document.querySelector("head").appendChild(link);
})();
</script>

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

---

Или, как указывает Дандевис, вы можете просто использовать style элемент в конце bodyнезадолго до закрытия </body> тег:

<style>
@import "//fonts.googleapis.com/css?family=Open+Sans:400,700"
</style>

Это действительный HTML сейчас (по состоянию на 20170808 проект HTML 5.2), но я никогда не встречал браузер, который заботился бы об этом, если бы вы разместили style в body даже до того, как это было сделано действительным.

Преимущества по сравнению с использованием JavaScript:

1. Теоретически, сканер предварительной выборки браузера может найти style элемент и начать загрузку раньше (хотя это не особенно вероятно, если вы поместите JavaScript в head), а также

2. Это работает, даже если у пользователя отключен JavaScript.

С другой стороны, вы можете просто переместить link элемент до конца body, но в настоящее время это неверно и scoped Атрибут не (пока?), кажется, не применяется. (Почему это относится к style и не link[rel=stylesheet]? Я понятия не имею, и, возможно, это просто вопрос того, чтобы еще не попасть туда...)

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: ['Open Sans:400,700,400italic,700italic']
    }
  });
</script>