SlideShare a Scribd company logo

Performance Implications of Mobile Design

Choosing your mobile design paradigm is hard, and performance is an often overlooked parameter in this decision process. This presentation discusses the top performance concerns for the top mobile design paradigms - Dedicated Sites (mdot) and Responsive Web Design (RWD). Presented at Breaking Dev (bdconf) in April, 2012.

1 of 53
Download to read offline
Performance Implications of Mobile Design




Guy Podjarny
@guypod
guy@akamai.com
http://blaze.io/blog/
                                          Akamai Confidential
Good Morning!




                Faster ForwardTM   ©2012 Akamai
Agenda

• Performance Matters!
• Focus on top Mobile Design Paradigms
 • A bit on Dedicates Sites (mdot)
 • A lot on Responsive Web Design
• Review Performance each Paradigm
 • Dig into the top performance problem
 • Show what went wrong
 • Discuss how you can fix it
• Share tools that can help
 • And how to use them
• Summary
                               Faster ForwardTM   ©2012 Akamai
Who Am I #1: Ex-CTO of Blaze.io (now Akamai)




                           Faster ForwardTM    ©2012 Akamai
Who Am I #2: Blaze Mobitest

• Mobile Web Performance Measurement
 • Free Online Service: http://akamai.com/mobitest/
• Now Open-Source!
 • For more details: http://bit.ly/open-source-mobitest




                                   Faster ForwardTM       ©2012 Akamai
Who Am I #3: Mobile Performance Researcher

http://blaze.io/blog/




                          Faster ForwardTM   ©2012 Akamai
Ad

Recommended

Step by Step Mobile Optimization
Step by Step Mobile OptimizationStep by Step Mobile Optimization
Step by Step Mobile OptimizationGuy Podjarny
 
Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)Guy Podjarny
 
Velocity 2012: The 90-Minute Mobile Optimization Life Cycle
Velocity 2012: The 90-Minute Mobile Optimization Life CycleVelocity 2012: The 90-Minute Mobile Optimization Life Cycle
Velocity 2012: The 90-Minute Mobile Optimization Life CycleStrangeloop
 
Quantifying The Mobile Difference
Quantifying The Mobile DifferenceQuantifying The Mobile Difference
Quantifying The Mobile DifferenceGuy Podjarny
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebMorgan Cheng
 
Going Fast on the Mobile Web
Going Fast on the Mobile WebGoing Fast on the Mobile Web
Going Fast on the Mobile WebJason Grigsby
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebJames D Bloom
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebJames D Bloom
 

More Related Content

What's hot

Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesJames D Bloom
 
Imagesandvideo tallinn
Imagesandvideo tallinnImagesandvideo tallinn
Imagesandvideo tallinnDoug Sillars
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupDoug Sillars
 
Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slowDoug Sillars
 
Testing Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghDoug Sillars
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slowDoug Sillars
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoMaximiliano Firtman
 
Nantes when its just too slow
Nantes when its just too slowNantes when its just too slow
Nantes when its just too slowDoug Sillars
 
Optimizing WordPress Performance
Optimizing WordPress PerformanceOptimizing WordPress Performance
Optimizing WordPress PerformanceDouglas Yuen
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamaielenae00
 
Seatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case StudySeatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case StudyStephen Thair
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin HowlettFITC
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011Peter Moskovits
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devicesjameswillweb
 
Web前端性能分析工具导引
Web前端性能分析工具导引Web前端性能分析工具导引
Web前端性能分析工具导引冰 郭
 
FastView acceleration overview
FastView acceleration overviewFastView acceleration overview
FastView acceleration overviewYaron_Radware
 
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Katie Sylor-Miller
 

What's hot (20)

Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
Imagesandvideo tallinn
Imagesandvideo tallinnImagesandvideo tallinn
Imagesandvideo tallinn
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
 
Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow
 
Testing Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT Edinburgh
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
 
Faster web pages
Faster web pagesFaster web pages
Faster web pages
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
 
Nantes when its just too slow
Nantes when its just too slowNantes when its just too slow
Nantes when its just too slow
 
Optimizing WordPress Performance
Optimizing WordPress PerformanceOptimizing WordPress Performance
Optimizing WordPress Performance
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
 
Seatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case StudySeatwave Web Peformance Optimisation Case Study
Seatwave Web Peformance Optimisation Case Study
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 
Web前端性能分析工具导引
Web前端性能分析工具导引Web前端性能分析工具导引
Web前端性能分析工具导引
 
Mobius keynote
Mobius keynoteMobius keynote
Mobius keynote
 
FastView acceleration overview
FastView acceleration overviewFastView acceleration overview
FastView acceleration overview
 
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
 

Similar to Performance Implications of Mobile Design

Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your siteAkamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site零壹科技股份有限公司
 
Boston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and YouBoston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and Youmattringel
 
Etail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_FinalEtail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_FinalLiz Bradley
 
Akamai connector for varnish
Akamai connector for varnishAkamai connector for varnish
Akamai connector for varnishVarnish Software
 
Akamai internet insights
Akamai internet insightsAkamai internet insights
Akamai internet insightsJustin Dorfman
 
eTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom LeightoneTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom LeightonAkamai Technologies
 
TL;DR Web Performance Workshop
TL;DR Web Performance WorkshopTL;DR Web Performance Workshop
TL;DR Web Performance WorkshopGareth Hughes
 
Responsive In The Wild, 2014
Responsive In The Wild, 2014Responsive In The Wild, 2014
Responsive In The Wild, 2014Guy Podjarny
 
Responsive Web Demo with Akamai
Responsive Web Demo with AkamaiResponsive Web Demo with Akamai
Responsive Web Demo with AkamaiFran Albaladejo
 
Tom uk soti_final_without video.4.21.15
Tom uk soti_final_without video.4.21.15Tom uk soti_final_without video.4.21.15
Tom uk soti_final_without video.4.21.15Liz Bradley
 
AWS Webinar - Intro to Amazon Cloudfront 13-09-17
AWS Webinar -  Intro to Amazon Cloudfront 13-09-17AWS Webinar -  Intro to Amazon Cloudfront 13-09-17
AWS Webinar - Intro to Amazon Cloudfront 13-09-17Amazon Web Services
 
Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)Guy Podjarny
 
App-solute Testing: Making App Testing with Akamai Easy
App-solute Testing: Making App Testing with Akamai EasyApp-solute Testing: Making App Testing with Akamai Easy
App-solute Testing: Making App Testing with Akamai EasyAkamai Developers & Admins
 
DIY Website Performance - Akamai Toronto Tech Day 2015
DIY Website Performance - Akamai Toronto Tech Day 2015DIY Website Performance - Akamai Toronto Tech Day 2015
DIY Website Performance - Akamai Toronto Tech Day 2015Desmond Tam
 
Marrying CDNs with Front-End Optimization
Marrying CDNs with Front-End Optimization Marrying CDNs with Front-End Optimization
Marrying CDNs with Front-End Optimization Strangeloop
 
Akamai: From Theory to Practice
Akamai: From Theory to PracticeAkamai: From Theory to Practice
Akamai: From Theory to PracticeLiz Bradley
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamaielenae00
 

Similar to Performance Implications of Mobile Design (20)

Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your siteAkamai 如何幫您的客戶用網站賺錢 how to monetize your site
Akamai 如何幫您的客戶用網站賺錢 how to monetize your site
 
Boston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and YouBoston Web Performance Meetup: The Render Chain and You
Boston Web Performance Meetup: The Render Chain and You
 
Etail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_FinalEtail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_Final
 
Akamai connector for varnish
Akamai connector for varnishAkamai connector for varnish
Akamai connector for varnish
 
Akamai internet insights
Akamai internet insightsAkamai internet insights
Akamai internet insights
 
eTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom LeightoneTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom Leighton
 
TL;DR Web Performance Workshop
TL;DR Web Performance WorkshopTL;DR Web Performance Workshop
TL;DR Web Performance Workshop
 
Chicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWDChicago Tech Day Jan 2015: RWD
Chicago Tech Day Jan 2015: RWD
 
Assessing Your Own Site Configuration
Assessing Your Own Site ConfigurationAssessing Your Own Site Configuration
Assessing Your Own Site Configuration
 
Akamai partner training by Malcolm Rowe
Akamai partner training by Malcolm RoweAkamai partner training by Malcolm Rowe
Akamai partner training by Malcolm Rowe
 
Responsive In The Wild, 2014
Responsive In The Wild, 2014Responsive In The Wild, 2014
Responsive In The Wild, 2014
 
Responsive Web Demo with Akamai
Responsive Web Demo with AkamaiResponsive Web Demo with Akamai
Responsive Web Demo with Akamai
 
Tom uk soti_final_without video.4.21.15
Tom uk soti_final_without video.4.21.15Tom uk soti_final_without video.4.21.15
Tom uk soti_final_without video.4.21.15
 
AWS Webinar - Intro to Amazon Cloudfront 13-09-17
AWS Webinar -  Intro to Amazon Cloudfront 13-09-17AWS Webinar -  Intro to Amazon Cloudfront 13-09-17
AWS Webinar - Intro to Amazon Cloudfront 13-09-17
 
Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)Third Party Performance (Velocity, 2014)
Third Party Performance (Velocity, 2014)
 
App-solute Testing: Making App Testing with Akamai Easy
App-solute Testing: Making App Testing with Akamai EasyApp-solute Testing: Making App Testing with Akamai Easy
App-solute Testing: Making App Testing with Akamai Easy
 
DIY Website Performance - Akamai Toronto Tech Day 2015
DIY Website Performance - Akamai Toronto Tech Day 2015DIY Website Performance - Akamai Toronto Tech Day 2015
DIY Website Performance - Akamai Toronto Tech Day 2015
 
Marrying CDNs with Front-End Optimization
Marrying CDNs with Front-End Optimization Marrying CDNs with Front-End Optimization
Marrying CDNs with Front-End Optimization
 
Akamai: From Theory to Practice
Akamai: From Theory to PracticeAkamai: From Theory to Practice
Akamai: From Theory to Practice
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
 

More from Guy Podjarny

Serverless Security: What's Left To Protect
Serverless Security: What's Left To ProtectServerless Security: What's Left To Protect
Serverless Security: What's Left To ProtectGuy Podjarny
 
Securing Serverless - By Breaking In
Securing Serverless - By Breaking InSecuring Serverless - By Breaking In
Securing Serverless - By Breaking InGuy Podjarny
 
Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?Guy Podjarny
 
Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)Guy Podjarny
 
Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)Guy Podjarny
 
Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)Guy Podjarny
 
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)Guy Podjarny
 
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)Guy Podjarny
 
High Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean SlowHigh Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean SlowGuy Podjarny
 
Rules driven-delivery
Rules driven-deliveryRules driven-delivery
Rules driven-deliveryGuy Podjarny
 
Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)Guy Podjarny
 
Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)Guy Podjarny
 
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)Guy Podjarny
 
Third Party Performance
Third Party PerformanceThird Party Performance
Third Party PerformanceGuy Podjarny
 
A Picture Costs A Thousand Words
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand WordsGuy Podjarny
 
Unravelling Mobile Web Performance
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web PerformanceGuy Podjarny
 
State Of Mobile Web Performance
State Of Mobile Web PerformanceState Of Mobile Web Performance
State Of Mobile Web PerformanceGuy Podjarny
 

More from Guy Podjarny (17)

Serverless Security: What's Left To Protect
Serverless Security: What's Left To ProtectServerless Security: What's Left To Protect
Serverless Security: What's Left To Protect
 
Securing Serverless - By Breaking In
Securing Serverless - By Breaking InSecuring Serverless - By Breaking In
Securing Serverless - By Breaking In
 
Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?Serverless Security: What's Left to Protect?
Serverless Security: What's Left to Protect?
 
Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)Secure Node Code (workshop, O'Reilly Security)
Secure Node Code (workshop, O'Reilly Security)
 
Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)Stranger Danger (NodeSummit, 2016)
Stranger Danger (NodeSummit, 2016)
 
Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)Stranger Danger: Securing Third Party Components (Tech2020)
Stranger Danger: Securing Third Party Components (Tech2020)
 
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
High Performance Images: Beautiful Shouldn't Mean Slow (Velocity EU 2015)
 
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
 
High Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean SlowHigh Performance Images: Beautiful Shouldn't Mean Slow
High Performance Images: Beautiful Shouldn't Mean Slow
 
Rules driven-delivery
Rules driven-deliveryRules driven-delivery
Rules driven-delivery
 
Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)Responsive In The Wild (SmashingConf, 2014)
Responsive In The Wild (SmashingConf, 2014)
 
Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)
 
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
 
Third Party Performance
Third Party PerformanceThird Party Performance
Third Party Performance
 
A Picture Costs A Thousand Words
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand Words
 
Unravelling Mobile Web Performance
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web Performance
 
State Of Mobile Web Performance
State Of Mobile Web PerformanceState Of Mobile Web Performance
State Of Mobile Web Performance
 

Recently uploaded

Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17Ana-Maria Mihalceanu
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stackSummit
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanDatabarracks
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxInfosec
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Umar Saif
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...ISPMAIndia
 
Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build PolandGDSC PJATK
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Product School
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Product School
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotelPhilippines
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfSafe Software
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfkatalinjordans1
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...DianaGray10
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceSusan Ibach
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...htrindia
 

Recently uploaded (20)

Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stack
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response Plan
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptx
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
 
Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build Poland
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company Profile
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
Power of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdfPower of 2024 - WITforce Odyssey.pptx.pdf
Power of 2024 - WITforce Odyssey.pptx.pdf
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data science
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
 

Performance Implications of Mobile Design

  • 1. Performance Implications of Mobile Design Guy Podjarny @guypod guy@akamai.com http://blaze.io/blog/ Akamai Confidential
  • 2. Good Morning! Faster ForwardTM ©2012 Akamai
  • 3. Agenda • Performance Matters! • Focus on top Mobile Design Paradigms • A bit on Dedicates Sites (mdot) • A lot on Responsive Web Design • Review Performance each Paradigm • Dig into the top performance problem • Show what went wrong • Discuss how you can fix it • Share tools that can help • And how to use them • Summary Faster ForwardTM ©2012 Akamai
  • 4. Who Am I #1: Ex-CTO of Blaze.io (now Akamai) Faster ForwardTM ©2012 Akamai
  • 5. Who Am I #2: Blaze Mobitest • Mobile Web Performance Measurement • Free Online Service: http://akamai.com/mobitest/ • Now Open-Source! • For more details: http://bit.ly/open-source-mobitest Faster ForwardTM ©2012 Akamai
  • 6. Who Am I #3: Mobile Performance Researcher http://blaze.io/blog/ Faster ForwardTM ©2012 Akamai
  • 7. Some Terminology Faster ForwardTM ©2012 Akamai
  • 8. Dedicated Sites (mdot) URL/Website Per Device Profile m.walmart.com www.walmart.com Faster ForwardTM ©2012 Akamai
  • 9. Responsive Web Design One URL, Adapt to screen size http://mediaqueri.es/mq/ Faster ForwardTM ©2012 Akamai
  • 10. Mobile First & Desktop First included in RWD Mobile First (Progressive Enhancement) Desktop First (Graceful Degradation) Faster ForwardTM ©2012 Akamai
  • 11. Waterfall Charts Resource Doc Complete, Waterfall (Request/Response) (a.k.a. onload, Chart Start Render Load Time) Faster ForwardTM ©2012 Akamai
  • 12. Please don‟t hate me… • I use real world examples • Possibly written by you… • Constructive feedback != bashing • These are common mistakes • We should learn from them • I tried to spread the blame • Plenty of sites to choose from… • If you fix it, let me know! • I‟ll spread the word Faster ForwardTM ©2012 Akamai
  • 13. Performance Matters! Akamai Confidential
  • 14. Users Expect Fast Sites Source: Akamai Faster ForwardTM ©2012 Akamai
  • 15. Users Abandon Slow Sites Page Abandonment vs. Load Time Source: KISS Metrics Faster ForwardTM ©2012 Akamai
  • 16. Fast Sites Help Bottom Lines Shopzilla: 5 sec load time improvement Source: Shopzilla Faster ForwardTM ©2012 Akamai
  • 17. Mobile Users Expect Equal Speeds Source: Gomez Faster ForwardTM ©2012 Akamai
  • 18. Dedicated Sites (mdot) Akamai Confidential
  • 19. Mdot Dedicated Sites don‟t create new performance problems Still have old problems, but that‟s not related to mobile design Faster ForwardTM ©2012 Akamai
  • 20. Small Mobile Site, Small Waterfall Chart www.cnn.com , iPhone 4, iOS 5.0 Faster ForwardTM ©2012 Akamai
  • 21. Big Desktop/Tablet Site, Big Waterfall Chart www.cnn.com iPad 2 iOS 5 Faster ForwardTM ©2012 Akamai
  • 22. Dedicated Sites Top Performance Problem Redirects m. www. Faster ForwardTM ©2012 Akamai
  • 23. Redirects are expensive! www.espn.com 2 redirects, 1.3 seconds lost Faster ForwardTM ©2012 Akamai
  • 24. Late Redirect using scripts are even slower www.disney.com 2 redirects + JS Redirect, 3 seconds lost Faster ForwardTM ©2012 Akamai
  • 25. Could get nasty www.garmin.com 3 redirects + JS Redirect, 3.6 seconds lost Faster ForwardTM ©2012 Akamai
  • 26. Redirects – What To Do? • Minimize Redirects • Merge redirect chains • Use HTTP Redirects, not JS redirects • Keep the client-side detection as backup • Detect most devices server-side • Cache HTTP Redirects on the CDN • Makes the extra round trip shorter • Use HTTP 301 Redirect, with a future Expiry • 302/303/307 redirects are not cached by the browser • Good test page (by @souders): http://bit.ly/redirect-cache-test Faster ForwardTM ©2012 Akamai
  • 27. Responsive Web Design Akamai Confidential
  • 28. Responsive Web Design Responsive Web Design Top Performance Problem: Over-Downloading Faster ForwardTM ©2012 Akamai
  • 29. Test – Compare Sites on Different Resolutions • Data: • 347 Sites from http://mediaqueri.es/ • Testing Methodology: • Use http://webpagetest.org/ • Use Chrome browser • Resize window before each measurement •Resolutions: 320x480, 480x960, 1024x768, 1600x1200 • Saw similar results with iPhone vs. iPad tests • Collect Results • Excel & Pivot Tables (Automated version of Jason Grigsby‟s test last year) © Faster ForwardTM ©2012 Akamai
  • 30. Responsive Sites Load Times & Size, by Resolution Load Time* by Resolution (ms) 4,000 3,500 3,000 2,500 2,000 1,500 1,000 500 0 Page Size by Resolution (KB) 1,200 1,000 800 600 400 200 0 * Over Cable Speed (5 Mbps down, 1 Mbps up, 28ms RTT) Faster ForwardTM ©2012 Akamai
  • 31. Small Screen = Less Visible Content != Less Bytes 320x48 1600x120 0 0 Faster ForwardTM ©2012 Akamai
  • 32. Some depressing stats… Page Size 10 Got Lucky 320x480 A Bit Smaller (BG 11% Image, Fonts, vs …) 1600x1200 Much Smaller 3% Same Size 86% 1 Responsive Images A bit smaller = 50%-90% the size Much smaller = <50% the size Faster ForwardTM ©2012 Akamai
  • 33. Big Site, Big Waterfall 1600x120 0 Faster ForwardTM ©2012 Akamai
  • 34. Small Site, Big Waterfall 320x480 Faster ForwardTM ©2012 Akamai
  • 35. Download and Hide Rich Side-bar, holds ads and more Display set to none Faster ForwardTM ©2012 Akamai
  • 36. Hidden content is still downloaded Display set to none, resources are still downloaded! Faster ForwardTM ©2012 Akamai
  • 37. Download and Shrink Smaller Screen, Same Size Image Faster ForwardTM ©2012 Akamai
  • 38. Media queries don‟t prevent CSS downloads Separate CSS per media basic.css mobile.css 320x480 “Right” CSS loaded “Wrong” CSS loaded - May be used by JavaScript - Possibly delayed till just before onload desktop.css Faster ForwardTM ©2012 Akamai
  • 39. Excess DOM 1402 elements 1398 elements 3485 nodes 3491 nodes Simplicity not reflected in DOM 1600x1200 320x480 Faster ForwardTM ©2012 Akamai
  • 40. RWD Woes • Download and Hide • Download and Shrink • Extra CSS Download • Excess DOM Faster ForwardTM ©2012 Akamai
  • 41. What Can We Do About It?! Akamai Confidential
  • 42. Images accounts for most mobile pages size Stats from http://mobile.httparchive.com/ Faster ForwardTM ©2012 Akamai
  • 43. Responsive Images 128px, 240px, 6.8 KB 2.9 KB 320px, 10.6 KB 480px, 21.3 KB Site: lonelyplanet.com Device: iPhone 4 Before: Full Res, 50.1 KB 867 KB After: 570 KB Faster ForwardTM ©2012 Akamai
  • 44. Responding Up (or badly?) ipad_hero.jpg 113 KB Served to Desktop ipad_hero_2x.jpg 360 KB Served to New iPad Faster ForwardTM ©2012 Akamai
  • 45. Low Hanging Fruit: Responsive Images • Responsive Images = Serve lower res images to smaller screens • Optionally load full res image in the background • Lots of great resources on how to do it • Cloud Four blog - Education • Sencha.io Src – Helper Tool • Responsive images apply to CSS too! • Especially to background images • And stop with the huge images! Faster ForwardTM ©2012 Akamai
  • 46. Build Mobile First • Don‟t just design Mobile First – Code a Mobile-only site • Build only for the lowest resolution you care about • Adapt to similar screen sizes: No layout shifts, no big resolution jumps • Performance should compare to mdot sites • Once implemented – Enhance via JavaScript • Grow DOM only on screens that need it. • Desktop clients with no JS support are a minority • Your mobile site should be good enough for those • Don‟t sacrifice the performance of 99% for the remaining 1% Faster ForwardTM ©2012 Akamai
  • 47. Enhancing via JavaScript – Tips & Tricks 1600px • Split your files by layout/resolution 480 • Duplicating content on the server is ok 320 px px • Duplicating download is not • Use Inline JavaScript to decide the layout • Then use external (cacheable) files to apply it • Put scripts that change design at the top • JavaScript blocks rendering • Will avoid FOUC – Flash Of Unstyled Content • Put all other scripts at the bottom var css = „small.css‟; if (window.innerWidth > 640) css = „large.css‟; else if (window.innerWidth >= 320) css = „medium.css‟; document.write(„<link type=“stylesheet” rel=“stylesheet” href=“‟+css+‟”/>‟); Faster ForwardTM ©2012 Akamai
  • 48. Don‟t forget the “regular” concerns • Reduce HTTP requests • Consolidate Files • Inline tiny files • Reduce bytes • Minify CSS/JS • Use Lossless Compression for Images • Load visible content first • Defer everything else • Or Load it on demand • Avoid CSS Imports •… Faster ForwardTM ©2012 Akamai
  • 49. Measure! • Mobitest • Online service: http://akamai.com/mobitest/ • Install local open-source version (details) • Google‟s Pcapperf • Convert network capture to waterfall charts • http://pcapperf.appspot.com/ • Stoyan Stefanov‟s “icy” • HTTP insight into iOS HTTP requests • https://github.com/stoyan/icy • @firt‟s iWebInspector • Remote debugger for iOS simulator • http://www.iwebinspector.com/ 49 Faster ForwardTM ©2012 Akamai
  • 50. Testing different screen dimensions • Run webpagetest script with resizing • Use Chrome as agent (not supported on other browsers) • Sample script (tab delimited): setviewportsize 320 480 navigate http://bdconf.org/ • Many other scripting options:https://sites.google.com/a/webpagetest.org/docs/using- webpagetest/scripting • Figure out the viewport dimensions you want to simulate • http://www.websitedimensions.com/ Faster ForwardTM ©2012 Akamai
  • 51. Summary Akamai Confidential
  • 52. Summary • Choosing your mobile design is HARD • There are many factors to consider • Design Decision have Performance Implications • Mdot Primary Concern: Redirects • RWD Primary Concern: Over-Downloading • Either design paradigm can be made fast • Performance should be built in – not bolted on • Measure! • Make perf testing a part the core functionality test Faster ForwardTM ©2012 Akamai
  • 53. Questions? Performance Implications of Mobile Design Guy Podjarny @guypod guy@akamai.com http://blaze.io/blog/ Akamai Confidential