PageSpeed Insights предлагает мне:
"Устранить внешние блокировки отображения Javascript и CSS в надводном содержимом. На вашей странице есть 1 блокировка ресурсов CSS, что приводит к задержке в рендеринге вашей страницы. Оптимизация доставки CSS для следующих ресурсов: http://itransformer.es/css/c0f9425.css"
Файл css c0f9425.css - это объединенный файл с файлом jquery-ui.css и настраиваемый.
Я не очень понимаю этот момент. Как я должен следовать этому предложению?
Google предлагает вам поместить первоначально необходимый (выше) CSS встроенный и загрузить остальную часть CSS, когда загрузка страницы будет готова. См. здесь.
То же самое касается javascript. Включите "must have code" inline и загрузите "nice to have code" на загрузку страницы, как предлагаемый здесь
Идея - загрузить то, что пользователь видит первым, как можно быстрее.
Лично мне трудно следовать, поскольку он разделяет код и упрощает его работу. Имеет смысл для крупных проектов, хотя...
Я успешно решил эту проблему только с файлами javascript.
Попробуйте добавить атрибут async в тег script или атрибут отсрочки.
Например:
<script src="filename.js" async></script>
<script src="filename.js" async="async"></script>
или
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>
Я предлагаю вам использовать async, он загружает файл только при необходимости. Атрибут "Отложить" загружает файл в конце страницы, в течение некоторого времени он не выполнит свою функциональность.
Устранить CSS-рендеринг-блокировку в проблеме с избыточным содержимым. Решить блокировку ресурсов CSS. Оптимизировать CSS. Доставка следующим образом:
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'css/style.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
Вы можете конвертировать все ваши файлы кода CSS в один файл, а затем google предлагает вам только один файл renderblocking. В противном случае, если вы работаете с проектом Wordpress, вы можете использовать различные плагины для своего сайта, например, исключить блокировку рендеринга css и js.
если вы хотите полностью визуализировать удаление блокировки рендера, тогда вы можете поместить весь код css в раздел главы, работает префект.
Чтобы ответить на ваш вопрос:
Во-первых, HTML анализируется и конструирует DOM - объектную модель документа. Во-вторых, CSS анализируется и создает CSSOM - CSS Object Model. И DOM, и CSSOM являются структурными представлениями HTML и CSS для лучшего понимания браузера. Затем следует построение дерева рендеринга, которое представляет собой не что иное, как объединение DOM и CSSOM, которое предлагает и объясняет браузеру, какую часть следует визуализировать и как она должна отображаться, а затем, наконец, выводит на экран ваш веб-сайт.
Когда вы подумываете об устранении CSS, блокирующего рендеринг, вы можете подумать о некоторых параметрах, связанных с использованием меньших CSS файлов,
(I) путем объединения файлов CSS, (II) путем встраивания файлов CSS
Информация: когда вы пытаетесь отобразить веб-страницу без исправления блокирующих визуализацию файлов CSS, браузер загружает все ресурсы CSS и отображает их.
Узнайте больше о комбинировании и вставке CSS файлов, прочитайте https://www.speedboost.xyz/blog/why-do-you-need-to-eliminate-render-blocking-css-js/