Creating performance optimized web pages

In this post I’ll will be discussing most commonly used web page optimization techniques. Each technique/tip is equally important to achieve the maximum optimization possible.

Image optimization

Do you know that image assets account for more than 60% of the bytes on average needed to load a web page? Optimizing images can often yield some of the largest byte savings and performance improvements for your website

• You can reduce the number of http requests by placing frequently used images into image sprites.

Note: When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests rather than single using sprite.

• Be careful about the size of the images, Run through them image compression tools. I personally use below websites to compress images before using them on website.
  JPEG https://compressjpeg.com/
  PNG https://compresspng.com/
  SVG https://svgoptimizer.com/
• Always specify height and width of image.
• Consider loading images only after they’ve scrolled into view, You could achieve this by specifying loading attribute value as “lazy”.

<img href=”sample.png” loading=”lazy”>

Use CDN (Content Delivery Network)

CDN minimizes the latency by storing cached versions of your website and serve them to visitors via the network node closest to the user. CloudFlare is commonly known CDN service you could try it for free as well.

Just incase if you wants to know How CDN works?

Reduce page weight

Removing spaces, commas, blank lines and other unnecessary characters, you can dramatically increase your page speed. Also remove code comments, formatting, and unused code. Move inline script and CSS into external files. Use minified version of CSS/JS files and libraries. Also you could minify HTML as well if required.

Minimize number of requests

The fewer HTTP requests can help reduce page-load time. You could combine multiple js/css files into single file.

Measure webpage performance

Google has provided two free tools which could help you measure performance of your webpage.

PageSpeed Insights
PageSpeed Insights reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

Lighthouse
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more. You can run Lighthouse in Google Chrome DevTools, from the command line, or as a Node module.

If you find this blog post helpful, Please share with others :)