Optimizing web performance (Fronteers edition)

OptimizingWeb PerformanceDave Olsen, @dmolsenWest Virginia University

http://flic.kr/p/7A8xxN

What I’ll Talk About

• Quick Intro About Why We Should Care About Web Perf

• Diagnosing Perf Problems

• Easy Web Performance Optimization Wins

• Tools to Help Test & Automate Perf Optimizations

• Setting Up a Device Lab

WHY SHOULD WE CARE ABOUT WEB PERFORMANCE?

http://flic.kr/p/4JY1Yr

brad’s iceberg

© Brad Frost

© Brad Frost

The way in which CSS media queries have been promoted for

mobile hides tough problems and gives developers a false promise of a simple solution for designing

for small screens.

Source: Jason Grigsby on Speakerdeck

- Jason Grigsby, @grigs

brad’s iceberg

© Brad Frost© Brad Frost

© Brad Frost

The average weight of a web page today:

Source: HTTP Archive

Images JavaScript

Flash

HTM

LC

SSOther

78%

1.8 MB

RWD sites whose small screen design weighs the same as the large screen design.Source: Podjarny, 2013

72%

Users expect your mobile site to load as quickly as your desktop site.

71%

Source: Gomez

Bounce Rate Conversion Rate Cart Size Page Views

200ms - - - -1.2%

500ms -4.7% -1.9% - -5.7%

1000ms -8.3% -3.5% -2.1% -9.4%

CASE STUDY: MOBILE PERFORMANCE EFFECT ON BUSINESS

Source: Web Performance Today

Mobile first means performance first.

Over Downloading

Download & HideDownload & ShrinkDownload & Ignore

PRIMARY PERFORMANCE ISSUES FOR RWD

Poor Networks

High LatencyVariable Bandwidth

Packet Loss

Current Dev Practices + Desktop First RWD

Web Performance Blues

REVIEWING WHY WE SHOULD CARE

sad face

https://flic.kr/p/9g5Gg8

https://flic.kr/p/6DBSCi

DIAGNOSING WEB PERFORMANCE ISSUES

THE BASICS: PAGESPEED INSIGHTSdevelopers.google.com/speed/pagespeed/insights

NEXT STEPS: CHROME DEV TOOLSdev tools is more than just the elements view!

NEXT STEPS: CHROME DEV TOOLS COURSEudacity.com/course/ud884/

DEEP CUTS: WEBPAGETESTwww.webpagetest.org

DEEP CUTS: WEBPAGETESTnote the big red F :(

WEBPAGETEST FEATURES

• Test real browsers from mult. locations• Modify connection speeds• Video capture• Content blocking• Script the session• Use with continuous integration• Collect tests over time• Free

REVIEW OF DIAGNOSTIC TOOLS

• Fast & easy? Pagespeed Insights• Local development? Chrome Dev Tools• Customization? WebPagetest

http://flic.kr/p/4zzKee

easy web performance optimization wins

EASY WEB OPTIMIZATION WINS

https://flic.kr/p/nYDzXn

Performance

http://timkadlec.com/2013/01/setting-a-performance-budget/http://flic.kr/p/7BBs6e

A budget is a guide, not a hard & fast limit. Performance tweaks are compromises.

MOBILE OPTIMIZATION TENETS

1. Reduce requests2.Reduce asset size3. Speed-up page render

http://flic.kr/p/4zzKee

Best request is no request.

Source: Ilya Grigorik

- Ilya Grigorik, @ilyagrigorik

WEB PERF & SERVER-SIDE: EASY WINS

Compress HTML & CSS

If you’re using Apache make sure to use mod_deflate so text-based assets are compressed for transfer.

Browser cache

The simplest way to reduce requests is to make sure the browser doesn’t need to make them. Make sure assets are bring cached on the browser. Try redbot.org to see if you’re caching.

Avoid AJAX requests

Think critically about how you use AJAX. You may be able to increase perceived performance by “caching” mark-up in script tags.

WEB PERFORMANCE & IMAGES: EASY WINS

Try to avoid images

When possible think about avoiding images. Implement with CSS or Canvas. Or use SVG or Progressive JPEGs.

Image compression

Choose appropriate image formats and compress within reason. Consider using CSS sprites.

Responsive images

Use srcset to serve regular images. You can use picture to serve art directed responsive images.

Avoid dark matter

display: none; hides content. It doesn’t stop content from loading. Properly set media queries.

WEB PERF & IMAGES: TOOLS

Grunt & Gulp Tools

imagemin, image-resize, spritesmith, svgmin

On the Web kraken.io, smushit.com, spriteme.org, imigix.com

CDNs Consider using CDNs to serve common JS libraries to help reduce RTT for requests.

WEB PERF & JAVASCRIPT: EASY WINS

MicroJS or, even better,

Vanilla JS

Avoid using bulky frameworks if you’re using them for simple tasks like selectors. Try microjs.com to find libraries that may be smaller & more suitable. JavaScript also blocks the rendering of the page.

Use Touch or FastClick

While not directly related to page render, by making sure your links use a Touch event or FastClick rather than an onClick event user interactions will speed up by 300ms.

Avoid DOM reflows &

repaints

By using JS to modify the DOM you can cause unnecessary reflows & repaints of your browser. They slow down page render time as well as burn battery.

WEB PERF & JAVASCRIPT: TOOLS

Grunt & Gulp Tools

uglify, concat, closure-compiler, google-cdn

On the Web microjs.com, developer.mozilla.org,developers.google.com

CONTENT BREAKDOWN

WEB PERF & 3rd PARTY CODE: EASY WINS

Beware the SPOF

Be careful regarding what 3rd-party code you use on your pages. Downtime for them can mean slow loading pages for you. Try using spof-o-matic in the Chrome Web Store to see how your page is affected.

Avoid SM widgets

Try using simple links to services rather than utilizing their JavaScript widgets. They’re performance hogs. Removing the widgets also increases user privacy. 2-click social widgets from Heise is a good solution.

TESTING SPOF

Worst request is one that blocks the parser.

Source: Ilya Grigorik

- Ilya Grigorik, @ilyagrigorik

Image source: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

THE CRITICAL RENDERING PATH

LEARN TO LOVE THE WATERFALL

LEARN TO LOVE THE WATERFALL

onload

start render

domcontentloaded

CRITICAL RENDERING PATH: FILMSTRIP VIEW

CRITICAL RENDERING PATH: % COMPLETE

CRITICAL RENDERING PATH: EASY WINS

Defer loading of

JavaScript

Place script elements just above the body tag. Otherwise use HTML5’s script defer & async attributes to avoid blocking the parser. Can also insert script elements into the DOM using the onload event.

Inline Critical CSS

& Defer Rest

Place critical CSS directly within your document and load the rest of the CSS after onload with JavaScript. Use a service like Penthouse to find critical CSS.

Same DNS origin

Above the fold elements should be on the same hostname. Reduces DNS look-ups. Possible to try for a single request for all above the fold content?

The ultimate goal is a narrower, shorter waterfall. Also focus on

getting a fast initial render.

http://flic.kr/p/bMdzZ2

TEST THE SQUISHY

default styles vs. min-width vs. max-width

SCRIPTING & CUSTOM VIEWPORTS

SCRIPTING & CUSTOM VIEWPORTS

Google Analytics Site Speed

www.slideshare.net/AndyDavies/web-page-test-beyond-the-basicsWebPagetest - BEYOND THE BASICS

REVIEWING TOP TIPS FOR EASY WINS

• Budget to give yourself and a client a performance goal

• Enable cache headers• Enable compression • Properly format or reduce images• Defer as much as you can • Use a task runner to build web

performance into your workflow

RESS can be a scalpel for your responsive designs.

REsponsive Design + Server Side Components

http

://fli

c.kr

/p/a

4VsP

v

RESS: AN EVOLUTION OF RESPONSIVE DESIGN

slidesha.re/KtByzQit is not an “evolution” but just another tool

Testing Tools

toolbox, tools

MORE WEB PERFORMANCE TOOLS

http://flic.kr/p/4BZsQJ

LIST OF PERF TOOLSperf-tooling.today

Google Analytics Site Speed

GOOGLE ANALYTICS’ SITE SPEED

PERFORMANCE MONITORINGspeedcurve.com

PERFMAP (alpha)github.com/zeman/perfmap

REAL USER TESTINGyahoo.github.io/boomerang/doc/

MOD_PAGESPEED: PERF AUTOMATIONdevelopers.google.com/speed/pagespeed/mod

  add_head  combine_css   convert_jpeg_to_progressive   convert_meta_tags   extend_cache   flatten_css_imports   inline_css   inline_import_to_link   inline_javascript   rewrite_css   rewrite_images   rewrite_javascript   rewrite_style_attributes_with_url

Default Filters

DEVICES

http://flic.kr/p/cfkZhN

REMOTE DEBUGGING

charlesproxy.com

SLOWING THINGS DOWN

NLCCharles

USING CHARLES PROXYblog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/

eBay MobileKarma.com Cellphone store leftoversOpen device labs

GET YOUR HANDS ON REAL DEVICES

http://flic.kr/p/7972f6

OPENDEVICELAB.COM

SUMMING IT ALL UP

• Open conversations using a performance budget

• First render speed is more important than pure resource size

• Integrate perf into your workflow• Test, evaluate, and monitor

WEB PERF TWEEPS TO FOLLOW

@ilyagrigorik

@andydavies

@souders

@patmeenan

@stoyanstefanov

@bbinto

@scottjehl

just a sampling

@tameverts

Dave OlsenProfessional TechnologistWest Virginia University

@dmolsen

THANKS FOR LISTENING

QUESTIONS?

Dave OlsenProfessional TechnologistWest Virginia University

@dmolsen

THANKS AGAIN FOR LISTENING