sitecore mobile performance tips
TRANSCRIPT
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