【发布时间】：2018-01-04 10:35:48
【问题描述】：
我已经缩小了 js 和 css 并优化了图像。在中使用 async="async" js 适用的地方。如何修复“消除渲染阻塞 首屏内容中的 JavaScript 和 CSS"
有什么想法吗？
【问题讨论】：
标签： php apache magento optimization
【发布时间】：2018-01-04 10:35:48
【问题描述】：
渲染意味着加载，所以如果某些东西是渲染阻塞的，它意味着 它会尽可能快地阻止页面加载。
1) 在页眉中加载 css，在页脚中加载 Js
2) 使用精灵图片
3) 您可以添加 htaccess 代码以获得更好的性能
- Gzip 压缩
- 设置过期和缓存控制标头
- 浏览器缓存控制
4) 仅在页面上加载所需的 css/js
选择最佳方法 一旦您确定了哪些脚本需要 感动是时候决定“如何”修复它们了。主要有两个 方法可供选择。首先是使脚本内联；在 此方法将脚本的内容直接添加到 页面的 HTML，仅在需要时加载。这是 如果脚本很小并且适用于单个页面，则最好的选择。
另一个选择是推迟脚本。当你推迟 JavaScript 时，你 正在延迟加载任何非必要的脚本，直到 第一次渲染或直到加载了更重要的部分之后。 当脚本不重要并且可以等待时，此方法最好 加载。
PS:- 在某些情况下我们无法完全解决这个问题。
希望对你有帮助
【讨论】：
-
感谢您非常干净的解释，我可以使用任何其他第三方扩展来解决同样的问题吗？ @Umesh
-
是的，有很多扩展，你可以试试这个，它肯定会很好的结果并影响你的网站速度:- amasty.com/magento-google-page-speed-optimizer.html
-
Yogesh，你试过了吗？
如果您使用了 async 属性，您的 JavaScript 将不会阻止加载 DOM 元素。但我们只完成了一半。关于 CSS，缩小它是一个好的开始，但它仍然会阻止解析器渲染元素，直到它完成加载。以下是我喜欢的解决方案，它调整样式表链接的media 属性，直到它被加载：
<link rel="stylesheet" href="css/styles.css" media="wait" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="css/styles.css"></noscript>
【讨论】：