By collecting analytics from the following resources:
- Can also block out specific hostnames (cdn’s, etc)
perfume.js is a simple way to find this data. It has a better breakdown than GA.
- Measures time when the user first interacts with your site to the time when the browser can actually handle the interaction.
You can check estimated revenue gained from performance improvements from this site.
200kb of JS !== 200kb of jpg
JS = download -> parse -> compile -> execute
Infer by user actions
intersectionObserver APIfor infinite loading. Keep track of middle element in a Feed or the like.
If you can do something with CSS, do it
- CSS Target - href & id
Details and Summary from HTML5
Use it for everything except when you literally cannot as the work leaves the Main Thread
- You can use as many as you want, and they will never block the UI (just get a callback at the end)
https://dassur.ma/ looks like it has some good stuff
- Interacting with the DOM without blocking the main thread
- First Party: 11 requests
- Tag Manager: 7th request
- Leads to 125 Requests (from Ad’s, or other things). So they receive 100’s of ads containing unknown files.
Lambda -> loads page with ?third-parties -> groups them and stores them in s3 and then stores the urls to Redis (to allow you to load Ads from your domain instead of from the Advertisers domain) -> invalidate at a scheduled time (when new ads will be delivered) and repeat
- This will also allow you to do optimisations on the ads and check for what the ads do (if they do malicious things).
Performance is not a bug fix, it’s feature development (a business incentive)
Divide and Conquer
- Server performance
- Application performance
- Development performance (teach developers how they are writing slow code)
Resource to teach with: What forces layout/reflow
getBoundingClientRect is very expensive
intersectionObserver as it has a bunch of properties that are automatically accessible such as
Developers were challenged by constraints.
Features too longer to finish
Education without immediate action is quickly forgotten
Old way: Idea -> prototype -> test -> development -> MVP -> optimise
Performance should happen at the Idea phase
Is it by design? Is it a technical limitation?
Describe the scenarios a tradeoff would block - We can block this but then this will be a problem or this, on and on - Make decisions as you go
Performance budgets are great but it’s rarely a single pull request
Collects all open PRs with labels -> merges into temporary branch -> then an additional PR to be checked by product folks (to check multiple PR’s simultaneously)