• Save
Web Performance & You
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Web Performance & You

  • 1,849 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,849
On Slideshare
1,808
From Embeds
41
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 41

https://twitter.com 41

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