Optimizing eCommerce Site Performance for Better Conversions
Guest blog post by our friends at Yottaa.
In ecommerce, conversions equal money. So when it comes to conversion marketing, every little element needs to be experimented with; every landing page reviewed and tweaked. So why, in this long list of items to optimize, are site speed and website performance often left off the list?
Because traditionally, web performance has been IT's game, where the goal was to create a faster site, not to optimize site performance to boost business metrics. What is becoming clear now is that the two worlds no longer exist separately. Site speed has a direct, measurable impact on conversion rate, revenue, and other key user engagement metrics.
A well-performing site is crucial to improving business metrics across the board. Plus, it saves conversion marketers the time it takes to research and test what will resonate with users most, because all site visitors are looking for a fast site that meets their expectations. As site owners start to understand the connection between speed and user engagement, the concentration now is on creating successful users – users who can easily and quickly take action on your site and enjoy it.
Getting Started with Web Performance Optimization
In terms of sheer speed, your primary goal is to get your site to load under three seconds. After that, further improvements aren’t meant to reduce load time, but to implement context-specific techniques based on the user (a bit more on that later).
The two main objectives in performance optimizing are to reduce the number of asset requests on an ecommerce site and reduce the weight of the site. In doing so, your site will have fewer requests sent to the server for retrieving, and they won’t weigh down the site while loading.
Here, we’ll walk you through a list of some fixes you can implement manually, and relatively easily, with the right development support. You can start by working with your IT or EYEMAGINE team and laying out to performance priorities, getting easy fixes knocked off the list, and identifying bottlenecks. Try www.websitetest.com to get details on how your site currently performs and where any specific issues are. Another option to see more advanced performance results is to use an automated solution that optimizes your site in real-time (like Yottaa).
1. Eliminate 404 Errors and Missing Assets
In terms of desktop and mobile, fixing bad pages or missing assets is the easiest way to get started improving performance. Any 404 errors on your site are going to increase bounce rate and lose traffic and potential customers. You can diagnose errors easily with Google Webmaster Tools by going to Diagnostics and then Crawl Errors. 404 errors happen when a user visits a page that has been deleted from the site. So first, try not to delete any pages. For the most part, there’s no need to. If you must delete a page, implement a 301 redirect to your homepage, or a similar page.
If you have any digital ad or AdWords campaigns running, or have past online campaigns still live, you’ll want to make sure any visitors you might gain from those don’t hit a dead end page with a 404 error. For programs that are no longer live but might still be accessible, you can redirect the old landing page URL to your homepage instead.
2. Optimize Images
We all want beautiful, high-resolution images on our websites to showcase products in their best light. And today, users most clearly respond to great design and large visuals, which puts greater pressure on a site’s load time and infrastructure. Luckily, there are easy ways to optimize even large images.
Lossless image compression refers to methods that involve no downgrade in image quality. These are methods that make images “lighter” (that is, fewer bytes) without making them any smaller, blurrier, or less colorful. You can also employ lossy image compression has a drastic effect on the weight of the image file. The freedom to downgrade the quality of the image allows for a significant reduction in the weight of the image — even if the perceived quality is not reduced proportionally. There are online tools you can use for this like ImageAlpha, TinyPNG, and Photoshop.
CSS sprites are tools to combine images into one file to reduce the overall number of image requests, and are the preferred method. A sprite involves bundling small images into a larger file. When the large sprite image that contains the smaller ones is fetched from the server, CSS is then used to precisely position specific parts of the image in the right places on the page while hiding the other parts from view. The result is a page that looks the same as if it had loaded each image separately, but that only required one HTTP request instead of several.
3. Concatenate & Minify JavaScript
Concatenating JavaScript reduces the number of requests by combining multiple JS files into as few files as possible. Reducing the number of requests is effective in optimizing a site because no matter how small the file is, every single request the browser makes takes at least 20 ms, and could take upwards of 100 ms or more. Concatenating files and scripts is accomplished by writing a line of code that encompasses information that was previously contained in two or more lines of code, and is a common practice.
Minifying JavaScript reduces the sizes of JavaScript files by eliminating the additional space that tends to be in most files created during development. This space helps the developer organize the code into structured blocks, enabling them to more easily debug the code and for others to understand the code. However, these extra characters create bulk — bulk that can collectively slow your site. Each character of code (including spaces) factors into the weight of the file, and, as performance gurus know, every byte counts. Minification rids your site of the excess automatically.
4. Reduce 3rd Party Requests
Third-party assets are among the worst offenders on today’s websites. Social media widgets, trackers, and other gadgets on your site are hosted in locations far and wide and on servers you have no control over. When those widgets have performance issues, their problems spill onto your site and drag down your performance.
The simplest way to deal with these third-party assets is to have relatively few of them. Before adding anything new, assess whether it’s truly going to drive engagement and add value, or if it’s simply a trendy or aesthetic choice – this can make a big difference to the end user. For existing widgets, the best way to maintain performance is to ensure that they load asynchronously.
Typically, third party assets are <script> tags, and the browser will put a hold on downloading all other assets until this tag has been downloaded and executed, meaning one bad asset can prevent the rest of the page from downloading for sometimes whole seconds. By forcing third-party assets to load asynchronously, you’ll prevent the possibility of your site’s download process being arrested by one bad widget.
5. Use a Content Delivery Network
When traffic volume is high (which we all want), your web server can easily get so bogged down processing asset requests that it may have trouble dealing with the more important functions like presenting the page views and processing transactions. A CDN offloads server request from your infrastructure to dedicated, sometimes global servers in multiple data centers, so that your site won’t crash or slow with heavy traffic. This expands your infrastructure capabilities and supports your back end.
Becoming a performance pro
These five steps will set you on the path to creating a better, faster experience for site visitors, but the world of site performance is evolving rapidly. We’re moving beyond speed to context-specific optimizations. What does this mean? It means rendering a page in response to the users’ actions, and providing a personalized experience. If this sounds a bit complex, don’t fear – we have a corresponding set of “first steps” to get started on approaching this holistically across your site here. But for now, these initial performance-perfecting steps will speed up your site, improve user experience, and boost key metrics with little investment!
About Yottaa
Yottaa web performance optimization is a personalized, responsive solution that adapts to visitor context and user actions to improve engagement and increase mobile and web conversions. If your website is integral to your business, Yottaa helps you deliver a more engaging site that improves your business, for any business.
