How to Improve your Page Loading Speed? – Part 2

This is a continuation of our previous article titled “How to Create a Fast Loading Website – Part – 1”. In the previous edition, we spoke about Mobile First design, Benchmarking testing, Preloaders and reducing the number of HTTP requests. In this edition, we will be discussing more tips on page loading speed optimization.

1. Enable Caching wherever possible

One of the best ways to optimize page loading speed is by enabling cache. HTTP caching is a process which will reduce the load time of a website by more than 50% for repeat users. When a user visits your website, the browser will download all the files of the website including HTML, images, Stylesheet, JavaScript, etc and store them in a temporary cache. When the same user visits the website for the second time, the browser will extract the information from the local cache before contacting the website. This will decrease the load time a lot and improve the user experience. Caching can be implemented efficiently using the following techniques

• Last Modified
• ETag
• Expires
• Max-Age
• Cache-Control

2. Optimize Images

A Photo is worth a thousand words; this is why images are the most important aspect of a web page. Images should be high resolution and crisp for users. High-resolution images are mostly large images. By large images, we mean images with bigger file size. A large image takes a longer time to load and hence slows down a website. This further creates a bad user experience. We need to optimize and reduce the file size of images without compromising the quality. This can be achieved using the following methods.

1. Use the optimal dimensions: When you are designing for a mobile device, don’t use an image with a width of 1000px, instead reduce the width to mobile screen width. This will reduce the file size and also the load time.
2. Save Images for The Web: When you are creating the images using Adobe Photoshop make sure to save them using the “Save for The Web” feature in the File Menu. This will eliminate unnecessary EXIF details in the photo and reduce the file size.
3. Chose the Right File Type: JPGs are the most commonly used file format for the web and has got the least file size. Try to use this for most websites including E-Commerce websites. If you need transparency you need to save them as PNG format. GIFs are to be used only for smaller images and less frequently.
4. Use an Image Compressor: Once you save the images using Adobe Photoshop the file size can further be reduced using compression tools. Here are a few popular ones.
   • TinyPNG
   • Compressor.io
   • Kraken
   • ImageOptimizer
   • ImageOptim

3. Reduce the usage of external scripts

JavaScripts are an essential part of any web page these days. You can’t eliminate JavaScript entirely from your website instead we can optimize how it’s been used. Here are some tips

1. Combine JavaScript: If you have a more than one JavaScript files in your server, try to combine them into a single file. This will reduce the load time by a small margin.
2. Install instead of Importing: It is a common practice to use third-party JavaScript libraries on your website. Some of the most commonly used ones are jQuery, Bootstrap, etc. Instead of importing them using their CDN you can install them on your server. This will limit the number of outgoing requests which will reduce the load time. You can either copy and paste the JavaScript libraries or use a package manager like NPM to install them locally.
3. Async Tag: All the JavaScript files will block your HTML rendering. If you use the Async tag, it will allow the script to load simultaneously as the web page loads.
4. Defer Attribute: This will enable that the JavaScript is loading only after the web page is loaded.
5. Don’t use JavaScript in the header.

These are some of the tips to follow for better page loading speed optimization.