How to fix "Remove JavaScript and CSS rendering blocking in above content in Magento
Render means loading, so if something is rendering-blocking it means that it saves the page as quickly as possible.
1) loading css in headers but Js in footer
2) Use sprite images
3) You can add htaccess code for better performance
- Gzip compression
- set expiration and cache headers
- Browser cache management
4) Load only the required css / js to the pages
Choose the best method. Once you have determined which scripts should be it is time to decide "how" to fix them. There are two main methods to choose from. The first is to nest the scripts; in this method, the script content is added directly to the HTML pages and loaded only when needed. This is the best option if the script is small and one page.
Another option is to defer the script. When you defer JavaScript, you delay any nonessential scripts from loading until you render first, or until more important parts have loaded. This method is best when the script is not critical and can wait for load.
PS: - We cannot completely resolve this in some cases.
Hope this is helpful to you.
source to share
Your JavaScript will not block DOM elements from loading if you used the attribute async
. But we're only halfway there. As far as CSS is concerned, minifying it is a good start, but it will still block the parser from rendering the elements until it finishes. The following is the solution I prefer, which sets up the media
stylesheet link attribute before loading it:
<link rel="stylesheet" href="css/styles.css" media="wait" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="css/styles.css"></noscript>
source to share