Top 5 Ways To Speed Up Your Website

Himanshu Saraswat | Monday,November 20,2017

improve page speed using google insights, pingdom, CDN, Clodflare, GTmetrix

47% of people expect your site to load in less than 2 seconds. 40% will abandon it entirely if it takes longer than 3 seconds. You have a great website but still struggling with high bounce rate and low average time spent? Then it's definitely the time to revisit your website's performance. "Customer first" should not be a mere on-paper philosophy. Let's see how you can make your user's experience swift and fast by understanding about the impact of web page speed on your business and the right tools to size that impact.

How does a slow site impact your business?

Always understand your user base and respect their time and patience. Try to put things crisp & within the attention span of your users. Slow websites reduce conversions massively.

Web page performance affects shopping behavior, research by gomez.com & akamai.com Slow Web page load time leads to increased page abandonment, research by gomez.com & akamai.com

Infographic sourced from gomez.com, akamai.com via. kissmetrics.com

Site speed is an important metric which can not be ignored. This reflects how quickly a website responds to web requests. Google's research emphasized it's importance & makes it evident that faster web pages rank better on search engines.

An extensive audit of your website will reveal the exact areas which need plumbing.

What are the best tools to audit web page speed?

  • PageSpeed Insights - Google Developers
  • GTmetrix
  • Pingdom Website Speed Test

#. PageSpeed Insights Auditing web page performance using google page speed insights by Google is a handy tool which can audit your web page speed for both mobile & desktop views. Let's quickly run a sample test on http://www.timesofindia.com/

Google page speed insights analysis report for mobile version Google page speed insights analysis report for desktop version

You will have a clear insight into your web page's performance along with improvement recommendations. Each optimization is linked to a comprehensive document, so you get to know in detail how to improve your web page's performance.

When to use Google's pagespeed insight?

  • When you need a detailed view of your web page's performance on both mobile & desktop platforms.
  • When you need a comprehensive understanding of the recommendations & the standard practices which help you improve your web page's performance.

#. GTmetrix gives you all the details in a much understandable interface. Improvement suggestions which include optimizing images and minifying JS & CSS are provided right in the suggestion pane for a quick download.

GTmetrix analysis report for Times of India website and recommendations

For example: An image on your web page needs optimization which might cater to 39% reduction in size. You can have the improved image downloaded right from the suggestions tab.
Likewise minified javascript and CSS files are also available for easy download.

GTmetrix analysis report for Times of India website with instant download of Optimized image

When to use GTmetrix?

  • When you need an elaborated view with not just recommendations but also solutions for quick implementation.

#. Pingdom comes in with a very similar set of features and a tiled interface. Moreover, you can have a look at the complete network activity request by request.

Pingdom analysis report for Times of India website with recommendations and network activity report Pingdom analysis report for Times of India website with complete and network activity request by request

When to use Pingdom?

  • When you need to analyze in detail how your resources use the network capacity.

Personally, I feel GTmetrix gives you all that you need without having to wander on the page for statistics in a sleek interface. Audit your website through all these tools at least once in order to know what suits you the best.

How should you speed up your web page once you have the audit report?

1. Optimize images

Let it be blogs or business marketing web pages, images form an integral part of your page design. An attractive page has the ability to keep the user engaged and intrigued. Many times hefty animations and large resolution images really take a toll on your web page's speed. Optimizing images can increase your page speed by at least 40% to 50%.

#. How to optimize images?

Some of the best online tools to speed up your image optimization needs are:

A. ResizeImage.netResize your image to exact scale level using resizeimage.nethelps you to reduce image sizes optimally with the best resolution to be accommodated in your design.

Upload the images you need on your web page and resize them proportionately with utmost accuracy.

Crop image efficiently using resizeimage.net to perfect dimension

Once you have the images of right dimensions, compressing them further remarkably reduces their size without compromising on quality.

Resize image efficiently using resizeimage.net

B. OptimizillaCompress images to optimum level using optimizilla.com has a strong algorithm to compress images with no loss in quality. What I really like is the tool's default settings are capable enough to provide an average 60% reduction in image size.

Crop and resize image with efficiently compressing them to maximum level using optimizilla.com

C. Use different image resolutions to cater to mobile and desktop views. This will not only save bandwidth for your users and load web page faster for them but will also let you present images with good resolutions without any unnecessary scaling.

One easy and smart way to implement this is using HTML5 <picture> tag.

Save bandwidth using HTML5 picture tag and speed up your web page

Learn more @w3schools on How to use picture tag

2. Serve static content from sub-domain

Sub-domain implementation significantly reduces the total size of requests made for a web page. Browsers limit the number of concurrent connections that can be made in a range of 4 to 6 connections considering Safari, Chrome and Firefox.

A cookieless subdomain can be created easily using a CNAME. Head over to your cPanel and create a subdomain.

Setup guide from [email protected]What is a Subdomain Name? How Do I Create and Delete One?

A bonus benefit to serving static content from a cookieless domain is that you can double the number of page components that browsers can download in parallel. But realize that this works best when the components are balanced across two domains. If 95% of your assets are static files and if you move all of them to static.example.com, you aren’t really taking advantage of maximizing parallel connections. You’re just incurring the extra DNS lookup.

Another recommendation you will observe in your web page audit report will be to reduce the number of HTTP requests.

3. Reduce HTTP requests to speed up your web page

Static assets take a lot of bandwidth and make a number of requests to your server. If not done asynchronously they even obstruct your web page to load.

A. As an initial step, identify the scripts on your webpage which are not necessary to load sequentially. Mark such scripts with the async attribute. Have a look at how google analytics uses the async attribute to boost web page performance:

async tracking snippet adds support for preloading, which will provide a small performance boost on modern browsers

Learn more @w3schools on HTML <script> async Attribute

B. Bundle JS and CSS files to save server requests.

Webpack Webpack efficiently bundles your resources to static assets is a great tool to bundle your resources easily. It takes modules with dependencies and generates static assets representing those modules.

Webpack helps in bundling your static resources thereby reduncing the HTTP request and boosting page performance

Learn more about using [email protected]Concepts

C. Images take a lot of bandwidth. Combining multiple images into sprites improves your web page speed and reduces HTTP requests considerably.

Learn more @w3schools on CSS Image Sprites

Generating sprites can be a tedious task sometimes. I would recommend using an online tool like Responsive CSS Sprite Generator which helps you generate responsive sprites using percentage based background positions.

D. Use external resources like Jquery, Bootstrap, Font Awesome libraries off a content delivery network (CDN). For example:

https://cdnjs.com/libraries/jquery/
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

4. Remove unused pieces of code. especially CSS

CSS accommodate a large chunk of your website's space. Since they are very important from a design perspective you can't just ignore them. While developing many times we let go of the unused CSS code.

#. Online tools like UnCSS Online! comes in very handy and let you get rid of unused code chunks with one easy click.

Remove un-used CSS using unCSS online tool with one click to speed up your web page

5. Use content delivery network to help speed up your web page

serve and host your resources from a CDN to speed up webpage tremendously

The CDN is placed between your hosting systems and your visitors around the world. It caches content as soon as visitors request it and distributes it in record time. Your hosting servers are not called on, making your website run faster.

CDNs work by hosting your files across a large network of servers around the World. When a user visits your site from country A, they are downloading files from the server that is closest to country A. Because the bandwidth is spread across so many different servers, it reduces the load on any single server and also protects your sites from DDoS attacks and traffic spikes.

Which is the most economical and powerful CDN?

Some options I considered included MaxCDN, Cloudwatch, Static DNA, and Cloudflare. Out of these, I would definitely recommend Cloudflare.

Advantages of using cloudflare CDN to boost web page performance

From the steps I mentioned above to speed up your webpage, wouldn't it be really cool if all that could have been handled by a tool.

You can consider Cloudflare as a tool to do the following for you with just one click.

  • Minify CSS and JS files to an optimum level.
  • Leverage browser cache.
  • Set the TTL [Both browser and Edge]
    Edge Cache expire TTL is a parameter that controls how long Cloudflare's edge servers will cache a resource before getting back to your server for a fresh copy. This handles your website's caching mechanism & becomes very easy to manipulate and maintain.
  • The Following example will set a Rule to cache everything found in the "/images" folder. Cached resources will expire in 5 minutes in the user's browser, and will expire after one day in Cloudflare's datacenters:
  • set cache rule for your web page on cloudflare to boost and increase web page performance
  • Bundling of JS resources is handled by the Rocket loader feature of Cloudflare for which otherwise you might have to install and configure your web project via. Webpack etc.
  • Now the best part, you also get a free SSL certificate for your website by default which not only improves your web page's credibility but also boosts search ranking.
Free SSL certificate for your website from CloudFlare which further boosts search ranking

All the features I have listed come in the free plan of Cloudflare which is an added advantage over other CDN services making it more economical.

These 5 steps will definitely boost your web page speed by folds, enabling your end users to have a swift and fast experience.

Never shy away from exploring and experimenting new tools and techniques.

Now that you know the essence of improving web page performance. It's time to apply them to enrich your users with a faster and better experience.

5 steps to boost web page performance and reduce page load time
"Exploration is the engine that drives innovation. Innovation drives economic growth."
-Edith Widder

Let me know how you utilized these techniques and stay connected for more.