-1

I have built a static website which i am currently hosting

I have given my current order of linking css , JavaScript and all other files in the html code below

I would appreciate a lot if someone can confirm if i am placing them all at the most ideal place . Consider the best loading speed and possible override. Not just regarding placement , any recommendations to improve overall performance is also welcome

As you can see there are total 9 linkings happening in my html , lemme give short summary of them

Head - 1) Google Font 2) My Main CSS File 3) Font awesome Css file 4) Jquery Library 5) JS file for modal windows 6) JS file for navigation bar

Body - Those 3 you see at bottom are related to the navigation bar as well

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Website Name</title>

  <link href="https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/modal.js"></script>
  <script src="js/responsive-nav.js"></script>
</head>

<body>

< -- Content -->

<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
</body>

</html>
Badal Singh
  • 479
  • 8
  • 24

2 Answers2

3

CSS and JavaScript files operate completely independently from one another; loading a CSS file or a JavaScript file first makes absolutely no difference whatsoever in terms of performance.

Still, there are a few points worth noting:

  • External CSS files like Google's Fonts and Font Awesome should be loaded before your own CSS file(s), as the order in which you load CSS files affects their specificity. You're going to want to override the framework fonts with your own CSS - not the other way around.

  • JavaScript files that depend on other files must be loaded after their dependencies. I assume that several of your plugins depend on jQuery, so you'll want to load jQuery before those plugins.

  • Placing <script> tags at the bottom of the <body> element improves the display speed (as opposed to referencing them in <head>), because script interpretation slows down the display.

So, in short, I would recommend the following:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <!-- Content -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/modal.js"></script>
  <script src="js/responsive-nav.js"></script>
  <script src="js/fastclick.js"></script>
  <script src="js/scroll.js"></script>
  <script src="js/fixed-responsive-nav.js"></script>
</body>
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • Thanks a lot for answering. I just had one doubt tho. In the body section after the jquery library linking there are 5 js files what if i combine them in 1 file and link that ? Would that make any difference. I had read somewhere that its better to have single long js file than many small js files – Badal Singh Sep 10 '19 at 04:11
  • 1
    You're asking about [*Minification*](https://en.wikipedia.org/wiki/Minification_(programming)) in relation to [*Multiplexing in HTTP/2*](https://stackoverflow.com/questions/36517829/what-does-multiplexing-mean-in-http-2). If you have implemented HTTP/2 already, then it's slightly faster to have multiple files. If you're still HTTP/1 (if unsure, then you are), it's slightly faster to have one big file. However, the difference is *very* small; there are hundreds of other things that impact performance more than multiplexing, and you should look elsewhere to improve performance :) – Obsidian Age Sep 10 '19 at 04:19
-1

Here is a few points:

  • <head> is loaded before <body> because of the placement

  • *.js is loaded synchronously and sequentially

  • *.css is loaded asynchronously

  • It is not enough to maintain optimal loading speed by order of placement

To sum up:

  • *.css should be in <head>

  • Larger *.js should be at the bottom of <body>

  • Small *.js should be in <head>

As long as it doesn't affect the order in which some variables are defined

NewGeek
  • 41
  • 4