8

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.

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
imtk
  • 373
  • 3
  • 11

3 Answers3

8

I 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>
Arun Sharma
  • 1,331
  • 8
  • 11
  • I don't quite understand why loading font stylesheet will cause layout appears broken. If I load CSS first, doesn't browser have to start over once the font is loaded? – imtk Sep 16 '17 at 03:06
  • 1
    CSS which is required for styling layout should be prioritized over font CSS which is responsible only for font or font icons. A broken layout may be experienced on a slow connection if the required CSS file is loaded after loading other low priority files. To support my answer and my order of priorities, I will urge you to go to https://getmdl.io which is a project by Google and inspect its source code to reveal the priority order. This inspection will also prove your accepted answer incorrect. – Arun Sharma Sep 16 '17 at 07:05
  • You are always welcome and please consider accepting this as the correct answer to prevent others from doing it the wrong way. – Arun Sharma Sep 18 '17 at 13:55
  • This answer is great, but could do with a link to the "developers' best practices" you cite – Arth May 19 '20 at 09:09
4

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.

  1. google font
  2. fontawesome
  3. JQuery lib
  4. remote bootstrap lib
  5. reset.css
  6. master.css
  7. main.js

Loading the JavaScript files at the end of the body (just before </body>) will improve site loading speed when compared to having JavaScript files between the head tags.

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Parthipan Natkunam
  • 756
  • 1
  • 11
  • 16
  • Thank you, may I ask why putting js at the end will help improve loading speed? – imtk Sep 14 '17 at 09:32
  • 1
    @DonghuiMa there's plenty of discussion about that on SO, here's a good one: https://stackoverflow.com/questions/3531314/should-i-write-script-in-the-body-or-the-head-of-the-html – freedomn-m Sep 14 '17 at 09:33
  • @ Parthipan Natkunam Best developer practices' suggest CSS should be loaded before loading js or jquery library. – Arun Sharma Sep 14 '17 at 09:40
2

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.com/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.

lpradhap
  • 623
  • 6
  • 17