Avoid render-blocking CSS/JS outside direct control

Question

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.

Toni Michel Caubet · Accepted Answer · 2016-12-27 09:42:07Z

1

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

edited Dec 27, 2016 at 9:42

answered Dec 26, 2016 at 23:07

Toni Michel Caubet

20.3k59 gold badges219 silver badges390 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Avoid render-blocking CSS/JS outside direct control

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related