How to Improve Page Speed: Tips & Online Tools from Pro Developers

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.

Does Loading Speed Really Matter for My Website?

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!

How can I get my website load faster?

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.

Now, all this output is sent to your browser and the browser presents it to you. But this output contains reference to a lot of resources like images, javascript files, style sheets etc. Browser downloads all those resources from your server one by one with the same process, and parses them to make the page presentable to you.

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:

Cache

A lot of content on a webpage is not meant to be changed frequently or sometimes not at all. Most images, style sheets and javascript files fall under this category. Logo, for instance, will be there on every page of your website. So, it makes no sense to make the browser load it again and again for every page. It can be cached. When your server serves that logo image, it can tell that the image was last modified on xx date and it can be cached. So next time when user visits next page of your website now or later, browser would already have the same image and it will tell the server that it already has that image which was last modified on xx date. In this case, server will check the modified date of image and if it is unchanged, server will tell the browser that the image it has is valid and hence no need to download it again. This will save bandwidth and loading time both. The same cache process applies to other resources as well like CSS and JS files.

Compression

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.

Minify Text Files

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.

Merge CSS/JS

Normally, each webpage refers to several CSS and JS files. Modern web pages (on an average) refer more than 10 such resources. To load each resource, your browser needs to make a separate connection to server. Browsers make maximum of 2 connections to the same website at a time (Hope http 2.0 will change the picture). So, browser keeps waiting and wasting time before it loads all those resource. So, number of requests can be significantly reduced by merging CSSS and JS files before serving. Your page should refer to 2 javascript and 2 style sheet files. You must be now wondering why 2 and not 1? Well, it has to do with better utilization of cache.

Using Image Sprites

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.

Optimize Images

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.

Right Order of JS and CSS resources

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.

Specify Image Dimensions

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.

Prioritize Visible Content

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.

Online tools to check page loading speed

Besides checking page loading speed and performance, these online tools are furnishes suggestions to make improvements.

• Google Pagespeed Insights
• Pingdom
• GTmetrix

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.

Why not to trust online tools blindly?

Scores and recommendations given by all these tools are just indications and suggestions which cannot be followed all the time. An experienced developer has a better understanding which page speed enhancement tips are to be followed and up to what extent. For example, it is always suggested that JavaScript files must leverage public level cache and have very long expiry date. But if you check any (almost) webpage with these tools, they will report that some JS files do not follow this rule and should be fixed. You can easily find that those files are related to Google analytics, Google Plus button, and Facebook like button. Your developer does not have control on it as these files are served directly from their respective servers. And of course Google/Facebook knows it but do not fix. Your developer can understand it very well why those files should always be downloaded from their servers every time and not used from cache.

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: The advantage of expertise                        

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.