Your SlideShare is downloading. ×
Web Performance & You
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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.

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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