awesome-web-performance
A list of Web Performance Optimization techniques, tools and resources.
https://github.com/d4rkr00t/awesome-web-performance
Last synced: 3 days ago
JSON representation
-
Talks / Videos
- Life of a Script
- Anatomy of the browser 101 (Chrome University 2019)
- What the heck is the event loop anyway? - loop”, “non-blocking”, “callback”, “asynchronous”, “single-threaded” and “concurrency”. We say things like “don’t block the event loop”, “make sure your code runs at 60 frames-per-second”, “well of course, it won’t work, that function is an asynchronous callback!” If you’re anything like me, you nod and agree, as if it’s all obvious, even though you don’t actually know what the words mean; and yet, finding good explanations of how JavaScript actually works isn’t all that easy, so let’s learn! With some handy visualisations, and fun hacks, let’s get an intuitive understanding of what happens when JavaScript runs.
- Архитектура и производительность фронтенда
- Anatomy of the browser 201 (Chrome University 2019)
- Life of a navigation (Chrome University 2019)
- Life of a Pixel - level concepts with pointers to important classes and data structures in the codebase.
- From 'Fully Loaded' to Core Web Vitals: Understanding the Evolution of Performance Metrics
- CSS runtime performance | Nolan Lawson
- Progressively loading images
- Intro to Runtime Performance in the Chrome DevTools Performance Panel with Annie Sullivan
- Копаемся под капотом браузера, как работает event loop и compositing, Сергей Чикуенок
-
Blogs
-
Social Media
-
Performance Episodes
-
-
Articles
- Maximally optimizing image loading for the web
- Overview of the RenderingNG architecture
- Prerender pages in Chrome for instant page navigations
- Fixing INP with a VIEWPORT tag
- How large DOM sizes affect interactivity, and what you can do about it
- Maximally optimizing image loading for the web
- Overview of the RenderingNG architecture
- Prerender pages in Chrome for instant page navigations
- How large DOM sizes affect interactivity, and what you can do about it
- Rendering Performance – Web Fundamentals
- Tasks, microtasks, queues and schedules
- The Right Way to Bundle Your Assets for Faster Sites Over HTTP2
- We’re using TTVC to measure performance on the web—and now you can too
- The truth about CSS selector performance
- Using :is() in complex selectors selects more than you might initially think
- Speeding up V8 heap snapshots
- Object Structure in JavaScript Engines
- Optimizing Javascript for fun and for profit - Optimization
-
Stats
-
Tracers
-
-
Other Awesome Lists
-
Case Studies
-
Frameworks
-
Podcasts
-
Performance Specific
-
Performance Episodes
-
-
Tools
-
Analyzers
- Capo
- Capo
- Lighthouse
- PageSpeed Insights
- WebPageTest.org
- RequestMap - parties are on your site, where your transmitted bytes are coming from and how slow your domains are!
-
Bundle Analyzers
-
Benhcmarking / Load Testing
-
Image Optimization
-
Resources
-
RUM
- @dropbox/ttvc - browser implementation of the VisuallyComplete metric suitable for field data collection (real-user monitoring).
-
Tracers
-
-
Courses
-
Performance Episodes
-
-
Conferences
-
Performance Episodes
-
-
Web Vitals
-
Tracers
-
-
Specs
-
Tracers
-
Programming Languages
Categories
Sub Categories
Keywords
performance
4
webperf
3
webpack
3
treemap
2
webperformance
2
bundle
2
cli
2
minification
2
performance-analysis
2
performance-metrics
2
javascript
2
size
1
webpack-bundle-analyzer
1
nodejs
1
optimization
1
svg
1
svgo
1
snippets
1
webvitals
1
interactive
1
chart
1
analyze
1
web
1
pwa
1
developer-tools
1
chrome-devtools
1
best-practices
1
audit
1
webperf-metrics
1
list
1
awesome-list
1
awesome
1
web-vitals
1
web-performance
1
user-centric-metrics
1
stats
1
bundle-size
1
webpack-stats
1
webpack-runtime-analyzer
1
validation
1
dependency-graph
1
ci
1
analyzer
1
python
1
performance-test
1
load-testing
1
framework
1
source-map
1
site-speed
1
pngquant
1