Web Performance Auditing

Page Load:
PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/


Recommended performance:
85+ on mobile
90+ on desktop
100 on UX (No UX issues)


Check for:

• Unoptimized images (63% of bytes transferred are images)
• Use ImageOptim software to optimize
• Unmodified resources waste transferred bytes
• Too many requests
• Too many redirects (People abandon a site if it takes more than 3 seconds to load)

How does it look on a real device?

• https://webpagetest.org

Speed Index - Most Important

• Prioritize rendering path - (bit.ly/io-crp)

There are tools to help you speed your site automatically:

grunt - The javascript task runner - http://gruntjs.com/

gulp.js - The streaming build system - http://gulpjs.com/

jank - missed frames:

e.g. screen refresh: 60hz with, with 60fps (frames per second), and thus, 16ms (millisecond) to create those pictures.

How chrome #1 does it:

• Recalculate styles
• Composite - 

What can damage performance?

• Expensive animation, e.g. css transition. The transition is a killer on mobile devices.
• So what you should do is stick to:
• Position - transform: translate(npx, npx) 
• Scale - transform: scale(n)
• Rotation - transform: rotate(ndeg)
• Opacity - 0..1

• Do not use the javascript function setInterval to do animation tricks. Instead use requestAnimationFrame.

• Layout thrashing - Do not read/write/read/write/read/write etcetera of the layout. Instead, read first the layout values and write afterwards (or write first the layout values and read afterwards).

• Garbage Collection