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

Web Performance & You



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.



Total Views
Views on SlideShare
Embed Views



1 Embed 41

https://twitter.com 41



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Web Performance & You Web Performance & You Presentation Transcript

  • 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 Frost, Trent Walton,me & othershttp://the-mobile-book.com
  • 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 a simple solution fordesigning for small screens.Source: Jason Grigsby on Speakerdeck“”- Jason Grigsby@grigs
  • RWD could also meanresponsible web design.
  • Over DownloadingDownload & HideDownload & ShrinkDownload & IgnorePRIMARY PERFORMANCE ISSUES FOR RWDPoor NetworksHigh LatencyVariable BandwidthPacket Loss
  • 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 coincidental. Serious.
  • 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://timkadlec.com/2013/01/setting-a-performance-budget/
  • First StepsBest request is no request.Worst request is one thatblocks the parser.Source: Ilya Grigorik- Ilya Grigorik@ilyagrigorik“”
  • 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: 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.
  • 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 too.
  • 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 “high DPI.”
  • 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.
  • 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 project.
  • Concatenate files within reason.Minify files as appropriate.Make sure the server supports filecompression & cache headers.DeploymentThings to Keep in Mind...
  • 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 sampling...
  • Questions?
  • Dave OlsenProfessional TechnologistWest Virginia University@dmolsenThanks for ListeningIllustrations by Graham Curry