• 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 40

https://twitter.com 40



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