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.
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 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/
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?
#. 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.
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.
When to use GTmetrix?
#. 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.
When to use Pingdom?
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.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.
Once you have the images of right dimensions, compressing them further remarkably reduces their size without compromising on quality.
B. Optimizilla 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.
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.
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.
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:
Learn more @w3schools on HTML <script> async Attribute
B. Bundle JS and CSS files to save server requests.
Webpack is a great tool to bundle your resources easily. It takes modules with dependencies and generates static assets representing those modules.
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:
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.
5. Use content delivery network to help speed up your web page
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.
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.
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.
"Exploration is the engine that drives innovation. Innovation drives economic growth."
Let me know how you utilized these techniques and stay connected for more.