Optimize the order of styles and scripts issue

David Cameron Law
(@seo-dave)

9 years, 9 months ago
Trying to squeeze every last ounce of performance for an SEO theme I develop and noticed a clash with the cache 🙂

Using Google Chrome audit tool.

Tools >> Developer Tools : Audits on http://stallion-theme.co.uk/

Found this issue:
```
Optimize the order of styles and scripts (1)
1 inline script block was found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.
```
Looking through my code the cause is I’ve got some inline CSS in the head to load a background image (behind the heading at the top). I added the code close to the top of the head section (next line after the title element) so it’s run before the CSS files are enqueued by WP.

With W3 Total Cache Minification and combining CSS files (have three correctly enqueued CSS files) on the minified CSS file is placed ABOVE the title element (directly after the opening head tag), which means it loads before my inline CSS.

Shouldn’t the minified CSS file be loaded at the bottom of the head section to prevent this?

Is there a fix to have it load this way, want it added before the closing head tag?

I’m thinking about adding inline CSS to render the important parts of the page layout etc… to remove the PageSpeed Insights issue “Your page has 1 blocking CSS resources. This causes a delay in rendering your page.”. If W3 total Cache adds the minified CSS file to the top of the head it will load before my inline rules.

David

https://wordpress.org/plugins/w3-total-cache/

Viewing 4 replies - 1 through 4 (of 4 total)

Bilal TAS
(@bilaltas)

9 years, 8 months ago

It is very easy to fix it for the creators of the plugin but I don’t understand why they don’t answer some tickets like this.
I have same issue, too. (as everybody has as well.). I was going to write a ticket about it. Then, I came across your this message.

Minified Javascript should be next to all the CSS codes in the <HEAD> </HEAD> tags. If we don’t combine all the CSS files, that rest of the css files goes after minified javascript file. They need to adjust the file orders once again.

Plugin developers, please include that fix on a new update. Thank you in advance…

Bilal TAS
(@bilaltas)

9 years, 8 months ago

???

Andreas
(@andreasnrb)

9 years, 8 months ago

Can use custom placement directly in the theme templates. There are certain placeholder tags. Check the FAQ.
Thread Starter David Cameron Law
(@seo-dave)

9 years, 8 months ago
Found it in the FAQ, that is a huge FAQ to go through, took me 20 mins to find it and I had a good idea what I was looking for 🙂

Instructions at: https://www.w3-edge.com/products/w3-total-cache/ under

How can I embed the CSS or JS file at the location I choose?

Note copying and pasting the code from the above results in the — part of the code being replaced with the wrong code.

This is what it should be:

Add
```


```
above your closing head tag (will be in a themes header.php file) like this:
```


</head>
```
Got it working at http://stallion-theme.co.uk/ ** will have to add this code to the SEO theme I develop (Stallion Responsive) in the next update for best performance.

** Currently don’t run any javascript files loaded in the head, so you’ll only see the minified CSS file when viewing source.

Thanks for the pointer Cyonite.

David

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Optimize the order of styles and scripts issue’ is closed to new replies.

Tags