10 secs – keep user’s focus 1 secs – keep user flow of thought 0.1 secs – feels instantaneous
Why is there a 300ms delay?
Let's suppose the user touches a link in iOS Safari. Because the user has the ability to double tap to zoom or scroll, whenever the user touches the screen, the browser does not instantaneously know whether the user meant to click the link, or is double tapping. Therefore iOS Safari waits 300ms after the first tap to see if the user taps again.
When pages are rendered from the server, updates are easier to deploy. However, latency will make response slower.
Displaying Lists and Scrolls
Use Full Text Search
• Hooray! SqlLite supports Full Text Search
CREATE VIRTUAL TABLE papers USING fts3(subject,
SELECT * FROM mail WHERE body MATCH 'sqlite';
• Test Results with over 100k records - FTS is
61% faster than ‘like’
• Store data on local as cache
– Local Storage
– Local Database
• Use local storage for temporary storage.
• Use database for persistent storage.
Track Events and Error
• User activity and events are crucial to
• Tracking events is key to great application
• Several solutions available: Crashlytics,
Rollbar, Mixpanel, Google Analytics,
Minimize Browser Reflow
• Generated HTML offline
• Reduce depth of DOM
• Avoid unnecessary complex CSS selector
Other Rendering Tips
• Optimize images to avoid resizing
• Use SVG instead of Images
• Use image sprites
• Avoid Shadows and Gradients
• Consider using SPDY / HTTP2 Protocol
• Use Crosswalk