Performance Tips for Sitecore Mobile Users

Tips to Improve Sitecore Mobile PerformanceAugust 9, 2013 1

Please review

before viewing this presentationhttp://www.slideshare.net/cwnelson/sitecore-performance-tips

2

Sitecore Enterprise Web CMS

• Popular .NET Web Content Management System for mid-to-large organizations

• Provides friendly tools for non-technical Content Authors and Marketers

• Can be customized and extended to meet almost any conceivable business need

3

Why Mobile Speed is Important

Performance must meet customer expectations• Users expect performance levels close to desktop• Lack of speed hurts visitor retention and conversions

More critical to optimize for mobile than desktop• Mobile devices have limited processor capabilities• Mobile networks have latency and bandwidth issues• Mobile usage is huge and continues to grow rapidly

4

Issues that Affect Mobile Speeds

Latency and bandwidth issues• The user’s location has an unreliable connection• The user is using a slower 3G cellular network• The user is at a public Wi-Fi hotspot or crowded hotel

Design and development issues• Adaptive and/or Responsive design not implemented • Pages use many HTTP requests to get components• Downloaded media is not sized for mobile devices• Site settings are not optimized for mobile devices

5

Optimizing Mobile Performance

Performance optimization for mobile devices• Compression is the most effective way to optimize• Use an Adaptive and Responsive web design• Reduce bandwidth requirements and latency issues• Utilize a Content Delivery Network (CDN)• Reduce components to reduce # of HTTP requests• Avoid frames as many mobile devices do not support• Use social links instead of social media widgets• Minimize and minify CSS and JavaScript resources• Avoid blocking resources in above-the-fold content• Optimize media for mobile devices

6

Adaptive Web Design (AWD)

Multiple layouts used to target specific devices • Uses a mobile-first design approach• Design starts with the lowest common denominator• A separate Sitecore device and layout used each time

• Relies on server-side code for display across devices

Mobile devices display a simplified version of site• Design is for desktop and targeted mobile platforms• A third-party service is necessary for device detection• The creative design for mobile is a key success factor

7

Responsive Web Design (RWD)

Adapts a single layout to the viewing device • Page elements assigned relative, not absolute units • Percentages are used instead of pixels• Heavy use of client-side code for flexible grid design

• Flexible images are sized in relative units like em or % • Media queries apply CSS based on browser width, etc.

Mobile devices display minimized version of site• Design is for desktop computers and mobile devices• Provides easier reading and navigation across devices• Minimizes resizing, scrolling and swiping screens

8

Using AWD or RWD with Sitecore

Developers can use AWD approach with Sitecore• Create logical devices for mobiles to be targeted• Create layouts and sublayouts for each mobile device

Developers can use RWD approach with Sitecore• Use a single device, layout and set of sublayouts• Use media queries to update CSS for each device

Consider using an AWD/RWD hybrid approach• Use a Responsive Web Design for base Sitecore site• Apply an Adaptive Web Design for some devices• Create Sitecore devices and layouts as needed

9

Understanding Latency of Mobiles

Round Trip Latency (RTL) / Round Trip Time (RTT)• The request/response time for the browser & server• Request time from the browser to the server• Response time back to the browser from the server• Does not include the time required for data transfer

• Latency increases with distance of client and server• Latency is separate from bandwidth (no data transfer)• Latency is critical when mobile connections are fast

10Browser

request

Web Server

response

Reducing Latency for Mobile Users

Addressing latency issues for mobile devices• Content Delivery Networks (CDN) reduce distances• Reducing components reduces # of HTTP requests• Parallelizing HTTP requests reduces load times• Avoid blocking synchronous HTTP requests• Use non-blocking asynchronous HTTP requests

11

resource resource resource

resource

resource

resource

Synchronous Requests Asynchronous Requests

Using Content Delivery Networks

A Content Delivery Network (CDN) helps mobiles• Distributed network of servers across the Internet• Speeds up load times by caching sites closer to users• Reduces RTL/RTT for users at remote locations

12

NO CDN CDN

Optimizing Server Response Time

Use Time To First Byte (TTFB) to find slow servers• TTFB can dominate web page latency• TTFB should be in the range of 100ms to 500ms• Resources loaded from off-site can cause delays• Remote JavaScript calls to Google, Facebook, etc. • Remote calls for infrequently changing libraries

• Try to reduce server response time to under 200ms• Eliminate external resource calls• Cache external resources locally on your server

13

Avoid Widgets on Mobile Devices

Use social links instead of social media widgets• Social button aggregators can add a lot to load time• ShareThis, AddThis, AddAny, etc.

• Reduce the delays from loading Google +1 button• Use scripts that support asynchronous script loading • Set the parsetag parameter to explicit instead of onload

14

Avoid Domain Sharding for Mobile

Domain Sharding is done to improve page loads• It opens extra simultaneous browser connections • Normally, only two connections are allowed at one time• Trick is useful for high-bandwidth connections

Domain Sharding can hurt mobile performance • Each additional network connection has overhead• Resulting latency is higher for mobile browsers• Connection setups consume extra CPU and memory

• Many mobile browsers implement HTTP pipelining• No longer observe the old HTTP/1.1 connection rules 15

Optimizing CSS for Mobile

Minimize and minify Cascading Stylesheets (CSS)• Remove unused CSS• Combine CSS into one file to reduce requests• Minify CSS files to remove unnecessary characters

Use Responsive Web Design (RWD) Guidelines• Format elements with relative units (em, not pixels)• Use media queries to update CSS for each device

Use a RWD/AWD hybrid design for iPhones• Define a separate Sitecore device and layout• Create and use a separate CSS stylesheet

16

Optimizing JavaScript for Mobile

Minimize and minify JavaScript scripts• Minimize the JavaScript used to render pages• Use the compressed jquery.min.js version of jquery.js

Defer loading of JavaScript until needed• Deferred loading reduces the initial download size• Allows other resources to be downloaded in parallel

Load scripts asynchronously and use lazyloading • Avoid loading render-blocking scripts above-the-fold• Load JavaScript for tracking/analytics asynchronously• Lazyloading scripts is even faster than async loading

17

Optimizing Downloads for Mobiles

Managing resources for unreliable connections• Avoid downloading resources that will not be used• Don’t download and then hide or ignore resources

• Avoid downloading more resources than you need• Download media that is already the required size• If necessary, shrink media on the server, not on client

18

Image image image image

Optimizing Media for Mobile

Optimize graphics and images for mobile devices• Minimize the graphics used to render pages• Reduce graphics that take a long time to download• Update Media Library with mobile media items• Add media that are correctly sized for mobile devices

• Keep media and other components under 25K• iPhone doesn’t cache components larger than 25K

Optimize video for mobile devices• Host videos on a Content Delivery Network platform• Use HTTP Adaptive Streaming (HTTP-AS) • Many users often do not watch the entire video

19

Testing Mobile Device Readiness

Document and analyze mobile performance• Analyze mobile performance separate from browsers• Use tools designed for analyzing mobile performance• Gomez mobile readiness test• mobiReady testing tool • W3C mobileOK Checker

Test performance on both smartphones & tablets• Test with the Wi-Fi turned off• Test from places with poor signal reception

20

Testing with Compuware Gomez

Application Performance Management (APM)• Monitoring software application performance • Managing availability of software applications

Compuware APM Mobile Readiness Test (Gomez)• Tests 30 mobile best practices with suggested fixes• Incorporates rules from Page Speed and YSlow • Requires registration with email to receive report• http://www.gomez.com/mobile-readiness-test/

21

Testing with Akamai Mobitest

Akamai Mobitest• Free mobile web performance measurement tool• Tests web site performance for mobile devices• Type the URL of the page to test• Select a mobile device from the device list• Select the number of test runs• Select the location from where to test• Click ‘Run Performance Test’ button

• Displays Mobitest Performance Results report• No registration required• Available at http://mobitest.akamai.com/

22

Testing with W3C mobileOK

W3C mobileOK Checker• Free web analysis tool for mobile devices• Tests mobile device compliance and issues• Displays Detailed Performance Results report• Failures per severity• Failures per category

• No registration required• Available at http://validator.w3.org/mobile/

23

Sitecore Mobile Device Simulator

Device simulators represent categories of devices• Each simulator represents multiple physical devices• Device simulators provide display approximations

Sitecore 6.6 introduced a device simulator• Displays how content appears on mobile devices• Uses screenshots to approximate device displays• iPhones, iPads, Android phones, Windows phones, etc.

• Sitecore removes features not supported by device• Silverlight is removed for Android phones• Flash and Silverlight are removed for iPhones 24

In Summary

• More critical to optimize for mobile than for desktop• Consider using an AWD/RWD hybrid approach• Compression is the most effective way to optimize• Reduce components to reduce # of HTTP requests• A Content Delivery Network (CDN) helps mobiles• Use Time To First Byte (TTFB) to find slow servers• Use social links instead of social media widgets• Use tools designed for analyzing mobile performance• Test performance on both smartphones & tablets• Test with the Wi-Fi turned off• Test from places with poor signal reception

25

Caveat Emptor

There are many ways to manage mobile performance• Sitecore developers can provide other solutions• Review your mobile needs with your Sitecore partner• Review proposed changes with all stakeholders• Implement new configurations on a test system first

This presentation is intended to be academic• To enhance public knowledge of mobile issues• To promote better understanding of mobile performance

Author cannot guarantee accuracy or fitness for your site• Author makes no representations or warranties• Author disclaims any liability if you act on this information

26

Acknowledgements

Google Images Image of Social Media Widgets

Wikipedia Commons Image of Content Delivery Network

Wikipedia Commons Image of iPhone

Download slide presentation to view URLs

27

More Topics from TIC

All Sitecore-related SlideShares from TIChttp://www.slideshare.net/cwnelson/presentations

How to Assure Success for a New Sitecore Site (full slide deck)http://www.slideshare.net/cwnelson/creating-new-sitecore-sites-full

How to Avoid Shooting Yourself in the SEOhttp://www.slideshare.net/cwnelson/sitecore-seo-tips

Implementing Routine Sitecore Maintenancehttp://www.slideshare.net/cwnelson/sitecore-maintenance-tips

Sitecore 7 – New Features for Usershttp://www.slideshare.net/cwnelson/sitecore-7-new-features

Sitecore Performance Tips for Visitor Engagementhttp://www.slideshare.net/cwnelson/sitecore-performance-tips

Troubleshooting Sitecore Performancehttp://www.slideshare.net/cwnelson/troubleshooting-sitecore-performance

28

The Inside Corner, Inc.

• The Inside Corner, Inc. (TIC) is owned by Craig Nelson• TIC is a Sitecore partner & web consultancy• A U.S. point of contact for teams of Sitecore specialists • We create new Sitecore sites & enhance existing ones

29

Primary Developer - Craig Nelson

• Sitecore Specialist certified for Sitecore 7• 10 years of system administration experience• 10 years as a Microsoft Certified Trainer• 5 years of ASP.NET web development experience• 4 years of Sitecore development experience• 3 years as a Sitecore technical instructor• Sitecore architecture & configuration expert• Performance & SEO optimization specialist• Workflow configuration specialist 30

Get Help with your Sitecore Site

Follow TIC on LinkedIn• http://www.linkedin.com/company/the-inside-corner-inc.

Add TIC to your Circles on Google Plus• http://google.com/+Theinsidecorner

Follow TIC on Twitter • https://twitter.com/TheInsideCorner

Contact Craig Directly• Craig Nelson - Certified 7.0 Developer and Sitecore Partner• cwnelson[at]ticdevs.com• Mobile - 707.319.7446

Visit the TIC website• http://ticdevs.com

31

Bibliography

19 Tools to Test your Site for Mobile Devices

Does Mobile Web Performance Optimization Still Matter?

Google Developers – Optimize for Mobile

Google Developers – Page Speed Insights

Sitecore ASP.NET CMS 6.6 Features: Device Simulation

The Responsive vs. Adaptive Argument Vis-a-Vis Sitecore

Why Domain Sharding is Bad News for Mobile Users

Download slide presentation to view URLs

32

Thank you for taking the time to view this presentation on

Performance Tips for Sitecore Mobile Users

Please share with others and add a comment if you think it is useful

Thanks!August 9, 2013

33