As we reported last year, the Trilibis SNOW® Image Optimization solution (SNOW IO) has been validated for use with IBM® WebSphere® Commerce. Installed as a simple plug-in on any IBM WebSphere Commerce server, SNOW IO automatically identifies images used on every web page and optimizes them for thousands of devices. At runtime, SNOW IO works in conjunction with the web server to identify the type of device that is accessing the website, and to ensure it is served only images optimized for that specific device.
This brings instant performance improvements via dynamic image optimization to thousands of retail websites built using IBM’s advanced ecommerce platform. As part of the process, Trilibis officially became an IBM Business Partner and joined IBM PartnerWorld as an Omni-Channel In-Store & Mobile solution to help IBM WebSphere Commerce users integrate SNOW IO with their websites.
You may have been wondering how this integration works and how to configure SNOW IO. In response, Bob Balfe, worldwide technical sales leader for IBM’s Commerce program, has just published a helpful video to take you through the technical aspects of SNOW IO, how it’s configured within WebSphere Commerce, and how it optimizes images that used in your IBM Aurora storefront. As you’ll see, it’s pretty simple.
The resulting performance increases can be dramatic. During tests that we conducted with IBM, SNOW IO reduced the image weight of IBM WebSphere Commerce pages by 23 to 61 percent. While a number of factors contribute to the overall weight of a web page, in a recent survey of top responsive websites, we found that the size of website images is a significant contributor to lengthy page-load times on mobile devices. SNOW IO can reduce page weight from megabytes to kilobytes, and shave valuable seconds off overall page-load times.
The combination of Trilibis SNOW IO and IBM WebSphere Commerce addresses a key objective for all online retailers: delivering the best possible customer experience across all devices.
Study Reveals Majority of Leading Business and Technology News Websites Using Responsive Design Perform Poorly on Mobile DevicesMarch 11th, 2015 by Trilibis Blogging Team
Study concludes that responsive design is not meeting a crucial design objective for these publishers, and highlights the need for image size optimization for mobile users.
SAN MATEO, Calif.-March 12, 2015: A survey published today by Trilibis found that the majority of top news websites performs poorly when viewed on a smartphone or tablet. In an analysis of 100 business, technology and entertainment news websites that employ responsive design, Trilibis found that only 26 percent load in less than four seconds on a mobile device, and 27 percent take more than 8 seconds to load. These tests were conducted on a 4G network and should be considered “best-case” scenarios.
“Page loading time is an important part of the user experience for every website – but especially for news sites and blogs,” said Ted Verani, SVP of sales and marketing at Trilibis. “If a page loads slowly on mobile phones, visitors will go elsewhere for their news. Additionally, page-load time on mobile is now a key factor in determining search engine rankings, and also has bearing on the advertising value of a news blog or website.”
1. The page weights of the responsive news media sites in the survey were predominantly high
- 58 percent served pages of which images constituted more than half of overall page weight; 5 percent of the sample served home pages with page weight consisting of more than 90 percent images
2. 74 percent performed badly on mobile phones:
- Only 26 percent provided acceptable page-load times
- 47 percent were bad (4 – 8 seconds to load)
- 27 percent were very slow (8 – 35 seconds to load)
3. Image optimization by device type can reduce image weight by 47–79 percent.
4. Server-side image optimization delivered compelling performance gains on mobile devices:
- Average image weight was reduced by 79 percent
- Page-load times were reduced by as much as 48 percent
Survey highlights the need for image size optimization for mobile users
Tests conducted by Trilibis determined that image size was the primary cause of the sluggish performance. By analyzing the page composition of each website, Trilibis determined that the mean home page weight of the sites in the sample was 2.4MB, with a median weight of 1.6MB. For desktop computers with high-bandwidth connections and abundant local resources (disk, RAM), page weight is not a major concern – but, for mobile devices, it certainly is.
While a number of factors can contribute to the overall weight of a web page, the size of images is typically one of the most important. This is particularly true for image-rich business and technology news websites. Trilibis examined the relationship between image weight and overall page weight of the 100 news websites in the sample, and found that images constituted more than 50 percent of overall page weight for 58 percent of the sample.
When it analyzed page-load times, Trilibis found this was acceptable (i.e. less than four seconds) for only 26 percent of the sites surveyed. Page-load times were between 4-8 seconds for 47 percent of the sample, and in excess of 8 seconds for 27 percent.
Device awareness + responsive design yields benefits
Trilibis also looked at whether image optimization could deliver a lower page weight without compromising user experience, and whether server-side processing could improve website performance on mobile devices. Before server-side optimization, the total image weight of all 64 responsive websites was 81MB. Trilibis’ device detection and image optimization technology dramatically reduced the page weight for every class of device: down to 43MB for desktop browsers, 18MB for tablets, and 17MB for smartphones (a reduction in page weight of 47 percent, 78 percent and 79 percent, respectively).
Ted Verani of Trilibis noted that, for many of the news websites in the sample, the use of responsive design was not meeting a crucial design objective: delivering an excellent experience for mobile visitors. “The news blogs and websites in this survey are typically heavily trafficked, highly dynamic, and image-rich. In terms of revenue generation, publishers are principally concerned with page views and engagement — both of which can be negatively affected by longer page-load times. In addition, publishers aim to cultivate reader loyalty, which could also be negatively affected by a sub-par user experience,” he said.
Recommendations for website designers
- Carefully managing image size is crucial to ensure responsive websites load quickly and deliver the best experience for mobile users.
- Delivering a truly exceptional user experience on the Web requires more than simply redefining layout and styling for the screen width of a particular device. A successful One Web strategy should optimize website assets for specific classes of mobile device.
- To optimize performance on mobile devices, consider the use of server-side technologies in conjunction with responsive design techniques. For this survey, Trilibis used SNOW IO (Software eNabling One Web), its server-side technology that adds automatic device detection and image optimization to responsive websites.
Trilibis® is an experienced player in the mobile and multi-device web development community. Our flexible technology solutions and software simplify multi-device web development for top consumer brands, such as Abbott, CNN, Fandango, Match.com and Univision, as well as enterprise software solutions like HP and IBM. SNOW®, the company’s core product, is the first markup-based, server-side responsive design technology for a true “One Web” experience. SNOW enables developers to create device-optimized, high-performance websites that work perfectly on all PCs, tablets and smartphones. Trilibis is a private, venture-backed company located in San Mateo, California. For more information, visit www.trilibis.com or follow @trilibismobile
Copyright 2015 Trilibis Inc. All rights reserved. Trilibis and SNOW are trademarks of Trilibis Inc. Other trademarks are registered trademarks and the properties of their respective owners.
Trilibis Brings Server-Based Mobile Device Optimization to High-Performance Node.js Websites #nodesummitFebruary 11th, 2015 by Trilibis Blogging Team
SNOW works server-side on node.js websites to take responsive design to an entirely new level of performance and presentation, minimizes network bandwidth, and accelerates page-load times..
SAN MATEO, Calif.— February 11, 2015: Trilibis, the company that makes websites device-aware, announced that its market-leading SNOW® (Software eNabling One Web) website optimization framework can now deliver server-side responsive web capabilities on Node.js enterprise websites. The combination of the asynchronous and highly scalable capabilities of Node.js and SNOW’s instantaneous device detection ensures all website visitors are guaranteed an excellent experience and fast website load times across all devices, even at peak load conditions.
SNOW adds mobile device-specific optimization to responsive Node.js websites
Designing website for optimal performance and content presentation on mobile devices has become a high priority for every enterprise. Responsive design, a popular web design methodology, employs a client-side design methodology that only partially addresses the need to deliver an excellent experience for all devices. And, because responsive design relies on the browser to optimize a web page for the device, it frequently results in longer page-load times — a major concern for operators of websites with massive simultaneous transactions. The solution: Trilibis SNOW for Node.js, which optimizes web pages for every device and adds intelligent device classification that allows for segmentation by device type, screen resolution, browser, features, and more.
SNOW can reduce hosting bandwidth costs of Node.js web servers
With the addition of the SNOW device optimization plug-in, a Node.js web server can detect and profile each client device as it accesses the website, identify its type and features, then serve up only the HTML, CSS and images required by that particular device. This yields two key benefits:
- Significantly higher performance than that offered by classic responsive design techniques. SNOW reduces the payload served to mobile devices by a factor of four and reduces page-load time by as much as 25 percent.
- Web users, especially those with mobile devices, are assured a fast, device-optimized website experience.
“Enterprises that choose Node.js to power their web servers are aiming for the highest levels of performance, both server-side and client-side,” said Meyyappan Alagappan, chief technology officer at Trilibis. “SNOW delivers performance gains on both sides of the equation, and offers the additional benefit of enabling UX developers to customize the presentation of content on any device.”
Trilibis develops SNOW®, a markup-based RESS website optimization solution that uses a single code base to make websites device-aware and deliver a true “One Web” experience. SNOW enables developers to design high-performance websites that work flawlessly on all desktop and mobile browsers, and to unlock device-specific features and functionality that make websites mobile-ready, delightful and profitable. Trilibis is a private, venture-backed company located in San Mateo, California. For more information, visit www.trilibis.com or follow @trilibismobile.
Copyright 2015 Trilibis Inc. All rights reserved. Trilibis and SNOW are trademarks of Trilibis Inc. Other trademarks are registered trademarks and the properties of their respective owners.
This year’s NRF “Big Show” was big indeed — larger than life, in fact (it filled up the Javits center quite nicely). A huge range of companies, ranging from ecommerce platforms, digital development, cloud marketing, and near-field communication services, to offerings from hardware vendors such as beacons, point-of-sale registers and receipt printer companies were represented… and that’s just to name a few.
With so many companies in one place vying for the attention of the wandering ‘golden’ retailer with deep pockets and open purchase orders, it is no surprise that each vendor booth is trying to outdo the next to rise above the noise and get noticed. The result is a sensory assault of bright lights, big signs, gimmicks, giveaways and a general hustle to get yet-to-be-customers to bite. All which can be a little overwhelming at times.
At shows like this, it’s very easy to get distracted and waste one’s time. So it’s important to go in with specific objectives in mind. Ours were to reinforce relationships with existing partners and to connect with potential partners. Often, these partner meetings held are on different floors with restricted access, or in private meeting rooms that overlook the conference floor. I would equate this to being on the floor of a casino, then moving to high-rollers area or table to do your business.
Our business conversations at the show were laser-focused on our ability to provide performance and bandwidth optimization for responsive web design — an approach to web design that is getting increasing attention from retailers. All of our meetings were planned well ahead with specific outcomes in mind. We learned that most, if not all, of our partners are being asked by their customers to implement responsive web design. Even though these partners are trying to educate their customers about the performance challenges inherent with this approach, their customers often still want to push ahead. Which is where Trilibis comes in: we can assist by providing a plug-in technology that automatically optimizes performance and bandwidth on responsive sites across all mobile devices.
One side effect of being so focused at a show like this is that the big trends, professionally marketed or generally inferred, are somehow subconsciously absorbed or read about later on the plane back home. To bastardize a John Lennon quote, NRF trends are what happen while you’re making other meeting plans at the show. That said, as I look back, there were some pretty cool trends and announcements — here are a few worthy of note:
- IBM’s Watson is now a Personal Shopper – IBM’s omnipotent big data machine now helps personalize the shopping experience, reducing shopping cart abandonment.
- HP announced its ElitePad Mobile Retail Solution – a tablet solution to help streamline POS checkout. It plugs right in to HP Retail Expansion Dock and accepts third-party payment entry devices.
- Panasonic introduced the Powershelf – this is basically a smart retail shelf with the ability to auto-change shelf labels, indicate the shelf is low on product inventory, provide mobile advertising through embedded beacons, and more.
- Verifone and Samsung announced a global partnership – aimed at delivering advanced, Android-based mobile point of sale (mPOS) solutions to multi-lane and enterprise retailers.
- SAP SE announced plans to launch the SAP Assortment Planning for Retail application – this enables retailers to cluster stores based on attributes to help maximize profits.
- Tyco Retail Solutions and Creative systems are partnering to accelerate delivery of RFID-based inventory visibility applications for retailers globally.
- Beacons and NFC are the next phase in tying together brick-and-mortar stores with the digital shopper – this was probably the biggest trend and noise at the show.
- Consumers are mobile and social – this is so 2013!
- Loyalty programs work when executed correctly – and they also work when executed poorly.
- Beacons, beacons, and more beacons!
Sounds like a pretty cool show; I wish I had been there. Oh, wait a second…
With the holiday season now in full swing, analyses of the role mobile plays in commerce are showing up in my mailbox every day. The mobile share of all e-tail transactions is now anywhere from 30% to more than 50%, depending on which report you read. And, predictably, much of the commentary focuses on the share of smartphones and tablets, because these are the preferred devices of the affluent mobile shopper. We certainly saw that shift coming and made the jump to OneWeb technologies so that our customers and partners could be on the forefront of multi-device web design.
However, it is interesting to note that there are millions of feature phones still in use. In fact, according to Gartner, it wasn’t until 2013 that annual sales of smartphone users surpassed sales of feature phones. While there’s been a definite market shift away from the ‘m’ domain that was the norm before the dawn of the smartphone and responsive design, the largest brands with millions of users still have sizable audiences using these devices. This poses a real problem for web development teams, many of which have been focused on smartphone- and tablet-centric web strategies such as responsive web design, mobile-first design and adaptive design.
A great example of a large media player that must look both forwards and backwards with its web strategy is CNN. Until recently, CNN had been managing two m-dot sites using a third-party proprietary platform that was scheduled to become obsolete. CNN still had a sizable audience that used older phones, and felt strongly that it wanted to serve its news to all devices — from the newest iPhone to the oldest Blackberry.
That being the case, the web group that oversees CNN.com and CNNMoney.com approached Trilibis to develop a long-term solution that would enable them to provide an optimized experience for the older mobile devices that are still in use. With our years of mobile expertise, mobile publishing technologies and a device database that includes thousands of mobile phones, we were able to offer an integrated solution that included both non-touch smartphones and feature phones. So, if you happen to be walking around with a feature phone, launch that WAP browser and go to m.cnn.com to see their new site.
While our focus is decidedly on the future and helping brands move to a One Web experience using SNOW, our server-side responsive design technology, it is kind of cool to be able to build a simpler site that will run on these older phones. I wonder if situations like this will become more commonplace in future as m-dot expertise and turnkey solutions become obsolete. If you still have a lot of users on feature phones or just think it is important for your brand to be represented on all platforms, let’s talk. Please contact us here.
As the balance of web traffic continues to shift toward mobile devices, operators of high-traffic websites are increasingly concerned about ensuring fast load times on these devices. Many of them are likely using content distribution networks (CDNs) to reduce latency and ensure quick- loading content. Many of these same web properties are looking at responsive design as a means to optimize content on the broadest array of devices, including mobile phones.
We’ve written before about how responsive sites tend toward excessively heavy page weights, resulting in page-load and performance issues. Our team recently investigated how we might accelerate page-load times at the edge of the network by sending device-optimized websites from a single code base.
Keep in mind that CDNs aim to push content that’s in high demand to dedicated servers at the network’s edge. Meanwhile, SNOW sits on the web server at origin to identify the client device and then intelligently serve the optimum set of images and other device-specific resources to that device. Could this be adapted for the CDN architecture, in which there are two servers involved: the origin server and the edge server?
The answer lies in special technology developed by the major CDN vendors: Edge-Side Includes (ESI). ESI is a simple markup language used to define Web page components for dynamic assembly and delivery of Web applications at the edges of the Internet. It provides a mechanism for managing content transparently across application server solutions, content management systems, and content delivery networks. The good news is that ESI is now compatible with SNOW, which means we can auto-generate ESI syntax for improved performance and device awareness for sites running on CDNs.
The new SNOW-ESI module is a great solution for device-optimized websites that leverage a CDN architecture. SNOW can be added as an optional plug-in on a desired web server, which provides direct communication with the edge server. This means we can implement all of the SNOW features at the edge of the network:
- Device-specific user experience (our taxonomy includes thousands of PCs, smartphones, tablets, phablets, smart TVs, etc.)
- Generation of HTML/CSS content that is optimized for the device.
- Context-based rendering (for example for broadband vs. 3G).
- Edge-level caching for the fastest possible performance.
SNOW-ESI offers many compelling benefits:
- The SNOW-ESI module delivers higher performance than that delivered by responsive techniques, improves the end-to-end performance for mobile devices by a factor of four, and reduces page-load time by as much as 25 percent.
- Web users, especially those with mobile devices, enjoy a fast, device-optimized website experience.
- For developers, there are productivity gains of 40 percent since ESI syntax is auto-generated.
We recently exhibited at the Akamai Edge conference in Miami to demonstrate SNOW-ESI to web professionals. Feedback was very positive: beyond the performance gains, attendees told us they like the easy set-up and deployment. We’ll report back once we have some specific use-cases to highlight. In the meantime, if you’d like to implement SNOW-ESI on your web architecture, please contact our team here.
It should come as no surprise to anyone who tracks the retail industry that IBM®, a long-time leader of in-store retail technology, offers one of the most advanced ecommerce suites available. IBM WebSphere® Commerce is a comprehensive e-commerce platform that gives enterprise retailers the ability to offer their customers a rich shopping experience integrated across online, mobile and in-store touchpoints.
IBM WebSphere Commerce places particular emphasis on the mobile shopper. It offers a high level of customization for the mobile user, and recognizes that the presentation layer on smartphones and tablets must be differentiated and optimized. Ecommerce sites built using WebSphere Commerce can also be rendered using responsive design techniques. As experts in ensuring optimum presentation of high-performance ecommerce sites on mobile devices, we’re very pleased to announce that Trilibis is teaming with IBM to accelerate the performance of responsive design websites across all device types — especially mobile devices.
We have successfully validated our SNOW® Image Optimization solution (SNOW IO) for use with IBM WebSphere Commerce, bringing instant performance improvements to thousands of retail websites built using this ecommerce platform. Trilibis is also now an IBM Business Partner and has joined IBM PartnerWorld as an Omni-Channel In-Store & Mobile solution to help IBM WebSphere Commerce users integrate SNOW IO with their websites.
What this means for IBM WebSphere Commerce users
The new technical integration gives IBM WebSphere Commerce retailers a simple and efficient way to ensure that their image-rich websites load fast across all smartphones and tablets. SNOW® IO is a lightweight image-optimization solution that automatically improves website performance and bandwidth utilization for responsive websites built with IBM’s leading commerce solution.
The combination of Trilibis SNOW IO and IBM WebSphere addresses a key objective for all online retailers: delivering the best possible customer experience mobile devices. And because SNOW IO is continually updated, we can ensure future compatibility with new classes of devices such as wearable technology and large-format displays.
How it works
Installed as a simple plug-in on any IBM WebSphere Commerce server, SNOW IO automatically identifies images used on every web page and optimizes them for the thousands of devices tracked in our device library. At runtime, SNOW IO works in conjunction with the IBM WebSphere Commerce server to identify the type of device that is accessing the website, and to ensure it is served only images optimized for that specific device.
The resulting performance increases can be dramatic. During testing conducted with IBM, SNOW IO reduced the image weight of IBM WebSphere Commerce pages by 23 to 61 percent. While a number of factors contribute to the overall weight of a web page, in a recent survey of top responsive websites, we found that the size of website images is a significant contributor to lengthy page-load times on mobile devices. SNOW IO can reduce page weight from megabytes to kilobytes, and shave valuable seconds off overall page-load times.
Designing for optimal presentation of content on mobile devices is keeping website developers very busy. If you’re a publisher of dynamic news or manage a website on which people transact, ensuring it displays perfectly on every mobile device and all the major browsers (i.e. on tablets and mobile phones, as well as desktops) is essential. Responsive web design has emerged as a popular web design methodology to address this need.
But adopting responsive design is not without its challenges. For example, if you’re moving from an older website architecture, you’ll need to redesign the site from the ground up. Back in 2013, Forrester Research[i] reported that more than 40 percent of developers chose responsive design, or a variant of it, as part of their current web design approach. The same report also noted some degree of “hype and lack of understanding” associated with responsive design, especially with regard to best practices for its implementation. And, if best practices are not adopted, it’s quite likely a responsive website will not perform well on mobile devices across cellular networks — essentially defeating the purpose of using responsive design.
Optimizing website performance on mobile devices is a core focus of our development team, so we’ve been following the progress of responsive design with interest. A few months ago, we analyzed the performance of some popular responsive sites on smartphones and tablets and noticed some surprisingly long load times. Closer investigation revealed that large images were often the cause. This is the sort of problem that can be easily fixed with lightweight, server-based technology that can detect what sort of device is accessing the website, and then optimize accordingly.
That’s why we developed SNOW IO, which we just announced. SNOW IO is designed specifically for use with responsive websites, and can make a huge difference for your users if your site features a lot of images (think news blogs, ecommerce sites, etc.). When you add SNOW IO to your site, every image is automatically optimized for device, quality and speed. Then, when someone visits your site, device-specific, optimized images are served up for that visitor’s specific device. As a result, load time can be at least twice as fast because less network bandwidth and device CPU time are needed.
SNOW IO works with any responsive website development framework and requires minimal changes to your coding — generally, just the addition of some special tags to trigger the device-detection logic. Adding it is very easy since SNOW IO is a web server plug-in that’s compatible with Apache, Java and Microsoft servers. If you’re running IBM WebSphere, SNOW IO can be installed as a simple add-on module to IBM WebSphere Commerce. Commercial and OEM licenses are available.
To find out more, contact us and we’ll be happy to evaluate how SNOW IO can make a difference on your website.
[i] More Than Hype: Determining When To Use Responsive Web Design, Mark Grannan & Peter Sheldon, Forrester Research, November 2013
Akamai Edge 2014: Trilibis Previews One Web Technology That Makes the Edge of the Network Device-AwareOctober 2nd, 2014 by Trilibis Blogging Team
The combination of SNOW tags and Akamai ESI markup language boosts website performance on mobile devices that access the web via the Akamai CDN
SAN MATEO, Calif.—October 2, 2014: Trilibis, the company that makes websites device-aware, will preview new Akamai-specific technology at the upcoming Akamai Edge conference, next week in Miami. Trilibis has adapted its market-leading SNOW® website optimization framework to deliver server-side responsive web capabilities at the edge of the network, all from a single code base. As a device accesses a website, SNOW identifies its type and features, then serves up only the HTML, CSS, and images required by that particular device.
SNOW includes a new SNOW-ESI productivity module that intelligently auto-generates ESI syntax for any given SNOW-powered website. The ESI syntax instructs the Akamai CDN to cache SNOW-optimized front-end code to serve device-specific HTML code from the Akamai servers. This process yields three key benefits:
- Significantly higher performance than that offered by responsive design techniques. The SNOW-ESI module delivers higher performance than that delivered by responsive techniques, and improves the end-to-end performance for mobile devices by a factor of four and reduces page-load time by as much as 25 percent.
- Web users, especially those with mobile devices, are assured a fast, device-optimized website experience.
- For developers, productivity improves by 40 percent since ESI syntax is auto-generated.
To see SNOW edge-optimized technology at the Akamai Edge conference, drop by the Trilibis kiosk 13 in the exhibits area. To learn more about SNOW technology, visit Trilibis’ website or download the SNOW white paper.
Trilibis develops SNOW®, a markup-based RESS website optimization solution that uses a single code base to deliver a true “One Web” experience. SNOW makes websites device-aware and enables developers to design high-performance websites that work flawlessly on all desktop and mobile browsers, and to unlock device-specific features and functionality that make websites mobile-ready, delightful and profitable. Trilibis is a private, venture-backed company located in San Mateo, California. For more information, visit www.trilibis.com or follow @trilibismobile.
Copyright 2014 Trilibis Inc. All rights reserved. Trilibis and SNOW are trademarks of Trilibis Inc. Other trademarks are registered trademarks and the properties of their respective owners.
This article was originally published in the July 2014 issue of Internet Retailing
With mobile devices becoming popular for online shopping, mobile-friendly responsive design websites can deliver an excellent visual experience for visitors. However, Trilibis finds that operators of image-rich websites need to pay special attention to image weight and its effect on page-load times.
By Ted Verani
Has mobile caught your attention, yet?
In May of this year, e-tailers around the world eagerly anticipated the latest annual update from the oracle of the internet, Mary Meeker. This year’s report[i] by the influential KPCB analyst highlighted some of the major trends in Internet, social, mobile and digital media that e-tailers must factor into their web development strategies.
Mobile featured prominently in this year’s report. KPCB found that global mobile internet usage increased from 14 percent to 25 percent between May 2013 and May 2014. That increase was most pronounced in Europe, where mobile internet usage as percentage of total web pages views jumped from 8 percent to 16 percent (compared with growth of 11 percent to 19 percent in North America).
For online retailers, one very interesting mobile factoid in this year’s report concerns tablets: unit growth was 52 percent over last year, a massive jump that is surely reflected in this year’s server logs of any marketer. This mirrors the findings of comScore Inc., which reported that one-third of online shoppers at the top 10 retailers shop only on mobile devices.[ii] Your own website analytics are likely showing similar or even higher mobile traffic numbers.
What this means is that any company doing business on the internet must have an intense focus on ensuring their website performs well for mobile users, and especially users of smartphones and tablets. This is a big change from just five years ago, when many multichannel marketers were gradually rolling out mobile-specific websites.
Responsive design: an elegant path to “one web” architecture
Until recently, for many companies, a mobile website meant deploying an “m-dot” experience that was distinctly separate from the desktop version of their website. While this approach ensured an optimized experience for mobile users, its disadvantages were significant: a separate code base (development and maintenance costs); two websites to manage (content synchronization issues); and associated SEO issues. Consequently, many companies re-examined the “segmented web” strategy, leading to a major shift toward responsive web design (often called responsive design).
With responsive design, a website can configure its presentation to fit all screen sizes, ranging from a high-res desktop display to the smallest smartphone. Responsive sites are created from a single codebase and use a set of techniques that adapt the content to various screen sizes of tablets and smartphones.
The result is impressive: a website that smoothly adjusts its layout to any device, especially smartphones and tablets. It’s no surprise that marketers and e-business managers have embraced responsive design as a scalable way to deliver an excellent mobile experience from a single website code base.
There is a wealth of excellent guidance on designing websites that deliver a superior user experience on mobile devices. Using responsive techniques[iii] is generally considered a best practice for ensuring a consistent, “one web” experience across all devices. But online retailers should be aware that the ‘one size fits all’ approach—that is so appealing for website designers—also has some significant downsides.
- Development time: Responsive design typically requires a large-scale rebuild of a company’s web presence. From UI/UX design to the final testing phase, there are many things that go into the development of a good responsive site that ensures the experience is optimized for a wide variety of devices.
- Contextual challenge: While it addresses layout problems, and elegantly expands and contracts according to a screen’s width, responsive design is a one-size-fits-all-approach that makes it difficult to optimize for special design considerations or differentiated use-cases, such as offering the customer a mobile-specific shopping experience.
- Performance: Responsive design forces the browser to handle the bulk of the processing work so that content is rendered appropriately on the device. The client is sent all elements of a web page, irrespective of local device capabilities, and the client must determine which layout and assets to present. For mobile devices, the result can be longer load times and Web pages that perform poorly.
Responsive design and mobile retail: do images impact performance?
We decided to take a hard look at how responsive design affects a mobile website’s performance, since load time directly affects user experience and ultimately whether a sale is made or not. Radware recently tested the load times of the top 500 retail web sites[iv] and found that pages are heavier (measured in bytes) and slower than they were just one year ago. This correlates with our own experiences. Moreover, through our work with online brands to eliminate performance issues on their websites, we noticed that the design attributes of responsive techniques were frequently the reason for slow page-load times on mobile devices.
While a number of factors can determine the overall weight of a web page, images are generally the principal contributor. This is particularly true for responsive websites, which generally serve the same content to all devices. This can lead to overly large images being served to mobile devices.
To see whether poor performance is often associated with responsive design, Trilibis conducted a survey to measure the image weight of the top responsive websites. We wanted to know:
- How much do images contribute to page weight on responsive websites?
- How much does this affect load time for different types of users?
- Is it possible to automatically reduce page weight (and, therefore, load time) while maintaining an excellent user experience?
- 69 percent of the responsive sites we sampled were image-heavy, with images contributing to more than 50 percent of overall page weight.
- The responsive sites we looked at generally loaded slowly on mobile phones:
- Only 32 out of the 155 responsive sites (21 percent) responded with acceptable load times of less than 4 seconds.
– Only 32 out of the 155 responsive sites (21 percent) responded with acceptable load times of less than 4 seconds.
– 48 percent performed poorly with load times of between 4 and 8 seconds.
– 32 percent took anywhere from 8 to 48 seconds to load, which is unacceptable for most users
We then evaluated a technique to automatically reduce image size for responsive websites. Our goal: improve the overall user experience for some real-world examples, and achieve the target load time for RWD sites on mobile devices of no more than 3-4 seconds. We selected three RWD websites: boldandnoble.com, engadget.com, and starbucks.com. For each site, we replicated each site’s content on our own webserver. We then optimized all the images used on the home page of each website, calculated the image weight savings for both desktop and mobile devices, and then calculated load times both before and after optimization. The results were noteworthy:
Images accounted for 2.2MB (49 percent) of the total 4.5MB home page weight. Optimization results:
- Reduced mobile page weight from 2.2MB to 212KB (90% savings).
- Shortened load time from 6.63 seconds to 3.912 seconds (41% reduction).
Images accounted for 0.9MB (53 percent) of the total 1.7MB home page weight. Optimization results:
- Reduced mobile page weight from 861KB to 362KB (58% savings).
- Shortened load time from 11.814 seconds to 5.45 seconds (54% reduction).
Images accounted for 0.9MB (53 percent) of the total 1.7MB home page weight. Optimization results:
- Reduced mobile page weight from 892KB to 90KB (91% savings).
- Shortened load time from 4.454 seconds to 3.206 seconds (28% reduction).
Our research shows that delivering a truly exceptional user experience on the Web requires more than simply redefining layout and styling for the screen width of a particular device; it’s crucial to keep the overall page weight low. In the case of images, designers have several options:
- When designing a responsive website, ensure images are of an appropriate size for mobile devices.
- If using a web content management system, design different templates that address the wide range of devices that might access the website.
- Automate the image-sizing process using server-side processing techniques.
Let the server do the heavy lifting
To deliver an excellent website experience for mobile users, server-side technologies can be used in conjunction with responsive design techniques. This approach enables detection of the device characteristics of the smartphone or tablet that the visitor is using, and then fine-tuning of the user experience for that visitor.
Server-side logic enables a complete swap of crucial page elements and enables custom functionality based on local device characteristics. For example, a retailer can ensure fast presentation of a product catalog with images optimized for the accessing device. Or a content-heavy site can deliver entirely different ad placement based on device and user context.
These server-side technologies are simple to implement and use abundant server-side computing resources to optimize the image size for the accessing device before it is sent to the client. As our research shows, this approach can deliver much faster load times — and a far better experience for the user.
Trilibis is focused on creating server-side technologies that simplify multi-device development. By marrying server-side technology with responsive design techniques, your website can offer your mobile visitors the best possible mobile user experience.