如何修复 Magento 中首屏内容中的“消除渲染阻塞 JavaScript 和 CSS”
How to fix "Eliminate render-blocking JavaScript and CSS in above-the-fold content in Magento
我缩小了 js 和 css 并优化了图像。在中使用了 async="async"
js适用的地方。如何修复“消除渲染阻塞
JavaScript 和 CSS 在首屏内容中
有什么想法吗？
如果您使用了 async 属性，您的 JavaScript 将不会阻止 DOM 元素的加载。但我们只完成了一半。关于 CSS，缩小它是一个好的开始，但它仍然会阻止解析器渲染元素，直到它完成加载。以下是我更喜欢的解决方案，它会调整样式表 link 的 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>
Render means loading, so if something is render-blocking, it means
that it is keeping the page from loading as quickly as it could.
1) load css in the headers but Js in the footer
2) Use sprite images
3) You can add htaccess code for for better performance
- Gzip compression
- set Expires and Cache-Control headers
- Browser cache-control
4) Load only required css/js on pages
Choose Best Method Once you’ve identified which scripts need to be
moved it is time to decide “how” to fix them. There are two main
methods to choose from. The first is to make the scripts inlined; in
this method the contents of the script are added directly into the
HTML of the page and are only loaded once they are needed. This is the
best option if the script is small and applies to a single page.
Another option is to defer the script. When you defer JavaScript you
are delaying any non-essential scripts from loading until after the
first render or until after the more essential portions have loaded.
This method is best when the script is not crucial and can wait to
load.
PS:- We can not resolve this fully in some cases.
I Hope it's helpful for you
我缩小了 js 和 css 并优化了图像。在中使用了 async="async" js适用的地方。如何修复“消除渲染阻塞 JavaScript 和 CSS 在首屏内容中
有什么想法吗？
如果您使用了 async 属性，您的 JavaScript 将不会阻止 DOM 元素的加载。但我们只完成了一半。关于 CSS，缩小它是一个好的开始，但它仍然会阻止解析器渲染元素，直到它完成加载。以下是我更喜欢的解决方案，它会调整样式表 link 的 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>
Render means loading, so if something is render-blocking, it means that it is keeping the page from loading as quickly as it could.
1) load css in the headers but Js in the footer
2) Use sprite images
3) You can add htaccess code for for better performance
- Gzip compression
- set Expires and Cache-Control headers
- Browser cache-control
4) Load only required css/js on pages
Choose Best Method Once you’ve identified which scripts need to be moved it is time to decide “how” to fix them. There are two main methods to choose from. The first is to make the scripts inlined; in this method the contents of the script are added directly into the HTML of the page and are only loaded once they are needed. This is the best option if the script is small and applies to a single page.
Another option is to defer the script. When you defer JavaScript you are delaying any non-essential scripts from loading until after the first render or until after the more essential portions have loaded. This method is best when the script is not crucial and can wait to load.
PS:- We can not resolve this fully in some cases.
I Hope it's helpful for you