Web Performance &YouDave Olsen, West Virginia UniversityRefresh Pittsburgh, June 4@dmolsen, dmolsen.com
slideshare.net/dmolsenwvuThis presentation is available at:
Dave OlsenProfessional TechnologistWest Virginia UniversityAbout Moi@dmolsen
The Mobile Book• Covers everything mobile• Produced by SmashingMedia• Chapters by Peter-PaulKoch, Stephanie Rieger,Brad Fr...
Why ShouldYou CareAbout Web Performance?Part Une:
brad’s iceberg© Brad Frost© Brad Frost
brad’s iceberg© Brad Frost© Brad Frost© Brad Frost
The way in which CSS mediaqueries have been promoted formobile hides tough problemsand gives developers a falsepromise of ...
RWD could also meanresponsible web design.
Over DownloadingDownload & HideDownload & ShrinkDownload & IgnorePRIMARY PERFORMANCE ISSUES FOR RWDPoor NetworksHigh Laten...
Adding Web Performanceto Your WorkflowPart Deux:
Introducing the TeamBecause performance is a team effort.
Introducing the Team“Dave”full stack dev“Adam”front-end devAny resemblance to real persons, living or dead, is purely coin...
The New Project Should...1. Look cool2.Have pizzazz3.Use brand colors...99. Be fast98. Look good on an iPhoneFirst Steps
Mobile first meansperformance first.First Steps
Set a Performance BudgetFirst StepsA budget is a guide, not a hard & fast limit.Performance tweaks are compromises.http://...
First StepsBest request is no request.Worst request is one thatblocks the parser.Source: Ilya Grigorik- Ilya Grigorik@ilya...
First StepsCorollary: The next best requestis the one not parsed.Source: My brain- Me@dmolsen“”
Web Performance AssumptionsFaster is better. Smaller is better.First Steps
Web Perf Optimization TenetsReduce requests. Reduce asset size.Reduce page render time.First Steps
First StepsLearn to Love the Inspectorhttp://bit.ly/15sWYsx
First StepsSave Yourself a Headache &Disable Your Cache When Testing
Design & PerformanceThings to Keep in Mind...Images are the devil. Consider usingCSS, sprites, symbol fonts, & SVG.display...
Design & PerformanceExplaining the Network Panel:Resource Sizetransferred sizereal sizere-order
Design & Performancelatency + downloadlatencyre-orderExplaining the Network Panel:Latency
Design & PerformancedomcontentloadedonloadExplaining the Network Panel:Events
Design & PerformanceYour goal when using the NetworkPanel is to shorten & compressthe waterfall.Remember, test the squishy...
Design & Performancesave HAR file locallyExplaining the Network Panel:Saving Files for Comparison
Design & PerformanceExplaining the Profiles Panel:CSS Selectors
Design & PerformanceExplaining the Profiles Panel:CSS Selectors
Responsive ImagesMost solutions are silly & verbose.Focus on properly formattingimages. Lazy load them & don’tworry about ...
Programming & PerformanceThings to Keep in Mind...JavaScript libraries are devils. Considerusing microjs.com or vanilla JS...
Programming & PerformanceExplaining the Timeline Panel
PageSpeed Insights Extensionhttps://developers.google.com/speed/pagespeed/insightsTesting
TestingWebPagetesthttp://www.webpagetest.org
TestingBrowserStackhttp://browserstack.com
DeploymentFinally getting to “traditional”performance techniques...Performance can’t simply betacked onto the end of a pro...
Concatenate files within reason.Minify files as appropriate.Make sure the server supports filecompression & cache headers....
mod_pagespeed Automates a Lothttp://developers.google.com/speed/pagespeed/modDeployment
Google Analytics’ Site SpeedMonitoring
WEB PERF TWEEPS TO FOLLOW@ilyagrigorik@andydavies@souders @patmeenan@stoyanstefanov@tameverts @yoavweiss@scottjehljust a s...
Questions?
Dave OlsenProfessional TechnologistWest Virginia University@dmolsenThanks for ListeningIllustrations by Graham Curry
Upcoming SlideShare
Loading in...5
×

Web Performance & You

1,523

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
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,523
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "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

×