Tips to save up our page load time

Question

My Question:What are the best possible ways to shave up those unnecessary kbs and make page load Faster.What all optimization practices+coding practices(in js,php) if performed can make your page lighter.

Why I asked this:I read this article on jquery.js vs jquery.min.js usage.I thought lot of people use it without knowing the meaning of it.I am basically in to making ad units on android and ios phones.So in my field saving up every single kb becomes very critical. I have recently started using jquery.min instead of plain javascript.But again that increases the overall kbs size.The big daddy google keeps track of this aspect in their page rank philosophy.So this question becomes even more important to be in top most searches.I did search google but no link came up with some solid answers.

I was wondering what should people do to make their web page lighter on mobile as well as tablets and pc browser other than using minified version of any js library. At some point of time every javascript coder must be thinking of this question.

you could use [Google Speed Analysis](https://developers.google.com/speed/pagespeed/) for checking your site — Michael Walter, Jun 29 '13 at 09:47
There's tons of ways. Of course using minified js, css, ... files. Also using gzip increases speeds, though most servers do this automatically. Defer the parsing of js files untill the end of the document, use sprites to minimize the amount of requests that need to be made, ... For the jquery vs jquery.min, I think it's rather straightforward jquery.js is for development and jquery.min.js is lighter so for actual usage. As Michael Walter sais, Google's PageSpeed tool is very handy to see where **your** site has its flaws and can be sped up. — jdepypere, Jun 29 '13 at 09:48
Use minified version on CDN or build your own version of jquery: http://projects.jga.me/jquery-builder/ — A. Wolff, Jun 29 '13 at 09:49
Use plain javascript(adds up 0kb) vs use jquery.min.js(adds up 70kb) — HIRA THAKUR, Jun 29 '13 at 09:51
Everybody,if you have some good reasonalble answer,please write it in answer box,so that i can tick it correct and the next time any abody uses this question finds the solution straight and simple.thx — HIRA THAKUR, Jun 29 '13 at 09:53
@MESSIAH What are you talking about? jquery.min.js is just minified (compressed) JavaScript. jquery.js uncompressed (v1.10.1) weighs 267KB vs. 91KB minified, so I don't understand what you mean by 0KB... — mekwall, Jun 29 '13 at 09:55
@MarcusEkwall I think he now means vanilla js versus using jquery period. — Anthony Hatzopoulos, Jul 04 '13 at 19:43
http://stackoverflow.com/questions/3475024/whats-the-difference-between-jquery-js-and-jquery-min-js — HIRA THAKUR, Jul 04 '13 at 19:49
Also see http://stackoverflow.com/questions/1260134/optimizing-kohana-based-websites-for-speed-and-scalability/1283195#1283195. Given the large amount of measures, these questions are not a good fit since they are too broad. — Gordon, Jul 06 '13 at 07:22

score 5 · Accepted Answer · answered Jul 03 '13 at 20:38

You would want to research WPO (Web Performance Optimization) and/or FEO (Front-End Optimization).

It's old but it still holds true today: http://stevesouders.com/hpws/rules.php

Rule 1 - Make Fewer HTTP Requests
Rule 2 - Use a Content Delivery Network
Rule 3 - Add an Expires Header
Rule 4 - Gzip Components
Rule 5 - Put Stylesheets at the Top
Rule 6 - Put Scripts at the Bottom
Rule 7 - Avoid CSS Expressions
Rule 8 - Make JavaScript and CSS External
Rule 9 - Reduce DNS Lookups
Rule 10 - Minify JavaScript
Rule 11 - Avoid Redirects
Rule 12 - Remove Duplicate Scripts
Rule 13 - Configure ETags
Rule 14 - Make AJAX Cacheable

Then there's Yahoo's rules: http://developer.yahoo.com/performance/rules.html

And of course google's recomendations: https://developers.google.com/speed/docs/best-practices/rules_intro

Finally test your site with http://webpagetest.org

+1 for answering the question in a "teach a guy to fish" manner, rather than going on about specifics of jQuery optimization — Jens Roland, Jul 03 '13 at 23:59
@anthony:I think you dint read the line below bounty.I have got my answers.your 14 rules and YDN being the source.This question needs more attention and people need to read this.Thats the reason why I kept the bounty.I dont need any more answers.Let some time go I would give you the bounty!! — HIRA THAKUR, Jul 04 '13 at 19:55

A. Wolff · Answer 2 · 2013-06-29T10:11:19.533

2

To take advantage of parallel download and more often cache, use a CDN as google:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

If your concern is just the size of the file, build your own jquery version removing what you don't currently use: { you could still put this file on an external server for paralell download }

jQuery Builder (e.g) (28.35 Kb minified using just ajax and css modules)

OUT OF TOPIC

Now, concerning performance for animation, if you are using jquery for that purpose you should have a look to GSAP jquery plugin which can improve performance to 20X: jQuery GSAP

See the speed test page to compare between libraries: http://www.greensock.com/js/speed.html

edited Jun 29 '13 at 10:11

answered Jun 29 '13 at 10:00

A. Wolff

74,033
9
94
155

i'm not the only one who says that Google CDN actually reduce traffic, not speed of loading of page – vladkras Jun 29 '13 at 11:12
@vladkras never encountered that imo, can you provide link of feedbacks? I just know that for some countries google restrict usage. – A. Wolff Jun 29 '13 at 11:15

mekwall · Answer 3 · 2013-06-29T10:40:43.513

I guess you're looking at reducing the page load for a first-time visit or uncached request, meaning the client has to download all resources.

Reducing load time of jQuery

Use third-party CDN-hosted jQuery

Most users already have jQuery cached due to the widespread usage of third-party CDN-hosted jQuery libraries, which means that you can benefit from that as well by using the same resource. The most popular by far is Google Hosted Libraries, and another one is jQuery's own CDN.

Using third-party CDN-hosted jQuery is as simple as adding a script tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Notice: Wondering about the omitted protocol/scheme in the url? See Protocol-relative urls by Paul irish.

The only downside of using a third-party CDN is that any disruption of the service will also affect your site/ad. However, it's much more likely that your hosting service is disrupted then any of the above mentioned CDN:s.

Customized build of jQuery

If you for some reason don't want or can't use a third-party CDN-hosting you can also customize your jQuery build to only contain the parts you use/need for your project. To simplify the build process, there's this great tool called jQuery Builder that you can use.

Alternatives to jQuery

jQuery is a pretty heavy library, and some consider it badly suited for mobile devices. There's alternatives out there that aim to be smaller and more light-weight, such as Zepto.js, Snack.js and $dom.

It's important to note that not all features and browser support will be present in the alternative libraries, so you need to make sure you get what you need.

What about the rest of my code?

You should always make sure all of the source code is minified and compressed (i.e. gzipped) when served from a production environment. You should also strive to have as few requests as possible, so concatenating multiple files into one is a great way to both lower the amount of requests and better benefit from caching. This can be done for JavaScript as well as CSS files.

Sander Visser · Answer 4 · 2013-07-05T15:21:41.300

What also is important to lower your bandwith are the caching headers.

ETAG, If-Modified

When you pull an article from the database and you display it on a simpel page, you can use the last_edit (example) column for the Last-Modified header so when the client revisits the article it can be loaded from the cache.

You should map those pages wich could be optimized for caching.

It won't work on a pages with comments, but when they are loaded with ajax by pressing a button it is possible.

Downside is that it can get pretty complex on pages that need to display more than only that article.