The way we use internet and websites has gone through a sea change in the last 2 decades. In good old days, people had dialup connections and only few websites to visit. Internet users remembered names of websites, and waited patiently for their favourite site to open after entering URL. But the situation has completely changed in last 2 decades.
Now, visitors normally have mbps connections, lots of websites for every need, and vast range of search engines to find those websites. Desktop browsers, tablets, smartphones, and smart TVs are household items. The biggest transformation however came in the behaviour of internet user.
Today’s web users hate to wait and don’t think twice before ditching the slow site for the faster one. This behaviour change has made website loading speed extremely important for businesses and brands across the world.
Still think page load speed is not important for your website or business? Let’s take an example for explanation and also list some points to make the case.
Suppose you want to check today’s weather forecast and don’t have a particular site in mind. You’ll simply go to browser address bar and type “Today’s Weather” and your search engine will furnish several websites providing weather updates. Let’s ignore Google’s Knowledge Graph which gives the forecast on the search page itself for the time being.
Most people click on 2-3 initial links and chose the option of open-in-new-tab.
Now, whichever webpage opens first and catches your eye will get a visitor. In this scenario, page speed played the most important role.
In addition to evolution of searcher’s behaviour, here are some other points that will convince you to improve page speed of your site:
Third world problems – While developed countries have the telecom infrastructure that promises supersonic internet speed, developing nations are still lagging behind. Hence, websites that load quickly have a better chance of scoring with populace of the developing nations.
Travel dilemmas – Transit (using smartphone while travelling in a car) is another scenario when internet connection bleeds. On such occasions, websites with slow loading pages take even more time. This further ruins visitor experience and drive away potential customers.
Search engines’ favourite – Humans are not the only ones who love quick loading web pages. Search engines also adore websites that load faster and rank them higher. This is a major reason why web masters have started obsessing about website load time.
These points make it crystal clear that loading speed is important for every website whatever its area of business and choice of technology (WordPress, Magento or custom).
Now that we have made the point for the importance of website load speed, it’s time to learn how to how to improve page speed!
Before sharing tips to improve page loading speed, let’s spend a minute to understand what happens after you press enter in address bar and before you see your web page because an experienced developer can save time in each step (less is some and more in others).
First step of the process is finding your server. The browser needs to find the server where your website is hosted. It needs to translate entered website name (like myGoodDomainName.com) to an IP address where the website is hosted. This may take multiple iterations to get the address, and connect to the server.
“Less number of iterations means faster DNS resolution and hence faster website loading.”
Check DNS resolution time while choosing your hosting company. Read more about faster DNS resolution for more insights.
When browser gets final address of your server machine, it sends a request to server for a particular resource (page in this case). Again web server here is like a receptionist when you visit a hotel. The server will take some time before it responds to your request. This is also hosting company dependent and you should check for response time of your server when you pick a hosting company.
Now, the scripts written by your developer are executed and the output is passed back to the browser. In this part, your development partner plays a major role. Most websites and web pages are dynamic these days, and hence a lot of processing happens before the output is generated by these scripts. So, if faster loading pages are your top priority, then, you need a team of developers that can write optimised code. Almost all such pages fetch content from database, manipulate it, and then send it to you. This makes optimised database design, queries and code very critical. So, next time when you hire a web development company, check their experience for optimised programming.
In this entire process, the most significant amount of time is spent in transferring the content from server to your machine (Assuming a fair combination between your developer and complexity in webpage data & processing).
So, most impactful area of loading speed optimisation is reducing time to transfer content from server to machine. There are many ways to improve page loading speed of websites built on WordPress, Magento, Drupal and other technologies. Let’s discuss the most important ones below:
Almost each and every modern browser supports compression. So, after checking for the browser support, your server can GZIP compress each resource before transferring and then browser will decompress it. In this way, the amount of data to transfer can be reduced by around 60%. Hence, a great improvement in loading speed. FATbit experts use this optimization technique to get quickly load client websites.
When your developer writes CSS, JS and HTML, they use comments, documentation and white spaces for better maintenance of code. These are all recommended practices for developers for maintenance and scalability of your application. But these are normally served to the browser as well, leading to bigger size of data to be transferred. So, before serving to browser, all the HTML, CSS and JS must be minified. This can reduce the size of data to be transferred significantly and hence increase the loading speed. Use this simple tip and increase page speed of your website.
This is similar to merging CSS and JS. Background images can be merged in one image called a sprite. This reduces number of requests significantly. Suppose your page has 2 buttons, ‘Prev’ and ‘Next’ as images. This will make your browser download 2 images from server. But you can create one image with both those arrows and in both the buttons you can use same image as background in different positions. When used properly, you can merge a lot (almost all) the background images of your page in one. This will reduce the number of requests to your server and hence increase the loading speed.
It’s true that a picture is worth a thousand words but it’s also worth a lot of data. Modern web pages are image focused, and each of those images add up to total size of data to be downloaded. A skilled website designer can increase page load speed by working with image format and quality. Size of images can be reduced significantly (normally 30 to 50%) without compromising quality of webpage.
For example, if you save an image with 100% and 70-80% quality while designing with Photoshop, you will not notice any difference on seeing those images on browser but there will be big difference in their sizes. Saving image in gif, jpg or png also makes a great difference. Developers at FATbit believe that SVG images are very good option too for cases when the browsers have started supporting it.
Reference to JS and CSS files in head section of your page must be in correct order so that browser can start rendering your page as it gets content. If the order is incorrect, it needs to wait for all the resources to be downloaded before it starts drawing the web page.
Width and height of images should be specified in HTML so that browser can render rest of the page and keep the proper placeholder for the image while it is loading the image. Experienced WordPress and Magento developers are aware of such details, and use them to improve page speed significantly.
There must be minimum required round trips to render above the fold content of a webpage. This makes browser render above the fold part of the page first for the visitor.
These were most common practices which need to be taken care for each webpage. We did not cover some of the advanced ways to improve load speed in this article like CDN use etc. All these points are important but many times, some ought to be compromised by developers in favour of other.
Now that we have answered ‘how to improve page speed’, let’s list some online tools that helps webmasters to check loading speed and performance.
Besides checking page loading speed and performance, these online tools are furnishes suggestions to make improvements.
If you’ve some technical understanding, you can also use inbuilt tools of your browsers like Audits in developer tools of Google Chrome. But these recommendations are to be taken with a grain of salt.
The same reasons can apply for some resources being served from your site developed by your developer. In some cases, some rules can be followed but cost of following them is much more than derived benefits.
Most of the techniques described in this document like caching, minifying, merging etc need to be done (or at least supervised) by a good experienced developer. If they are handled by a novice with no prior experience, it can have adverse effects. For instance, merging all the JS and CSS files in one (separate for both) makes sense for merging point and all the tools available will appreciate it too but it will reduce the benefit of caching almost 80 to 90% for those files.
Instead, you should merge those files in 2 groups. One for common files which are used on all (or most) pages of your website and one for specific to current page only. In that case, when you visit next page, a lot of data will already be cached.
FATbit Technologies realizes the importance of website loading speed, and thus keeps all the above listed points in mind while creating websites. Our experienced team of developers follows a development process that guarantees a website that is optimized for better performance and experience.
FATbit Technologies also offers a vast range of website testing services to start-ups and established brands for fixing website loading, performance and user experience related issues.
We create future-focused content to help you stay updated. Follow us on Twitter to get notified about latest tips, trends and product updates.
Disclaimer: The Blog has been created with consideration and care. We strive to ensure that all information is as complete, correct, comprehensible, accurate and up-to-date as possible. Despite our continuing efforts, we cannot guarantee that the information made available is complete, correct, accurate or up-to-date. We advise - the readers should not take decisions completely based on the information and views shared by FATbit on its blog, readers should do their own research to further assure themselves before taking any commercial decision. The 3rd party trademarks, logos and screenshots of the websites and mobile applications are property of their respective owners, we are not directly associated with most of them.
Thank Alex for appreciating
Fantasic article Harish! Next to Pingdom and GTmetrix, do you know of any other good tools like this? I found http://www.webpagetest.org and http://www.giftofspeed.com, which are okay (not great), and now I’m looking for more tools like this to help me. Thanks! Ronda
Thanks for the appreciation !
Pingdom and GTmetrix are my best picks, I could not find any other tool which is as great as these two.
Will certainly let you know in case I find one. 🙂