Sitecore Mobile Performance Tips


Published on

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Sitecore Mobile Performance Tips

  1. 1. Performance Tips for Sitecore Mobile Users Tips to Improve Sitecore Mobile Performance August 9, 2013 1
  2. 2. Please review before viewing this presentation 2
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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 request Web Server Browser 10 response
  11. 11. 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 Synchronous Requests Asynchronous Requests resource resource resource resource resource resource
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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 • 21
  22. 22. 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 22
  23. 23. 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 23
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. More Topics from TIC All Sitecore-related SlideShares from TIC How to Assure Success for a New Sitecore Site (full slide deck) How to Avoid Shooting Yourself in the SEO Implementing Routine Sitecore Maintenance Sitecore 7 – New Features for Users Sitecore Performance Tips for Visitor Engagement Troubleshooting Sitecore Performance 28
  29. 29. 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
  30. 30. 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
  31. 31. Get Help with your Sitecore Site Follow TIC on LinkedIn • Add TIC to your Circles on Google Plus • Follow TIC on Twitter • Contact Craig Directly • Craig Nelson - Certified 7.0 Developer and Sitecore Partner • cwnelson[at] • Mobile - 707.319.7446 Visit the TIC website • 31
  32. 32. 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
  33. 33. 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