order of styles and scripts

Permalink
Hi again

In my experience I have found that "order of styles and scripts" affects page load speed
and so I try to code external CSS before external JavaScript.
Other JS (not required in the head) goes before closing body tag.


Looking at optimization in Chrome Developer Tools I get,

"Optimize the order of styles and scripts (7)

The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript."


view.css
concrete/blocks/autonav/templates/responsive_header_navigation/view.css

view.css
concrete/blocks/search/view.css

view.css
concrete/blocks/image_slider/view.css

view.css
concrete/blocks/page_list/templates/thumbnail_grid/view.css

view.css
concrete/blocks/page_list/view.css


Each of these blocks includes a view.css though i'm not sure how it is called, but to me it appears to be an issue.


Do I need to update these blocks to "register" the css, js as in this link.

http://documentation.concrete5.org/developers/working-with-blocks/c...


I have noticed a view.css in other blocks too so if 'registering' is the right way to include css, js I will have do each block I use.

Any comments, feedback on this issue, appreciated.

low tech



Note there was also this in Chrome

2 inline script blocks were 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.

But I'll look at that after dealing with the registering question

lowtech
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi lowtech,

I don't believe the order of styles and scripts affects page load speed as much as it affects the "perceived" page load speed.
https://developers.google.com/speed/docs/insights/BlockingJS...

To reduce server requests, concrete5 has this feature:
"CSS and JavaScript Cache
This setting will attempt to combine and minify JS assets and CSS assets (respectively) on the fly to cut down on HTTP requests and speed up sites."
http://documentation.concrete5.org/editors/dashboard/system-and-mai...

I believe the recommendation to include CSS before JavaScript is to avoid render blocking.

In general, you will either run JavaScript in the head async or in the body. There is an exception to this in concrete5, jQuery will be loaded in the head and not async. This is done because so many blocks and themes require jQuery to work. Including it async or in the body will break many blocks and themes.

For what you are describing, I don't think it is a significant issue that will impact performance in a noticeable way.

I definitely recommend reading these two articles:
https://www.filamentgroup.com/lab/performance-rwd.html...
https://www.filamentgroup.com/lab/weight-wait.html...

If you enjoy these articles, then I encourage you to read this book:
http://abookapart.com/products/responsible-responsive-design...

I have personally made non-CMS based sites that used these techniques. Implementing them is not easy or straightforward and the benefit is minimal for smaller well designed sites. Where it really pays off is in large sites with a lot of CSS and you are trying to find any way to shave time off of a page load.

Using these techniques in a CMS is far more complicated.
lowtech replied on at Permalink Reply
lowtech
@MrKD

cool stuff

I guess my thinking is still old school ;)

Once again, if I don't need to concern about it that's ok by me, but i'm always looking to make a page appear onscreen as quick as possible.

So will definitely read up on those links you provided.

Thanks, appreciated

LT