Best practices for speeding up your website - web performance optimization

In this post I would like to share my strategies for web performance optimization and speeding up website, here's my list with tools or technologies I use:

1. Code minification and bundling

By this process we remove comments and extra spaces as well as crunch variable names in order to minimize code. Code minification applies to CSS, JavaScript or HTML codes and code bundling applies to CSS and JavaScript codes, in some cases we bundle HTML codes also.

If you use Visual Studio, then it has an extension Bundler & Minifier (by Mads Kristensen) this tool can easily bundle and minify codes inside IDE. You can configure this extension for automatic bundling on build as well as you can use this to manually select files and then bundle and minify.

Another way with Visual Studio web applications which I like the most, is by using bundling and minification NuGet packages, this automatically bundles and minifies when you publishing project in release mode.

There are number of browser based tools available online which you can use to manually achieve this.

2. Image/video optimization

Always remember, the media asset we receive from design team is never optimized for web, even they exported for web use. You can very easily reduce image file size by 70% to 80% using Visual Studio extension Image Optimizer (by Mads Kristensen), by using this extension you select image file or folder to optimize.

If you have multiple images (like icon files), you can use another Visual Studio extension Image Sprites (by Mads Kristensen) and bundle to single file. For this you select all files and right click to create a single file, in result we get a .css file which will have all images with their styles positions.

Keep video files size under 5-6 MB and make sure they are cachable with max age file which we configure on file storage.

Try to serve all css, js, image and video from CDN, this improves website performance significantly.

I developed a tool which you can use to optimize images offline, maybe you have image file on desktop or in folder on desktop, in this case my little console app can optimize that, here's the link to download it:

https://github.com/itorian/BulkImageOptimizeOrCompress

https://github.com/itorian/ImageOptimizerOrCompressor

3. Using CDN and browser caching for css, js, html, image and video files

Web caching optimization reduces server load, bandwidth usage, and latency. CDNs use dedicated web caching software to store copies of documents passing through their system. 

Leveraging the browser cache is crucial. It is recommended to have a max-age of 7 days in such cases. This saves server time and makes things altogether faster.

4. Server side (from back-end code) output caching using Redis

If you have a dynamic enterprise web application, using Redis to output cache is always recommended. Azure has extended support for this. Visual Studio web application, have number of packages to build server side output caching.

5. HTTP requests reduction

The more HTTP requests your web page makes the slower it will load. A browser is limited to opening only a certain number of simultaneous connections to a single host. To prevent bottlenecks, the number of individual pages elements are reduced using resource consolidation whereby smaller files, such as images, are bundled together into one file. This reduces HTTP requests and the number of round trips required to load a webpage. Making fewer HTTP requests turns out to be the most important optimization technique, with the biggest impact.

6. Web Font Performance

The disadvantages of web fonts, such as Google Fonts, are that they add extra HTTP requests to external resources. Web fonts are also rendered blocking. Try to prioritize based on browser support, choose only the styles you need, keep character sets down to a minimum, etc.

7. SSL certificate/ HTTPS

Absolutely a must! Actually, Google penalizes those websites that don’t have it.

8. 301 Redirects

Redirects are performance killers. Avoid them whenever possible. A redirect will generate additional round-trip times and therefore quickly doubles the time that is required to load the initial HTML document before the browser even starts to load other assets.

9. Use website monitoring

There are number of services you can file for this, but one this I would select which is almost free is Application Insight. This will tell you how your web page and user interaction performs on web pages. This will give you history insight and telemetry which you can use to plan further action.

10. Infrastructure

Having a fast web host is equally as important as any website performance optimization you could make, as it is the backbone of your site. Stay away from cheap shared hosting.

11. 404 Errors

Any missing file generates a 404 HTTP error. Depending upon the platform you are running 404 errors can be quite taxing on your server. 404 page should not just show a friendly message, it should also return 404 response to caller.

12. Database optimization

And last but not least is database optimization. Whether it is cleaning out old unused tables or creating indexes for faster access there are always things that can be optimized.

Few key tools which I use for web performance and testing:

Google PageSpeed

GTMetrix

Loader.io

GeoPeeker

Hope this helps.