There is an old adage concerning website performance that goes something like this: if your web page takes more than 3 seconds to render, your customers are likely to go to a competitor. Current research tells us it is much, much faster than that. More importantly, even very small differences between the speed of your page loads and that of a competitor’s can determine the fate of your digital marketing and ebusiness success.
Figure 1 New York Times, February, 2012
According to an often cited study from Google, people will visit a website less often if it is slower than a close competitor by more than 250 milliseconds. That is literally faster than the blink of an eye! As the New York Times reported when the study was released, web sites are in a constant battle between visual richness and the quick response times that our ever-shrinking attention spans demand.
What the study didn’t mention is the overwhelming amounts of data that modern online shoppers require. Elements like video, maps, location-based services, shopping cart data and personalized account info force your site to make more calls to the server in less time to deliver on baseline user expectations.
There are many ways to increase page speed, as we outline below, with caching (and CDNs) probably having the longest tenure. Some are more effective than others and all should be evaluated for your specific situation. Caching is the process of storing templated page data in a cache (temporary storage) between the main data store and the live site so that the server doesn’t get overloaded calling the same page elements (ex. header, sidebar, footer, logo and link data) over and over again. Caching solutions have been proven to be effective, however, there are various flavors of caching and caching alone is seldom the only mechanism to increase page speed and differentiate your site from your competitors.
How Will Your Website Compete?
Fortunately for the modern marketing technologist, there are many options available for increasing page speeds. At Kanban, we have seen strong business results from our implementations, including increased search engine rankings, improved cart conversion rates, increased time-on-site, and increases in average order size. Here is a review of your options for improving page load speeds across all screens:
1. Lazy Load for Images: Have you ever been to a site that has a lot of rich content and images? You may have noticed that when you scroll down, the images seem to appear as you go. You can see this often on news sites like Mashable and TechCrunch. This is called Lazy Loading. Lazy Load is a technique that loads page objects only when they need to be rendered in the viewport (aka browser window). Images appearing below the fold don’t load until a user begins to scroll down a page.
2. Content Management System (CMS) Component Caching: Many modern content management platforms come with component caching capabilities. With the right expertise, this allows you to save certain elements like the header, body content, filters, and the footer within the presentation layer framework. These should be optimized during CMS implementations to fit your exact specifications.
3. Reverse Proxy Server Page Caching: While caching the permanent page elements via component cache can increase speed, engineering best practices take things a step further by using a reverse proxy server like Varnish Cache to implement page caching. This method saves a fully-rendered version of the page in a third-party proxy server that can be accessed until the cache expires. Using a tool like Varnish Cache allows for fine-grained tuning of caching parameters. A page element like price can have a different setting for when cache is flushed (forcing a new call to the server) from an element like the header logo. The logo may never change, but the price may change daily or even more often. This give engineers and marketers a great level of control over maximizing page speed without compromising the user experience and related business rules.
4. Digital Asset Management (DAM) Systems for Rich Media: Let’s face it: modern consumers are demanding richer content from their favorite brands. That includes high-resolution photo galleries, video, and more. To deliver this content across multiple touch points (mobile, in-store, desktop, etc), many brands are implementing digital asset management systems that house, organize, and transcode rich media in various sizes, resolutions, file types, and versions. DAM implementations typically require sophisticated processes for creating, enriching, and accessing rich media so that it is ready to render across all screen sizes and formats.
5. Content Delivery Networks (CDN) for Streaming & Rich Media: With the increasing expectations for fast, immersive, and rich experiences, the use of a content delivery network (ex. Akamai) is required. CDNs distribute your rich content within server farms around the globe, shortening the physical distance between the user and the server. This not only reduces latency, but also distributes processing during peak loads, thereby optimizing the user experience.
6. Additional Page Optimization Tools: As another engineering technique available for marketing and IT pros, Google and others offer tools to increase page speeds. Google’s tools include PageSpeed Insights, which will help you identify performance improvements that can be applied to your site, and PageSpeed optimization tools that can help automate the underlying processes.
Is your favorite website caching or crashing? Tell us your story below, or tweet us @kanbansolutions today!
For more information on how Varnish contributed to our latest Nikon deployment, check out CEO and Chief Software Architect at the 2014 Varnish Summit in San Francisco!