webP
mod_pagespeed
resource timing API
- computer side
Jank
Limit styte- recalculations
- limit styte- changes to the DOM
- Don`t change the body when you shoud change child elements directly.
Avoid Layout Thrashing
- We got offwetWidth ( causes a layout)
- We set styte-.width (invalidates the layout)
- we repeat that prpocess
ex ) for(var i= 0; i < element.length; i++) { styte-.height.i }
Remove Unnecessary java-s!crip
- Dont do in JS that which can be doe in CSS. animajtions & transitions
- p-osition:fixed is your frend.
- p-osition : sticky is upcoming.
-
- keep your event listener code to a minimum, the can run several times per frame.
render solve
reduce image overhead... AGAIN
reduce paint cost
- first, deduce the size, then reduce the complexity
Solving for your users.
The save content and functionality
- you are subject to many constraints
- don`t pass them on to users
- you should not offer reduce functionality
Users come to you for content
- big screens = room for content
- that doesn`t work for small screens
- give them the same content, but refactor for the constraint.
Suggestion
Assign a Sheriff
- clarify your constraints before you start.
= set limits(number of requests, GCs, paint time, layout, styte- calculations)
- track it during the lifetime of the project.
- dont ship until you hit your targets.
http://jankfree.org
Conclusion
- its not about devices, its about content.
= every devices is likely to have at least one constraint
- jet the browser do the word
- above all, deliver the content to your users quickly
googlecom/+aerotwist
peter.sh/+
@aerotwist
@beverloo
|
