Оценка Google PageSpeed ​​- 1 файл блокировки рендера CSS

javascript php html css google-pagespeed

670 просмотра

2 ответа

340 Репутация автора

У меня есть веб-сайт Wordpress. Пытаясь набрать 100/100 баллов с помощью инструмента Google PageSpeed ​​Insights, я застрял на 1 «ошибке». Google говорит;

Устраните блокирование рендеринга JavaScript и CSS в верхнем содержании. На вашей странице есть 1 блокирующий CSS ресурсы. Это приводит к задержке рендеринга вашей страницы. Ни один из вышеперечисленных материалов на вашей странице не может быть обработан без ожидания загрузки следующих ресурсов. Попробуйте отложить или асинхронно загрузить блокирующие ресурсы или включить критические части этих ресурсов непосредственно в HTML. Оптимизируйте доставку CSS следующим образом: http://www.theoriereservering.nl/wp-content/themes/TESSERACT/style.css Blockquote

Style.css является первым загруженным файлом и является внутренним, я использовал style.css, чтобы объединить все остальные CSS-файлы, и теперь style.css является единственным оставленным файлом CSS, блокирующим рендер.

Могу ли я избавиться от этого последнего уведомления?

Автор: Vince Источник Размещён: 18.07.2016 10:21

Ответы (2)


0 плюса

0 Репутация автора

Попробуйте что-то подобное:

https://www.wpcub.com/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content/

Должно помочь

Автор: user5339016 Размещён: 18.07.2016 10:37

0 плюса

411 Репутация автора

Это удалит ошибку Google Pagespeed «Блокировать рендер CSS»:

Добавьте вышеупомянутые стили сгиба, встроенные на странице, в теги style, поместите остальные в ваш файл style.css и отложите его с помощью javascript, как ...

<script stype="text/javascript">
function loadCSS(href){
var ss = window.document.createElement('link'),
ref = window.document.getElementsByTagName('head')[0];
ss.rel = 'stylesheet';
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll
// fetch without blocking render
ss.media = 'only x';
ref.parentNode.insertBefore(ss, ref);
setTimeout( function(){
// set media back to `all` so that the stylesheet applies once it loads
ss.media = 'all';
},0);
}
loadCSS('style.css');
</script>

<noscript>
<!-- Let's not assume anything -->
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
</noscript> 

и / или поместите его в нижний колонтитул страницы

Автор: user3526204 Размещён: 12.08.2016 07:19
Вопросы из категории :
32x32