Web Performance Dos and Don'ts From the Top 50 Shopping Websites
Nearly every aspect of the online shopping experience is reliant on some hosted asset or outside network. Hundreds of points of failure can occur on just a single page.
Join the DZone community and get the full member experience.Join For Free
for online retailers, web performance is do or die. one simple mistake could cost seconds in load times and thousands in revenue. since these businesses have so much at stake, they tend to be the best examples of web performance best practices.
the biggest contributors to load times are requests. simply put, nearly every aspect of the online shopping experience is reliant on some hosted asset or outside network. this can be anything from your cdn or dns network to the upstream providers for third-party services and plug-ins. don’t forget any assets or images that are hosted on third-party networks. that means there are hundreds of points of failure that can occur on just a single page.
while all this may sound overwhelming, it isn’t impossible to have load times like the shopping giants. you don’t need to be in the retail industry to reap the benefits. without further ado, let’s take a look at the top 50 shopping websites to learn how you can improve your web performance.
websites were chosen according to alexa . all sites were monitored with the constellix sonar lite chrome extension . we used the rum (real user monitoring) tool in sonar lite to capture load times of all the requests needed to load each web page. tests were run twice within the same week to account for service disruptions and cdn issues (notably, the amazon s3 outage ).
the chrome developer tools were used to collect page size and number of requests. follow-up research with constellix sonar rum was conducted to detect service disruptions and upstream provider latency that were impacting results.
the fastest websites
the fastest website was backpage.com with an average load time of 1.54 seconds. to put that in perspective, the average load time of all the websites we studied was 3.56 seconds. while two seconds may not seem like that much, studies have shown that a single second of load time can change a customer’s mind about converting. according to google , 53% of users will abandon a site or web page if it doesn’t load within 3 seconds.
there is a caveat. the backpage website is almost all text with links — no images, no elaborate css or scripts. it’s essentially a directory, like craigslist, which explains it’s total size of a mere 90 kb; that’s 3% of the average page size.
with this in mind, there isn’t much to reap from our #1 site, since every other website we studied was significantly larger and had more requests.
our second place website, google.com/shopping , weighed in at 377 kb and loaded in only 1.64 seconds. the homepage of sorts is more of a short landing page with some of the more popular items. very few retail sites choose this method since usually, the top of fold content will contain a large image, advertisements, and complex menus. while this minimalist homepage may perform well for the web, it may not be the best choice of design for most retailers.
home depot’s website made third place and is our first example of a traditional retail homepage: full-width banner image, large menus, and about a dozen more high-resolution images throughout the rest of the page.
home depot weighed in at a modest 2.4 mb, 175 requests, and loaded in just under 1.71 seconds. we were so surprised, we ran this test multiple times across a week’s span of time and we kept finding the same results.
the answer was the dom (document object model) load time, which is all the objects needed to load the html and scripts on a page. most of the other websites we looked at had significantly longer dom load and dom interactive timings and dominated over 70% of the overall load time.
here are some best practices that you can follow for optimal site speed.
size matters — so cut down on file sizes anywhere you can. compress your css, images, and scripts.
use a cdn (content delivery network)
out of the top 10,000 websites , 48.3% are currently using a cdn. these networks will host a copy of your website from dozens of critical vantage points around the world, meaning your website will load in chennai, india just as fast as it would from where you are hosting it in new york.
anycast dns hosting
it’s important to note that we didn’t say to use just any dns hosting. anycast networks will deliver your dns information at lightening fast speeds across the entire globe. you’re probably noticing some similarities between dns hosting and cdn’s, well that’s because they both use anycast networks. you can learn more about this technology here .
as we saw with our first place website, minimal design is king. while backpage is minimalism taken to an extreme, there are some great examples here and here of how modern retailers are using this technique to slash load times without compromising quality.
mobile first designs
last year, google sent shockwaves across the web with its mobilegeddon announcement. the new algorithm changes would penalize websites that weren’t mobile-friendly. this led to a new kind of design dubbed mobile-first, which forces designers to create their websites based on mobile views before moving on to desktop and other devices. you can learn more about creating a responsive website here .
requests may only take up a small amount of your load time, but if one fails to load it could hold up the rest of your site. you can limit requests by hosting everything on your site. this can be anything from images to fonts, documents and more.
stay tuned! next week, we will be analyzing the worst of the top 50 shopping sites.
Published at DZone with permission of Blair McKee. See the original article here.
Opinions expressed by DZone contributors are their own.