Magento Question posted in
The official documentation can be found here.

How to fix "Eliminate render-blocking JavaScript and CSS in above-the-fold content in Magento

I have minified js and css and optimized images. Used async=”async” in
js where it is applicable. How to fix “Eliminate render-blocking
JavaScript and CSS in above-the-fold content”

Any Ideas?

Tags:

2

Answers


  1. 0

    Your JavaScript won’t block DOM elements from loading if you’ve used the async attribute. But we’re only half way there. Regarding CSS, minifying it is a good start, but it will still block the parser from rendering elements until it’s finished loading. The following is the solution that I prefer, which adjusts the media attribute of a stylesheet link until it’s loaded:

    <link rel="stylesheet" href="css/styles.css" media="wait" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="css/styles.css"></noscript>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search