Rediff.com is one the most popular news, information and entertainment portal in India with Global Alexa rank under 400 and in India Alexa under 25. This site covers different types of articles including politics, Bollywood, travel posts and along with that, it runs full-fledged e-Commerce portal as well. It is not the content of Rediff.com that has impressed me but the load time of this site. When you hit the browser with the URL of rediff.com, you see that the page loads very very fast. It is like an instant load in just one flash.
No feature is Useful If One Compromises with Page Load Time and Speed
As the an observation, you lose 7% visitors for every 1 second that your site takes to load. That’s why the page load speed is very important for running any online business or even if your site is having just information about your company. I have seen similar page load speed like rediff.com for another website i.e. npithub.com which is a marketplace from different vendors from Nehru Place, Delhi India. As compared to rediff.com or npithub.com, you can see other similar sites from India e.g. Indiantimes.com takes more than 6 – 8 seconds to load the page on regular broadband speed. When the site loads fast, people keep coming to the same and it helps in getting more page-views and conversion. Another benefit of fast page speed is that it one of the factor which influence Google Ranking.
In this article, I will explain how to make your website load just like rediff.com and npithub.com so that visitors will love to visit frequently. I run most of my websites on WordPress CMS because of the flexibility that it gives in terms of scaling the site into a blog, eCommerce portal and more. Most of these tips and tricks can be implemented on non-WordPress sites as well.
How to Check Site Load Time
There are many free tools available to measure the page load time and flow of the load. Here are few important tools that I use frequently for my websites.
Once you enter your website’s URL, it loads the page on one of the pre-defined server and gives you the page size, load time, number of requests etc. All these information are important as once you have the clear picture of the problem, you can fix it. If you will scroll down on the result page, it gives you a waterfall structure showing what loads when. It also shows number of DNS requests i.e. how many different servers your site is calling while it loads. You will also find some performance insights at the same page where Pingdom suggests few steps to improve the ranking and load speed.
Another tool that I find helpful is GTMetrix. Here you get Google PageSpeed and YSlow Ranking together and so much information about your site’s current speed and important suggestions. On GTMetrix, you can compare two different URLs and their result too. For example, put your site’s URL and compare that with rediff.com and see where your site stands in terms of load time. Another feature is that you can download the result in PDF form and discuss with your team even offline.
I know Current Speed. How to Make it Fast?
Now you have all the current information related to website load speed of your website, it’s time to fix it. For WordPress sites, I will suggest few free plugins to improve the speed and make it similar to rediff.com load time. Non-WordPress users can implement the same using other available options or by editing the HTML files.
Use CDN (Content Delivery Network) to load static content
To avoid load on the hosting server of your website and load static content such as JS, CSS and images, it is recommended to use CDN. There are two major benefits of using CDN services.
- Reduces load on main server
- Serves content faster from the nearest CDN locations
I recommend using MaxCDN as you get better offer and the service is also reliable and very good. With more than 15 CDN locations around the world, MaxCDN serves content really fast for almost all visitors of your site. Cloudflare is another CDN provider with few data centers in India as well but I recommend MaxCDN because of their prompt support and flexibility.
Cache Pages with GZip
WordPress runs on PHP and MySQL servers and it requires to run so many queries and functions to open a page on WordPress. Even if a query takes 0.0002 seconds, multiple queries may increase the load time and if you are using multiple plugins for extra functionality, the number of query and checks will keep increasing and so does the load time. It is 100% recommended to install a good caching plugin on WordPress to reduce the server load on each page request. WP Super Cache is the best plugin for shared hosting or VPS servers. It comes loaded with super cache and GZip option to do the high level of caching and even reduce the page size using GZip. The plugin is so good that the parent company of WordPress i.e. Automattic acquired WP Super Cache and maintains the updates.
Another recommended plugin is W3 Total Cache which comes loaded with even more caching options such as Database Caching, Page Caching, HTML/CSS/JS Minification, Object Caching etc.
Don’t forget that every time the cache will get refreshed, server will have to go through all the settings that you have enabled. For example, use JS and CSS minification only if your server is good enough otherwise the minification itself will take time. My point is that you need to use the settings wisely and that you can check by verifying the page speed on tools mentioned earlier.
Copy the Right Script
In case you are using any third-party service like ad-network, analytics code etc, you need to paste their script on your site. For example, when you create an ad on Google Adsense, you need to paste the ad code on your site’s preferred location to embed the ad. Check if the third-party code provider is giving asynchronous script code. Using Synchronous script means the browser will not render the page until it downloads the script. It increases the wait period and the because of that the page will take more time to load. If using Asynchronous script, the browser will render the page even if the download of script is in progress.
Popular services like BuySellAds Ad Network, Disqus commenting system, Google Analytics, Facebook, Google Plus, Clicky etc. gives asynchronous script to embed the code.
Remove Query Strings from JS, CSS files
Query string is something which comes after ‘?’ or ‘&’ at the end of the static CSS or JS files. These things appear on almost every JS and CSS file loading on WordPress site t show the version of the file. Some proxy servers do not cache the files which comes with such query strings. In that case, the page may take more time to load on those servers. If you are building a website using static HTML pages, avoid using query strings. WordPress users can install this plugin to get rid of all query strings at once.
No Place for 404 Errors or Bad Requests
If certain files like Image, CSS or JS are not found while rendering the page, there will be certain wait period. This will again slow down the site as browser need to wait for sometime to see if it loads. Check the inspect element option of your browser and see if any 404 error found on the page. The option is available on almost every popular browser including Safari, Chrome, Firefox, IE, Opera etc. Fix the error either by uploading the missing file or removing the particular code from HTML, PHP or CSS.
Server Choice is Important
All the files and pages are stored on the server and most of the time they are getting served from there only. In case of dynamic websites, database also plays an important role. That’s why it is very important to select a good hosting server with certain level of scalability. As per Google PageSpeed test, server response time should be less than 200ms which means really fast. You can check your server’s response time by using Google PageSpeed Insight. I personally recommend Bluehost as the hosting provider. Their service remains 99.9% up and you get one of the best after support from their team.
To improve the response time, you should use optimized coding skills and also keep an eye on the database. Clean and repair database table at certain interval say once a month, remove unwanted tables or databases from the server. Also check if unwanted loops are there in your PHP code. WordPress users should only depend on good WordPress themes and recommended WordPress plugins. The default theme from WordPress comes with very light and optimized code otherwise in premium themes, Genesis theme framework from StudioPress is also very optimized.
Follow HTML/CSS Standards
Once you start developing the site, keep passing it from the W3C Validator. This page suggests you whether you have ignored or escaped any HTML or CSS standards. For example, if you have not provided width and height for an image, it takes some time for the browser to adjust the image on its own. Similarly, if you have not closed any particular DIV properly, sometime that will not get noticed to the visitors in terms of layout error as browser adjusts and fixed the error on its own. In that case also, it takes some extra time for the browser to completely load the page. That’s why it is important to follow standards to make your site load fast.
Optimize Images before Upload
Images are one of the most bulkiest thing which loads on a page. It s very important to have compressed and optimized images. I frequently use a free service named Kraken to get an optimized version of the image. Once optimized, then only upload the image on your server. There are certain plugins available to optimize the images on server as well e.g. WP Smush. It compresses the images available under media library and even a batch compress options can be used to optimize multiple images at once. If your page is having some fixed images like logo, other brands etc. use Sprite to load only one image. You can use a tool like SpriteMe to create sprites.
Also avoid using images wherever you can use Font Icons. FontAwesome is having some great icons are you can find icons for almost everything over there.
Conclusion
Page Load Speed is one of the most important factor behind the success of Rediff.com Many people visit the site to read news instantly and avoid load time. If the pages and static files are optimized, it consumes less data download on visitor’s device. For developers, the message is very clear that every time you add something on the page, check if it impacts the page load time. With the tools mentioned in this article, one can boost the page load speed and avoid losing visitors.
