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
