Your SlideShare is downloading. ×

Sitecore Mobile Performance Tips

1,238
views

Published on

Published in: Technology, Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,238
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Performance Tips for Sitecore Mobile Users Tips to Improve Sitecore Mobile Performance August 9, 2013 1
  • 2. Please review before viewing this presentation http://www.slideshare.net/cwnelson/sitecore-performance-tips 2
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  • 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 http://mobitest.akamai.com/ 22
  • 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 http://validator.w3.org/mobile/ 23
  • 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. 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. 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. 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. More Topics from TIC All Sitecore-related SlideShares from TIC http://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 SEO http://www.slideshare.net/cwnelson/sitecore-seo-tips Implementing Routine Sitecore Maintenance http://www.slideshare.net/cwnelson/sitecore-maintenance-tips Sitecore 7 – New Features for Users http://www.slideshare.net/cwnelson/sitecore-7-new-features Sitecore Performance Tips for Visitor Engagement http://www.slideshare.net/cwnelson/sitecore-performance-tips Troubleshooting Sitecore Performance http://www.slideshare.net/cwnelson/troubleshooting-sitecore-performance 28
  • 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. 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. 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
  • 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. 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