I came across the below video on the web performance improvement tips and tricks. This is fantastic.

In this video, Jatinder talks about Six fundamental principles for improving web application performance. He also talks a lot about how we go about Decreasing CPU time and increasing parallelism on the client machine to achieve faster web performance.

While I went through the video, I captured all the tricks he talks about. And thought will be useful for others while they watch it. Please find below the tricks.

Quickly respond to network request

Avoid 3XX Redirections (63% of top websites use redirect)

Avoid Meta refresh

Minimise Server time for Requests

Use Content distribution Networks (CDN)

Maximise concurrent connections.

Reuse connections – don’t sent connection close.

Know your other servers – you are only fast as your weakest link

Understand your network timing

Minimise bytes downloaded

GZIP Compression Network traffic

Persist application resources locally (Windows 8 applications)

Cache dynamic resources in the application Cache (html5 app cache)

Provide cacheable content

Send Conditional request

Cache Data requests (jQuery AJAX calls)

Standardize File name capitalization convention.

Efficiently structure markup

Load pages in latest browser mode

Use http header to specify legacy IE mode

Link CSS in the top of the page header, never on the bottom.

Avoid using @import of hierarchical styles

Avoid embedded and inline CSS

Only include necessary styles in the page.

Always link JS at the end of the page.

Avoid linking JS in the header (use the defer & async attribute)

Avoid Inline JS

Remove Duplicate code (52% of the web have duplicate code

Standardise on a single framework

Optimise your media usage

Avoid death by too many images

If possible use Image Sprites

Use png image file format

Use Native image resolutions

Replace Images with CSS3 Gradients, border Radius

Leverage CSS3 Transforms

Use Data URI’s for Small Single view images

Avoid complex SVG paths

Video : Use preview images

Minimize media plugin usage

Proactively download Future media

Write Fast JavaScript

Stick to Integer math (Math.Floor)

Minify your JavaScript

Initialize JavaScript on Demand

Minimize your DOM Interactions

Built in DOM methods always more efficient (firstchild, nextsibling methods are faster)

Use Selectors for Collection access (document.querySelectorAll)

Use .innerHTML to construct your page

Batch your markup changes

Maintain smaller DOM (less than 1000 elements)

JSON always faster than XML (possible myth)

Use Native JSON methods

Use regular expressions Sparingly

Know what your app is doing

Understand JavaScript Timers (setTimeout, SetInterval)

Combine Application Timers

Ensure dormant timers are not running

Align timers to display Frame (16.7)

Use window.requestAminationFrame(renderLoop) for Animations

Know when your application is visible (document.hidden, Visibilitychange (event))

Conclusion

The web optimisation is not easy and needs exhaustive, deep look and hopefully this check list helps while optimising your pages. Enjoy coding high performing applications. If you have more tips please provide them in the comments.