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>

Improve this question
7
  • 1
    Developers put <script> tags at the bottom of their <body> because it allows the whole page to load before the scripts are then fetched. If they are in the <head> the user would need to wait for the scripts to be downloaded before the rest of the page is downloaded. I don't think you would want to put the CSS at the bottom of the page, as the user may see unstyled content and then a sudden change when the CSS is loaded. Keep your <head> at the top of the document. Commented Aug 9, 2014 at 10:53
  • 2
    Don't put <head> after <body>, that's definitely invalid. Commented Aug 9, 2014 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. Commented Aug 9, 2014 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? Commented Aug 9, 2014 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 <body>. Commented Aug 9, 2014 at 11:12

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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?
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.
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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.