There has never been a better time to set-up a website than right now. India is on the cusp of reaching 500 million internet users with more users on mobile than ever before. Building a website needs little more than basic designing & coding skills. Yes, you also need to know how to read waterfall charts & understand your site load timings.

Waterfall charts won’t be new to if you have build project sheets before which document timelines based on different stages of a project. Waterfall chart for a website depicts site load timings by breaking file size and time required to load each file/item type.

Reading Waterfall Charts

If you have used a tool like Pingdom to perform a load test chances are that you have already seen a waterfall chart. Each of the coloured bars represents a different activity in the timeline.

 

DNS (light purple)

When the user types in an URL on the address bar the web browser starts looking for its DNS information. The analogy that one could use to explain this could be a person looking for a phone number using the first & last name of a person. DNS lookup usually doesn’t take much time and shouldn’t pose you any issues concerning load timings.

SSL (dark purple)

SSL handshake helps to encrypt information between two points. The encryption is usually between a server and client, but it can also be used for server to server or client to client encryption if needed.

Connect (light blue)

Time taken by the web browser to connect to the server.

Send (orange)

The web browser is sending data back to the server.

Wait (yellow)

The web browser is waiting for data from the server.

Receive (green)

The web browser is receiving data from the server.

Optimizing Waterfall Charts

  1. Reduce the time taken to connect, send, wait & receive data from web browser to the server.
  2. Minimize the number of requests & size of the request sent to the server.

Five ways to optimize site load timings

GZip Compression

Gzip compression makes the files smaller for faster network transfers. Gzip is also a file format. It allows the web server to provide smaller file sizes which load faster for your website users. Using gzip compression is a standard practice for servers. You can check whether your hosting provider has gzip compression enabled by using online tools.Gzip Compression

Lazy Load Images

Lazy Load delays loading of images in long web pages. Lazy loading is used by popular websites like Amazon, Flipkart, and others. The images outside of viewport are not loaded until user scrolls to them. WordPress has many free plugins to implement lazy loading of images. We use A3 Lazy Load. Alternatively, you can also check BJ Lazy Load, Rocket Lazy Load & other plugins available.

Image optimization

Prefer using vector images as they are resolution & scale independent. Don’t be afraid to dial down image resolution quality settings to ensure byte size without compromising on the quality. If your website is built using WordPress, you can use plugins like smush to optimize images. Read Google developer guidelines to know more about image optimization fundamentals.

CDN- Content delivery network

A Content Delivery Network (CDN) is a system of distributed servers (network) or server farm that deliver web pages and other web content to a user based on the geographic locations of the user, the origin of the web page and a content delivery server. Using CDN can speed up the website and also has many potential SEO benefits.

cache

Web cache is a temporary storage of web files, images & document which enables to improve bandwidth usage, server usage & perceived lag. Using web caching allows you to speed your website by making sure that static files don’t load every time the site gets a request. If you are using WordPress, you can use WP SuperCache, W3 Total Cache, Comet Cache, etc.

If you are using a caching plugin, you don’t necessarily need to combine multiple JavaScripts but if in case you have multiple JavaScripts on the page use Better WordPress Minify to combine multiple JavaScripts. If you don’t know how to configure the plugin then just install & activate it work well even with the default settings.

Optimizing web performance can tricky and what I have shared is certainly not an exhaustive list. If you have more tips to improve, website performance share them in the comments section below.