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=".3.2/jquery.mobile-1.3.2.min.css">
<script src=".8.3.min.js"></script>
<script src=".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:
Put the
<head>after<body>Put the
<script>in the end of<body>
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./mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery./jquery-1.8.3.min.js"></script>
<script src="http://code.jquery./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:
Put the
<head>after<body>Put the
<script>in the end of<body>
-
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. – Ben Guest Commented Aug 9, 2014 at 10:53 -
2
Don't put
<head>after<body>, that's definitely invalid. – halfer 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. – Ben Guest 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? – JaskeyLam 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>. – Ben Guest Commented Aug 9, 2014 at 11:12
2 Answers
Reset to default 8No you cannot put the
headafter thebody.Yes you can, and that is the remended way because then the browser loads the html ponents 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.
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.