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

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

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

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

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


javascript php html css google-pagespeed
person Vince    schedule 18.07.2016    source источник
comment
возможное дублирование stackoverflow.com/questions/18013648/   -  person Ismail Farooq    schedule 18.07.2016
comment
Объединив весь CSS в один файл, интерпретируется каждая мелочь, измененная этим CSS (даже то, что вы не видите при входе на свой веб-сайт). Я предполагаю, что вам нужно будет загрузить CSS, который содержит только те вещи, которые важны для вашей видимой страницы, встроенной, а не файл (который изменяет содержимое в верхней части страницы)   -  person jquiaios    schedule 18.07.2016
comment
Вы можете сослаться на varvy.com/pagespeed/render-blocking-css.html . Надеюсь, это поможет вам стать лучше.   -  person Vishal Panara    schedule 18.07.2016
comment
Смотрите серию "Наддувная" на The Guardian. Он объясняет, почему вы используете встроенные блоки CSS для содержимого над сгибом. youtube.com/watch?v=obtCN3Goaw4   -  person Tom    schedule 18.07.2016

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

person Community    schedule 18.07.2016

arrow_upward
0
arrow_downward

Это удалит ошибку Google Pagespeed "Render Blocking CSS":

Добавьте свои стили над сгибом, встроенные на страницу в теги стилей, а остальные поместите в файл 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>

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

person user3526204    schedule 12.08.2016