One of the most common reasons of losing customers on eCommerce websites is a page loading speed. Modern users have no time to wait. In order to sell well, your website should look impeccable, work perfectly, and load really quickly.
In this series of articles I am going to address some topical issues concerning eCommerce platforms. Let’s begin with the most general one.
Server response time
Performance matters. Everybody knows that there is a strict correlation between website speed and revenue. That’s why eCommerce website owners should really care about it. If you still aren’t using Nginx you have to start doing it! Nginx is an open source high performance web server and load balancer. It serves significant part of busiest websites on the Internet. From our experience, we are usually able to shorten response time 4-10 times compared to a more popular Apache web server.
Compression
Most web servers support GZIP compression method using mod_deflate for Apache or HTTP Gzip Module for Ngnix. It can save you up to 60% of traffic and the same amount of idle time for user.
CDN
Content Delivery Network allows you to distribute files over multiple servers and deliver them much faster to your users. All static files can be stored on a CDN, such as but not limited to: Images, Videos, JavScript, CSS and Fonts.
Here’s what difference it makes in comparison with hosting all your files on the same server:
- Distributed data centers across the globe.
- High availability.
- Resolves issue with browser limiting concurrent connections to single domain.
- Reduce hosting costs.
Optimize images
Reduce image files’ size by using appropriate format JPEG for photos or PNG for all other images by reducing quality and color depth. You can also use tools like JpegTran and OptiPNG to reduce image size without visible quality loss. You can gain up to 80% size optimization using this technique.
Minify CSS and JavaScript
Minifiers remove unnecessary spaces, tabs, comments and new line characters from the code. JavaScript minifiers can also shorten function and variable names whenever possible.
You can sufficiently reduce size of your website CSS and JavaScript files by minifying them using YUI Compressor or cssmin.js for CSS and Closure Compiler, JSMin or YUI Compressor for JavaScript files. Minifiers usually allow you to save at least 30-40% of file size.
Render-blocking JavaScript
Another common issue is the so-called “Render-blocking” JavaScript. Websites often have <script> tags inside <head>, this prevents browser from rendering page prior to loading all scripts defined there, so, it is an additional time for a user to wait. You can put “async” parameter to <script> tags in order to load them asynchronously or move javascript somewhere to the bottom of the <body> tag.
How fast is your website?
There are a lot of useful tools to check that. Here are just a few I use:
- Google Page Speed http://developers.google.com/speed/pagespeed/insights/
- Web Page Test http://www.webpagetest.org
- PingDom https://www.pingdom.com/
- FireBug browser extension https://getfirebug.com/
