Tips to Save up Our Page Load Time [Duplicate]

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.

Accepted Answer

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

It's old but it still holds true today:

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:

And of course google's recomendations:

Finally test your site with

Answer 2

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

<script src="//"></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:

Answer 3

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.

Must Read

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="//"></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.