Search code examples
javascriptcsspagespeed

Avoid render-blocking CSS/JS outside direct control


I am running a website on a platform called Smoolis. Part of their setup involves a range of css and js files that are characterized as render-blocking by google - my page is http://www.csselectronics.com/.

An example is the file workspace.core.baf8814.min.js which is 1 MB and driving a large part of the issue - but it is placed in the header where I cannot edit it as it is part of the platform.

Is there some work-around to improve the setup, e.g. loading this file simultaneously with other material through some smart code? I am able to enter additional code in the header, I'm just not able to alter how some of the CSS/JS files load.


Solution

  • Perhaps you could try this ( I had very good results with it )

    to have a critical css file ( with very basic definition of withs and heights ( include header and footer also ), and the other styles,

    So, for example in PHP, it'd be like so

    <html>
        <head>
           <style type="text/css"><?php include ('css/critical.css'); ?></style>
           <link rel="stylesheet" href="css/other_styles.css">
    </head>
    <body>...</body>
    </html>
    

    For my experience I can tell you this has is an average of 10-20+ (depending on previous score) points in google page speed score