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
- Last Modified
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.
- 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.
- 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.
- 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.
- 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.
3. Reduce the usage of external scripts
These are some of the tips to follow for better page loading speed optimization.