I have an HTML page where JavaScript can be added into the header, but nothing else in the HTML can be edited. The JavaScript can be added inline or be an external file - it doesn't really matter.
I've come across a lot of JavaScript libraries that allow you to lazy load images, videos, iframes, etc. However, they all require that you use data-src instead of the normal src for images. Since I can't edit the HTML, that doesn't work for me.
And obviously - using native lazy loading won't work for me in this case since the HTML can't be changed.
Is there any way to lazy load with pure JavaScript and not have to change anything in the HTML?
i am having troubles with defer and async js files.
My website is loading JQuery and Jquery-UI libraries and they are kind of big files even .min files
When i am moving those libraries to the bottom of website or just defering - asyncing them, my website stops rendering most of elements, for example
Select2 plugin not working properly on mobile phones
Jquery range slider not dragging
Some other custom elements like infinite load are not working as well
So i am trying to improve my website speed, but those 2 libraries render blockers and with them i got only 53 rating on PageSpeed Insights.
So another way to make Website run faster is merging(combine) JS files, but after combine website stops rendering also, so i guess only some of them are able to be combined.
Can someone help me resolve this problem ? below i will give a list of all JS that is used on my website
jquery-2.1.1.min.js
greensock.js
layerslider.transitions.js (actually trying to find some lightweight alternative)
layerslider.kreaturamedia.jquery.js
jquery-ui.min.js
jquery.ui.touch-punch.min.js
select2.min.js
jquery.tooltipster.min.js
bootstrap.min.js
placeholders.js
jquery.magnific-popup.min.js
owl.carousel.min.js
html5shiv.js
What i already did
Browser Caching - On
GZip on the fly - On
So and the main question is how to move jquery to the bottom without losing functionality
Which libraries i am able to merge, to reduce HTTP requests
In addition to what #Dr.Web said you can also combine them into one file and make sure that the plugin code is added at the bottom of jQuery
Please note that using async let's the browser know that the script can be loaded asynchronously and not necessarily in order. This opens up issues when you are trying to load an async script that has multiple dependencies. In this case you should load the jQuery in your footer without async attribute and load the jQueryUI using async attribute.
Reference: Source
Where is the best place to put Jquery code (or separate Jquery file)? Will pages load faster if I put it in the footer?
Put Scripts at the Bottom
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.
EDIT: Firefox does support the DEFER attribute since version 3.6.
Sources:
http://www.w3schools.com/tags/att_script_defer.asp or better:
http://caniuse.com/#feat=script-defer
All scripts should be loaded last
In just about every case, it's best to place all your script references at the end of the page, just before </body>.
If you are unable to do so due to templating issues and whatnot, 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="my.js" type="text/javascript" defer="defer"></script>
Edge cases
There are some edge cases, however, where you may experience page flickering or other artifacts during page load which can usually be solved by simply placing your jQuery script references in the <head> tag without the defer attribute. These cases include jQuery UI and other addons such as jCarousel or Treeview which modify the DOM as part of their functionality.
Further caveats
There are some libraries that must be loaded before the DOM or CSS, such as polyfills. Modernizr is one such library that must be placed in the head tag.
Only load jQuery itself in the head, via CDN of course.
Why? In some scenarios you might include a partial template (e.g. ajax login form snippet) with embedded jQuery dependent code; if jQuery is loaded at page bottom, you get a "$ is not defined" error, nice.
There are ways to workaround this of course (such as not embedding any JS and appending to a load-at-bottom js bundle), but why lose the freedom of lazily loaded js, of being able to place jQuery dependent code anywhere you please? Javascript engine doesn't care where the code lives in the DOM so long as dependencies (like jQuery being loaded) are satisfied.
For your common/shared js files, yes, place them before </body>, but for the exceptions, where it really just makes sense application maintenance-wise to stick a jQuery dependent snippet or file reference right there at that point in the html, do so.
There is no performance hit loading jquery in the head; what browser on the planet does not already have jQuery CDN file in cache?
Much ado about nothing, stick jQuery in the head and let your js freedom reign.
Nimbuz provides a very good explanation of the issue involved, but I think the final answer depends on your page: what's more important for the user to have sooner - scripts or images?
There are some pages that don't make sense without the images, but only have minor, non-essential scripting. In that case it makes sense to put scripts at the bottom, so the user can see the images sooner and start making sense of the page. Other pages rely on scripting to work. In that case it's better to have a working page without images than a non-working page with images, so it makes sense to put scripts at the top.
Another thing to consider is that scripts are typically smaller than images. Of course, this is a generalisation and you have to see whether it applies to your page. If it does then that, to me, is an argument for putting them first as a rule of thumb (ie. unless there's a good reason to do otherwise), because they won't delay images as much as images would delay the scripts. Finally, it's just much easier to have script at the top, because you don't have to worry about whether they're loaded yet when you need to use them.
In summary, I tend to put scripts at the top by default and only consider whether it's worthwhile moving them to the bottom after the page is complete. It's an optimisation - and I don't want to do it prematurely.
Most jquery code executes on document ready, which doesn't happen until the end of the page anyway. Furthermore, page rendering can be delayed by javascript parsing/execution, so it's best practice to put all javascript at the bottom of the page.
Standard practice is to put all of your scripts at the bottom of the page, but I use ASP.NET MVC with a number of jQuery plugins, and I find that it all works better if I put my jQuery scripts in the <head> section of the master page.
In my case, there are artifacts that occur when the page is loaded, if the scripts are at the bottom of the page. I'm using the jQuery TreeView plugin, and if the scripts are not loaded at the beginning, the tree will render without the necessary CSS classes imposed on it by the plugin. So you get this funny-looking mess when the page first loads, followed by the proper rendering of the TreeView. Very bad looking. Putting the jQuery plugins in the <head> section of the master page eliminates this problem.
Although almost all web sites still place Jquery and other javascript on header :D , even check stackoverflow.com .
I also suggest you to put on before end tag of body. You can check loading time after placing on either places. Script tag will pause your webpage to load further.
and after placing javascript on footer, you may get unusual looks of your webpage until it loads javascript, so place css on your header section.
For me jQuery is a little bit special. Maybe an exception to the norm. There are so many other scripts that rely on it, so its quite important that it loads early so the other scripts that come later will work as intended. As someone else pointed out even this page loads jQuery in the head section.
Just before </body> is the best place according to Yahoo Developer Network's Best Practices for Speeding Up Your Web Site this link, it makes sense.
The best thing to do is to test by yourself.
update: terribly sorry for not making myself clear. it is load() in jQuery, not loadpage().
maybe this is a trivial question but I just cannot think it through as new to js. I will really appreciate your help.
I am building a small personal site, containing several similar pages. Some tutorials I find suggest to use load() to, in one single .html file, based on different clicks, generate different content which is grabbed from my other html files using load().
but why am I doing this? having several html files works fine. using load() method I still need those files; also I googled and see many complaints about the slow speed of load().
therefore I am just wondering the reason we are doing this.
Thank you in advance.
loadpage() is not a native jQuery method, so it's likely you've stumbled across an article that was providing some custom wrappers for jQuery's methods. On the other hand, $.load() is a native jQuery method that pulls remote content into your page asynchronously. Changes are good that if somebody constructed a loadpage() method, they may have in fact been using $.load() (or any one of the other ajax methods) internally.
It's possible you're referring to $.mobile.loadPage (which uses jQuery's $.ajax beneath the covers), which is actually a jQuery Mobile method. You wouldn't be dealing with this too much unless you're involed in Mobile app development.
Whether you're using jQuery Mobile's $.mobile.loadPage, or jQuery's $.load to load in your content, the reason is still the same: avoid full page refreshes when partial page loading is all that's needed.
Think about what happens everytime you want to load a different HTML file. You have to reload the header, the navigation, the footer, sidebar information, graphics, and perhaps some media content, every time you load a new page - and a lot of this doesn't change from page to page. This is why it's helpful to be able to load in fragments of documents, without requiring the user to re-issue a request for everything all over again just to see the unique content on page 2.
I would like to inject, via a bookmarklet, my own code into a web page.
That code needs jQuery, jQuery UI and some plugins to be added too in the web page.
I read about noConflict but what about if some jQuery plugins (with different version) are also loaded by the web page and they uses the same CSS class names or ids.
how must I proceed to inject all my code?
What kind of bookmarklet are you trying to inject. If you can open an iframe using your bookmarklet and show your content there like RTM, Springpad etc then I believe you won't have a problem.