No need to iterate the importance of page load time of an e-commerce website, the thumb rule is that page load time matters.
Irrespective of whether it’s a high traffic portal or niche online store, below are some tips that will help improve performance of e-commerce web application (website or underlying server application powering mobile app)
1. Infrastructure Layer Optimization
Before we dig deep, there were two broad aspects of our experience.
We have shuffled between different hosting partners and different mode of server – Virtual Machines or Dedicated Servers.
Though this may differ from case to case, we decided on using only Reputed Hosting partner and Virtual machines on Cloud, and this has worked out for us.
Below server related topics hold true irrespective of the above mentioned scenario:
a) Geographic location of Server
The location of your server is a critical factor. It is strongly recommended to keep servers in the same geographic area where the majority of your intended customer belongs.
The network latency has a direct impact on load time, and since a single page requests contain multiple calls to server made by a browser (image URLs, CSS URLs, etc.) this latency factor compounds.
b) CDN and Alternatives
Use of CDN is optional; it will increase the performance of all your static web resources – files, CSS, images, JS, etc.
If your server location is on same geography as your customer traffic source, then another alternative is to use a reverse proxy like Varnish to server all static web resources (sort of your CDN) instead of using other 3rd party CDN. This method will also offset a lot of server traffic and disk I/O, saving precious server resources to power other requests types.
c) Tier Deployment
It is strongly recommended to segregate entire deployment layer into 3 tier – Load Balancer, Web Servers, & Database servers, with Firewall at each tier layer.
Not to mention the security benefits and scalability of 3-tier architecture, which is critical for any e-commerce application. The segregation helps to ensure identification of issue at any layer and easy troubleshooting of performance issues.
Based on which software is powering your Load Balancing, Web server, Database, Search, Caching, etc. each deployment layer in 3 tier can have different compute v/s memory ratio created on optimal requirement.
d) Server configuration Tuning
Please note the below configuration tweaks are Linux related.
Expire Headers – This should be turned ON. Enabling this will enhance performance as all response header will have a cache expiry lifespan. The browser will use this metadata and avoid re-fetch from server accordingly. For static web components, which do not change frequently (e.g. images), the expired header should be set at a far future time stamp.
Output Compression – Enabling this setting will compress all static components into smaller files, thereby fastening downloads.
KeepAlive – E-commerce HTML pages contain lots of images and other static components calls, hence KeepAlive should be enabled to reduce latency as all these multiple requests will be sent over existing TCP connection.
Web Servers – The deployment may consist of multiple web servers on horizontal scaling mode based on your traffic numbers. One important aspect is to dedicate a separate web server for backend only. All backend operations and batch processes should be performed through this server only, leaving the rest of the web servers to serve customer front end requests.
2. Application Layer Optimization
Either you are using a custom built application or any Frameworks, with due course of time, lines of code, and web components will keep on increasing. This is standard for any e-commerce application as more and more features, product range, etc. are added.
Hence optimization of your e-commerce application is a never ending task, which should regularly be performed.
Let’s have a look at below components that can affect page load time of your application, irrespective of programming languages or frameworks:
a) Page Size
Standard page size should not more than 2 MB. On such scenario where the page size is large, heavy resources such as banner images, product images, etc. should be lazily loaded, thereby keeping the initial load size small. The large page size is detrimental especially if your customer traffic is majorly from a mobile device.
b) Number of requests
The number of requests per single web page constitutes of a number of calls the browser makes to the server to fully load that single page. This includes all calls to JS, CSS, font, Ajax, etc. either own or 3rd party elements present on your application. The number of requests per page should be optimized and maintained at a minimal. Remove any un-required web components from past. Another method is to merge CSS and JS files to reduce the number of requests.
c) Caching
Caching is the most important method for any performance optimization. Based on your application architecture, caching can be achieved through the use of indexed tables or opt for 3rd party software such as Redis, Memcache, or NoSQL databases.
For an e-commerce application, there should be a clear distinction between what components can be cached or not, e.g. price and inventory should always be real-time. For such scenario, you may want to keep price and inventory data in the native database itself using specialized index tables.
d) Image optimization
Images contribute to more than 56% of an e-commerce page size.
In an e-commerce application, the product images are re-sized by an application into multiple image sizes depending on UI views requirement – thumbnail, zoom, etc.
There is always a parallel contrast consideration of compression v/s quality.
There are many great image libraries available that optimize the images for web view, while maintaining good quality for customer experience.
Another important aspect is lazy loading, which will load the image only on demand.
Banner image is one area that many tend to forget.
All in all, there are lots of online tools available to optimize web images directly.
e) 3rd Party resources
Analytics and tracking is the core of e-commerce business, and such services are mostly 3rd party in nature. As thumb rule of implementation, all 3rd party resources elements should be in the header, but should be executed after DOM is fully loaded.
f) Sessions
Sessions need to be centralized and recommended to move it away from either database or file base type. Memcache or Redis can be used to achieve this.
3. Database Layer Optimization
The database is the heart of any e-commerce application and requires constant monitoring and health checks. Below are some optimization tips irrespective of database types.
a) Query Optimization
The query optimization will yield highest gains on performance.
Slow query logs should be turned ON, and this will give useful insight for optimization.
This activity is usually performed by DBA along with the developer.
There may be many queries not doing any required purpose anymore; such should be identified and removed. Also, there may be repetitive queries that the developer can optimize the code itself.
b) Schema Design
Change and customization is perpetual with an e-commerce application. Hence, the schema needs to be reviewed whenever any major feature is added.
The table’s schema may have been designed earlier keeping into views the requirement at that time, the addition of new features usually increases the load due to the addition of new fields or more joins. Not to mention the additional load due to ever increasing data rows each day.
Proper indexing should be in place especially for those tables used in JOINS, even keeping a limit on multiple joins.
Based on which database type is used, table partitioning should be in place for tables with a large number of records.
c) Database configuration
Whichever type of database is powering your e-commerce application, you can go miles in tweaking the configuration for optimal performance.
Enabling query cache will give you significant performance gains.
If possible, use of SSD storage for a database is recommended.
Based on scale of your e-commerce traffic and conversion, database can be deployed in various methods (Master-Slave, Master-Master, etc.)
The fundamental approach requires understanding of your data to start with.
