Home What is the order of linking font, CSS and scripts
Reply: 3

What is the order of linking font, CSS and scripts

Donghui Ma
1#
Donghui Ma Published in 2017-09-14 09:05:43Z

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.

Arun Sharma
2#
Arun Sharma Reply to 2017-09-16 07:20:31Z

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>
Paolo Forgia
3#
Paolo Forgia Reply to 2017-09-14 09:35:50Z

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.

lpradhap
4#
lpradhap Reply to 2017-09-14 09:58:53Z

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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.310361 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO