Let s Take the Mobile Out of Web Development

Transcription

1 Let s Take the Mobile Out of Web Development Douglass Sillars, PhD Performance/Optimization Lead Developer Advocacy

2 Web Browsing on Mobile History/Context Web on Mobile Criteria/Performance Approaches Successes/Failures Summary

3 Who Uses Mobile? HEALTH More People Have Cell Phones Than Toilets, U.N. Study Shows Out of the world s estimated 7 billion people, 6 billion have access to mobile phones. Only 4.5 billion have access to working toilets. By Yue Wang March 25, 24 Comments

4 Who Uses Mobile Data? 60 Mobile % of Total Internet Traffic by Country 2013* Data Source: Statcounter *May 2013 Benchmark

5 Mobile Data Visualized In 2012, mobile data usage was 12x higher than ALL Internet usage in

6 Mobile Data Visualized If you count mobile data offloaded to Wi-Fi, it is closer to 18x larger! ttp:// ttp://timesofindia.indiatimes.com/tech/tech-news/internet/over-50-of-internet-users-are-mobile-only-report/articleshow/ cms?

7 The Future 2017: 21 Exabytes of Mobile Data (46% Wi-Fi offload)

8 The Web 2000

9 The Web

10 Building the Web 2005 Throughput Memory Processing Power Screen Size We needed mobile specific websites

11 Building the Web Desktop Device check Mobile m.mysite.com

12 The Web 2013

13 Building the Web 2013 Throughput Memory Processing Power Screen size Don t forget many customers ARE on slower connections, and account for those as well

14 Building the Web t.mysite.com? Desktop Device check Mobile car.mysite.com? toaster.mysite.com? m.mysite.com Is this still the way?

15 Web is Moving Towards Mobile There is no more Mobile Web It is all just The Web on different screens

16 So What s a Developer To Do?

17 Web Browsing on Mobile History/Context Web on Mobile HTTP Archive Criteria/Performance Approaches Successes/Failures Summary

18 Survey of Current Web HTTP Archive: bi-monthly study of the web Mobile HTTP Archive (alpha) Crawl of top X,000 Alexa websites Trends Performance Stats Open Source Runs on top of Webpagetest.org Created by Steve Google Chair/founder Velocity Conference High Performance Websites

19 Survey of Current Web HTTP Archive & BigQuery Ilya Grigorik: High Performance Browser Networking O Reilly, 2013 Imported HTTP Archive into Google BigQuery Online SQL searches of data

20 Survey of Current Web HTTP Archive & Mobile HTTP Archive Data from 11/01/2013: Web is IE9 default connection Mobile web is iphone 4s on an emulated 3G network ~4700 URLs are found on both web and mobile web

21 Survey of Current Web Use HTTP archive data to: Categorize websites on mobile Quantity Performance What is the best? What should YOU use? Is this possible to determine?

22 Customer Expectations DATA: Add 160KB to a page: Bounce rate +12% on mobile SPEED: 40% exit a site if >3s load time 64% expect a site to load in <4s 4% of mobile users admit to throwing their phones out of frustration from slow sites!

23 Customer Expectations What is the best way to keep customers engaged with your site? Page Size (KB) Speed Index

24 Speed Index Math Speed Index (Top) = 1200 Speed Index (Bottom) = 9000

25 Survey of the Web Size 33% of mobile websites >1MB Median 516 KB 50 sites > 5MB!?! Speed Median 8.5s 93% >3s 37% over 10s 25% KB usage of mobile websites 40% mobile_speedindex 20% 35% 30% 15% 25% 20% 10% 15% 5% 0% KB You want to be here! 10% 5% 0% >10 Seconds

26 Survey of the Web This is from the Moto G dataset Size 27% of mobile websites >1MB Median 565 KB 7 sites > 5MB!?! Top 1,000 mobile website (KB) Speed Median 7.9s 94% >3s 35% over 10s SpeedIndex Counts (top 1,000 mobile sites) 0 You want to be here!

27 Web Browsing on Mobile History/Context Web on Mobile Criteria/Performance Approaches Successes/Failures Summary

28 Survey of Mobile Web - Redirection Updated to Moto G data www. redirect to m. or.mobi sites 260/993 (26.1%) Page Size is smaller (Median 538KB from 565KB) Speed Median slower: 9.2s from 7.9s 0 sites load under 3s 30.00% 25.00% 20.00% 15.00% 10.00% all mobile redirect All mobile redirect 5.00% 0.00%

29 Redirecting to Mobile Specific 40% Despite lower payload 35% redirect all Mobile Not Faster: #1 Rule of Web Performance: 30% 25% 20% Reduce # of connections 15% 301/302 redirects add ms latency 10% 5% 0% >10

30 If One Redirect is Bad Request xyz.com Redirects to Redirects to xyz.mobi Redirects to Three is Worse!

31 Redirection Pros Smaller pages Cons 2 code bases Tablets/other platforms? Redirection time cancels data improvement Sharing between devices? SEO Only 1 in 100 completes a purchase

32

33 Mobile Friendly Design Paradigms Progressive Degradation Mobile First/Progressive Enhancement Responsive Web Design RESS

34 Progressive Degradation Build your Website as normal, and pull/resize content for smaller screens Use Server Side analysis (WURFL) rather than redirects All content here! Smaller screen shrink images Animations Flash? Change ads? Even Smaller Minimize even more Remove content?

35 Progressive Degradation WURFL PHP based server side tool that sniffs device details and features Can determine what content to serve Screen size can help resize images (reduce KB load) require_once 'wurfl_config.php'; require_once WURFL_CLASS_FILE; $ua = strtolower($_server['http_user_agent']); $wurflobj = new wurfl_class(); $wurflobj-> GetDeviceCapabilitiesFromAgent($ua); $width = $wurflobj-> capabilities['display']['resolution_width']; *Be careful on assigning width: Portrait vs. Landscape

36 Mobile First/Progressive Enhancement Start Small and add features as the screen gets bigger Focus on what is important to all users All content here! All content here! Add bigger images/videos All content here! Add bigger images/videos Kick butt with processor intensive animations Mobile First coined by Luke

37 Enhancement/Degradation Variations on a theme Pros Device detection on server allows proper content to each type of device One URL to rule them all! Lower latency! Cons All content must have multiple templates Content loss for smaller screens

38 Responsive Web Design (RWD) One URL One Codebase Future Friendly Simple: Smaller screen fewer columns!

39 SEO and Mobile Sites

40 Responsive Web Design (RWD) This will Solve EVERYTHING!!!

41 Responsive Web Design (RWD) This will Solve EVERYTHING!!! big step, not Quite there Same # of requests Huge images (for mobile) Average Website >1.2MB Pushing all rendering to browser

42 Page Weight Mobile vs. Desktop How Many Websites are the same size (+-5%) Mobile vs. Web? 927/4715 (20%) 25% 40% same size all mobile mobile/web same Not size upated.. All mobile Prooably KB 35% not helpful 20% 30% 15% 10% 5% 0% 25% 20% 15% 10% 5% 0% >10 These sites tend to be larger (median 704 KB vs. 504KB) No real speed difference

43 Same (Size) Website for All! Pros Simple If not RWD: no work! Preferred by Google for SEO Cons Larger KB size Potentially not mobile friendly Potentially slower

44 The Silver Bullet

45 RESS REsponsive design with Server Side elements One URL One Codebase Responsive design (as recommended by GOOG) Server optimizes HTML/CSS/JS/Images for each device Improve performance Reduce page weight Combines the best of all techniques into one

46 New Solutions to RWD Page Size New Solutions are being built every day: Uses Modernizr and JS to read HTML comments as a DOM node: <div data-responsive-comment-media="(minwidth: 500px)"> <!-- <div class="box second">500px</div> --> <div class="box second">500px</div> </div>

47 Used with Permission

48 Best Performance Design for Web KISS Smaller requests Compression avg KB Web Not updated Avg KB Mobile gzip none gzip none gzip none gzip none gzip none gzip none css css html html json json plain plain script script xml xml

49 Number of requests (Avg.) Best Design for Performance Total JavaScript CSS Images Not updated >20 Speed Index (s)

50 Best Performance Design for Web KISS Fewer requests Paint the Screen with content (not just headers!)

51 Download Less Stuff: Combine Files Minimize # of Downloads and Connections Rule #1 for Faster Websites: Make Fewer HTTP Requests Mobile Web: 5% > 10 CSS requests 45% > 10 JS requests 27% > 50 images Inline and Combine CSS and JS when Possible Consider Spriting images HTTP Archive: Personal results 09/2013 data

52 Tools

53

54 Web Design Principles for Devices Redirect to mobile specific site Progressive Degradation Mobile First/Progressive Enhancement Responsive Web Design RESS When possible: Keep design simple, paint screen quickly

55 Web Design We ve made the internet in our image Obese ~ Jason Grigsby If your website is 15MB, it s not HTML5, it s stupid ~ Christian Heilmann

56 What Not To Do tabcloseddidntread.com wtfmobileweb.com What To Do (*Language*)

57 Thank You Doug