Past few weeks I was spending lot of time in improving page loading performance of this blog as well as our other websites such as TheQuotes.Net.
I would like to share my experience of improving web page loading speed in this post.
Let us first see why we need to improve the page loading speed, and what are the things we need to consider while taking steps for increasing web page performance.
The very first reason is, people will like to stay more time on any website only if the web pages of the site load faster. If it is slow, people will move on to any other competitor website. i-e High performance web sites lead to higher visitor engagement, retention and conversions.
Another equally important reason is, Search Engines will give importance or priority for the fast loading websites when displaying search results. Google has declared that it is incorporating site speed in search rankings.
These days, creating excellent website is not a big deal. We can develop amazing websites with lot of features within few minutes by using CMS such as wordpress which allows us to choose our design and features from huge collection of free Themes and free Plugins. But really challenging task is, bringing visitors to our websites and keeping them engaged with our site.
It is true that "Content is king". But, creating quality content is not enough to bring visitors. In other words, people will come to know about your quality content only if they get a chance to visit your website.
So, it is very important to improve web page loading performance which can help to bring Search traffic. Now, let us see how to improve page performance.
Web page loading speed depends on various factors. For example, if you want to see the home page of our motivational Quotes website TheQuotes.net, you will be typing the URL as TheQuotes.net in your browser address bar. And, you will be noticing that it is getting changed as www.TheQuotes.net in the browser address bar. We added this redirection in .htaccess file of the server to get SEO benefits. But this kind of redirections will affect the page loading speed. So, we should avoid unnecessary page redirections to improve the page loading speed. For example, instead of redirecting the mobile users to mobile version of your site, you can have responsive design so that both mobile users and desktop users will see the same URL while seeing respective layout/design of the page. For example URL of this page will not be changed even if you are seeing different page layouts in mobile and desktop.
Hosting Server performance will also affect page loading speed. So, make sure that you are hosting your website with good hosting which provides good server speed. Based on my experience BlueHost and Hostgator are providing good server response speed at affordable price. For example, I have noticed good improvement in page loading speed after moving our website from previous hosting to BlueHost as I explained in my previous post.
Even if we host our website at good hosting server, there is no guarantee that our web site will be getting loaded quickly when we access the web pages from various places in the world. For example, if the server is physically located in United States, visitors from united states will be seeing quick loading of the site, but people from India will be experiencing slow page loading. So, to handle this issue, we can go for CDN (Content Delivery Network) which loads static contents such as images from various data centers located at various places. i-e people accessing your website from India will be getting the images from server hosted at Hong kong. This CDN approach will help to provide good loading performance for the visitors throughout the world. We can take advantage of this CDN approach easily by implementing CloudFlare.
Anyway, the dynamic contents should be still loaded from the original server only. So, it is important to force your server to create and deliver the content of the page quickly. For example, whenever you request home page content of motivational site TheQuotes.net, your browser has to receive the html content from the original server only. The CDN will deliver the static resources such as Images, Javascript files and CSS files from nearest CDN network server.
TheQuotes.net home page html has to be generated by taking two random text quotes from huge Quotes list in the database and by taking one random images quotes. And, it has to fetch last two blog posts, list of Quotes topics, list of blog categories, list of recent posts, etc. Definitely all these things will take significant time. If 10 people are requesting this page, it is unnecessary to allow the server to repeat all these things for all the 10 people.
So, we have to use cache system for storing the dynamic content (e.g php pages) as static pages (i-e HTML pages) and delivering those static page during subsequent requests. We use "wp super cache" wordpress plugin for implementing cache for TheQuotes.net website.
And, we have to make sure that our web pages are not having any unnecessary content, especially in header part of page. It is better to compress the pages by activating gzip so that size of the page will be reduced for the fast transfer. In wordpress, we can use minify plugin to implement it. And, size of images can be reduced by doing loss-less compressions.
We can combine all javascript files into one file to avoid unnecessary multiple HTTP requests to get all javascript files. And, we can do the similar thing for CSS files also. And, it is better to avoid using multiple hosts or domain names for getting the resources like javascript and CSS files. For example, if you have your CSS file in one host and Javascript files in another host, you need to put both of them in one host only to save time taken for unnecessary DNS resolving (i-e translation of domain name into IP address) of multiple hosts. It is better to keep all your resources in your main server. For example, I am keeping all js files and css files of thequotes.net in thequotes.net server itself. But it is not always possible. For example, for this blog is a Google Blogger blog. So, I don't have any control to save javascript files and CSS files there. But I needed to add some custom code as explained in my previous post. I had to put all my custom javascripts codes and CSS definitions in Blogger template itself. But it will increase page size and therefore affect the loading speed of all pages. The only option is, I have to put the js and css files in any other host such as thequotes.net. While doing this, we need to make sure that we put it in only one server to avoid unnecessary DNS resolving.
And, we have to make sure that we leverage browser caching. i-e Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network. For example, I have added below lines of code into the .htaccess file of TheQuotes.net for enabling browser caching.
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
But adding this code is not enough for TheQuotes.net site which is having cloudflare. So, I had to do cache expire settings from cloudflare dashboard also.
We can test the page loading speed/performance using various Tools. Google's PageSpeed tool is an excellent way for measuring and improving the page speed for both Mobile and Desktop. For example, you can view the Page speed score for TheQuotes.Net here. Apart from giving page speed score, it will give suggestions for fixing the issues that are reducing your website performance. And, pingdom is the suitable tool for viewing your website loading speed from various locations. And, it reports DOM loading performance. You can see the pingdom report for TheQuotes.Net here. And, we can use yahoo's Firefox Addon YSlow to see the page loading performance report of any web page you visit on your browser.
Whenever using any widely-used common libraries such as jquery library, don't link them from your own server. Instead, link them from Google-hosted servers. By doing this, you will get two advantages. one is, Google servers will deliver them fast. Another important advantage is, mostly libraries linked to Google-hosted servers will be already available in user machines. It will save the library download time.
And, make sure that you use asynchronous version of Google Adsense and Google Analytics code so that the visitors can start seeing the main content of your page even before the Adsense and Analtyics related scripts are not getting loaded fully. It will help to improve the user experience.
And, we should make sure that our efforts for increasing page loading speed will not affect user experience and SEO things.
Do you have any other suggestions to improve page loading performance? you can share your suggestions thro' the comments.
You can subscribe to our Email posts, and you can subscribe to our blog feed.
No comments:
Post a Comment