Speed: Web Peformance MattersDeepti Bhutani

Mobile Performance

How the Web Works

How the Web Works

HTML

CSS

Java

Scrip

tImages

DNS

SSLMobile

Web Performance Tools

Waterfall Analysis techniques Metrics

• First Byte• First Paint• On Load (TTI)• Page Complete

• Navigation Timing Model• http://www.w3.org/TR/navigation-timing/#processing-model

Web Performance Tool Box Profiling Tools

• WebPageTest • FireBug• Chrome Developer Tools• Yslow• Google PageSpeed

Performance Practices Checklist • http://webdevchecklist.com/

Web Performance Monitoring Synthetic Monitoring

• Keynote• Gomez• WebPageTest Local

Real User Monitoring• Akamai RUM• AppDynamics EUM

Synthetic Monitoring

• Is my site up?• How fast is my site?• Are transactions working?• If there is a slow down or failure where is it in the infrastructure?• Are my third party components operating correctly?

• How is my overall performance?

RUM

• What are users actually doing on the site-traffic flow?• What is the performance of the pages, and which

components are slowest?• Are SLA’s met ?• Did my latest release affect the user experience?• How does the user experience tie back to other areas of the

company such as support?

Synthetic vs Real User Monitoring

Features Synthetic Monitoring

Real User Monitoring

Test a new feature before deploying to prod Ensure application is up and running 24/7

Test the performance on a new market/geographyMonitor web third party APIs

Determine the impact of slowness or failure on real users Resolve support issues

Monitor Transactional Performance

API performance

Monitor all traffic /real users

Performance Optimizations• Fewer Requests• Smaller Requests

• Image compression • Reduce network Round trips• AJAX requests

• Caching• Leverage Browser Caching • CDN Caching (Akamai)

• Optimize Browser Processing• Optimize JavaScript• Analyze front end rendering • Optimize DOM

PNG24Size: 512 KBColors: 148,279

PNG24Size: 188 KBColors: 256

63% smaller

Image Optimizations

Smaller Images

PNG24100 x 100Size: 19 KBColors: 9,138

PNG8100 x 100Size: 8 KBColors: 256

55.8% smaller

90% Savings!!!

PNG24320 x 568Size: 100 KB

JPEG320 x 568Size: 10 KB

Image Formats

Mobile Performance Challenges

Books Web

Other Resources• Books

• High Performance Web Sites – Steve Souders – O’Reilly• Even Faster Web Sites – Steve Souders – O’Reilly

• Web• HTTP Archive (http://httparchive.org/)• Web Page Test (http://www.webpagetest.org/)