Measuring Web Performance (HighEdWeb FL Edition)
Upcoming SlideShare
Loading in...5
×
 

Measuring Web Performance (HighEdWeb FL Edition)

on

  • 2,224 views

Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good ...

Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.

In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.

This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”

This talk was given at HighEdWeb Florida.

Statistics

Views

Total Views
2,224
Views on SlideShare
2,183
Embed Views
41

Actions

Likes
6
Downloads
26
Comments
0

1 Embed 41

https://twitter.com 41

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Measuring Web Performance (HighEdWeb FL Edition) Measuring Web Performance (HighEdWeb FL Edition) Presentation Transcript

  • MeasuringWeb PerformanceDave Olsen, @dmolsenWest Virginia UniversityHighEdWeb Floridahttp://flic.kr/p/7A8xxN
  • slideshare.net/dmolsenwvu
  • introduction about me@dmolsen
  • The Mobile Book• Covers everything mobile• Produced by SmashingMedia• Chapters by Peter-PaulKoch, Stephanie Rieger,Brad Frost, Trent Walton,me & others• Door prize here!http://the-mobile-book.com
  • What I’ll Talk About• Quick Intro About Why WeShould Care About Web Perf• Tools for Measuring WebPerformance• Setting Up a Device Lab
  • WHY SHOULD WE CARE ABOUTWEB PERFORMANCE?http://flic.kr/p/4JY1Yr
  • brad’s iceberg© Brad Frost© Brad Frost
  • The way in which CSS mediaqueries have been promoted formobile hides tough problemsand gives developers a falsepromise of a simple solution fordesigning for small screens.Source: Jason Grigsby on Speakerdeck“”- Jason Grigsby@grigs
  • brad’s iceberg© Brad Frost© Brad Frost© Brad Frost
  • The average weight of a web page today.Source: HTTP ArchiveImages JavaScriptFlashHTMLCSSOther77%1.3 MB
  • RWD sites whosesmall screen designweighs the same as thelarge screen design.Source: Podjarny72%
  • Users expect yourmobile site to loadas quickly as yourdesktop site.71%Source: Gomez
  • Bounce RateConversionRate Cart Size PageViews200ms - - - -1.2%500ms -4.7% -1.9% - -5.7%1000ms -8.3% -3.5% -2.1% -9.4%CASE STUDY:MOBILE PERFORMANCE EFFECT ON BUSINESSSource: Web Performance Today
  • Mobile first meansperformance first.(start thinking about performance at the design stage)
  • Over DownloadingDownload & HideDownload & ShrinkDownload & IgnorePRIMARY PERFORMANCE ISSUES FOR RWDPoor NetworksHigh LatencyVariable BandwidthPacket Loss
  • MOBILE OPTIMIZATIONFOCUS1. Reduce requests2. Reduce asset size3. Speed-up pagerenderhttp://flic.kr/p/4zzKee
  • BrowsercacheThe simplest way to reduce requests is to make surethe browser doesn’t need to make them. Make sureassets are bring cached on the browser.ConcatenateJS & CSSCombine similar files together in one or multiple largerfiles to reduce requests. May harm performance too.Lazy loadcontentDon’t make requests until necessary. Filament Group’sAJAX Include Pattern or lazyBlock.data: URI For small images & fonts try embedding them in yourCSS file by using the data: URI.ConditionalloadingUse a resource loader like Modernizr.load toconditionally include JavaScript & CSS files.1. REDUCE REQUESTSFEPFEFEFE
  • Best request is no request.Worst request is one thatblocks the parser.Source: Ilya Grigorik“”- Ilya Grigorik@ilyagrigorik
  • ImagecompressionUse a service like kraken.io to optimize images.Also use CSS sprites as appropriate.CompressHTML & CSSUse mod_deflate to make sure text-based assets arecompressed for transfer.Try to avoidimagesWhen possible think about avoiding images.Implement with CSS or Canvas. Or use SVG orProgressive JPEGs.Minification Use a minifying service to make sure text-based assetsare as small as possible. If using PHP use Minify.MicroJS or,even better,Vanilla JSAvoid using bulky frameworks if you’re using them forsimple tasks like selectors. Try microjs.com to findlibraries that may be smaller & more suitable.JavaScript also blocks the rendering of the page.2. REDUCE ASSET SIZEPSSFEPFE
  • Avoid DOMreflows &repaintsBy using JS to modify the DOM you can causeunnecessary reflows & repaints of your browser. Theyslow down page render time as well as burn battery.Deferloading ofJavaScriptUse HTML5’s script defer & async attributes to delaydownloading files. Can also insert script elements intothe DOM using the onLoad event.Lazy loadJavaScriptComment out JavaScript that isn’t required at pageload. Uncomment & eval() when required.Touch beatsonClickWhile not directly related to page render, by makingsure your links use a Touch event rather than anonClick event user interactions will speed up by 300ms.Avoid SMwidgetsTry using simple links to services rather than utilizingthe JavaScript widgets. They’re performance hogs.3. SPEED-UP PAGE RENDERFEFEFEFEFE
  • Testing Toolstoolbox, toolsWEB PERFORMANCETOOLShttp://flic.kr/p/4BZsQJ
  • DiagnosticToolsAutomatedTools
  • DiagnosticToolsAutomatedTools
  • LEARN TO LOVE THE INSPECTOR
  • DEVTOOLS CAN DO THAT?http://bit.ly/15sWYsx
  • FOLLOW ALONG BY OPENING THEDEVELOPER TOOLS IN CHROME
  • SAVE YOURSELF A HEADACHE &DISABLE CACHE WHEN TESTING
  • EXPLAINING THE NETWORK PANEL:RESOURCE SIZEtransferred sizereal sizere-order
  • EXPLAINING THE NETWORK PANEL:LATENCYlatency + downloadlatencyre-order
  • EXPLAINING THE NETWORK PANEL:EVENTSdomcontentloadedonload
  • EXPLAINING THE NETWORK PANEL:SAVING HAR FILES FOR COMPARISONsave HAR file locally
  • A narrower, shorterwaterfall is the goal.
  • http://flic.kr/p/bMdzZ2Test the squishy.default styles vs. min-width vs. max-width
  • Performancehttp://timkadlec.com/2013/01/setting-a-performance-budget/http://flic.kr/p/7BBs6eA budget is a guide, not a hard & fast limit.Performance tweaks are compromises.
  • EXPLAINING THE TIMELINE PANEL
  • EXPLAINING THE PROFILES PANEL:CSS SELECTORS
  • EXPLAINING THE PROFILES PANEL:CSS SELECTORS
  • EXPLAINING THE AUDITS PANEL
  • PAGESPEED INSIGHTS EXTENSIONhttps://developers.google.com/speed/pagespeed/insights
  • REMOTE DEBUGGING
  • Google Analytics Site Speedhttp://www.httpwatch.comIE & FIREFOX PERFORMANCE ISSUES
  • Google Analytics Site SpeedGOOGLE ANALYTICS’ SITE SPEED
  • PERFORMANCE TESTING PROXIESMobitestWebPagetest
  • Google Analytics Site Speedhttp://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basicsWebPagetest - BEYOND THE BASICS
  • Google Analytics Site SpeedCUSTOMIZING WebPagetest:CAPTURING EVENTS AFTER ONLOAD
  • CUSTOMIZING WebPagetest:BLACKHOLES FOR REQUESTS
  • Google Analytics Site SpeedCUSTOMIZING WebPagetest:SCRIPTING & CUSTOM VIEWPORTS
  • CUSTOMIZING WebPageTest:VIDEO COMPARISON
  • CUSTOMIZING WebPageTest:VIDEO COMPARISON - SMALL VIEWPORT
  • mobile bookmarkletTHE ULTIMATE MOBILEPERFORMANCE BOOKMARKLET
  • charlesproxy.comSLOWING THINGS DOWNThrottleCharles
  • USING CHARLES PROXYhttp://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
  • TEST & OPTIMIZE JAVASCRIPT WITH JSPERFhttp://jsperf.com
  • W3C’s NAVIGATION TIMINGhttp://www.w3.org/TR/navigation-timing/http://www.html5rocks.com/en/tutorials/webperformance/basics/
  • DiagnosticToolsAutomatedTools
  • mod_pagespeed AUTOMATES A LOThttp://developers.google.com/speed/pagespeed/mod  add_head  combine_css   convert_jpeg_to_progressive   convert_meta_tags   extend_cache   flatten_css_imports   inline_css   inline_import_to_link   inline_javascript   rewrite_css   rewrite_images   rewrite_javascript   rewrite_style_attributes_with_urlDefault Filters
  • CodeKitCODEKIT: WEB PERF IN YOUR WORKFLOW  Optimize Images  Combine & MinifyFeatureshttp://incident57.com/codekit/
  • DEVICEShttp://flic.kr/p/cfkZhN
  • charlesproxy.comEMULATING MOBILE DEVICESEmulatorsBrowserStack
  • eBayMobileKarma.comCellphone store leftoversOpen device labsGET YOUR HANDS ONREAL DEVICEShttp://flic.kr/p/7972f6
  • OPENDEVICELAB.COM
  • Base on:WiFi-capable, AnalyticsRank, OS, ScreenDimensions, & CostSuggested focus:iPod Touch, mid-levelAndroid, high-end Android,a tablet, Blackberry,Windows Phone 7HOW TO DECIDE WHICH TO GETiPod Touch w/ RetinaSamsung Fascinate +Google Nexus One +$537Example:
  • ADOBE EDGE INSPECT(THE APP FORMERLY KNOWN AS ADOBE SHADOW)
  • RESS: AN EVOLUTION OFRESPONSIVE DESIGNhttp://slidesha.re/KtByzQ
  • WEB PERF TWEEPS TO FOLLOW@ilyagrigorik@andydavies@souders @patmeenan@stoyanstefanov@joshuabixby @yoavweiss@scottjehljust a sampling
  • Doug GapinskiStrategistmStoner@thedougcoSPECIAL THANKS TO...
  • QUESTIONS?
  • Dave OlsenProfessional TechnologistWest Virginia University@dmolsenTHANKS FOR LISTENING