If I have a website project with:
- reset.css
- remote bootstrap lib
- master.css
- remote font awesome CSS
- two google fonts
- JQuery lib
- main.js
Consider the best loading speed and possible override. What would be the best order to link them in <head>
I know what is added later will override the same rule with same priority previous style sheets applied and browser rendering from top to bottom, <head> first then <body>
I also learned from google that there is something called prefetch in the modern browsers.
Personally, I would do reset.css, font awesome, google font, bootstrap lib, master.css, Jquery lib, main.js. Universal rules first, lib first. But I don't know exactly how to deal with font since they are stylesheet as well.
If I have a website project with:
- reset.css
- remote bootstrap lib
- master.css
- remote font awesome CSS
- two google fonts
- JQuery lib
- main.js
Consider the best loading speed and possible override. What would be the best order to link them in <head>
I know what is added later will override the same rule with same priority previous style sheets applied and browser rendering from top to bottom, <head> first then <body>
I also learned from google that there is something called prefetch in the modern browsers.
Personally, I would do reset.css, font awesome, google font, bootstrap lib, master.css, Jquery lib, main.js. Universal rules first, lib first. But I don't know exactly how to deal with font since they are stylesheet as well.
Share Improve this question edited Sep 14, 2017 at 9:33 Paolo Forgia 6,7488 gold badges50 silver badges59 bronze badges asked Sep 14, 2017 at 9:05 imtkimtk 3933 silver badges12 bronze badges 2- I think the approximately rule：the more I used the latter order it should be in. – JiangangXiong Commented Sep 14, 2017 at 9:15
- Please check my answer for the best developer practices and speed optimization. – Arun Sharma Commented Sep 14, 2017 at 10:29
3 Answers
Reset to default 9I would like to point out that the orders suggested in previous answers are not fully in sync with the developers' best practices as suggested by Google and MDN.
CSS should be loaded first in the head followed by font stylesheets or google font stylesheets so that the layout doesn't appear broken for a while especially on slow connections.
So, Bootstrap css can be loaded into head while Bootstrap js should be loaded later after jQuery.
JS, jQuery and its dependencies can be moved to the bottom of the page to promote faster page loading because JS code can affect the content and layout of a web page, browsers delay rendering any content that follows a script tag until that script has been downloaded, parsed and executed.
And as bootstrap js has jQuery as a dependency. So, jQuery should be loaded first followed by boootstrap js and main js file.
So, the correct order in accordance with best developer practices:
<head>
1. Bootstrap CSS
2. Reset CSS
3. Master CSS
4. Google Font CSS
5. Font Awesome CSS
</head>
<body>
Your content goes here
<!-- add js files to the bottom of the page-->
6. jQuery
7. Bootstrap js
8. Main js
</body>
It is important to load jQuery before Bootstrap and all custom CSS after bootstrap. It is better to load the google font stylesheet in the beginning.
The order should be libraries first followed by custom scripts and styles. Since bootstrap depends on jQuery, jQuery should be loaded before loading the Bootstap's JavaScript file.
- google font
- fontawesome
- JQuery lib
- remote bootstrap lib
- reset.css
- master.css
- main.js
Loading the JavaScript files at the end of the body (just before </body>) will improve site loading speed when pared to having JavaScript files between the head tags.
Since you question is in terms of performance. below are some of my views
1. load google fonts aysnc you can load the font asynchronous, so then it will not block the rendering of the page. you can use the javascript font loader, https://github./typekit/webfontloader
2. load css first the below method may be the best way to go
- fontawesome
- JQuery lib
- remove bootstrap lib
- reset.css
- master.css
i also suggest you merge reset.css and master.css since i believe sending a separate request for reset.css is useless and merging those small codeset with master.css will be a better approach.
3. load JS finally load the master.js file, its better you load this file in bottom of the body tag, since then it will improve page load performance effecting the critical rendering path.
note: please read about critical rending path, which may explain in-depth about page-load performance.