A few days ago i was developping my personal website which is accessible here habinshuti.org . When the development was over, i deployed the code and tried to access the website via google chrome web browser .I directly noticed that something weird was happening in the way that the content was being displayed . It was taking up to 6 seconds sometimes even longer for images to appear on home page . In this post i am going to explain how i went about fixing this problem and i do hope that someone somewhere will find it useful
Why a website load time matters?
Well, remember the saying tha goes “time is money” ? this could not be more true in any other situation than in eCommerce business. The statistics coming from an infographic compiled by OnlineGraduatePrograms.com revealed that one in four people abandons surfing to a website if its page takes longer than fours seconds to load. As a typical example of how costly this could be, Amazon has calculated that a page load slowdown of just one second could cost it up to $1.6 billion in sales each year. A similar example by google suggests that by slowing its search results by just four tenths of a second, they could loose 8 million searches per day which means many millions fewer online adverts.
So how do you make a website load faster?
For starters, there are many different tips on how to increase the speed of a website. The approaches might differ depending on the technologies the website is coded in, but most of the tips below work for any website regardless of the technology used.
- Optimize images on the website
- Data caching(Browser and server)
- Use Content Delivery Network(CDN) which is a distributed cache. The most common CDNs are StackPath, CloudFlare(avilble for free) and AmazonFront
- Use only essential plugins and remove unnecessary ones if your wesbite is based on a CMS such as wordpress
- Etc.
Images optimization
According to HTTP Archive , images account for 61% of the total website weight. The overall size of the website and the image size in particular greatly affect the speed of the site. So the smaller the content, the larger the speed of the site.
- One way to change the size of the image is to change its resolution (quality). As long as the reduced size follows the standard web resolution size, the image quality should still be good enough for the web. The standard is 72 DPI(Dots Per Inch).
- Another way is to compress the picture. With this pproach, you might want to crop the image to cut an area which is not needed. By following this approach, i was able to reduce the size of the image on my website from original 5152×3864 to 537×660 and the results were impeccable.