Web Performance & You

  • 1,328 views
Uploaded 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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,328
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web Performance &YouDave Olsen, West Virginia UniversityRefresh Pittsburgh, June 4@dmolsen, dmolsen.com
  • 2. slideshare.net/dmolsenwvuThis 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 & othershttp://the-mobile-book.com
  • 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.http://timkadlec.com/2013/01/setting-a-performance-budget/
  • 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 Inspectorhttp://bit.ly/15sWYsx
  • 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 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. Programming & PerformanceExplaining the Timeline Panel
  • 34. PageSpeed Insights Extensionhttps://developers.google.com/speed/pagespeed/insightsTesting
  • 35. TestingWebPagetesthttp://www.webpagetest.org
  • 36. TestingBrowserStackhttp://browserstack.com
  • 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 Lothttp://developers.google.com/speed/pagespeed/modDeployment
  • 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