Ordering of stylesheets and scripts

Termin · Post by **Termin** » Fri Sep 19, 2014 10:36 am

Hi dear developers,

no strand of boot styles and scripts

[ external image ]

cmb · Post by **cmb** » Fri Sep 19, 2014 11:20 am

Hi Termin,

I have moved this post to a new topic in the Open Development forum, because IMO it is not a bug, but rather a feature request.

if I understand you right, you want the stylesheets before the scripts:

Code: Select all

<!-- plugins: autogallery, cmb, cryptographp, filebrowser, hi_updatecheck, jquery, meta_tags, 
ocal, pagemanager, page_params, realblog, tinymce, twocents, utf8 -->
<link rel="stylesheet" href="./core/css/core.css" type="text/css">
<link rel="stylesheet" href="./templates/mini1/stylesheet.css" type="text/css">
<link rel="stylesheet" href="./core/css/plugins.css" type="text/css">
<link rel="stylesheet" type="text/css" media="screen" href="./plugins/jquery/lib/jquery_ui/1.10.4/css/jquery-ui.min.css">
<script type="text/javascript" src="./plugins/jquery/lib/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="./plugins/jquery/lib/migrate/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="./plugins/jquery/lib/jquery_ui/1.10.4/jquery-ui.min.js"></script>

That looks nice, but I don't see a real advantage. It would be better if all <script>s would be placed at the bottom of the <body> element, but that would require to change a lot of plugins. I encourage all plugin developers to use $bjs instead of $hjs (at least when $bjs is available), but can we force them to do so?

How do others think about this issue?

Christoph

Termin · Post by **Termin** » Sat Sep 20, 2014 10:58 am

Hi Christoph,

According to the documentation, google, the boot order of styles and scripts faster downloads in the user's browser.
https://developers.google.com/speed/pagespeed/insights/
https://developers.google.com/speed/pagespeed/?csw=1

cmb · Post by **cmb** » Sat Sep 20, 2014 11:48 am

Termin wrote:According to the documentation, google, the boot order of styles and scripts faster downloads in the user's browser.
https://developers.google.com/speed/pagespeed/insights/
https://developers.google.com/speed/pagespeed/?csw=1

On https://developers.google.com/speed/doc ... BlockingJS they explain, that JavaScript should be loaded "below the fold", i.e. after any HTML content, that is visible without scrolling, has been loaded. Simply moving down <script> elements inside the <head> element won't suffice -- the <script> elements have to go inside the <body> element, preferably at the bottom of it. Yahoo recommends the same: move JS to the bottom of the page, i.e. the bottom of the <body> element.

Unfortunately, we can't do this right now for compatibility with existing plugins.

Setting the async attribute for jquery.js would also help, but this could cause problems, too. Consider:

Code: Select all

<head>
<!-- ... -->
<script src="jquery.js" async></script>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script>document.write("...");
$("...")
</script>

The script in the body can't be loaded asynchronously, because it uses document.write(). In some cases, though, it could be that this script is executed, before jQuery is loaded, in which case the second line would trigger an error: "ReferenceError: $ is not defined".

I'm afraid, we can't really improve the situation unless several plugins will be modified to cater for jQuery being loaded late.

CMSimple_XH–Forum

Ordering of stylesheets and scripts

Ordering of stylesheets and scripts

Re: Ordering of stylesheets and scripts

Re: Ordering of stylesheets and scripts

Re: Ordering of stylesheets and scripts