2

I am using jQuery Mobile, and for now, I have the following at the bottom of my <head> tag:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>help</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

Since the user may have a very bad network access, I hope the user can load my page faster, even though the JavaScript or CSS is not ready.

Will it work if I:

  1. Put the <head> after <body>

  2. Put the <script> in the end of <body>

Kevin Damstra
  • 125
  • 2
  • 13
JaskeyLam
  • 15,405
  • 21
  • 114
  • 149
  • 1
    Developers put ` – Ben Guest Aug 09 '14 at 10:53
  • 2
    Don't put `` after ``, that's definitely invalid. – halfer Aug 09 '14 at 10:55
  • However, once the user has loaded the scripts and CSS files once, they should be cached by the browser and wont need to be downloaded every page visit. – Ben Guest Aug 09 '14 at 10:55
  • Hi @BenGuest , for my case, I don't even care if the CSS is loaded because my html is really easy and full of words(this is something like a guide). The main problem is the loading speed, the jquery CSS is just let it a bit beautiful. So, any way to maximize the speed can be considered? Do you have any idea how I can even do not let the CSS block my page loading? – JaskeyLam Aug 09 '14 at 11:09
  • I guess you could decide which CSS files are really necessary and which are less important, and then place the less important ones at the bottom of the ``. – Ben Guest Aug 09 '14 at 11:12
  • @BenGuest, but when i add in the bottom of the body, ecplise gives me the yellow warnning. – JaskeyLam Aug 09 '14 at 11:13
  • It is putting the yellow warning there because it isn't best practice to put links to external CSS at the bottom of the ``, but in your specific case, it doesn't sound like it will be a problem. – Ben Guest Aug 09 '14 at 11:27

2 Answers2

8

  1. No you cannot put the head after the body.

  2. Yes you can, and that is the recommended way because then the browser loads the html components first like you are saying and applies your script afterwards. But you can place it just before you need it and no sooner really. Read more here.

The css on the other hand should be linked inside your head tag.

Ljungren
  • 177
  • 11
  • Thank you for your answer.For my case, I don't even care if the CSS is loaded because my html is really easy and full of words(this is something like a guide). The main problem is the loading speed, the jquery CSS is just let it a bit beautiful. So, any way to maximize the speed can be considered.Do you have any idea how I can even do not let the CSS block my page loading? – JaskeyLam Aug 09 '14 at 11:12
  • If you don't have any images or any other heavy stuff loaded in the css, then it isn't particularly resource consuming. I suggest you should examine your css and script content or maybe post it in a new question. Then we can see what could be a problem. – Ljungren Aug 09 '14 at 11:47
1

You can't put <head> after <body>.

Putting the <script> in the end of <body> is good. but, the best solution for your problem is putting <script> in the <head> tag and use the async or defer attributes. Explanation can be found here.

And CSS should go to <head> always.

Community
  • 1
  • 1
Razan
  • 134
  • 2
  • 6