awesome-web-performance
A list of Web Performance Optimization techniques, tools and resources.
https://github.com/d4rkr00t/awesome-web-performance
Last synced: 16 days ago
JSON representation
-
Articles
- Overview of the RenderingNG architecture
- 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
- Fixing INP with a VIEWPORT tag
- How large DOM sizes affect interactivity, and what you can do about it
- Speeding up V8 heap snapshots
- Object Structure in JavaScript Engines
- Optimizing Javascript for fun and for profit - Optimization
- Prerender pages in Chrome for instant page navigations
- 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
- Tasks, microtasks, queues and schedules
- The Right Way to Bundle Your Assets for Faster Sites Over HTTP2
- Maximally optimizing image loading for the web
- Overview of the RenderingNG architecture
- Tasks, microtasks, queues and schedules
- The Right Way to Bundle Your Assets for Faster Sites Over HTTP2
- Maximally optimizing image loading for the web
- 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
-
Talks / Videos
- 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 101 (Chrome University 2019)
- 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.
- Life of a Script
- 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, Сергей Чикуенок
- Life of a navigation (Chrome University 2019)
- Life of a Pixel - level concepts with pointers to important classes and data structures in the codebase.
- Life of a Script
- 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 101 (Chrome University 2019)
- Anatomy of the browser 201 (Chrome University 2019)
- 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, Сергей Чикуенок
-
Case Studies
- RFC Update theme shape
- How Carpe achieved record-breaking sales by focusing on performance optimization
- RFC Update theme shape
- How Carpe achieved record-breaking sales by focusing on performance optimization
- How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile
- How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile
-
Frameworks
-
Podcasts
-
Performance Specific
-
Performance Episodes
-
-
Blogs
-
Performance Episodes
- https://calendar.perfplanet.com/
- https://web.dev/tags/performance/
- https://developer.chrome.com/tags/performance/
- https://v8.dev/
- https://csswizardry.com/
- Infrequently Noted
- https://calendar.perfplanet.com/
- https://web.dev/tags/performance/
- https://developer.chrome.com/tags/performance/
- https://v8.dev/
- https://csswizardry.com/
- Infrequently Noted
-
-
Social Media
-
Stats
-
Tracers
-
-
Other Awesome Lists
-
Tools
-
Bundle Analyzers
-
Analyzers
- Lighthouse
- PageSpeed Insights
- WebPageTest.org
- RequestMap - parties are on your site, where your transmitted bytes are coming from and how slow your domains are!
- 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!
- Capo
-
Benhcmarking / Load Testing
-
Image Optimization
-
Resources
-
RUM
- @dropbox/ttvc - browser implementation of the VisuallyComplete metric suitable for field data collection (real-user monitoring).
- @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
-
Specs
Programming Languages
Categories
Sub Categories
Keywords
performance
8
webpack
6
webperf
5
cli
4
minification
4
javascript
4
performance-metrics
4
performance-analysis
4
bundle
4
treemap
4
webperformance
3
webpack-runtime-analyzer
2
validation
2
dependency-graph
2
analyze
2
ci
2
analyzer
2
stats
2
bundle-size
2
source-map
2
chart
2
web
2
pwa
2
interactive
2
size
2
developer-tools
2
chrome-devtools
2
best-practices
2
audit
2
web-vitals
2
web-performance
2
user-centric-metrics
2
webvitals
2
snippets
2
svgo
2
svg
2
optimization
2
nodejs
2
site-speed
2
pngquant
2
pngout
2
pngcrush
2
optipng
2
optimize
2
webpack-bundle-analyzer
2
webpack-stats
2
framework
2
load-testing
2
performance-test
2
python
2