How Modern E-Commerce Websites Are Built?

In a world bent on digitizing all the aspects of Modern life, emergence of e-commerce giants was only a natural thing to happen. New technologies pouring in from all over the world has resulted in the evolution of the front-end as well as on the back-end. Growing traffic and more competition has put pressure on these sites to be more efficient.
In this blog we will explore what makes an e-commerce website tick. More importantly what are the aspects that developers should focus while developing an e-commerce website.

SPEED

If your website takes more than 5 seconds to load, then you are already behind half the competition. Average attention span of a modern web surfer is around 6 seconds, and if you site fails to start making sense before that, then the game is lost even before it begins. Such is the behaviour of the users on internet. Therefore while developing user centric sites it becomes extremely important that your website load time should be less, and it is one of the biggest hurdle in the trade.

These websites have such a plethora of back-end data that makes the integration of all the components of site to be slow. Great deal of traffic makes complicates the matter further. Now there are multiple ways which you can use to increase the page speed that include compressions, reducing resources, optimizing images, optimizing delivery, caching etc. and it would take a whole to discuss all possible solutions. We however are going to look more into easiest and greatest of the them, like Caching and Webpack.

Caching

Visiting a site can be compared to dominos falling, your request is accepted by the browser which in turn checks if the cache is present. If present it sends the cache data to the user otherwise it fetches the necessary resources from link servers. Latest browsers provide a lot of support when cache comes into the equation.

Almost all the major e-commerce websites use Service Worker (SW) for caching different chunks of information based on the variety of resources such as images, API data etc. Myntra specifically started SW implementation right from the start.

Although SW-toolbox is very efficient but, and it is a very big but, there are browsers which yet don’t support SW. Browsers like Safari, UCweb posed a threat to the lightning fast caching and to tackle this issue and to bring an alternative to SW, Local storage came into the picture. Instead of caching in SW, local storage was used for caching. In fact one of the main motivation behind developing LambdaTest was to develop a cross browser testing platform where you can test if your website caching works as intended.
Caching did provide these sites with untapped speed but along with it came whole set of problems. The biggest problem being reducing and compressing the bundles (HTML, CSS & JS)
to ensure fast loading of web pages.

Webpack

Webpack single handedly solved a lot of problems. Using this technique, websites were able to compress their bundles more efficiently. Just to give you an idea Myntra was able to reduce their bundle load from 350 kb gzipped to 100 kb gzipped. Webpack had too many benefits, and along with an integrated webpack analyzer within build systems, it helped in keeping a close eye on the size of bundles. Another perk was being able fix size immediately instead of waiting for the end of development.

Tresshaking is an adored feature of webpack, which greatly helped in automatic curbing of the unused JS and CSS parts in the bundles. JS developers most of the times use large libraries most of the part remain unused. Treeshaking efficiently eliminated that part to compress the bundle size even further. Webpack 3 complements Babel to eliminate discrepancies generated due to ES6/5 browser support. The whole process of transpiling becomes faster when Webpack enters into the equation.

The CSS bundle size is reduced 10 kb gzipped for 6-10 pages that too including core CSS containing buttons,text, theme etc.

UI & UX

Combined they can make or break your dreams of being successful e-commerce website. It is true that a simple UI is more efficient but there has to be ‘something unique’ attached to it. While designing your website it is of utmost importance that you keep in mind the sea of data lying in the back-end. The UI must not hinder website’s loading time (which it usually does).

Custom Web Fonts (Ebay)

Ebay wanted to make custom web fonts to attract more users to their website, in doing so they suffered numerous obstacles. Making the web font was quite easy, it was integration that raised concerns. Normal system fonts were easy and quick to execute but with custom fonts came the responsibility of delivering unique UI. The first problem was of course performance as now the CSS bundle was increased, but somehow they managed it. Secondly, FOUT (Flash Of Unstyled Text) and FOIT(Flash Of Invisible Text) exposed the problems with various browsers not supporting such fonts or lacking the support for such advances.

To solve the issue company came with the strategy of providing the system fonts to the user when he visits the website for the first time and then on the second visit (cache present) treating him with the web fonts. Also to counter the browser issue, CSS Font rendering was proposed in which a new @fontface descriptor named Font-display was added. Tiny inline CSS and JS snippet was smuggled into the header and footer to incorporate font decoder logic. While parsing the data Font-display flag is checked and if absent the API support is saved in the cache and if the browser support is absent then it is stored in the local storage for further usage.

Image Parsing

Images are definitely the largest assets on the internet and account for more than half of the bytes. E-commerce websites are image driven. You don’t buy a product that you can’t see, utmost priority is given to the images. They have high resolution images that need to be shown to the users, posing yet another hindrance. The introduction of SVG (Scalable Vector Graphics) instead of the normal png formats to some extent relieved the servers. The size of svg files is extremely less when compared to the normal png files, making it easier for the images to be parsed into the component code.

Sometimes when you click on a product and there is a very low res greyish image that gradually becomes the high resolution image of your product, that is another advancement called Lazy loading. Lazy loading is basically ‘on demand’ loading where the object is broken into parts and loaded whenever the user may want it. It helps a lot by easing up on the initial load. We will discuss about this along with latest cloud techs which help image loading in the upcoming blog.

Customer Satisfaction

Customer is the god that you have to impress by deploying your tactics. People prefer a website which offers a more interactive UI. For instance, in an e-commerce site the search bar optimization becomes the key aspect which user looks for. Both Flipkart and Amazon has great searchbar experience but Flipkart breakdowns your search product in more categories.
Now relevance plays the next part, almost all these websites have infinite scrolling.
The product details, images, reviews etc play very great role in defining and setting the standards.

PROGRESSIVE WEB APPS

It is assumed that to use SW you need to build your site from scratch as a PWA, such is not the case. PWA are definitely the future, they unleash the untapped potential of web technologies and bestow upon you the infinite power to compete with the native apps. All the e-commerce giants have launched their PWA, be it Flipkart, Aliexpress, Amazon etc.
To know more about PWA refer to the blog on PWA.

TESTING YOUR MODERN WEBSITE

Time is money, when it comes to e-commerce. Your website should work on all the browsers and all the devices. People have started using mobile phones and this shift has made it priority for websites to work on mobile platforms. Testing becomes crucial as there are high chances that your site mapping may vary on different devices. We at LambdaTest, equip you with tools like responsive screenshot, real-time browser test to check if your site behaves properly. Any anomaly in UI can be detected and marked by our visual UI testing. With LambdaTest you can easily keep track of your website’s testing and even bug tracking has been reduced to only one click. No matter what kind of project management tools, we provide integration for it. Check out LambdaTest, subscribe for free and let us make testing easier for you.