Устранить внешнюю визуализацию

Ответ 1

Google предлагает вам поместить первоначально необходимый (выше) CSS встроенный и загрузить остальную часть CSS, когда загрузка страницы будет готова. См. здесь.

То же самое касается javascript. Включите "must have code" inline и загрузите "nice to have code" на загрузку страницы, как предлагаемый здесь

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

Лично мне трудно следовать, поскольку он разделяет код и упрощает его работу. Имеет смысл для крупных проектов, хотя...

Ответ 2

Я успешно решил эту проблему только с файлами 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, он загружает файл только при необходимости. Атрибут "Отложить" загружает файл в конце страницы, в течение некоторого времени он не выполнит свою функциональность.

Ответ 3

Устранить 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>

Ответ 4

Вы можете конвертировать все ваши файлы кода CSS в один файл, а затем google предлагает вам только один файл renderblocking. В противном случае, если вы работаете с проектом Wordpress, вы можете использовать различные плагины для своего сайта, например, исключить блокировку рендеринга css и js.

если вы хотите полностью визуализировать удаление блокировки рендера, тогда вы можете поместить весь код css в раздел главы, работает префект.

Ответ 5

Чтобы ответить на ваш вопрос:

Во-первых, 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/