消除外部渲染阻塞

Question

PageSpeed Insights建议我:

"在首页内容中消除外部渲染阻止Javascript和CSS.您的页面有1个阻止CSS资源.这会导致渲染页面延迟.优化以下资源的CSS交付:http: //itransformer.es/ css/c0f9425.css "

css文件c0f9425.css是包含jquery-ui.css文件和自定义文件的组合文件.

我真的不明白这一点.我该如何遵循这个建议？

Answer 1

谷歌建议你把最初需要的(首要的)CSS内联并在页面加载准备好时加载其余的CSS.看到这里.

同样适用于javascript.包括内联的"必须代码"并在页面加载时加载"很好有代码",如此处所示

想法是尽可能快地加载用户首先看到的内容.

我个人觉得很难遵循,因为它会分割代码并使其更难维护.虽然对大型项目有意义......

Answer 2

我只用javascript文件成功解决了这个问题.

尝试在脚本标记或延迟属性中添加async属性.

例如:

<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,它只在需要时加载文件.延迟属性在页面末尾加载文件,有时它不会执行所需的功能.

Answer 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>