How Modern E-Commerce Websites Are Built?

SPEED

Google's Core Web Vitals define a good loading experience as a Largest Contentful Paint (LCP) within 2.5 seconds of the page starting to load. 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.

When these sites adopted SW caching with sw-toolbox (since replaced by Google's Workbox library), browsers like Safari and UC Browser did not yet support SW, so local storage was used for caching as a fallback. Service workers have been available across major browsers since April 2018, so the local storage fallback now matters only for very old browsers.

In fact one of the main motivation behind developing TestMu AI 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. 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.

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

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 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.

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 among the heaviest assets on most web pages. 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) for icons and logos, 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.

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.