Penelitian Kinerja Web
Repositori ini adalah kompilasi sumber daya yang saya konsumsi dari waktu ke waktu untuk mendapatkan pengetahuan dan melakukan penelitian sendiri tentang kinerja web.
Table of Contents
- Web Performance Research
- Table of Contents
- Architecture
- Backend
- Browser
- Service Workers / Workers
- Rendering Engines
- Build tools
- Cache & Memoization
- Career
- Case Studies
- Community
- Books
- Blogs
- Conferences & Meetups
- Courses
- Podcasts
- Core Web Vitals
- Cumulative Layout Shift (CLS)
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Interaction to Next Paint (INP)
- Total Blocking Time
- CSS
- Fonts
- General
- Images
- infrastruktur
- javascript
- mengukur kinerja
- kinerja kinerja
- devtools
- bagaimana cara metrik
- tolok
- ukur alat
- pengukur memori
- kinerja kinerja
- kinerja alat anggaran alat
- prefetching alat
- kerangka kerja web
- react
- rendering
- rendering react
- keberlanjutan
- tweet
- ux
- web apis
- lisensi
arsitektur
lisensi - ? Pola rendering canggih
- ? Rendering di web: Implikasi kinerja arsitektur aplikasi
- ? Menunggu
- ? Streaming di Next.js
- ? Apa yang terjadi sebelum hidrasi
- 2023 Web Kerangka Kerja Kinerja Laporan
- Pengambilan modern untuk memotong mustard
- menerapkan pemuatan instan dengan pola PRPL
- yang membandingkan SPA dengan SSG dan SSR
- Mode Bersamaan dan Hidrasi Parsial dalam React
- Conquering JavaScript Hidration
- yang Menaklukkan Papan Hidrasi untuk Menghubungkan Kinerja Hidrasi
- Untuk Mengenakan Kinerja TV Kinerja Tinggi Mengenakan Pengguna Berlaku untuk
menghidrasi Web ke Web - yang Berlalur untuk Mengenakan Kinerja TV Berlawanan Kinerja
- Tinggi Kinerja Berlaku untuk menghidrasi Web ke Web yang Berlaku untuk menghidrasi Web ke Web
- Kinerja TV
.- do partial hydration in React
- Instant Loading Web Apps with an Application Shell Architecture
- Islands Architecture
- Next.js: The Ultimate Cheat Sheet To Page Rendering
- Rendering Fundamentals
- Rendering on the Web
- Rendering Options on the Web: Server, Client, Static
- Rendering Patterns
- Server-Side Rendering: How Resumable Beats Hydration
- Signals: the nitty-gritty
- SPAs: theory versus practice
- Suspense hydration in React
- The Benefits of Server Side Rendering Over Client Sisi Rendering
- Kasus Hidrasi Parsial (Dengan Berikutnya dan Pra -preact)
- Masa Depan (dan Masa Lalu) dari Web adalah sisi server
- yang memberikan pemahaman progresif
pemahaman rendering dalam - pola rendering web
- jamstack
- apa itu hidrasi parsial dan mengapa semua orang membicarakannya?
- Mengapa hidrasi yang efisien dalam kerangka kerja JavaScript begitu menantang
mendukung
- semua yang Anda ketahui tentang latensi adalah
browser
yang salah - ? Pengantar rendering browser
- ? Kontrol cache
- ? Cache Font, Gambar & Halaman Anda - Membongkar kotak kerja
- ? Jalur Rendering Kritis - Kursus Kecelakaan pada Kinerja Web
- ? Memberikan 60 fps di browser
- ? Memberikan 60 fps di browser
- ? Lurus "Kepala" Anda
- ? Keluar dari cara pengguna: Kurang jank dengan pekerja web
- ? Bagaimana kami menggunakan WebAssembly untuk mempercepat aplikasi web kami sebesar 20x (studi kasus)
- ? Di loop - setTimeout, tugas mikro, requestanimationframe, requestIdlecallback
- ? Mengoptimalkan jalur rendering kritis untuk situs web seluler instan
- ? Menjadwalkan dan keluar dari utas utama
- ? Utas utama terlalu banyak bekerja & dibayar rendah
- ? Ada proxy sisi klien (Serviceworker) di browser Anda
- ? WebAssembly sebagai arsitektur lintas-platform
- 60 fps pada web seluler
- yang dipercepat render dalam chrome
- accelerating javascript (di browser)
- adaptif
yang melayani menggunakan - javascript
- dan API Informasi Jaringan
Tambahkan - Prioritas
- Petunjuk
- Pekerjaan
- Non
- Browser Preload Scanner
- Dynamic Page Content with CloudFlare Workers
- Fast is Good, Instan lebih baik!
- Memperbaiki tata letak meronta -ronta di dunia nyata | Matt Andrews
- Frontend Web Performance: The Essentials 0
- Frontend Web Performance: The Essentials 1
- Mengetahui Profiler Kinerja Browser Anda
- Bagaimana JavaScript Bekerja: Perbandingan dengan WebAssembly + Mengapa dalam kasus -kasus tertentu lebih baik menggunakannya melalui JavaScript
- How To JavaScript: JavaScript: JAVE DIVE KEPADA WEBSKETS DAN HTTP/2 Dengan SSE + Bagaimana cara kerja JavaScript: The Rights Dive ke Websockets dan HTTP/2 dengan SSE + Cara Pilihan JavaScript
- : The Deep Dives dan http/2 dengan sse + cara kerja yougcrcrcr: Gunakan mereka
- bagaimana browser membuat halaman web? — DOM, CSSOM, and Rendering
- How to eliminate render blocking resources
- How we cut 99% of our JavaScript with Qwik + Partytown
- Improving Paint Metrics by Removing Unused Preloads
- Introducing Partytown ?: Run Third-Party Scripts From a Web Worker
- JavaScript DOM Manipulation Performance
- JavaScript performance beyond bundle size
- Minimizing browser reflow | PageSpeed Insights | Pengembang Google
Catatan - Arsitektur Browser Multi-Proses Modern
- Tentang Cara Browser
- Catatan Bekerja Pada Catatan Penerjemah JavaScript
- tentang Profiling Memori JavaScript di Google Chrome
- Sekarang itulah yang saya sebut pekerja layanan!
- Mengoptimalkan konten web di uiwebviews dan situs web di
- halaman iOS prerender di chrome untuk navigasi halaman instan
- mencegah 'tata letak tata letak' | WILSON Page
- Profiling & Mengoptimalkan Kinerja Runtime dengan Tab Kinerja DevTools
- Proxying Cloudinary Image Permintaan dengan CloudFlare Workers
- Reflows & Pecara ulang: Kinerja CSS Membuat JavaScript Anda Lambat?
- Rendering: mengecat ulang, reflow/relayout, restyle/stoyan
- rendering: mengecat ulang, reflow/relayout, restyle
- gulir kinerja
- pengaturan pekerja cloudflare untuk optimasi kinerja web dan menguji
- muatan html yang lebih kecil dengan pekerja layanan
- sehingga Anda mendengar tentang gaya klien dan Anda pikir Anda punya waktu, bukan?
Pemahaman - yang salah
- reflow dan mengecat ulang di browser
- menggunakan pekerja web untuk menjalankan JavaScript dari utas utama browser
- menggunakan pekerja CloudFlare untuk menyambungkan CSS eksternal yang
- kami habiskan seminggu membuat papan trello memuat sangat cepat. Begini cara kami melakukannya. - Fog Creek Blog
- Web Browser Rekayasa
- Pekerja Web
- Webkit Arsitektur
- Apa yang memaksa tata letak / reflow
- Apa yang membuat web lambat? Hambatan Browser
- Kapan Anda harus menggunakan pekerja web?
- WilsonPage / Fastdom
Service Workers / Workers
- ? Meningkatkan kinerja situs Anda dengan Partytown
- ? Mempercepat situs Anda dengan pekerja
- resep pekerja cloudflare untuk pengujian kinerja frontend
- keluar dari utas utama dengan pekerja web inline: contoh
- bagaimana partytown menghilangkan situs web yang kembung dari skrip pihak ketiga
- yang diperkenalkan ke workbox dan pekerja layanan
- yang membuat Web yang lebih cepat dengan
- pekerja layanan Cloudflare untuk Cloudflare Works
- Cachox
- .
- ?
Mesin Rendering
- ? Mesin JavaScript: Bagian yang bagus
- ? Life of a Pixel
- ? Rendering kinerja dalam
- renderingng: mesin rendering baru chrome
- seluruh web pada fps maksimum: bagaimana webrender menyingkirkan jank
- mengapa pengembang web perlu peduli tentang interaktivitas
membangun alat
- webpack guncangan
- menggunakan modul javascript asli javascript pada hari ini
- , dan persiapan for-plascrips for-plaspict for-plaspicl for a for-plasclices for a forvascrips for publical for aver-playscrips for a forvascrips for a for-plastion for
- a
- for
- -
- plasclices Dibangun dengan
- Tips Optimasi Webpack Metro 13 Anda harus tahu
- menemukan dan memperbaiki duplikat di Webpack dengan Inspectpack
- Cara Meningkatkan Kinerja Webpack Kinerja
- WebPerformance dan Kompresi
- Tetap Cepat: Panduan Lapangan Untuk Membangun Kinerja yang Lebih Baik Kinerja
- Libs Optimizations
- Awesome Webpack Perf
Cache & Memoisasi
Love Your Cache: Optimalkan untuk Karier Karir
- : Papan Pekerjaan untuk Penggemar Kinerja Web
- Engineer Perangkat Lunak Stack di Mozilla Corp
- Senior Performance Software Engineer di Mozilla Corp
- Web Performance Engineer (W/M/D) - Remote atau Hamburg di Bagend
- Software Engineer (L4) - Rendering UI & Kinerja di Netflix
Case Studies
- ? Membangun kinerja untuk jangka panjang
- ? Inti Vital Web: Teori dan Praktek
- ? Pelajaran yang dipetik dari pemantauan kinerja di Chrome
- ? Mengoptimalkan popup pratinjau
- ? Pendaftaran Kinerja di Aplikasi React & Transactional dengan Redux
- ? Beberapa komponen rendering: Kinerja klien pada skala slack
- 300ms lebih cepat: Mengurangi total waktu pemblokiran Wikipedia
- Studi kasus kinerja web Netflix
- Pinterest Progressive Web Kinerja Studi Kasus Kasus
- Tinder PWA Performance Studies Kasus
- Agrofi: A A -LEBIH KUALITAS AKURED LOVIDIA KUALITAS AKEI LOVIDIA AKURE LOVIDIA KONFELASI AKUPRIVE DALAM PUTAL AREKI LOVIDIA
LEBODIA: - A ECANDIA LOKIVE LOVIDIA
- LOVIDIA LOVIDIA LOVIDIA LOVIDIA: faster YouTube on web
- Case Study Renault Group
- Case study: Analyzing Notion app performance
- Case study: analyzing the Walmart site performance
- Crafting a high-performance TV user interface using React
- Economic Times quest for fixing INP
- Enhancing The New York Times Web Performance with React 18
- From Development to Real Users: How to Create a Web Performance Story
- Gantry: Slack's Fast-booting Frontend Framework
- How Carpe achieved record-breaking sales by focusing on performance optimization
- How CLS optimisasi meningkatkan Yahoo! Tampilan Halaman Japan News per sesi sebesar 15%
- Bagaimana Mercado Libre Dioptimalkan untuk Web Vitals (TBT/FID)
- Bagaimana platform manajemen persetujuan PubTech mengurangi INP di situs web pelanggan mereka hingga 64%, sementara juga meningkatkan virilitas iklan hingga 1,5%.
- Persamaan. 3 KONVESI KONVERSI KONVERSI DAN Halaman VITIONE Per Sesi dengan Meningkatkan Kinerja Halaman
- Hingga% Persamaan Investasi 2.3 Daerah Web. 33.13%
- Bagaimana Redbus meningkatkan interaksi situs web mereka menjadi cat berikutnya (INP) dan meningkatkan penjualan sebesar 7%
- bagaimana
- warga Minggu meningkatkan konversi dengan memfokuskan kinerja
- bagaimana meyakinkan klien Anda untuk fokus pada kinerja web: studi kasus
bagaimana kami - berkurangnya waktu dan mencapai waktu yang lebih baik
- dengan 70%.
- 98 Skor Mercusuar
- Bagaimana Wix Meningkatkan TTFB dengan 103 Petunjuk Awal
- Hughesnet vs Tesla: Studi kasus dalam data lapangan vs data lab
- meningkatkan pengalaman pengguna! Bagaimana Kami Mengelola Inti Web Vitals di Yahoo! Situs Web Berita Jepang
- Meningkatkan Kinerja Bundel JavaScript Dengan Kode-Memperbaiki
- Kinerja Web Smashing Smashing Majalah:
- Perjalanan studi kasus untuk meningkatkan kinerja aplikasi React dengan 10x
- membuat beranda baru GitHub dengan cepat dan performant
- membuat
instagram.com - membuat
lebih - cepat
- : ukuran kode dan pelaksanaan 6)
- . Peningkatan dalam LCP dengan mengoptimalkan vital web inti
- Nikkei mencapai tingkat kualitas dan kinerja baru dengan
- muatan halaman dan navigasi PWA Navigation Multi -Page Multi -Page hanya
- mengoptimalkan vital web inti pada
aplikasi Web - yang
- mengoptimalkan
- kinerja apa pun
- yang mengoptimalkan kinerja
- .
- Halaman daftar Airbnb
- REI: FCP dan LCP Perbaikan
- Kecepatan Penting, tetapi tidak semuanya
- Spotify
- Kinerja Profil
- Dampak Kinerja Web
- Jalan menuju Kinerja Produk Hebat: Langkah Pertama
- Treebo
: Studi Kinerja Kinerja - PWA
- Bereaksi
- Twitter Lite dan Kinerja Tinggi Performa Progresif dari Kinerja
- Web.
- Deteksi Regresi Kinerja Web (Bagian 3 dari 3)
- Zillow: lebih besar, lebih cepat, dan lebih menarik saat pada anggaran
komunitas
- Planet Perfromance Komunitas
- Web Kinerja Slack Kinerja
- Web Kinerja Buku Kerja
Buku
- Hand-on JavaScript Kinerja Tinggi Kinerja
- Tinggi Kinerja Browser Networking
- Kinerja
Kinerja - Tinggi
- Kinerja Web Web
- Kinerja Web Responsive Design
- HTTP/2 Dalam tindakan
- gambar
- JPEG JPEG Series
- Kinerja Web
- Modern
MEPORNER POUSTER - POULTERSIF
- Tinggi
.- WebPageTest
- Web Browser Engineering
- Web Performance in Action
Blogs
- TK
- Harry Roberts
- Alex Russell
- Smashing Magazine - Performance
- Fershad Irani
- Modern DevTools
- Eugenia Zigisova
- Ivan Akulov
- Perf perf perf
- Barry Pollard
- Simon Hearne
- Medhat Dawoud
Conferences & Meetups
- Conffab - Performance
- New York Web Performance Group
- Perf Now Conf
Courses
- ?? Web Kinerja I: Otimizando O Front-end
- ?? Kinerja Web II: Jalur Kritis, HTTP/2 E Petunjuk Sumber Daya
- ?? Bereaksi: Otimizando A Performance
- Browser Rendering Optimization
- JavaScript dan Dom
- Modern Devtools
- Mengatur Devtools Untuk Pengujian Kinerja
- The React Performance Masterclass
- Web Performance
- Masterclass Website
- Optimalisasi Website
Podcast Podcast Podcast Podcast
- Podcast Podcast
Podcast Podcast - Podcast
- Podcast
- Kinerja
- Planet
Kinerja Web
- ? Tanyakan apa saja - inti vital web
- ? Menguraikan INP dan inti Web Vitals
- ? Menjelajahi masa depan vital web inti
- ? Wawasan tentang Vital Web Inti dari Tim Platform Chrome
- ? Pelajaran yang dipetik dari pemantauan kinerja di Chrome (Slide)
- ? Mengukur Inti Web Vitals
- ? Mengoptimalkan vital web inti
- ? Mengoptimalkan vital web inti
- ? Dampak bisnis vital web inti
- ? Kinerja situs web dan vital web inti
- ? Apa yang Baru Dalam Web Vitals
- Sebuah alur kerja yang berfokus pada kinerja berdasarkan Google Tools
- Panduan mendalam untuk mengukur vital web inti
yang menganalisis vital web dengan - praktik terbaik
- webpagetest
untuk mengukur vital web - dalam
- dampak bisnis dari Web
- Vital Vitals
- Web Vitals
- Web Vitals Web Vitals
- yang Berlaku Web Vital. Tool)
- Pelacakan Vital Web Core melalui GA4, BigQuery dan Google Data Studio
- CSS untuk Web Vitals
- CWV akan menjadi faktor peringkat desktop pada bulan Februari 2022
- Debug Vitals Web di lapangan
- yang mendefinisikan time Web Vitals Web VITAL Metrik Ambang
- Timing Timing: Satu metrik sejati untuk mengatur semuanya?
- Mengevaluasi pengalaman halaman untuk web yang lebih baik
- semua yang kita ketahui tentang inti vital web dan SEO
- semua yang kita ketahui tentang inti vital web dan seo
- lebih cepat memuat halaman menggunakan pemikiran server dengan
- umpan balik awal yang diinginkan: metrik respon respon eksperimental
- dengan metrik respons baru
- memiliki vital web inti membuat web lebih cepat?
- Bagaimana arsitektur spa mempengaruhi vital web inti
- cara membuat dasbor analisis kompetitif untuk vital web inti menggunakan studio data google
- bagaimana
- cara mendapatkan vital web inti halaman Anda dari crux API
- cara meningkatkan vital web inti
- cara meningkatkan
- vital inti inti
vitals - cara mengukur
detail - crux crux level-level
- yang lebih banyak. Pengalaman Halaman Perbarui
- Lebih Banyak Waktu, Alat, dan Detail pada Halaman Pengalaman Pembaruan
- Mengoptimalkan Vital Web Inti pada Spa
- Mengoptimalkan Vital Web Menggunakan Mercusuar
- Rekomendasi Vital Web Inti Top kami untuk 2023
- Kirim
- umpan
- balik ke tim vital web inti Google
- yang mensimulasikan pengguna nyata di laboratorium untuk debug cls masalah
- web
- yang
- lebih baik
- .
- Pola
- Web Vitals Pola
- Apa yang berlaku untuk membuat metrik vital web baru
- mengapa data lab dan lapangan bisa berbeda (dan apa yang harus dilakukan tentang hal itu)
pergeseran tata letak kumulatif (CLS)
- ? Memahami pergeseran tata letak kumulatif
- CLS di BuzzFeed - Bagian 1: Mengangkat Lantai
- CLS di BuzzFeed - Bagian 2: Mendapatkan bantuan dari pengguna nyata
CLS di - BuzzFeed - Bagian 3: Berurusan dengan perubahan tata letak
- kumulatif
- yang
- tidak
- dapat
- diprediksi
- . Ketidakstabilan
- Tata Letak Debug Pergeseran
- Debugging CLS
- Menyelam ke dalam tata letak kumulatif baru pergeseran
- yang mengembangkan metrik CLS
- bagaimana saya menghapus pergeseran tata letak situs web menggunakan skrip predeploy
- cara memperbaiki pergeseran tata letak kumulatif (CLS)
- masalah cara memperbaiki
- pergeseran tata letak kumulatif
( - CLS
- ).
- SCROLLBAR-Gutter CSS Properti
- Panduan yang hampir lengkap untuk tata letak kumulatif menggeser
cat konten terbesar (LCP)
- ? Bagaimana cara memperbaiki cat konten terbesar
- ? Bagaimana cara meningkatkan cat konten terbesar untuk pengalaman halaman yang lebih baik
- ? Investigasi LCP: Cat konten terbesar
- ? Ini adalah LCP Anda tentang
- Studi Kasus Gambar Vodafone: Peningkatan 31% dalam LCP meningkatkan penjualan sebesar 8%
- prioritas LCP dinamis: Belajar dari kunjungan masa lalu
- bagaimana mengoptimalkan cat konten terbesar (LCP) pada sisi klien
- meningkatkan cat konten terbesar yang mengoptimalkan pengoptimalan konten terbesar yang mengoptimalkan konten terbesar konten -konten terbesar konten
- terbesar konten terbesar konten terbesar konten terbesar konten terbesar konten terbesar konten terbesar konten terbesar konten terbesar konten terbesar konten terbesar konten terbesar
- konten
- terbesar konten terbesar konten terbesar konten terbesar konten konten
- terbesar konten terbesar konten terbesar konten terbesar konten
- terbesar konten terbesar konten terbesar API
- Prioritas Petunjuk dan Mengoptimalkan
- Tip LCP - Gunakan fetchpriority = tinggi untuk memuat gambar pahlawan LCP Anda lebih cepat
- memahami bagaimana browser mengidentifikasi elemen LCP
- Apa yang dapat dikatakan oleh arsip http tentang cat konten terbesar?
First Input Delay (FID)
- First Input Delay (FID)
- Idle sampai mendesak
- meningkatkan responsif dalam
interaksi input teks ke cat berikutnya (INP)
- ? Meruntuhkan tugas yang panjang
- ? Debugging INP
- ? Menggali interaksi ke cat berikutnya
- ? Menggali interaksi ke cat berikutnya
- ? Bagaimana cara meningkatkan interaksi ke cat berikutnya (INP)
- ? Bagaimana cara mengoptimalkan respons web dengan interaksi terhadap cat berikutnya
- ? Interaksi untuk cat berikutnya dan vital web lainnya [Blinkon 16]
- ? Interaksi ke Next Paint Terungkap: 5 Kebenaran Yang Akan Mempercepat Situs Anda
- ? Interaksi ke cat berikutnya
- ? Wawasan Lapangan Baru untuk Debugging INP
- ? Mengoptimalkan INP: menyelam dalam
- ? Keadaan responsif di web
- ? Memahami dan Mengoptimalkan Interaksi ke Next Paint (INP)
7 Cara untuk meminimalkan - analisis
- kerja utas utama
dari - kinerja INP
menggunakan data rumvisi dunia nyata - menghindari tata letak yang besar dan kompleks dan meronta-ronta yang
- memecah tugas-tugas panjang
- rendering-side-vyping
- slows dan interaktivitas interaksi yang
- diinteraksi dengan Interaction
- . LoAF + INP breakdown
- How do modern frameworks perform on the new INP metric
- How large DOM sizes affect interactivity, and what you can do about it
- How To Improve INP: Yield Patterns
- How to Improve Interaction to Next Paint (INP)
- How to solve Interaction to Next Paint (INP) issues
- Improving INP with React 18 and Suspense
- Interaction to Next Paint (INP)
- Interaction to Next Paint by kev
- Manually diagnose slow interactions in the lab
- Measure And Optimize Interaction to
Performa INP Mobile - Paint (INP) Selanjutnya
- : Gajah di ruangan
- mengoptimalkan interaksi untuk cat berikutnya
- mengoptimalkan tugas-tugas panjang
- yang
- mempersiapkan
- interaksi ke cat berikutnya, inti web baru vital
- mengurangi ruang lingkup dan kompleksitas perhitungan gaya
- mengurangi ruang lingkup dan kompleksitas
yang - tidak ada yang tidak ada dalam hal ini.
- Perjuangan untuk utas utama
- menggunakan pekerja web untuk menjalankan JavaScript dari panduan pakar kinerja web utas utama browser
- untuk menguasai interaksi ke cat
waktu pemblokiran total waktu
- pemblokiran total waktu: panduan pendek dan manis untuk pengguna yang lebih bahagia
CSS
- Airbnb perjalanan ke tajuk linaria
- yang melarang CSS @Property
- CSS-in-Js-JS-Wind-In-tanya: CSS @Property CSS-in-Js-JS-WIND-In-tound-in-in-in-in-in-in-incals-in-incals-in-incals-in-in-in-in-in-in-in-in-in-in-in-in-in-in-in-in-in-in-in-in-in-incals-in-in-in-in-in-in-in-in-in-in-in-in-in-in-in
- -in-@property-
- in CSS
- Memuat CSS-Performa Cheatsheet
- Kinerja Perbandingan Perpustakaan CSS-In-JS
- PurgecsS
- CSS Dunia Nyata vs Perbandingan Kinerja CSS-In-JS
- Mengurangi Ukuran Bundel melalui Kinerja Class Can-in Can-In Can-In Can-In Can-In
- Can
- -
- In
dengan
Kinerja
- . Font Squirrel
- ? Glyphhanger
- ? Google Fonts
- ? Variabel font
umum
- ? Kesalahan umum yang menurunkan kinerja frontend
- ? Menyelam secara mendalam ke kinerja pihak ketiga
- ? Demystifying Speed Tooling
- ? Trik kinerja frontend yang fantastis & mengapa kami melakukannya
- ? Dari pemuatan cepat ke pemuatan instan
- ? Meningkatkan kinerja halaman di aplikasi web modern
- ? Meningkatkan kinerja halaman di aplikasi web modern
- ? Desain inklusif cepat secara default
- ? Kinerja web tingkat berikutnya
- ? Kecepatan Essentials: Teknik utama untuk situs web cepat
- ? State of Web Performance Agustus 2022
- ? Masa depan yang cerah dari kinerja web
- ? Jalan menuju kinerja
- ? Psikologi kecepatan
- ? Berat javascript besar yang tak tertahankan
- ? Jebakan kinerja 10 teratas
- ? Optimalisasi kinerja web untuk kondisi yang keras
- ? Webbundles - Pengiriman JS tanpa pengorbanan
- ? Kapan JavaScript Bytes
- ? Kapan JavaScript Bytes
- ? Mengapa Kinerja Sulit dalam Skala
- 3perf Memandu
- 5 Kesalahan Umum yang Dibuat Tim saat melacak kinerja
- model kematangan manajemen untuk kinerja
- matriks kematangan kinerja
- Teori kinerja web terpadu
- model mental html-first
- adalah tugas panjang javascript Anda yang membuat pengguna frustasi?
- Praktik Terbaik untuk Tag dan Manajer Tag
- Membangun Dom Lebih Faster: Parsing Spekulatif, Async, Defer dan Preload
- Membangun Dom Faster
- Chrome's Flashing
- Definisi Pengalaman Terminologi Web
- . Web. kerangka kerja. masa depan. Saya.
- Waktu pemuatan cepat
- waktu memuat cepat
- memperbaiki regresi kinerja sebelum terjadi
- grafik api
- dari pengembangan hingga pengguna nyata: Cara membuat Kinerja Web Kinerja Kinerja
- Front-End Periksa Kinerja 2021
- Gantry: Kerangka Kerja Frontend Slack-Fast-Booting Low Over
- Kinerja Kinerja
- Low-Hieve
Louding Intrime - Louding Web dalam Kinerja Web dalam Kinerja Kinerja Peningkatan Kinerja Low-Hibits
- Kinerja
- Peningkatan
- Kinerja
- Low
- -Hieve Louding Intrime Louding Intrime Intrey Lines
- Intre. Anda tidak perlu Rust dan Wasm untuk mempercepat JS Anda
- yang memantau metrik Vital (kinerja) inti Anda,
- tantangan
- saya terhadap komunitas kinerja web
- mengoptimalkan ukuran bundel spa untuk mempercepat pemuatan aplikasi
- yang
mengoptimalkan - pemuatan
- skrip pihak ketiga yang
- mengoptimalkan
- kinerja Web-web
- yang harus
- dilakukan dengan terlalu banyak.
- Kinerja
- Panduan Ultimate untuk Mengoptimalkan JavaScript Untuk Halaman Cepat Memuat
- Mengapa Optimalisasi Situs Web: Pencarian yang Lebih Baik Peringkat
- Mengapa Optimalisasi Situs Web: Pengalaman Pengguna yang Lebih Baik
- Mengapa Optimalisasi Situs Web: Bantu Planet
- Mengapa Optimalisasi Situs Web: Meningkatkan Konversi Situs dan
- Pengoptimalan Situs Web: Mengurangi Biaya Operasional
- 5 Rekomendasi Kinerja Teratas
- Web Perf 101
- Web Performance: Tren dan Inlights dari 4 Expers Kinerja Top
- Kinerja Matters Top.
- Mengapa JavaScript yang di-cache Anda masih lambat dan menimbulkan overhead kinerja
mengapa penting
- bagaimana mengukur konsumsi energi dari aplikasi frontend Anda
- yang menghubungkan kecepatan situs dan metrik bisnis
- apa itu kecepatan situs dan mengapa saya harus peduli?
Mengapa Repositori Gambar
- Untuk Mengumpulkan Praktik Terbaik Untuk Gambar Web
- ? Pembaruan Webp
- ? Waktu pemuatan yang lebih cepat dengan gambar Avif | Bengkel
- ? Kompresi gambar dive dalam
- ? Optimalisasi Gambar | Performance.now () 2018
- ? Gambar meledak pada kecepatan Jamstack
- ? JPEG 'File' & Color (JPEG PT1)
- ? JPEG DCT, transformasi kosinus diskrit (JPEG PT2)
- ? JPEG XL: Pembaruan
- ? Gambar sempurna
- ? Gambar responsif untuk web
- ? Format gambar AVIF
- ? Webp, Avif & Lainnya: Statistik Adopsi Gambar
- Dapatkah Saya Menggunakan Avif
- Dapatkah Saya Menggunakan JPEG-XL
- Dapatkah Saya Menggunakan Webp
- Gambar Perfect Gambar dengan Elemen
<img> - Mengurangi Ukuran Gambar Dengan Menghapus Metadata
- Responsif Images Dilakukan Benar: Panduan untuk Dan srcset
- Panduan Ultimate untuk Optimalisasi Gambar
- Apa yang sebenarnya dilakukan oleh atribut Decoding Image?
Alat gambar
- ? Cloudinary
- ? Compress-or-Die
- ? ImageOptim
- ? Optimage
- ? Skuoosh
- ?
Infrastruktur
- ? Kinerja Seluler dari Radio UP: Arsitektur 4G dan Implikasinya
- Cloud Computing Without Containers
- Content Delivery Networks (CDNS)
JavaScript
- ? Multicore JavaScript: Tips Masa Lalu, Sekarang, dan Masa Depan
untuk Menulis - Tip Optimasi
- JavaScript yang lebih cepat dan lebih baik
untuk diketahui pada tahun 2021 - Bagaimana cara kerja JavaScript: Tinjauan Umum Mesin, Runtime, dan Call Stack
How JavaScript Berjalan - :
- Acara Loop dan Bangkitnya Async Programming + 5 Ways To Ways Incript Better CODSNCE/BEBERKA.
- Kiat tentang Cara Menulis Kode yang Dioptimalkan
- Bagaimana JavaScript Kerja: Manajemen Memori + Cara Menangani 4
- Teknik Optimasi Kompiler JavaScript Kompiler - Hanya untuk para ahli
yang mengukur kinerja
- ? Menganalisis dan meningkatkan kinerja web menggunakan DevTools & WebPagetest
- ? Membuat alat peringatan kinerja
- ? Dari milidetik hingga jutaan: Angka yang mendorong Web Perf
- ? Bagaimana cara memahami metrik kinerja pengguna nyata (rum)
- ? Bagaimana UX di web, sungguh?
- ? Mari kita ubah analisis data pengguna nyata menjadi sains
- ? Mengukur kinerja dengan SpeedCurve & WPT
- ? Mengukur kinerja pengguna nyata di browser
- ? Observabilitas untuk Web Perf
- ? Satu angka, beberapa metrik
- ? Profil kinerja dengan Harry Roberts
- ? Kinerja Web mengaudit
- panduan langkah demi langkah untuk memantau persaingan dengan laporan Chrome UX
- Pengantar Rum Archive
- Analyze Runtime Performance
- Benchmarking, Profil, dan Mengoptimalkan Pustaka JavaScript
- Panduan Lengkap untuk Memahami dan Mengukur Kinerja Situs Web Anda
- Core Web Vitals Dashboard Di Google Analytics
- Membuat Kinerja Halaman Airbnb Anda Untuk mendapatkan cepat, tetap cepat, bagaimana cara Monitor React Render di Google Analytics yang membuat Airbnb Kinerja Halaman Anda
Dapatkan cepat - , tetap cepat: Bagaimana cara Monitor React Renders
- .
- How to read a WebPageTest Connection View chart
- How to read a WebPageTest Waterfall View chart
- How To Use Google CrUX To Analyze And Compare The Performance Of JS Frameworks
- Identifying, Auditing, and Discussing Third Parties
- Introducing RAIL: A User-Centric Model For Performance
- Make sense of flame charts in Performance Tab by example
- Measure What You Impact, Not What You Influence
- Measuring the performance of Wikipedia visitors' devices
- Measuring web performance, How fast is fast?
- Audit Kinerja Saya Audit Alur Kerja
- Noise Membatalkan Rum
- Bereaksi Waktu Respons Optimasi Profil Kinerja
- : 3 Batas Penting
- Menunjukkan Saya Uang: Membenarkan Peningkatan Kinerja Menggunakan Google Analytics
- Start Kinerja Tes Kinerja Browser Anda Alamat Browser Anda
- Menguji Kinerja Situs
- Pengujian Halaman Web dengan Web-track Insigning
- Insigu Long-track
Corsing - Tentara Knoning Knive Knee Rum Archive dan Benford's Law's
- Engineer Kinerja Web Kinerja Kinerja Web CARCUS TARIE DARI
- TAUTY CRARTEER CRETSEER Rum Archive dan Benford's Law's Engineer
- Kinerja Web Skor Vitals
- memvisualisasikan sumber daya Anda dengan
- Kalender Kinerja Web TreeMap Alat Gratis Bertemu Rum
- Mengapa data inti berbeda dari data rum saya?
- Wikipedia Worldwide Web:
Performa Runtime
Benchmark CPU - ? Pengujian Kinerja Menggunakan Playwright
- ? Kumpulan alat kinerja
devtools
- ? Chrome DevTools: Tab Performance
- ? Menjelajahi kinerja frontend situs web National Rail dengan Chrome Devtools
- ? Meningkatkan kinerja halaman dengan chrome devtools
- ? Membuat gambar malas dengan chrome devtools
- ? Manajemen Memori Masterclass
- ? Menjalankan profil kinerja di kotak pencarian youtube
- ? Memahami kinerja cat dengan chrome devtools
- panduan komprehensif untuk analisis kinerja javascript menggunakan chrome devtools
- cpu flame graphs
- network throttling di chrome devtools
bagaimana cara metrik
- visualisasi data yang lebih cepat
- bagaimana cara metrik
- cara membaca rum histogram
- sintetis vs pemantauan pengguna nyata
- apa itu pemantauan pengguna nyata? Rum menjelaskan
tolok ukur
- ? Petualangan di Microbenchmarking
- ? Bereaksi-Benchmark
- ? Tachometer
- ? Tinybench
Measure Tools
- Resep kinerja web dengan dalang
- ? Boomerang
- ? Perfsee: Satu set alat untuk mengukur dan men -debug kinerja aplikasi frontend
- ? speedscope
- ? Treo
Memory Management
Kursus kecelakaan dalam eksperimen manajemen memori dengan anggaran kinerja
- ? Inti Vitals Web - Ukur Apa yang Penting
- ? Biaya
- alat flashing cat JavaScript Chrome
- yang mengoperasionalkan kinerja dengan anggaran kinerja
- mengoptimalkan
- anggaran kinerja startup 101
- anggaran kinerja,
- desain yang secara pragmatis responsif pada anggaran
- penetapan
- anggaran
- kinerja
- mulai
- anggaran
kinerja
- . Kalori browser
- ? Kalkulator Anggaran Kinerja
- ?
Prefetching
- kalkulator anggaran kinerja
- ? Seni prediktif prefetch
<link rel=”prefetch/preload”> di halaman web- instan dan pemuatan halaman yang konsisten melalui
- preload prerendering, prefetch dan prioritas di chrome
- mempercepat navigasi halaman berikutnya dengan prefetching
- webpack prefetching/preloading modul
- ?
Alat prefetching
- ? Lebih cepat load halaman berikutnya dengan prefetching tautan in-viewport selama waktu idle
kerangka kerja web
bereaksi
- ? Dom sebagai warga negara kelas dua
- ? Bereaksi 18 concurrency, dijelaskan
- ? React Performance Debugging MasterClass
- 21 Teknik Optimasi Kinerja untuk Aplikasi Bereaksi
- Kematian oleh Seribu UseCallbacks
- Bagaimana reaksi 18 bekerja di dalam?
- How to write performant React apps with Context
- How to write performant React code: rules, patterns, do's and don'ts
- How to write performant React code: rules, patterns, do's and don'ts
- Improved Next.js and Gatsby page load performance with granular chunking
- Mobile Performance of Next.js Sites
- New Suspense SSR Architecture in React 18
- Next.js Performance: Making a Fast Framework Even Faster
- Optimize Data Fetching
- Optimizing third-party script loading in Next.js
- Progresif React
- React Concurrency, jelas
- react hook dan tips untuk menghindari render komponen yang tidak berguna yang diterapkan pada daftar
- Performa React-13 cara untuk mengoptimalkan kinerja aplikasi React Anda
- meyakinkan: pendamping pengujian kinerja untuk react
- SSR, streaming, dan css-in-js
- yang memperbarui React di Etsy
- Advanced React
- ? Eslint-plugin-react-Perf
React Rendering
- ? Intro kartun ke serat
- ? Mengambil data dengan komponen server React
- ? Menyelam dalam secara bersamaan bereaksi
- ? Inside Fiber: Tinjauan mendalam yang Anda inginkan
- ? React Fiber Deep Dive
- Penjelasan mendalam tentang keadaan dan props pembaruan dalam reaksi
- di dalam serat: Tinjauan mendalam tentang algoritma rekonsiliasi baru dalam React
- mempelajari algoritma rekonsiliasi React dengan pengukuran kinerja
- yang bereaksi: bagaimana menghindari rekan-render yang redundan
- reaksi reaksi ulang Anda: semuanya, semuanya sekaligus
- react rending
- server dan klien
- yang mengoptimalkan renderal-render.
- Signal Boosting
- The future of rendering in React
- Why React Re-Renders
Measuring React
- ? How to use the React Profiler to find and fix Performance Problems
- ? Profiling React Apps like a Pro
- ? React Performance with React Dev Tools
- Get Fast, Stay Fast: How To Monitor React Render Performance
- Measuring JS code performance. Part I: using react-benchmark
- Measuring JS code performance. Part II: interaction speed
- Measuring React app performance
- Performance Profiling a Redux App
- Profiling & Optimizing the runtime performance with the DevTools Performance tab
- Profiling React.js Performance
Sustainability
- Core Web Vitals meets sustainability
- How Improving Website Performance Can Help Save The Planet
- Web Performance + Ecological Impact
- Website performance and the planet
Tweets
- Another reason for not declaring React components inside other components
- Blank page with an embedded tweet. How bad can it be?
- Check out the new Priority Hints
- ChromeDevTools Long Tasks
- Compile Code — Profiling
- CSS Selector Performance
- Frontend performance tips to keep top of mind
- Google Search Console warning the INP
- How can I optimize my frontend for the fastest page load times?
- How I typically test performance
- How Wix improved TTFB with 103 Early Hints
- Image performance cheatsheet
- img fetchpriority="high": LCP improvement of ~150ms
- Investigating Core Web Vital issues
- mobile performance for sites built with Next.js
- Optimize head and body separately
- Optimizing LCP
- Performance Insights by Builder.io
- React 18 Concurrency, Explained
- React 18 Concurrency
- React Perf: Causal Case Study
- React Time Slicing
- Signals — Reactivity + UI
- Spotify Performance Profiling
- The difference between "On Load" and "Document Complete" in WebPageTest
- The most important problems in Web Perf
- Things I found in a slow React website today
- Tool: quantify what will make a real difference
- Use Map over object
- useCallback and useMemo: no perf effect
- Video Compression
- Web Performance at Slack
- React & Redux performance at Slack
- Performance Budget
UX
- ? Adaptive Loading - Improving web performance on slow devices
- ? Building The Web
- ? Design Principles For The Web
- ? Measuring User Perceived Performance to Prioritize Product Work
- ? Perceived Performance: The only kind that really matters
- ? Stephanie Walter on Cheating The UX When There Is Nothing More To Optimize
- ? The Layers of the Web
- A Bone to Pick with Skeleton Screens
- A Designer's Guide to Perceived Performance
- An experimental responsiveness metric
- Designing for Performance
- Hands On with the new Responsiveness Metrics
- How Much Faster is Fast Enough? User Perception of Latency & Latency Improvements in Direct and Indirect Touch
- How to Improve Perceived Performance in Mobile Apps
- Improving Perceived Performance
- Optimistic UI Patterns for Improved Perceived Performance
- Performance Design: Designing for the illusion of speed
- Performance perception: Correlation to RUM metrics
- Performance perception: How satisfied are Wikipedia users?
- Performance perception: The effect of late-loading banners
- Resilient web design
- The Art of UI Skeletons
- Towards an animation smoothness metric
- True Lies Of Optimistic User Interfaces
Web APIs
- Every Transition is a Page Transition?
- Speed Up Resource Loading with Priority Hints and fetchpriority
- Tracking CPU with Long Tasks API
- Web Performance APIs Appreciation Post
License
MIT © TK
