Have Your Cake And Eat it Too: A Primer on Performance – Good Morning PEERS! – per·for·mance

View Github Repository Open presentation in a new window

una

See all presentation from una

Have Your Cake And Eat it Too: A Primer on Performance – Good Morning PEERS! – per·for·mance

0 1

slides--lead-dev

Performance talk for the Lead Developer

On Github una / slides--lead-dev

A Primer on Performance

  • The Lead Developer 2015
  • Una Kravets | @una

Make something people love

people don't hate

People often say "Make something you love" Well. I'm not going to teach you how to do that. But I am here to take that, and turt it into "Make something people don't hate." People like cake. Let's talk about cake.
Ths cake is our product cake == a metaphor of how performance is a team effort many different roles, specialized

per·for·mance

/pərˈfôrməns/

an action, task, or operation, seen in terms of how successfully it was performed

dictionary.com definition measure of succes = crux of our job

Performance is Our Biggest Job

Performance is a mark of user success with our products, as dictionary.com just told us As lead developers, its also your job to make sure everyone is on the same page with this I'm going to be talking about performance accross an entire team

Beautiful != Useable

Beautiful != Useable Useable > Beautiful

Useable > Beautiful

Useable > Beautiful if somebody cant access our content, then whats the point of putting it out there in the first place Beautiful + Useable = Delightful Experience

Performance-First Design

Google has calculated that by slowing its search results by just four tenths of a second they could lose 8 million searches per day. - FastCompany
  • That's a lot of missed ads and revenue. In fact, let's look at the numbers:

  • 8 million searches
  • $111,000/day
  • $40.5 million/year
a daily loss of $111,000, or about $40.5 Million a year

100% of users have felt frustated by poor performance. - Una Kravets

We all know these pains far too well. Lets not inflict them upon others.

It's about Neuroscience

Tammy Everts -- its about neuroscience, not entitlement Comes down to 2 phenomenons: Web Stress The Doorway Effect

Web Stress

Slow pages cause “web stress”: physically measurable increased agitation and poorer concentration. because of poor short term memory. Humans aren't good at remembering things. Doorway Effect
Doorway Effect explains why we can go searching for something in one room, walk into another room to look for it, and forget what we were looking for in the first place.

Sensory Memory

This is due to our sensory memory, which works surprisingly similarly to a computer's memory bank. Sensory memory = all of your senses We don't control it -- lasts for Very limited time spans Allows for fluid continuation of a task
iconic memory can help us visualize that time bank on the internet, each new tab is like stepping into a new room very easy for user to get distracted, move on to another task, and forget what they were trying to do or find in your app in the first place perf becomes critical for keeping users on track

UX Architecture

the base upon which the cake stands -- the crux, the core, the product users interact with and taste

Content Strategy

ingredients content is what you decide to put into the cake -- its ingredients -- you wouldn't mix onion powder and eggnog and cherries. limit yourself to only content or ingredients that blend well together and are needed to support your recipe, or app.
What is the main point of your site? What are you trying to get the user to see or do? This should be up front and center. It should be the first thing they see.Content determines the success of your product. period. If you don't stop and think about your content, nothing else I will tell you in this talk will matter that much Content optimizations are the best thing you can do to optimize performance.
size of websites still increasing Look at what they're made up of jQuery minified is 86kb, avg. image online is 654kb Remove 1/5 of one image and you can have all the jQuery you want
In about 5 months average web page size will be same as Doom install image.

Do I really need that?

What Is the Main Goal Here?

What Next?

What do you want your user to do next? -- prioritize your content

UI Design

visual representation of your masterpiece Designers need to understand their craft supplies and tools with which they are building differences between icing types and where to place little legos -- this parallels image choices and design decisions

Image File Types

  • jpg

  • png-8

  • png-24

  • gif

  • svg

jpg – raster, Lossy Format -- depends on the PPI of the device -- great for photographs, images with a lot of color PNG = Excels when the img has large, uniformly colored areas. Could even be better for photos PNG-8 refers to palette variant, which supports only 256 colors. Bc of limited color range -- may be artifacts PNG-24 refers to true color variant, which supports more colors, but might be bigger. gif – Lossless with limited color range like .png 8, but .png is usually the better choice. (OS rxn to gif threatening to license) svg - vector graphics, can be exported from illustrator or sketch
"Never put an image on the web that you haven't optimized" - Dave Rupert this should be a rule -- put it in your team charters

Compression Tools

ImageAlpha is a way of reducing colors in a png-24 - you manage a toolbar and make decisions TinyPNG: a tool you can integrate into build tools ImageOptim uses several lossless compression algorithms to get the smallest size compressor.io <-- web version SVGO, also build tools and web version
  • ImageMin with gulp is what I use to Automate
  • Going to get into task runners a bit later
  • uses SVGO, along with gifsicle, jpegtran, and optipng --> all Lossless optimizers

Compressive Images

By saving a JPG image at double size but at 0% quality and allowing the browser to scale it to fit a smaller placeholder, you can reduce the image weight whilst increasing the bit depth

size: 109kb

size: 49kb

size: 109kb

size: 49kb

Progressive .JPEGs

There are two primary types of JPEG images, baseline and progressive A simple or "baseline" JPEG file is stored as one top-to-bottom scan of the image. Progressive JPEG divides the file into a series of scans. How the web used to be, but its no longer a default huge percieved performance win
they are a tiny bit bigger than baseline jpegs but thats because they load in layers and not top to bottom in this example, the size difference was only 2kilobytes Progressive JPEGs are better because they appear faster.

It's About How Fast the Page Feels

Retina Images

goes back to the content strategy side of things -- showing why its important to understand the whole process retina images look nice on screens but are really terrible for users data plans aren't cheap reducing the number of download size download size needs to be < 1mb including images

Do I really need that?

Picturefill

Picturefill if you need to use retina images, consider picturefill polyfill for the picture element and source set serve images based on a variety of conditions like screen size, viewport size, and screen resolution Filament Group & Bocoup

whatdoesmysitecost.com

  • websites are expensive
  • whatdoesmysitecost.com

Jank!

60 FPS

This is a real term. Jank is any stuttering, juddering or just plain halting that users see when a site or app isn't keeping up with the screen refresh rate (which is 60 times per second, 60FPS). Think: slow, crappy, or janky parallax experience. frame rate on mobile will ALWAYS be different than on desktop -- so test on mobile

Timeline Panel

Dev Tips Daily

you can see how your page is rendering when you open the timeline mode in Chrome dev tools and select Frames Hit record, do something, stop it, inspect
Rendering in the bottom console: "Show FPS meter and "Show paint rectangles"
csstriggers.com Avoid Layout Thrashing the browser figures out the geometric information for elements: their size and location in the page -- we don't want to change those Kills performance Really bad on mobile devices
High Performance Animations from a popular article: "High Performance Animations" transform all the things null transform hack triggers gpu acceleration instead of cpu -- dont use it too much

Flexbox > Older Layout Models

Paul Lewis (who co-wrote the prev. article w/Paul Irish) also wrote about Flexbox lately
Stolen from Paul Lewis

-10.751ms

The same number of nodes Layout tree size -1247 w/flexbox

Style Audit

  • css stats.com

ITCSS

Harry Roberts
  • inverted triangle css
  • specificity graph trend upward
  • writing better quality CSS
  • not trying to override everything
  • writing less CSS == smaller file size

Front End Development

dev = the delivery its great if you've made a beautiful cake that tastes wonderful, but if you can't get it to your customer on time, then whats the point?

The Delivery

network tab
the ideal waterfall is this Separation of Concerns Core content: Essential HTML and CSS, usable non-JavaScript-enhanced experience Enhancement: JavaScript, geolocation, touch support, enhanced CSS, web fonts, images, widgets Leftovers: Analytics, advertising, third-party content

CMAT

  • Concatenate
  • Minify
  • Async
  • Test
and the way we will achieve that ideal waterfall is to think: CMAT

C: Concatenate

Pull your files into one to minimize requests.

Images

CSS

@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';

@import 'utils/variables';
@import 'utils/functions';
@import 'utils/mixins';
@import 'utils/placeholders';

@import 'base/reset';
@import 'base/typography';

@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';

@import 'components/buttons';
@import 'components/carousel';
@import 'components/cover';
@import 'components/dropdown';

@import 'pages/home';
@import 'pages/contact';

@import 'themes/theme';
@import 'themes/admin';

Javascript


									
var concat = require('gulp-concat');

gulp.task('scripts', function() {
  gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'))
});

								

							
						

						images: spriting
							CSS: write modular Sass, and then have a manifest file to pull all of your code into one to be processed into a single css file
							javascript: same thing, we want as few requests to the sever as possible
						

							The fastest HTTP request is the one not made.
							-Steve Souders, Head Performance Engineer, Google
						
							words to live by
						

M: Minify

						

							
Make those files as small as possible.

							

Images

								

									

							
							

CSS

								

									
body,fieldset,form,html,legend,li,ol,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p{margin-top:0}fieldset,img{border:0}legend{color:#000}li{list-style:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}table{border-collapse:collapse;border-spacing:0}caption,td,th{text-align:left;vertical-align:top;font-weight:400}input,select,textarea{font-size:110%;line-height:1.1}abbr,acronym{border-bottom:.1em dotted;cursor:help}*,:after,:before{margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html{-webkit-font-smoothing:antialiased;height:100%}body{font-family:"Carrois Gothic",sans-serif;font-weight:400;padding:2em 10% 4em;max-width:1000px;margin:0 auto;background:#eef0f0;min-height:100%;position:relative}h1,h2,h3{font-family:"Fjalla One",serif;font-weight:700}h1{font-size:3.5em;margin-bottom:.25em;color:#5ab1bb}h2{color:#4e6766;font-family:"Carrois Gothic",sans-serif;text-transform:uppercase;font-size:.9em;letter-spacing:2px}

															

														
							

Javascript

								

									
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l="1.11.2",m=function(a,b){return new m.fn.init(a,b)},n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,o=/^-ms-/,p=/-([\da-z])/gi,q=function(a,b){return b.toUpperCase()};m.fn=m.prototype={jquery:l,constructor:m,selector:"",length:0,toArray:function(){return d.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)},pushStack:function(a){var b=m.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a,b){return m.each(this,a,b)},map:function(a){return this.pushStack(m.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.

								

							
					

					
Optimize what people see immediately

						
  • Scripts
    • 
							
  • Styles
    • 
						

						
critical rendering path:

						
/[krit-i-kuh l] [ren-der-ing] [path, pahth]/

						
The intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels

					
						Before we talk about how to load your js,
							if you can avoid JavaScript or replace it with CSS, do that
							if not, you need to think about the "critical rendering path"
							This is all about getting your priorities in orderand what the user will see first
							By optimizing the critical rendering path we can significantly improve the time to first render of our pages.
							optimize the delivery of content, and defer the rest
						

A: Async

						

							
Manage How Your Scripts load with Async & Defer.

							
  • 
									
    <script src="...">
    
									
    • 
								
  • 
									
    <script src="..." async>
    
									
    • 
								
  • 
								
    <script src="..." defer>
    
								
    • 
							
Remember your separation of concerns, and remember to separate HTML as markup, CSS as presentational, and JS as functional
								try not to make JS presentational if you can
							
LoadCSS

						
< head>
  
    <link href="path/to/mystylesheet.css" rel="stylesheet">
  
< /head>



  • like scripts, you can also load CSS asynchronously
    • 

  • remember fallbacks if your browser doesnt support js
    • 

Critical CSS

						CSS is also a part of your critical rendering path
							This is why separation of concerns on the web is so important
							divorce presentational styles from logic
							you can make it even more performant by inlining your CSS styles
						
seems weird at first -- like its against old best practices, but like progressive jpgs and skinny jeans, whats old is new again
						

							several tools to help -- bookmarklet and plugins for task runners
						
"We don’t need to render the entire page in one second, [just] the above the fold content."
						- Ilya Grigorik
					

T: Test

						

							
Check Your Performance

							

Render.   Display.  Interact.


							
								the things that front end developers are concerned with: time to render, time to display, and time to interact
							
Chrome Dev Tools

					
Network Panel

						
Audits Panel

						
pagespeedtest.org

					

							
page speed index:

							
/[peyj] [speed] [in-deks]/

							

								some hippie math that tells you how fast it "feels" to load your website.
							

							- Dave Rupert
					
Google PageSpeed Insights

					
Page Speed Insights Extension

					
Google Analytics

					
Automate Your Performance Testing

					
Javascript Task Runners


						
Using Gulp

						
var gulp = require('gulp');
var psi = require('psi');
var site = 'http://www.html5rocks.com';
var key = '';

gulp.task('mobile', function () {
    return psi(site, {
        // key: key
        nokey: 'true',
        strategy: 'mobile',
    }, function (err, data) {
        console.log(data.score);
        console.log(data.pageStats);
    });
});

gulp.task('desktop', function () {
    return psi(site, {
        nokey: 'true',
        // key: key,
        strategy: 'desktop',
    }, function (err, data) {
        console.log(data.score);
        console.log(data.pageStats);
    });
});

gulp.task('default', ['mobile']);
						

						
gulp

						
Results

						
URL:       https://www.google.com/?gws_rd=ssl
Score:     92
Strategy:  desktop

Number Resources                           | 13
Number Hosts                               | 5
Total Request                              | 2.62 kB
Number Static Resources                    | 9
Html Response                              | 116.9 kB
Image Response                             | 46.02 kB
Javascript Response                        | 879.68 kB
Other Response                             | 1.76 kB
Number Js Resources                        | 5
                                           |
Avoid Landing Page Redirects               | 7
Enable Gzip Compression                    | 0
Leverage Browser Caching                   | 0
Main Resource Server Response Time         | 0
Minify Css                                 | 0
Minify HTML                                | 0
Minify Java Script                         | 0.27
Minimize Render Blocking Resources         | 0
Optimize Images                            | 0
Prioritize Visible Content                 | 0
						

					
Performance Budget

					

How Fast is Fast Enough? You want to be 20% faster to be percieved as faster. 

							say a competitors site loads in 5 seconds. 20% of 5 seconds is 1 second. So to be perceived as faster than them, you need to have your pages taking no longer than 4 seconds
							If your site is faster, it will convert users
Let's Review

					
We're All in This Together

						This isn't all on you. It takes a whole team -- You can't do this alone
Performance Optimization Checklist:


						
  • 
								Determine Important Content
							
    • 
							
  • 
								Create Most Performant Images
							
    • 
							
  • 
								Optimize Images
							
    • 
							
  • 
								DRY Stylesheet Architecture
							
    • 
							
  • 
								Consider Critical Rendering Path
							
    • 
							
  • 
								Concatenate files
							
    • 
							
  • 
								Minify files
							
    • 
							
  • 
								Async/Defer script loading
							
    • 
							
  • 
								Test! Repeat! Iterate!
							
    • 
						

							


						
  • you can do mobile testing right in your browser
    • 
							
  • that little mobile icon lets you test things
    • 
							
  • can even throttle connection speed
    • 
						
just because we have all of these great testing tools doesn't mean that they replace the real thing. Whenever you can, test with real devices. After all, experiencing the cake in context is better than someone else telling you how it tastes.
							I shot myself in the foot w/this -- didn't realize i wasn't serving a web font
						
Thank You!

					
@una