20
WebRTC Jacky Lopez Make The Web Fast, Google Building Faster Mobile Websites the nuts and bolts of hitting that 1000 millisecond "time to glass" target ...

Making the mobile website faster

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Making the mobile website faster

WebRTC Jacky Lopez Make The Web Fast, Google

Building Faster Mobile Websites the nuts and bolts of hitting that 1000 millisecond "time to glass" target ...

Page 2: Making the mobile website faster

What's the impact of slow sites? Lower conversions and engagement, higher bounce rates...

Page 3: Making the mobile website faster

Performance Related Changes and their User Impact

Web Search Delay Experiment

@Jacky_Lopez

• The cost of delay increases over time and persists • Delays under half a second impact business metrics • "Speed matters" is not just lip service

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%

Page 4: Making the mobile website faster

Performance Related Changes and their User Impact

Server Delays Experiment

• Strong negative impacts • Roughly linear changes with increasing delay • Time to Click changed by roughly double the delay

@Jacky_Lopez

Page 5: Making the mobile website faster

Yo ho ho and a few billion pages of RUM

How speed affects bounce rate

@Jacky_Lopez

Page 6: Making the mobile website faster

So, how are we doing today? Okay, I get it, speed matters... but, are we there yet?

Page 7: Making the mobile website faster

Usability Engineering 101

Delay User reaction

0 - 100 ms Instant

100 - 300 ms Feels sluggish

300 - 1000 ms Machine is working...

1 s+ Mental context switch

10 s+ I'll come back later...

Stay under 250 ms to feel "fast". Stay under 1000 ms to keep users attention.

@Jacky_Lopez

Page 8: Making the mobile website faster

How Fast Are Websites Around The World? - Google Analytics Blog

Desktop Median: ~2.7s Mean: ~6.9s Mobile * Median: ~4.8s Mean: ~10.2s * optimistic

@Jacky_Lopez

Page 9: Making the mobile website faster

HTTP Archive - Mobile Trends (Feb, 2013)

Content Type Avg # of Requests Avg size HTML 6 39 kB

Images 39 490 kB

Javascript 10 142 kB

CSS 3 27 kB

@Jacky_Lopez

Page 10: Making the mobile website faster

For many, mobile is the one and only internet device

Country Mobile-only users

Egypt 70%

India 59%

South Africa 57%

Indonesia 44%

United States 25%

onDevice Research @Jacky_Lopez

Page 11: Making the mobile website faster

The network will save us! 1000 ms is plenty of time.. 4G will fix everything! Right, right?

* Nope.

Page 12: Making the mobile website faster

Mobile, oh Mobile...

"Users of the Sprint 4G network can expect to experience average speeds of 3 Mbps to 6 Mbps download and up to 1.5 Mbps upload with an average latency of 150 ms. On the Sprint 3G network, users can expect to experience average speeds of 600 Kbps - 1.4 Mbps download and 350 Kbps - 500 Kbps upload with an average latency of 400 ms."

@Jacky_Lopez

3G 4G

Sprint 400 ms 150 ms

AT&T 150 - 400 ms 100 - 200 ms

Page 13: Making the mobile website faster

The (short) life of our 1000 ms budget

@Jacky_Lopez

250 ms RTT

250 ms RTT 250 ms RTT

Let's assume (an optimistic) 250 ms RTT...

Page 14: Making the mobile website faster

1. Unload the DOM 2. DNS resolution 3. TCP handshake 4. Send request, wait for response 5. Parse response 6. Request sub-resources (see step 1) 7. Execute scripts, apply CSS rules

This won't work...

x 60 (doh)

Page 15: Making the mobile website faster

If we can't get the entire page to paint in <1000 ms... Can we get the above the fold to content visible instead? Yes! Albeit with careful engineering... 1. Inline just the required resources for above the fold

o Both JavaScript and CSS 1. Defer the rest until later, after the above the fold is visible 1. ... 2. Profit

Make your mobile pages render in under one second

Page 16: Making the mobile website faster

PageSpeed to the rescue! all of this stuff can and should be automated!

* Nope.

Page 17: Making the mobile website faster

Why aren’t all web-sites fast?

EASE OF MAINTENANCE Simple development & deployment flow Ability to rapidly deploy changes to users Support all browsers Focus on content

Use automated tools!

SPEED Inlined / sprites / minified resources

Long cache lifetimes Exploit features in modern browsers

Track latest WPO techniques

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.

Page 18: Making the mobile website faster

mod_pagespeed === performance JIT

http://modpagespeed.com/

+

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

Page 19: Making the mobile website faster

Things you don't 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

Page 20: Making the mobile website faster

Contact us to learn more: (805) 467.6777 [email protected]