Ways To Reduce The Loading Time Of Website | Set 1

Last Updated : 07 Nov, 2019

“Patience is a virtue” – an adage that hardly holds when we consider online activities. The page load time of your website is very important. Why?
It decides whether a visitor to your site will explore further, or shall part ways on the first click.
Some statistical facts:

A 1-second load time delay leads to 11% fewer page views, 16% decrease in customer satisfaction and 7% loss in conversions.
44% of customers develop a negative image of the company, if its website load time is poor.
According to Amazon, there is a 1% increase in revenue for every 100 milliseconds improvement.

Also, studies say, 47% visitors expect the load time to be 2 seconds or less, and if it takes longer than 3 seconds, 57% of your prospects will abandon the site and go elsewhere to serve their needs.

The speed also determines the Google search ranking of your website. Below are provided certain ways that shall help in decreasing the load time of your website.

Ways to decrease load time of your Website

1. Optimize Images : Images should be scaled appropriately, before uploading. We need to understand this: if we have a 1000 X 1000 pixels image, which we have scaled down to 100 X 100 pixels with the help of CSS, the browser still loads the actual size, that is, in this case, 10 times more than necessary.

To avoid this, crop or scale your images before uploading them to your site using various image editing tools. Some of these image optimization tools are :

Smush.it
Online Image Optimizer
JPEG &PNG Stripper
SuperGIF

Talking of image format, JPEG is the best option. PNG is good too, though not supported by many older browsers.

2. Minify JavaScript and Style Sheets : Minification is removal of all unnecessary characters from code so as to reduce the size. Unneeded white space characters like space, newline, tab etc. and comments are removed. Recommended tools for minifying HTML, CSS and JavaScript:

For HTML, we can use the PageSpeed Insights Chrome Extension to generate optimized version of your HTML code.
For CSS, use the YUI Compressor and cssmin.js
For JavaScript, Closure Compiler, JSMin, or the YUI Compressor may be used.

There are some online tools also that can be used, https://javascript-minifier.com/, https://cssminifier.com/

3. Enable Compression : Large pages can be compressed by zipping them. Compression reduces the bandwidth of your pages, subsequently reducing HTTP response.

Gzip is one tool often used to achieve this.Since 90% of today’s Internet traffic uses Gzip, it is worth an option. After Gzip Compression, set up your server to enable compression.

Apache: Use mod_deflate
Nginx: Use HttpGzipModule
IIS: Configure HTTP Compression

4. Browser Caching : Temporary storage of data on the visitor’s hard drive will do away with the waiting time visitors undergo every time they visit your site. This can be done using browser caching. However, the duration for which this data is stored depends on your server-side cache configuration. To enable browser caching, you need to edit your HTTP headers to set up expiry times for certain types of files.

This example shows how to configure Apache to serve appropriate headers:

Find your .htaccess file in the root of your domain. The file is hidden , but FTP clients like FileZilla would help it show up.
Use notepad or any other basic editor to add following to the .htaccess file.

## EXPIRES CACHING ## 
<IfModule mod_expires.c> 
ExpiresActive On 
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule> 
## EXPIRES CACHING ## 

Important Points

Different expiry times could be set depending on your website’s files. Frequently updated files would require an earlier expiry time.
When you are done, save the file as it is.

More ways shall be explored in the below next set.
Ways To Reduce The Loading Time Of Your Website | Set 2

References: