Building Faster Mobile Websitesthe nuts and bolts of hitting that 1000 millisecond "time to glass" target ...WebRTCJacky L...
Whats the impact of slow sites?Lower conversions and engagement, higher bounce rates...
Web Search Delay Experiment                                           Type of Delay     Delay (ms)          Duration (week...
Server Delays Experiment•   Strong negative impacts•   Roughly linear changes with increasing delay•   Time to Click chang...
How speed affects bounce rate   Yo ho ho and a few billion pages of RUM   @Jacky_Lopez
So, how are we doing today?Okay, I get it, speed matters... but, are we there yet?
Usability Engineering 101Delay           User reaction                                          Stay under 250 ms0 - 100 m...
Desktop                                                                                 Median: ~2.7s                     ...
Content Type                  Avg # of Requests   Avg size             HTML                          6                   3...
For many, mobile is the one andonly internet device       Country         Mobile-only users       Egypt                  7...
The network will save us!1000 ms is plenty of time.. 4G will fix everything! Right, right? * Nope.
Mobile, oh Mobile..."Users of the Sprint 4G network can expect to experience average speeds of 3 Mbps to 6Mbps download an...
The (short) life of our 1000 ms budget                            250 ms RTT                                           250...
1.   Unload the DOM2.   DNS resolution3.   TCP handshake4.   Send request, wait for response      x 60                    ...
If we cant get the entire page to paint in <1000 ms... Can we get theabove the fold to content visible instead? Yes! Albei...
PageSpeed to the rescue!all of this stuff can and should be automated! * Nope.
Why aren’t all web-sites fast?                                  SPEED                 EASE OF MAINTENANCE   Inlined / spri...
mod_pagespeed === performance JIT                                                           +                             ...
Things you dont need to do... *•   Change your content generation workflow•   Change your CSS / JS / HTML or other markup•...
Contact us to learn more:(805) 467.6777j@jackylopez.com
Upcoming SlideShare
Loading in …5
×

Making the mobile website faster

438 views

Published on

About Jacky Lopez Web Development Consulting

Jacky Lopez Consulting is a custom software development firm dedicated to creating intelligent and scalable technology solutions with successful business results., winner of the Microsoft Office XP Challenge, and has open source (iOS-Android-HTML5) competencies in Custom Development, Mobility and Data Management Solutions.

Strategy and Design Services for Cloud Infrastructure
Web Design Development (UI)
Responsive Web Design (RWD)
Custom Software Programming
Ecommerce Solutions
Website Upgrade, Integration
Mobile App (HTML5) Development
Search Engine Optimization

Website: http://jackylopez.com/

We encountered a number of challenges during the initial set-up of our offshore operations: communication issues, lack of visibility, employee quality and retention and Intellectual Property protection. We tackled each issue by establishing and refining processes that enabled us to work effectively with our offshore team. Using our offshore office, we were able to meet our aggressive development goals in a consistent, repeatable way but with a dramatically reduced cost structure.

Experience working with BEA/Oracle WebLogic, Netsuite implementations and integration solutions, SAP, DotNetNuke, Drupal, Jetspeed, Joomla!, Wordpress, Liferay, Amazon Cloud setup & management (EC2, S3, EBS), Oracle, MySQL, and PostGres Database tuning, clustering, and high performance DB optimizations.

Mobile Development on iPhone, Blackberry, Android, Symbian, Windows Mobile, and BREW based smartphones.

Specialties
Software, Search Conversion Optimizationg, Mobile Application Software, Data Collection Software Development, Amazon Web Server, Strategic Technology Consulting, Social Media Integration, Ecommerce and Online Payments

Website
http://jackylopez.com/
Industry
Information Technology and Services

Type
Privately Held - Santa Barbara, California

Company Size
1-10 employees

Founded
2006

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
438
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Making the mobile website faster

  1. 1. Building Faster Mobile Websitesthe nuts and bolts of hitting that 1000 millisecond "time to glass" target ...WebRTCJacky LopezMake The Web Fast, Google
  2. 2. Whats the impact of slow sites?Lower conversions and engagement, higher bounce rates...
  3. 3. Web Search Delay Experiment Type of Delay Delay (ms) Duration (weeks) Impact on Avg. Daily Searches Pre-header 50 4 Not measurable Pre-header 100 4 -0.20% Post-header 200 6 -0.59% Post-header 400 6 -0.59% Post-ads 200 4 -0.30% • The cost of delay increases over time and persists • Delays under half a second impact business metrics • "Speed matters" is not just lip servicePerformance Related Changes and their User Impact @Jacky_Lopez
  4. 4. Server Delays Experiment• Strong negative impacts• Roughly linear changes with increasing delay• Time to Click changed by roughly double the delayPerformance Related Changes and their User Impact @Jacky_Lopez
  5. 5. How speed affects bounce rate Yo ho ho and a few billion pages of RUM @Jacky_Lopez
  6. 6. So, how are we doing today?Okay, I get it, speed matters... but, are we there yet?
  7. 7. Usability Engineering 101Delay User reaction Stay under 250 ms0 - 100 ms Instant to feel "fast".100 - 300 ms Feels sluggish300 - 1000 ms Machine is working... Stay under 10001 s+ Mental context switch ms to keep users attention.10 s+ Ill come back later... @Jacky_Lopez
  8. 8. Desktop Median: ~2.7s Mean: ~6.9s Mobile * Median: ~4.8s Mean: ~10.2s * optimisticHow Fast Are Websites Around The World? - Google Analytics Blog @Jacky_Lopez
  9. 9. Content Type Avg # of Requests Avg size HTML 6 39 kB Images 39 490 kB Javascript 10 142 kB CSS 3 27 kBHTTP Archive - Mobile Trends (Feb, 2013) @Jacky_Lopez
  10. 10. For many, mobile is the one andonly internet device Country Mobile-only users Egypt 70% India 59% South Africa 57% Indonesia 44% United States 25%onDevice Research @Jacky_Lopez
  11. 11. The network will save us!1000 ms is plenty of time.. 4G will fix everything! Right, right? * Nope.
  12. 12. Mobile, oh Mobile..."Users of the Sprint 4G network can expect to experience average speeds of 3 Mbps to 6Mbps download and up to 1.5 Mbps upload with an average latency of 150 ms. On the Sprint3G network, users can expect to experience average speeds of 600 Kbps - 1.4 Mbps downloadand 350 Kbps - 500 Kbps upload with an average latency of 400 ms." 3G 4GSprint 400 ms 150 msAT&T 150 - 400 ms 100 - 200 ms @Jacky_Lopez
  13. 13. The (short) life of our 1000 ms budget 250 ms RTT 250 ms RTT 250 ms RTT @Jacky_Lopez Lets assume (an optimistic) 250 ms RTT...
  14. 14. 1. Unload the DOM2. DNS resolution3. TCP handshake4. Send request, wait for response x 60 (doh)5. Parse response6. Request sub-resources (see step 1)7. Execute scripts, apply CSS rulesThis wont work...
  15. 15. If we cant get the entire page to paint in <1000 ms... Can we get theabove the fold to content visible instead? Yes! Albeit with carefulengineering...1. Inline just the required resources for above the fold o Both JavaScript and CSS1. Defer the rest until later, after the above the fold is visible1. ...2. ProfitMake your mobile pages render in under one second
  16. 16. PageSpeed to the rescue!all of this stuff can and should be automated! * Nope.
  17. 17. Why aren’t all web-sites fast? SPEED EASE OF MAINTENANCE Inlined / sprites / minified resources Simple development & deployment flow Long cache lifetimes Ability to rapidly deploy changes to users Exploit features in modern browsers Support all browsers Track latest WPO techniques Focus on content Use automated tools! If it can be automated, it should be. Performance optimization is no different. By removing the burden from the team, you also enable a wider range of dynamic optimization.
  18. 18. mod_pagespeed === performance JIT + mod_pagespeed is an open-source Apache module, developed and maintained by Google, which automatically rewrites and optimizes your web-pages and associated assets on the page. • 40+ optimization filters • highly configurable • single server and cluster friendly • CDN and cache friendly http://modpagespeed.com/
  19. 19. Things you dont need to do... *• Change your content generation workflow• Change your CSS / JS / HTML or other markup• Run manual compression or add build steps• ...* when using mod_pagespeed
  20. 20. Contact us to learn more:(805) 467.6777j@jackylopez.com

×