Why Is The Shein Website So Slow?

Shein (https://www.shein.com/) is one of the biggest success stories coming out of China in the past decade. It’s the world’s largest fashion retailer as of 2022 and is valued at over $100 billion. 

According to a website speed report published by Lighthouse, the Shein website scores very poorly on performance. It ranks a mere 30 out of 100 in terms of performance and has a very high-speed index of 14.5 seconds. 

There are many reasons why Shein.com is very slow. This includes:

  • Bloated JavaScript and CSS files
  • Use of unnecessarily large images
  • Poor image optimization
  • Third-party code that blocks resources
  • Large DOM size
This is a screenshot from the Lighthouse report for Shein.com. It shows the various performance issues (like reduce unused JavaScript) and how much time can be saved through optimizing them.

Let’s look at each of these reasons and understand how Shein can make their website load faster and more efficiently by adopting simple, but effective techniques.

But before we do that, let me take a minute to talk about CWVIQ.com - I do not need to tell you how frustrating it can be when a website is loading slowly. CWVIQ is a free email alert service that monitors your site for performance and buzzes you with an alert anytime your site is loading slowly. Did I mention that it’s free?

Bloated JavaScript and CSS files

Websites like Shein use JavaScript for a number of reasons – including updating content dynamically, setting up tracking codes to analyze visitor behavior, animating images, controlling multimedia, and so on.

CSS files are used to describe the layout and design of your website, including what bold text is supposed to look like, how a table appears, etc.

You don’t need your website to load and execute all of these different JavaScript functions and CSS files before it loads up your page. That’s a waste of time and resources that could instead be spent on loading the more important components of the source code. 

So, if I were Shein, this is what I would do – I would break the JavaScript and CSS files into smaller files. This is called code-splitting and lets you put all the essential JavaScript code in one file and load only that during page loading. You can load the rest of the scripts later once the top fold of your website has finished loading. This would shave off 2.1 seconds from the loading process.

Use of unnecessarily large images

I get it – large, high-resolution images make the site look prettier and can increase sales. But here is the thing – when someone is accessing your website from their mobile phone, you do not have to download a billboard-sized image.

Images and videos are by far the heaviest content assets on a website, and cutting down on the image size can go a great way in bringing down the size of content download, which greatly improves the speed of your page load.

But there is one more thing that Shein needs to do. A lot of images showcased on the website are in familiar file formats like JPG or PNG. These are pretty old formats and are a drag on your page loading. Instead, Shein needs to replace these images with more modern file formats like WebP or AVIF. 

For some perspective, changing the file format of just one banner image from JPG to WebP can save over 100 KB of loading size. Imagine the potential savings if each of the images were replaced with newer file formats. 

Another thing – Shein also has a lot of animated content – in GIFs. That’s a poor use of resources. GIF files are extremely inefficient and can drag down the efficiency of page loading. Using MPEG or WebM formats is a much better option.

Fixing the image issues could help Shein save over 4 seconds during the loading process.

Poor image optimization

We are not done with the images yet. As an eCommerce website, Shein uses a lot of visuals, and poor optimization techniques can contribute to poor performance. One way to optimize images better is through better encoding. 

There are many ways to optimize images, including the use of image CDNs (content delivery networks that cache your images so that they do not have to be loaded again and again), compressing images, lazy loading (this way, the image is only loaded when the user scrolls down to it. Loading an image that the user will never see is a waste of resources), and lastly using the correct width and height parameters.

Third-party code that blocks resources

Almost all modern websites contain requests to third-party servers to load specific components on their websites. This could be requests to tracking codes, custom fonts, ad scripts, or social media embeds. 

Now, the problem with this is that each time your browser encounters a third-party script, it must first establish a connection with an external server, and load the contents from the server, before proceeding with everything else on the HTML code. 

In the case of Shein, browsers spend almost close to 5.5 seconds loading third-party scripts. This can be avoided with two important changes. 

The first is to avoid loading these third-party scripts until the main website has completed loading. There is absolutely no need for tracking codes and social media embeds to load before the website itself does. 

But what about custom fonts? This is necessary for the website to render as designed. For this to work seamlessly, you must make use of rel=preconnect – this tells the browser to establish a connection to the particular third-party server on high priority. This way, your browser does not have to spend crucial microseconds establishing a connection at a later time. Secondly, use preload scanners to load these fonts on priority.

Large DOM size

The Shein website takes close to 20.3 seconds to evaluate all the scripts, parse them, compile, and render them. This can be minimized by minimizing the main-thread work. 

In the case of Shein, close to 13 seconds of the 20.3 seconds are spent on script evaluation. This can be minimized by optimizing third-party JavaScript files. You may also look at reducing the number of nodes in the DOM. In simpler terms, you need to make sure that the main HTML code is smaller and has fewer nodes. I have explained this in greater detail in this article about DOMContentLoaded

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top