{"id":1065,"date":"2018-04-27T10:49:53","date_gmt":"2018-04-27T07:49:53","guid":{"rendered":"https:\/\/iamakulov.com\/notes\/?p=1065"},"modified":"2024-01-08T06:47:02","modified_gmt":"2024-01-08T03:47:02","slug":"walmart","status":"publish","type":"post","link":"https:\/\/iamakulov.com\/notes\/walmart\/","title":{"rendered":"Case study: analyzing the Walmart site performance"},"content":{"rendered":"

Walmart is one of the top USA e-commerce retailers. In 2016, they were the second after Amazon by sales<\/a>.<\/p>\n

In e-commerce, the conversion is directly affected by how fast the site loads.<\/mark> For many e-commerce companies, making the site faster by 1 second increased the conversion 1.05, 1.1, or even 1.2 times<\/a>. That\u2019s because the slower the site, the more users abandon it before it loads, and the lesser is the conversion.<\/p>\n

Unfortunately, the Walmart site is pretty slow. In my tests, the content of the product page becomes visible only at the third second<\/a>:<\/p>\n

\"\"<\/p>\n

In comparison, for Amazon, the content gets visible at 1.4 seconds<\/a>. The customer sees the product they came for twice faster!<\/p>\n

\"\"<\/p>\n

Let\u2019s analyze the Walmart\u2019s site and see how we can improve the performance \u2013 and help Walmart earn more! I\u2019ll use the Lumia 635 product page<\/a> as an example.<\/p>\n

Fix the invisible text#<\/a><\/h1>\n
\n
<\/div>\n
\n

The first issue with the page is that it gets more or less rendered at 2.3s, but the text isn\u2019t visible until 3.0s:<\/p>\n

\"\"<\/p>\n<\/div>\n<\/div>\n

This happens because Walmart uses a custom font, and by default, Chrome and Firefox won\u2019t render the text until the font is loaded. This is how it looks live:<\/p>\n

\n
\n

See how the page stays without the text for a second?<\/p>\n

(Network throttled with the \u201cFast 3G\u201d preset in Chrome DevTools)<\/p>\n<\/div>\n

\n
https:\/\/iamakulov.com\/notes2\/wp-content\/uploads\/2018\/03\/without-fd.mp4<\/a><\/video><\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n
\n

Browsers delay rendering the text to prevent a flash of unstyled text (FOUT). However, this makes the content invisible for longer \u2013 and likely decreases the conversion!<\/p>\n<\/div>\n<\/div>\n

To change this behavior, we can add the font-display: optional<\/code> rule to the @font-face<\/code> styles. font-display<\/code> controls how the custom font is applied. In our case, it tells the browser to just use a fallback font if the custom one is not cached:<\/p>\n

\n
<\/div>\n
\n
\/* https:\/\/ll-us-i5.wal.co\/...\/BogleWeb.css *\/\n@font-face {\nfont-family: \"BogleWeb\";\n\/* ... *\/\nfont-display: optional;\n}\n<\/code><\/pre>\n<\/div>\n<\/div>\n
Now, when a customer visits the page for the first time, they will see the text immediately, rendered in a fallback font. The browser will download the custom font in the background and use it for subsequent pages. The current page won\u2019t get the custom font \u2013 this prevents the FOUT:<\/p>\n
\n
\n
Now the text is visible immediately.<\/p>\n
(Network throttled with the \u201cFast 3G\u201d preset in Chrome DevTools. The CSS file was substituted with Fiddler)<\/p>\n<\/div>\n
\n