If the design of your retail location caused up to 57 percent of your visitors to leave before they even came through the door, you would fix it immediately, right? Well why not take the same approach to your website? Today electronic retailers are losing up to 57 percent of their traffic due to slow loading webpages.
There is a growing trend in online marketing to design graphic-rich and interactive pages that “wow” the visitor. Web content is becoming richer and delivering a more immersive experience for the consumer. However, if that beautiful new page doesn’t load in three seconds or less, your customer is likely to go elsewhere.
A recent report by Radware shows that the longer a website takes to load, the more likely the consumer will abandon the site in exchange for one that loads faster. That doesn’t mean you should abandon your well thought out and beautifully designed pages. It just means that you have to focus more on optimization through the process.
Only 12 percent of the top 100 e-commerce sites deliver their feature content in less than three seconds.
Page Bloat and Content Delivery
As websites become more interactive and deliver richer experiences, the page sizes and complexity are increasing as well. The average Web page is 1905 KB in size and has 169 separately requested elements. This has increased over 69 percent in the past year alone. Eighty percent of the time spent downloading a page is spent retrieving all of these resources.
A big part of the problem is the efficient delivery of images. Images comprise 50-60 percent of a typical website’s content. But, less than half of the top 100 retail websites compress their images. In addition, consumers are accessing the content on a variety of devices with different screen resolutions and Internet connectivity speeds. Images and content need to be optimized based on the delivery targets.
Race to the Customer
Outside of the retail giants like Amazon, the fastest e-commerce sites are smaller and more efficient in the delivery of their content. They are optimizing and prioritizing the content that is delivered and rendered on the consumer’s browser. They are still able to deliver a rich experience through content management efficiencies.
Here are a few tips to help you load your website faster:
1. Consolidate JavaScript and CSS
Consolidating JavaScript code and CSS styles into common files that can be shared across multiple pages should be a common practice. This technique simplifies code maintenance and improves the efficiency of client-side caching. In JavaScript files, be sure that the same script isn’t downloaded multiple times for one page. Redundant script downloads are especially likely when large teams or multiple teams collaborate on page development.
2. Compress Text
Compression technologies such as gzip reduce payloads at the slight cost of adding processing steps to compress on the server and decompress in the browser. These operations are highly optimized, however, and tests show that the overall effect is a net improvement in performance. Text-based responses, including HTML, XML, JSON (JavaScript Object Notation), JavaScript, and CSS, can all be reduced in size by as much as 70 percent.
3. Compress Images
Image compression is a performance technique that minimizes the size (in bytes) of a graphics file without degrading the quality of the image to an unacceptable level. Reducing an image’s file size has two benefits:
- Reducing the amount of time required for images to be sent over the Internet or downloaded; and
- Increasing the number of images that can be stored in the browser cache, thereby improving page render time on repeat visits to the same page.
4. Reformat Images
Inappropriate image formatting is an extremely common performance culprit. An image that is saved to the wrong format can be several times larger than it would be if saved to the optimal format. Images with unnecessarily high resolution waste bandwidth, processing time, and cache space.
As a general rule of thumb, these are the optimal formats for common image types:
- Photos – JPEG, PNG-24
- Low complexity (few colors) – GIF, PNG-8
- Low complexity with transparency – GIF, PNG-8
- High complexity with transparency – PNG-24
- Line art – SVG
5. Preload Page Resources in the Browser
Auto-preloading is a powerful performance technique in which all user paths through a website are observed and recorded. Based on this massive amount of aggregated data, the auto-preloading engine can predict where a user is likely to go based on the page they are currently on and the previous pages in their path. The engine loads the resources for those “next” pages in the user’s browser cache, enabling the page to render up to 70 percent faster.
6. Implement an Automated Web Performance Optimization Solution
While many of the performance techniques outlined in this section can be performed manually by developers, hand-coding pages for performance is specialized, time-consuming work. It is a never-ending task, particularly on highly dynamic sites that contain hundreds of objects per page, as both browser requirements and page requirements continue to develop. Automated front-end performance optimization solutions apply a range of performance techniques that deliver faster pages consistently and reliably across the entire site.
Bottom Line
Retailers are compromising their content delivery in order to deliver a richer user experience. This presents the problem of ‘pretty vs. fast.’ At what point does the speed of the page load time outweigh the enhanced content? The content becomes a non-factor if the consumer is abandoning the site before the page fully loads. The responsiveness of the website is at least as important as the richness of the content delivered.
It is critical to the success of every e-commerce business to optimize their products and services. This includes the delivery and display of their business via their website. On the Internet and in the world of e-commerce, the website is the brand and the storefront. Businesses must constantly review and optimize their Internet presence to succeed in this highly competitive landscape.