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
- Minimize Server time for Requests
- Use Content distribution Networks (CDN)
- Maximize 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
Minimize 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
- Standardize on a single framework
Optimize 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
- Stick to Integer math (Math.Floor)
- 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
- Use Native Json methods
- Use regular expressions Sparingly
Know what your app is doing
- 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))
The web optimization is not easy and needs exhaustive deep look and hopefully this check list helps while optimizing your pages. Enjoy coding high performing applications. If you have more tips please provide them in the comments.