Avoid render-blocking CSS/JS outside direct control

Question

Avoid render-blocking CSS/JS outside direct control

81 views Asked by Martin At 09 September 2024 at 08:40

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.

Original Q&A

There are 1 answers

**Toni Michel Caubet** · Accepted Answer · 2016-12-26 23:07:08

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

TechQA.

Avoid render-blocking CSS/JS outside direct control

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in PAGESPEED

Popular Questions

Popular Tags

Trending Questions