Оптимизировать CSS Доставку в Wordpress Theme

Question

При использовании страниц скорости понимания я это оповещение

Eliminate render-blocking JavaScript and CSS in above-the-fold content 
Your page has 1 blocking CSS resources. This causes a delay in rendering  your page. 
Approximately 3% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. 
Optimize CSS Delivery of the following: 
http://www.mysite.co.uk/wp-content/themes/mytheme/css/m.min.css 

Примечание: убрана URL, как это рабочий сайт на мое рабочее место.

Я пытался делать то, что предлагается на Google и используя

<script> 
    var cb = function() { 
    var l = document.createElement('link'); l.rel = 'stylesheet'; 
    l.href = 'small.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, но он сказал мне удалить файлы js и шрифтов.

В настоящее время я нахожусь в 97/100 на странице скорости, поэтому я был бы очень признателен за любую помощь.

Answer 1

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

Идея заключается в том, что вы получаете все необходимые ресурсы в одном обращении к серверу с помощью HTML-страницы. Для любых оставшихся или «некритических» ресурсов вы затем загружаете асинхронно. Для получения дополнительной информации см. this article на веб-сайте разработчиков Google.

Я считаю, что лучший инструмент для использования, чтобы извлечь Critical CSS на самом деле Grunt плагин называется grunt-critical. Если вы никогда не использовали Grunt раньше с Wordpress, есть great tutorial на Tuts + сайтов, которые вы пройдете через него.

Кроме того, вы можете асинхронно загружать свой JavaScript с помощью HTML async attribute.

Answer 2

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

Посредством этого страница не ждет, чтобы загрузить большое изображение.