Как эта блокировка рендера CSS?

Question

Я стараюсь изо всех сил следовать рекомендациям Google PageSpeed ​​о том, как создать свой веб-сайт для обеспечения оптимальной производительности.

После анализа веб-сайта Google присваивает мне оценку или оценку на основе этих рекомендаций.

Один из принципов, который держит мой счет на низком уровне, следующий:

Устранить блокировку рендеринга JavaScript и CSS в верхнем содержании.

На вашей странице есть 1 блокирующий CSS ресурс. Это приводит к задержке рендеринга вашей страницы.

http://www.my-website.com/bundles/styles/125/core

Я многое сделал для решения этой проблемы.

Это включает в себя встраивание частей CSS в сам HTML (только те части, которые необходимы для первого рендеринга) и попытки загрузки CSS с помощью встроенного скрипта.

Я добавил этот фрагмент кода в конце моего тела HTML:

(function (document) {
    if(!document) return;
    var stylesheet = document.createElement('link');
    stylesheet.href = 'http://www.my-website.com/bundles/styles/125/core';
    stylesheet.rel = 'stylesheet';
    stylesheet.type = 'text/css';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(stylesheet);
})(document);

Тем не менее, Googe PageSpeed ​​по-прежнему жалуется на блокировку рендера.

Почему это так и как я могу решить эту проблему?

Answer 1

Ключевой частью является "содержаниевыше всех".

Убедитесь, что CSS, который вы загружаете в head только для элементов, которые находятся в верхней части вашей веб-страницы.

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

---

Однако вы не должны стремиться загрузить весь CSS в конце документа. Если CSS загружен пост-рендерингом, который влияет на уже стилизованные элементы HTML, их придется перерисовать на странице, что снизит производительность.