Web Performance & You


Published on

A short talk on web performance given at Refresh Pittsburgh. Discusses how web performance fixes can be worked into a normal development workflow. Focuses on tweaks for responsive design sites.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Performance & You

  1. 1. Web Performance &YouDave Olsen, West Virginia UniversityRefresh Pittsburgh, June 4@dmolsen, dmolsen.com
  2. 2. slideshare.net/dmolsenwvuThis presentation is available at:
  3. 3. Dave OlsenProfessional TechnologistWest Virginia UniversityAbout Moi@dmolsen
  4. 4. The Mobile Book• Covers everything mobile• Produced by SmashingMedia• Chapters by Peter-PaulKoch, Stephanie Rieger,Brad Frost, Trent Walton,me & othershttp://the-mobile-book.com
  5. 5. Why ShouldYou CareAbout Web Performance?Part Une:
  6. 6. brad’s iceberg© Brad Frost© Brad Frost
  7. 7. brad’s iceberg© Brad Frost© Brad Frost© Brad Frost
  8. 8. 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
  9. 9. RWD could also meanresponsible web design.
  10. 10. Over DownloadingDownload & HideDownload & ShrinkDownload & IgnorePRIMARY PERFORMANCE ISSUES FOR RWDPoor NetworksHigh LatencyVariable BandwidthPacket Loss
  11. 11. Adding Web Performanceto Your WorkflowPart Deux:
  12. 12. Introducing the TeamBecause performance is a team effort.
  13. 13. Introducing the Team“Dave”full stack dev“Adam”front-end devAny resemblance to real persons, living or dead, is purely coincidental. Serious.
  14. 14. The New Project Should...1. Look cool2.Have pizzazz3.Use brand colors...99. Be fast98. Look good on an iPhoneFirst Steps
  15. 15. Mobile first meansperformance first.First Steps
  16. 16. Set a Performance BudgetFirst StepsA budget is a guide, not a hard & fast limit.Performance tweaks are compromises.http://timkadlec.com/2013/01/setting-a-performance-budget/
  17. 17. First StepsBest request is no request.Worst request is one thatblocks the parser.Source: Ilya Grigorik- Ilya Grigorik@ilyagrigorik“”
  18. 18. First StepsCorollary: The next best requestis the one not parsed.Source: My brain- Me@dmolsen“”
  19. 19. Web Performance AssumptionsFaster is better. Smaller is better.First Steps
  20. 20. Web Perf Optimization TenetsReduce requests. Reduce asset size.Reduce page render time.First Steps
  21. 21. First StepsLearn to Love the Inspectorhttp://bit.ly/15sWYsx
  22. 22. First StepsSave Yourself a Headache &Disable Your Cache When Testing
  23. 23. Design & PerformanceThings to Keep in Mind...Images are the devil. Consider usingCSS, sprites, symbol fonts, & SVG.display: none; is the devil.Lots of things are the devil. Justunderstand the trade-offs when usingsocial widgets, web fonts & CSS.The “devil” talk is tongue-in-cheek. Serious.
  24. 24. Design & PerformanceExplaining the Network Panel:Resource Sizetransferred sizereal sizere-order
  25. 25. Design & Performancelatency + downloadlatencyre-orderExplaining the Network Panel:Latency
  26. 26. Design & PerformancedomcontentloadedonloadExplaining the Network Panel:Events
  27. 27. Design & PerformanceYour goal when using the NetworkPanel is to shorten & compressthe waterfall.Remember, test the squishy too.
  28. 28. Design & Performancesave HAR file locallyExplaining the Network Panel:Saving Files for Comparison
  29. 29. Design & PerformanceExplaining the Profiles Panel:CSS Selectors
  30. 30. Design & PerformanceExplaining the Profiles Panel:CSS Selectors
  31. 31. Responsive ImagesMost solutions are silly & verbose.Focus on properly formattingimages. Lazy load them & don’tworry about “high DPI.”
  32. 32. Programming & PerformanceThings to Keep in Mind...JavaScript libraries are devils. Considerusing microjs.com or vanilla JS.Defer loading of JavaScript. UseonTouch events when appropriate.Reflow & repaints are the devil.The “devil” talk is tongue-in-cheek. Serious.
  33. 33. Programming & PerformanceExplaining the Timeline Panel
  34. 34. PageSpeed Insights Extensionhttps://developers.google.com/speed/pagespeed/insightsTesting
  35. 35. TestingWebPagetesthttp://www.webpagetest.org
  36. 36. TestingBrowserStackhttp://browserstack.com
  37. 37. DeploymentFinally getting to “traditional”performance techniques...Performance can’t simply betacked onto the end of a project.
  38. 38. Concatenate files within reason.Minify files as appropriate.Make sure the server supports filecompression & cache headers.DeploymentThings to Keep in Mind...
  39. 39. mod_pagespeed Automates a Lothttp://developers.google.com/speed/pagespeed/modDeployment
  40. 40. Google Analytics’ Site SpeedMonitoring
  41. 41. WEB PERF TWEEPS TO FOLLOW@ilyagrigorik@andydavies@souders @patmeenan@stoyanstefanov@tameverts @yoavweiss@scottjehljust a sampling...
  42. 42. Questions?
  43. 43. Dave OlsenProfessional TechnologistWest Virginia University@dmolsenThanks for ListeningIllustrations by Graham Curry