why performance matters and what you can do to make the internet suck less

21
Front-end performance can be a zen-like experience or a horrifying nightmare from the minds of the Great Old Ones Why performance matters and what you can do to make the Internet suck less

Upload: jesse-heady

Post on 28-Jan-2015

104 views

Category:

Technology


1 download

DESCRIPTION

This is an introductory to intermediate talk covering web performance optimization and common pitfall in front end development and implications to the performance of modern web applications.

TRANSCRIPT

Page 1: Why performance matters and what you can do to make the internet suck less

Front-end performance can be a zen-like experience or a horrifying nightmare from

the minds of the Great Old Ones

Why performance matters and what you can do to make the Internet suck

less

Page 2: Why performance matters and what you can do to make the internet suck less

Let’s talk about what the Internet isn’t

Page 3: Why performance matters and what you can do to make the internet suck less
Page 4: Why performance matters and what you can do to make the internet suck less

TUBES

Page 5: Why performance matters and what you can do to make the internet suck less

Where to begin?

At the beginning …

1998: Web Performance Tuning by Patrick Killelea

2004: Steve Souders coined the phrase “web performance optimization”

Fast forward 10 years ...

Source: Wikipedia.org

Page 6: Why performance matters and what you can do to make the internet suck less

Steve Souders (formerly Google)

"... at least 80% of the time that it takes to download and

view a website is controlled by the front-end structure. This

lag time can be decreased through awareness of typical

browser behavior, as well as of how HTTP works."

Read more: High Performance Websites, Even Faster Websites, and http://j.mp/13nzVKF

Source: Wikipedia.org

Page 7: Why performance matters and what you can do to make the internet suck less

Impact to end user experience

User experience degraded

People leave

Performance matters a lot

Page 8: Why performance matters and what you can do to make the internet suck less

It’s ok … we havethe technology

Page 9: Why performance matters and what you can do to make the internet suck less

What you can do today

Favor measurements

Understand HTTP and TCP

Decypher waterfall charts

Learn about HAR & TAP files

Review Speed Index

Page 10: Why performance matters and what you can do to make the internet suck less

Chrome Developer Tools

Web Page Test, New Relic, Showslow

Google PageSpeed Insights

Charles & Fiddler Web Proxies

YSlow

sitespeed.io

Tools in your toolbox

Page 11: Why performance matters and what you can do to make the internet suck less

Logging is OK

http://cobbdb.github.io/lumberjack/

Page 12: Why performance matters and what you can do to make the internet suck less

Question everything

It’s ok to challenge

Always know the intention

Scrutinize new HTTP requests

Anticipate change impact

Page 13: Why performance matters and what you can do to make the internet suck less

Examples

Page 14: Why performance matters and what you can do to make the internet suck less

Recommended articles

Front-End OpsAlex Sextonhttp://j.mp/13nyNH9

A Baseline for Front-End DevelopersRebecca Murpheyhttp://j.mp/13nBh8n

Performance as design Brad Frost http://j.mp/13nzIqR

Page 15: Why performance matters and what you can do to make the internet suck less

More resources

Velocity Conference (O’Reilly)

Front End Ops Conference (videos http://j.mp/1olbjiE)

YSlow phantomjs CLI http://yslow.org/phantomjs/

PageSpeed Insights CLI http://j.mp/1kE7a9F

http://www.webperformancetoday.comhttps://delicious.com/jheady/performance

Page 16: Why performance matters and what you can do to make the internet suck less

Front-end performance can be a zen-like experience or a horrifying nightmare from

the minds of the Great Old Ones

Why performance matters and what you can do to make the Internet suck

less

FRONT END OPS

Page 17: Why performance matters and what you can do to make the internet suck less

The future is blindingly bright

Front-End Ops - http://j.mp/13nyNH9

Automate all the things1. grunt, bower, yeoman2. linting, hinting3. minification, compression, concatenation4. karma, jasmine (JS unit)5. CasperJS (PhantomJS, SlimerJS) (func)6. cucumber-js, gherkin syntax (BDD)7. ??? … profit

Page 18: Why performance matters and what you can do to make the internet suck less

meetup.com/Atlanta-Web-Performance-Group

Page 19: Why performance matters and what you can do to make the internet suck less

http://atlanta.buildguild.org/

Page 20: Why performance matters and what you can do to make the internet suck less

THANKS!

Page 21: Why performance matters and what you can do to make the internet suck less

http://en.wikipedia.org/wiki/Superkamiokande

THANK YOU!

These slideshttp://j.mp/1bgD9oG