Where in the HTML file should Jquery and Bootstrap be placed? - javascript

Curious at to where I place my Jquery and Bootstrap files. They recommend that you always place at the bottom for performance purposes yet when I check sites that use Jquery/Bootstrap the majority of users always place them at the top. Also should I be loading my own JavaScript files before or after the bootstrap/Jquery files?
I take it that I load the my own css file first before the bootstrap file if I want to override some of their styling, is this correct and does the same apply to javascript files?

Typically stylesheets in the head and scripts before the closing </body> tag:
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="your-other-styles.css">
</head>
<body>
<!-- content -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="your-other-scripts.js"></script>
</body>
</html>
You'll want files from vendors such as jQuery and Bootstrap to be included before yours. This means that:
CSS: You can override their styles with your own*
Scripts: You have access to any objects added to the global scope such as window (jQuery adds $,
for example)
However, if you require a script to be available before your content loads (such as Modernizr), then putting it in the <head> ensures it's ready before any of your content.
Including scripts at the bottom ensures that the actual page content is loaded first; when the scripts are finally downloaded the content (DOM) will be ready for your scripts to manipulate.
* assuming your selector specificity is at least equal to those in your vendor CSS

Bottom is best to place all your script references at the end of the page before </body>.It should look like below in normal page.
<html>
<head>
<link href="path/to/file.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="path/to/file.js" type="text/javascript"></script>
</body>
</html>
Although in some cases it may be necessary to load JavaScript before page load if any of your function need to access JavaScript before Page Load.Specially if you are working with JQuery UI And Bootstrap.
You can decorate your script tags with the defer attribute so that the browser knows to download your scripts after the HTML has been downloaded:
<script src="Jquery.js" type="text/javascript" defer="defer"></script>
or
<script src="demo_async.js" async></script>
When present, it specifies that the script will be executed asynchronously as soon as it is available.
http://www.w3schools.com/tags/att_script_async.asp
If you need script to access in page for use then script need to available before using it. Although it need to be sure the browser support defer="defer". Async is supported by all major browsers.
Javascript by default block any other parallel downloads. So if you have many tags in the head, calling on multiple external scripts will block the HTML from loading, thus greeting the user with a blank white screen, because no other content on your page will load until the java script files have completely loaded. Another advantage to load script in bottom is that any error caused by external script will not stop the page from Loading to browser.
Style css need to present in top <Head> to access in page.

It really depends on what you want to achieve, but generally JS is placed at the bottom and CSS in your head section. Make sure that jquery library loads before Bootstrap's JS library and your custom css file loads after Bootstrap's CSS, so it will override. You can load Bootstrap's CSS from their CDN (or others, like cloudflare - for example http://cdnjs.com/libraries).
Make sure you minify all that & activate compression and you shouldn't experience any performance issues.
Advanced techniques imply using the most important part of your CSS in your head area, then send the rest of the CSS in the bottom area. Or have your whole static content (CSS + JS) hosted on a CDN.

Related

Improve page speed by async and defer attribute

I need page speed improvement in my webpage.I read a lot about using async and defer attribute for improve initial page speed.All the js scripts are defined just above the </body> tag.Please suggest how effectively use these attributes in my page?
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/css/style/mystyle.css">
</head>
<body>
<!--HTML content-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>
google analytics script
</body>
</html>
To use defer:
<script src="path" defer="defer"></script>
To use async:
<script src="path" async="async"></script>
When to use defer/async?
If you need your scripts to be loaded asynchronously ie. while loading the html and css the script with asyc attribute will fore the browser to load them in background ie. they will be loaded while other things work.
And if you need your scripts to be loaded only after fully loaded the html and css then you may use defer attribute.
So, you need to be careful to use this technique because of these attributes some javascript code may not work as you wish it should have to be.
How to use them effectively?
I do not suggest you to use async because it may load any script in any order because of the filesize and/or scripts (as it loads asynchronously) so your functionality would be hampered.
So, just use the defer to fulfill the requirement as per the google page speed which will load the scripts as you wish it should have in that order.
Although, using defer, you may have impact on your website because you may have called some scripts should have run before the document is ready. In that case, you should not follow the instruction of the google page speed so let it be how it was.
Finally, it depends upon you and your scripts.
You shouldn't change anything or use defer for all.
Bootstrap requires jQuery to be loaded (although you're not really loading Bootstrap here, but some Angular-Bootstrap template). So you cannot use async to load any of these resources. Additionally you're loading a lot of Angular resources which depend upon the main angular.min.js resource, so you can't use async here either.
You could use defer for all, but the page won't render faster. The only difference is that the scripts will be executed once they're all loaded, rather than one by one (executed once they're downloaded), but that doesn't change anything regarding page load time.

Bootstrap JS script not working

So I have a webpage, and I have all of the js scripts in the footer of the webpage, yet it is not letting me use the js functions of bootstrap, like using drop downs. The
Can anyone help?
I can't put the code here because of the character limit, but here is a paste bin:
http://pastebin.com/fzy6e5CZ
I find that linking to scripts makes your page relatively slow. I would try using a CDN, here is the code to include the min. versions of those scripts through the CloudFlare CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.3/holder.min.js"></script>
Use the following for Bootstrap CSS
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" type="text/css">
I think you should update your jQuery and bootstrap .js file and check your file adding path is right. Your file destination exactly there where you trigger it?

How can I stop rendering HTML until external css, js loaded

I just want to stop rendering to the html to the DOM until my Css and Js loaded from an external source.
<html is showing here >
<link type="text/css" rel="stylesheet" href="http://preview.somex.com/sites/all/themes/bootstrap_mywinners/css/style.css">
<script type="text/javascript" language="javascript" src="http://preview.somex.com/sites/all/themes/bootstrap_mywinners/js/mywinners-global-scripts.js">
<html is end here >
Why I'm doing this is the static html is looking ugly until the css and js loaded and then after sometime?(after loading css and js from network) it looks cool.
So I just want to stop showing html until the script and css load.
Any clues/help regarding this ?
If your includes are nested in the BODY tag not a lot you can do with just pure HTML. If you can move them up into the HEAD section section this should fix itself. A great breakdown of how the page loads and what fires when is on an answer to another StackOverflow question see this link :
Which is the load, rendering and execution order of elements in a HTML page?
Hope you find this helpful.

How to get a script to load last on webpage?

I have a webpage with mostly basic HTML on it. There is one section where I load an RSS feed using JavaScript pulling from an external source (url). The problem is that my page will load everything up until that script, wait for the script to load (sometimes up to a few seconds), then load the rest of the page.
How can I force it to load the script after it has rendered the entire page first?
My code is something like this:
<html>
<more html>
<script language="JavaScript" src="http://..." type="text/javascript"></script>
<more html>
...
Two options:
Put your script block at the end of the page. This is good practice anyways due to the fact that your page strucutre will load before the script that is intended to manipulate it. Because the user generally notices the page loading but not the script, this gives the appearance of a faster load overall.
Include the defer attribute in the opening script tag. Note that defer can only be used on external script files (those with an src attribute). See https://developer.mozilla.org/en-US/docs/HTML/Element/script.
Add the defer attribute to the script tag in the head also works
<script language="JavaScript" src="http://..." type="text/javascript" defer></script>
Reference link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer
A pretty reliable way to make a script load after pageload is to write out the script include itself in javascript.
var theScript = document.createElement("script");
theScript.setAttribute("type","text/javascript");
theScript.setAttribute("src","//www.mysite.com/script.js");
document.getElementsByTagName("head")[0].appendChild(theScript);
You could try wrapping the function that calls the feed in
jQuery(window).load(function(){
//embed RSS feed
});
forcing it to load last.
Move your script tag to the end and it will load after everything else. For example:
<html>
<more html>
<more html>
<script language="JavaScript" src="http://..." type="text/javascript"></script>
</html

Where should I declare JavaScript files used in my page? In <head></head> or near </body>?

I was reading a tutorial and the author mentioned to include JavaScript files near the closing body tag (</body>) in HTML.
For what type of functionality should I not declare/define JavaScript include in the head section? It makes sense to me include JavaScript like Google Analytics near the closing body tag. Where should I be careful in defining JavaScript include near the closing body tag?
It will often be argued that for speed purposes you should put script tags right at the end of the document (before the closing body tag). While this will result in the fastest page load, it has some serious downsides.
Firstly, a common idiom with Webpage development is to have a header file, a footer file and your content in the middle. To keep unnecessary JavaScript code to a minimum, you'll often want to put code snippets in individual pages.
If you include jQuery, for example, at the end of the document, your jQuery code snippets (like document ready stuff) must happen after that. That can be awkward from a development point of view.
Secondly, in my experience, because the page load is faster, you can end up noticing certain effects being applied because the page has already loaded by the time they are applied.
For example, if you put a table in a document and right before the body close tag put:
$(function() {
$("tr:nth-child(odd)").addClass("odd");
});
with appropriate styling, that effect being applied will often be visible. Personally I think that makes for a bad user experience potentially. I think often you're better off having the page load slightly slower (by putting scripts at the top) if you don't get disconcerting visual effects.
I generally advocate effective caching strategies so you only have to download JavaScript files when they change, as in Supercharging JavaScript in PHP (but the principles apply to any language, not just PHP) and still putting scripts at the top. It's far more convenient.
By putting them in the <head/> you force the browser to download the files before it can render a page. That causes the perceived load time to slow down.
By placing them in the footer, right before the closing body tag, the browser will not load them until it reaches that point in the parsing of the HTML. That means that the scripts will run later in the page load process but will not block the asset download and rendering process.
Which works best is up to you and how you develop your code.
The Yahoo YSlow tool has advice on this:
The problem caused by scripts is that
they block parallel downloads. The
HTTP/1.1 specification suggests that
browsers download no more than two
components in parallel per hostname.
If you serve your images from multiple
hostnames, you can get more than two
downloads to occur in parallel. While
a script is downloading, however, the
browser won't start any other
downloads, even on different
hostnames.
In some situations it's not easy to
move scripts to the bottom. If, for
example, the script uses
document.write to insert part of the
page's content, it can't be moved
lower in the page. There might also be
scoping issues. In many cases, there
are ways to workaround these
situations.
An alternative suggestion that often
comes up is to use deferred scripts.
The DEFER attribute indicates that the
script does not contain
document.write, and is a clue to
browsers that they can continue
rendering. Unfortunately, Firefox
doesn't support the DEFER attribute.
In Internet Explorer, the script may
be deferred, but not as much as
desired. If a script can be deferred,
it can also be moved to the bottom of
the page. That will make your web
pages load faster.
Google pagespeed have some nice explanation on how to parallelize downloading of scripts.
Still their advice is to put them in the head of your page.
Script tags should generally be in the head section. The exceptions are when they do significant immediate processing that should be delayed until as late as possible in the page load to avoid interfering with the page coming up, as with Google Analytics, or when the script tag's actual placement is a part of its behavior.
The reason for declaring near the end is that your page can begin drawing before having to wait to fetch the .js.
Ergo, stuff you would want at the end would have no effect on the page rendering, and vice versa.
I like to load a small js file in the head, that handles (1) anything that happens before the page is rendered and (2) the loading of other script files after the page loads, or as needed.
The Place of the <script> Element
The script elements block progressive page downloads.
Browsers download several components at a time, but when they encounter an external script, they stop further downloads until the script file is downloaded, parsed, and executed.
This hurts the overall page time, especially if it happens several times during a page load.
To minimize the blocking effect, you can place the script element toward the end of
the page, right before the closing tag.
This way there will be no other resources for the script to block.
The rest of the page components will be downloaded and already engaging the user.
The worst antipattern is to use separate files in the head of the document:
<!doctype html>
<html>
<head>
<title>My App</title>
<!-- ANTIPATTERN -->
<script src="jquery.js"></script>
<script src="jquery.quickselect.js"></script>
<script src="jquery.lightbox.js"></script>
<script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>
A better option is to combine all the files:
<!doctype html>
<html>
<head>
<title>My App</title>
<script src="all_20100426.js"></script>
</head>
<body>
...
</body>
</html>
And the best option is to put the combined script at the very end of the page:
<!doctype html>
<html>
<head>
<title>My App</title>
</head>
<body>
...
<script src="all_20100426.js"></script>
</body>
“JavaScript Patterns, by Stoyan Stefanov
(O’Reilly). Copyright 2010 Yahoo!, Inc., 9780596806750.”
You should put JavaScript right before </body>. Ideally, your HTML should function without JavaScript, so it should be one of the last things loaded.
Bear in mind that you should use CSS to hide elements and not JavaScript. This avoids seeing elements appear and disappear as the page loads.
You may also come across the following problem...
Problem
In this scenario, I'm going to use PHP as an example.
Your footer.php file may currently look like this:
<script src="jquery.js"></script>
<script src="custom.js"></script>
</body>
</html>
But what happens on the rare occasions you want to add some <script> exclusively for one page? You wouldn't be able to put it after footer.php because you wouldn't be in the <body> tag anymore, but you can't put it before, because then you'll be missing the jquery.js from your code.
Solution
Have a footer-start.php file:
<script src="jquery.js"></script>
<script src="custom.js"></script>
And a footer-end.php file:
</body>
</html>
And have your footer.php be simply:
<?php
require 'footer-start.php';
require 'footer-end.php';
Then, on the rare occasions that you need to use a custom <script> for one page, do this:
<?php require 'footer-start.php'; ?>
<script>...</script>
<?php require 'footer-end.php'; ?>
Doing it this way means you don't have to change all your previous code where footer.php is referenced.
I believe it's better to place script tags just before the closing body tag. Because:
Elements are blocked from rendering if they are below the script.
In Internet Explorer 6 and Internet Explorer 7, resources in the page are blocked from downloading if they are below the script.
It is from this article. Also Yahoo's performance rule 6 is Move scripts to the bottom.
You should do it near </body>. The reason is simple: If you place it into the head area, the files must be loaded before the body area can be. For that time, the user just sees a white screen.
But it depends on your website. I would load frameworks like mootools in the head area, other functions for events or AJAX or something should be loaded near </body>.
The only reason for putting it near the end of the body, AFAIK, is to be able to execute the JavaScript after the web browser has parsed your HTML document. E.g. if your JavaScript deals with "all elements named hello", the browser needs to read the entire document before executing your JavaScript. Makes sense, right?
In e.g. jQuery, you can put your JavaScript anywhere in your document and use:
$(document).ready(function () {
// Your code here
});
...to make sure the entire document has been loaded into the DOM before executing the inner function. Of course, this can be done with normal JavaScript as well, but be careful not to break compatibility with some browsers, because their needs tend to differ a lot.

Categories