Delightful Digital Solutions

TOP 5 WAYS TO BOOST WEBSITE SPEED ( UPDATED 2018)

Step by Step tried and tested ways to boost website speed!

Are you looking for tips and tricks to boost your website traffic?

Then you are at the right place!

There are tons of aspects that influence your site’s loading speed; hence there are numerous steps you can take to enhance your site’s speed and improve the user experience.

In this post, we will guide you on how to optimize your website, the best practices you can use to perform advanced levels of Search Engine Optimization and about certain free tools you can use to monitor your website’s performance.

Then let’s start…

For starters, you have to optimize your website. Google likes to rank those websites on top that loads fast as compared to others.

Here are the top 10 tricks which we normally use to optimize our website.

1. IMPROVE WEBSITE SPEED BY IMAGE OPTIMIZATION

On our website, we had 40% images and 60% content but the images were taking extra time to load.

So we used certain free online image compression tools like compressjpeg.com & tinyjpg.com to compress the images from our website. These free tools compressed almost 60% to 75% of the image size which helped us to get better website loading speed.

link 1: https://tinyjpg.com/
link 2: http://optimizilla.com/
link 3: http://compressjpeg.com/

2. IMPROVE PAGE LOADING TIME BY USING CDN (CONTENT DELIVERY NETWORK)

As we all know that when we try to load any website, it first loads all the styling code files (CSS file), images, textual content, and script files from the website hosting server.

When we tried to load our website on chrome browser it took almost 10 seconds to load even after uploading the compressed image. Then after doing a lot of research on how to increase website speed, we came across CDN technology (Content Delivery Network).

A CDN is basically a way to deliver content from your website to people more quickly and efficiently, based on their geographic location. A CDN is the network of servers which mirrors your website content in locations all over the world. So whenever you try to load the website, the content will be retrieved from the nearest server. Isn't that interesting?

We started using Google cloud and cloudflare.com as CDN for our website and guess what! Now our website loading speed has decreased from 10 seconds to 6 seconds.

Link : Google cloud CDN , Cloudflare , Amazon CloudFront CDN

3. ".htaccess" FILE MAGIC

Till now we did image optimization and CDN but still, we were not happy with the website loading speed.

When we tried to analyze our website, we found out that every time we clicked on any link, the website used to download the styling code file, static image and script files over and over.

Again, we started looking for the solution...

We found out that on the server we can add a ".htaccess" file and add a bunch of codes to make the website load faster.

3a. Leverage Browser Caching (LBC)

In Leverage Browser Caching method, we can specify for how long a browser should keep the images, CSS and JS, all stored locally. This makes the browser to download less static files as it has already stored most of the files locally, thereby making the website load faster for repetitive visitors.

3b. Enable gzip compression

Gzip compression technique will compress the files of your web page (HTML, JS, CSS & Image files) before sending them over to the browser. This drastically reduces the transfer time as the files are much smaller in size.

Gzip method saved a lot of bandwidth for our website by sending compressed files from the server!

Leverage browser caching Code (Add this code in 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 ##

Gzip compression code (Add this code in the .htaccess file)

<IfModule mod_deflate.c>
                          

                          # Compress HTML, CSS, JavaScript, Text, XML and fonts
                          

                          AddOutputFilterByType DEFLATE application/javascript
                          

                          AddOutputFilterByType DEFLATE application/rss+xml
                          

                          AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
                          

                          AddOutputFilterByType DEFLATE application/x-font
                          

                          AddOutputFilterByType DEFLATE application/x-font-opentype
                          

                          AddOutputFilterByType DEFLATE application/x-font-otf
                          

                          AddOutputFilterByType DEFLATE application/x-font-truetype
                          

                          AddOutputFilterByType DEFLATE application/x-font-ttf
                          

                          AddOutputFilterByType DEFLATE application/x-javascript
                          

                          AddOutputFilterByType DEFLATE application/xhtml+xml
                          

                          AddOutputFilterByType DEFLATE application/xml
                          

                          AddOutputFilterByType DEFLATE font/opentype
                          

                          AddOutputFilterByType DEFLATE font/otf
                          

                          AddOutputFilterByType DEFLATE font/ttf
                          

                          AddOutputFilterByType DEFLATE image/svg+xml
                          

                          AddOutputFilterByType DEFLATE image/x-icon
                          

                          AddOutputFilterByType DEFLATE text/css
                          

                          AddOutputFilterByType DEFLATE text/html
                          

                          AddOutputFilterByType DEFLATE text/javascript
                          

                          AddOutputFilterByType DEFLATE text/plain
                          

                          AddOutputFilterByType DEFLATE text/xml
                          

                          # Remove browser bugs (only needed for really old browsers)
                          

                          BrowserMatch ^Mozilla/4 gzip-only-text/html
                          

                          BrowserMatch ^Mozilla/4\.0[678] no-gzip
                          

                          BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
                          

                          Header append Vary User-Agent
                          

                          </IfModule>

4. WEBSITE PERFORMANCE OPTIMIZATION BY MINIFYING CSS AND JS FILES

After performing the above-mentioned steps, our website was loading much faster. But when we analyzed one of our competitor's website, we found out that they are using code minification to get better website loading speed.

Minifying code is the process of compressing code from the original size to the smallest possible size. The process will remove unnecessary characters from the code including the white space characters, new lines & comments. Finally, all the code will be in one line. Hence, minification is a way to save resources on the web server.

Minification process can reduce up to 25% – 95% size of the code!

There are few free tools for code minification that you can try –
link: https://www.willpeavy.com/minifier/
link: http://minifycode.com/html-minifier/

5. ACCELERATE WEBSITE PERFORMANCE BY MAKING FEWER HTTP REQUESTS

On our website, we used multiple elements and components from various sources so we had multiple CSS files and JS files on our website.

When our website was loading, we found out that 15 .css files and 9 .js files were getting downloaded. So, we decided to merge multiple .css & .js files and create fewer HTTP requests so that the website can load much faster.

Visit https://gtmetrix.com/ to Analyze your site’s speed and make it faster.GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.

Additional tips :

1. Host your website on cloud-based hosting - Cloud hosting offers greater scalability; it also offers better performance & load balancing across multiple servers.

2. Serve scaled images - Serving appropriately sized images can save a lot of data and improve the performance of your website, especially on mobile devices.

3. Disable Hotlinking - The HotLink Protection allows you to prevent other websites from directly linking to files from your website.

4. Remove unwanted Plugins - If you have multiple plugins then it can significantly slow down your website. So, try to remove bad and unwanted plugins.