Pola aplikasi web
Kumpulan pola umum untuk membangun aplikasi web.
- Total Waktu Pemblokiran (TBT)
- Cara paling efektif untuk meningkatkan Core Web Vitals
- Memulai pengukuran Data Web
- Web Vitals
- Mengoptimalkan Largest Contentful Paint
- Membandingkan kemampuan LLM dengan ringkasan
- Properti visibilitas konten CSS kini tersedia di Dasar Pengukuran
- Cara menentukan nilai minimum metrik Core Web Vitals
- Diagnosis interaksi lambat di lab secara manual
- Alur kerja Data Web Inti dengan alat Google
- Dasar pengukuran
- Back-forward cache
- CSS nesting ditingkatkan dengan CSSNestedDeclarations
- First Input Delay (FID)
- Men-debug performa dalam kolom
- Meningkatkan performa dan UX untuk AI sisi klien
- Membuat tolok ukur performa @property CSS
- Menghubungkan Core Web Vitals dan pendapatan iklan dengan alat Google
- Saatnya memuat lambat iframe di luar layar!
- Penyimpanan untuk web
- {i>Web Push Protocol<i}
- Membangun beberapa Progressive Web App di domain yang sama
- Apa yang diperlukan agar dapat diinstal?
- Apa yang membuat Progressive Web App yang bagus?
- Cara Chrome menangani update untuk manifes aplikasi web
- Menambahkan manifes aplikasi web
- Memitigasi pembuatan skrip lintas situs (XSS) dengan Kebijakan Keamanan Konten (CSP) yang ketat
- Mengakses perangkat hardware di web
- Izinkan penggunaan ulang kunci sandi di seluruh situs Anda dengan Permintaan Asal Terkait
- Pemuatan lambat gambar tingkat browser untuk web
- Pilih format gambar yang tepat
- Metrik kustom
- Mengukur dan melakukan debug performa dengan Google Analytics 4 dan BigQuery
- Praktik terbaik izin web
- Praktik terbaik untuk pemberitahuan cookie
- Menyesuaikan notifikasi media dan kontrol pemutaran dengan Media Session API
- Menemukan interaksi lambat di lapangan
- Menggunakan tabindex
- Time to First Byte (TTFB)
- Engineering prompt yang praktis untuk LLM yang lebih kecil
- Mengoptimalkan Time to First Byte
- Mengoptimalkan tugas yang berjalan lama
- Interaksi dengan Next Paint (INP)
- Warna dependen warna skema CSS dengan terang-dark()
- Pola performa WebAssembly untuk aplikasi web
- Tata letak petak animasi CSS
- Mainkan game Chrome dino dengan gamepad
- Atribut inert
- Etika dan AI
- Memperkenalkan Tim AI Web.dev
- Upgrade penelusuran situs Anda: Jawaban kontekstual dengan AI generatif
- Apa itu Kecerdasan Buatan?
- Menentukan penyedia kunci sandi dengan AAGUID
- Mengompilasi dan mengoptimalkan Wasm dengan Binaryen
- Merekam audio dan video dalam HTML5
- Komponen web <model-viewer>
- pembahasan mendalam userVerification
- Mengapa data CrUX berbeda dengan data RUM saya?
- Aksesibilitas untuk developer web
- Memuat JavaScript Pihak Ketiga
- Largest Contentful Paint (LCP)
- Mencegah pembuatan kunci sandi baru jika sudah ada
- Bekerja dengan IndexedDB
- 5 cuplikan CSS yang harus diketahui setiap developer front-end pada tahun 2024
- Apa saja bagian dari URL?
- Mempelajari kredensial yang mudah ditemukan
- Performa rendering
- ResizeObserver: seperti document.onresize untuk elemen
- Mengoptimalkan encoding dan ukuran transfer aset berbasis teks
- OffscreenCanvas—mempercepat operasi kanvas Anda dengan pekerja web
- Pramuat modul
- First Contentful Paint (FCP)
- Jaringan penayangan konten (CDN)
- Apa yang membuat pengalaman logout yang baik?
- Waktu untuk Interaktif (TTI)
- Mengoptimalkan pemuatan resource dengan Fetch Priority API
- Pseudo class :user-valid dan :user-invalid
- Mengoptimalkan Core Web Vitals untuk pengambil keputusan bisnis
- Nuansa string encoding base64 dalam JavaScript
- Subgrid CSS
- Memuat iklan secara efektif tanpa memengaruhi kecepatan halaman
- Empat jenis umum cakupan kode
- Perspektif teknis, baik menguji maupun tidak
- Menentukan kasus pengujian dan prioritas
- Metrik performa yang berfokus pada pengguna
- Pramuat gambar responsif
- Menyesuaikan tipografi ke preferensi pengguna dengan CSS
- Limas atau Kepiting? Temukan strategi pengujian yang sesuai
- Tiga jenis umum otomatisasi pengujian
- Menghapus Download yang Tidak Diperlukan
- Apa itu WebAssembly dan dari mana asalnya?
- Mengompilasi mkbitmap ke WebAssembly
- Sistem file pribadi origin
- Menghosting data pengguna dengan aman di aplikasi web modern
- Menerapkan AVIF untuk situs web yang lebih responsif
- Mengoptimalkan Interaksi ke Next Paint
- Fitur dasar pengukuran yang dapat Anda gunakan sekarang
- Evaluasi skrip dan tugas yang berjalan lama
- Rendering sisi klien untuk HTML dan interaktivitas
- Pengaruh ukuran DOM yang besar terhadap interaktivitas, dan tindakan yang dapat Anda lakukan
- Mengoptimalkan penundaan input
- Menggunakan ekstensi Data Web untuk men-debug masalah Data Web Inti
- Mengoptimalkan Pergeseran Tata Letak Kumulatif
- Bangun pengalaman WordPress dalam browser dengan WordPress Playground dan WebAssembly
- Cumulative Layout Shift (CLS)
- Fungsi baru untuk developer—disediakan oleh WebAssembly
- Apa itu peta sumber?
- PWA di app store
- 6 cuplikan CSS yang harus diketahui setiap developer front-end pada tahun 2023
- Fungsi trigonometri di CSS
- Melakukan operasi per frame video yang efisien pada video dengan requestVideoFrameCallback()
- Sorotan komunitas GDE: Lars Knudsen
- Tips CSS Cepat! Teks Gradien Animasi
- Pola baru untuk aplikasi media
- Membangun Chrometober!
- Membuat komponen tooltip
- Login dengan kunci sandi melalui isi otomatis formulir
- Buat kunci sandi untuk login tanpa sandi
- Membuat komponen tombol tindakan mengambang (FAB)
- Praktik terbaik untuk font
- Sorotan komunitas GDE: Alba Silvente Fuentes
- Tips CSS Cepat! Loader Animasi
- Menguji Kontras Warna Desain Web
- Membangun navigasi utama untuk {i>website<i}
- Apakah :modal?
- Membangun ilusi petak yang bengkok
- Praktik terbaik untuk tag dan tag manager
- Gaya daftar materi iklan
- Cara Nordhealth menggunakan Properti Khusus di Komponen Web
- Kontrol yang lebih mendetail atas transformasi CSS dengan properti transformasi individual
- Animasi batas CSS
- Bagaimana BBC meluncurkan HSTS untuk keamanan dan performa yang lebih baik.
- Alasan data lab dan lapangan bisa berbeda (dan tindakan yang harus dilakukan terhadap data tersebut)
- Situasi yang saling menguntungkan
- Akhir dari Internet Explorer
- Selamat tinggal HTML5Rocks
- Resep kue pihak pertama
- Menyinkronkan pemutaran audio dan video di web
- Gunakan gradien kerucut untuk membuat batas yang keren
- Perbedaan antara library dan framework JavaScript
- Memilih library atau framework JavaScript
- Mengimplementasikan penanganan error saat menggunakan Fetch API
- Panduan Developer Front-End untuk Terminal
- API untuk font web yang cepat dan indah
- GOV.UK menghapus jQuery dari front end-nya.
- Membuat komponen tombol
- Jangan melawan pemindai pramuat browser
- Praktik terbaik untuk mengukur Data Web di lapangan
- Menjembatani kesenjangan
- Menemukan keberanian dan inspirasi di komunitas developer
- Font variabel di kehidupan nyata
- Buat gradien CSS yang bagus dengan cepat menggunakan CSS Gradient Creator
- Pelajari lebih dalam masalah utama developer web
- Jadikan gambar situs Anda sempurna dengan images.tooling.report
- Cakupan variabel global dan lokal
- Membuat komponen dialog
- Men-debug error pemutaran media di web
- Sorotan komunitas GDE: Nishu Goel
- Efek performa dari pemuatan lambat yang terlalu sering
- Membuat komponen panel pemuatan
- Simpan Kredensial dari Formulir
- Chrome dan Firefox akan segera mencapai versi utama 100
- Membuat favicon adaptif
- Menggambar ke kanvas di Emscripten
- Tingkatkan keamanan dan privasi dengan mengupdate Cache HTTP
- Elemen HTML tambahan
- Melakukan porting aplikasi USB ke web. Bagian 2: gPhoto2
- Logging Error Jaringan (NEL)
- Deteksi fitur WebAssembly
- Melakukan porting aplikasi USB ke web. Bagian 1: libusb
- Membuat komponen switch tema
- Menyematkan cuplikan JavaScript di C++ dengan Emscripten
- PWA di Oculus Quest 2
- Gedung Designcember
- Kalkulator Designcember
- Membuat salinan dalam dalam JavaScript menggunakan structuredClone
- Membuat komponen toast
- Pendanaan UI
- Membuat komponen menu game 3D
- Alur penggunaan Lighthouse
- Menuju metrik kelancaran animasi
- Yang baru di PageSpeed Insights
- Semua yang diumumkan di Chrome Dev Summit 2021
- Perjalanan Photoshop ke web
- Membuat komponen multi-pilihan
- Cara menilai performa pemuatan di lapangan dengan Navigation Timing dan Resource Timing
- Manipulasi DOM aman dengan Sanitizer API
- Praktik terbaik untuk menggunakan sematan pihak ketiga
- Pengaruh arsitektur SPA terhadap Data Web Inti
- Pembahasan mendalam tentang peristiwa JavaScript
- Memaketkan resource non-JavaScript
- Membuat komponen tombol terpisah
- Menggunakan Skrip Modul CSS untuk mengimpor stylesheet
- Membuat komponen {i>switch<i}
- Warna aksen CSS
- Header petunjuk klien fitur media preferensi pengguna
- Membuat komponen breadcrumb
- Menggunakan thread WebAssembly dari C, C++, dan Rust
- Dasar-dasar streaming media
- Framework media
- PWA dengan streaming offline
- Enkripsi media
- Menemukan jalan Anda dengan data lapangan di update ekstensi Data Web
- Penyesuaian ukuran CSS untuk @font-face
- Membuat skema warna
- Menggunakan AVIF untuk mengompresi gambar di situs Anda
- CSS untuk Data Web
- Mengembangkan Pergeseran Tata Letak Kumulatif di alat web
- Pemilih kelas semu fungsional CSS baru :is() dan :where()
- Pelatihan Progressive Web App baru kini tersedia
- Bermigrasi ke Petunjuk Klien Agen Pengguna
- Excalidraw dan Fugu: Meningkatkan Perjalanan Pengguna Inti
- Referensi cepat header keamanan
- Modul ES di pekerja layanan
- Membuat komponen scroller media
- Mengoptimalkan Data Web menggunakan Lighthouse
- Menggunakan API web asinkron dari WebAssembly
- Menjaga agar skrip pihak ketiga tetap terkendali
- Menyesuaikan overlay kontrol jendela pada kolom judul PWA Anda
- Mendobrak hambatan menggunakan DataTransfer API
- Mengisi formulir OTP dalam iframe lintas origin dengan WebOTP API
- Membuat animasi teks terpisah
- Mengembangkan metrik CLS
- Mengembangkan metrik CLS
- Kepuasan Developer Web
- Membuat komponen Setelan
- Men-debug pergeseran tata letak
- JavaScript: Apa artinya?
- Struktur proyek, siklus hidup, dan pemaketan proyek
- Markup, penataan gaya, skrip, dan update aplikasi mini
- Mengakhiri pendapat tentang aplikasi mini dari developer web
- Pemrograman dengan cara aplikasi mini
- Project open source aplikasi mini
- Apa itu H5 dan QuickApp?
- Menerapkan prinsip-prinsip pemrograman aplikasi mini pada contoh project
- Komponen aplikasi mini
- Streaming—Panduan definitif
- Membuat komponen Tab
- Panduan untuk mengaktifkan isolasi lintas asal
- Meminta isolasi performa dengan header Origin-Agent-Cluster
- Properti rasio aspek CSS
- Praktik terbaik untuk carousel
- WebRTC sekarang menjadi standar W3C dan IETF
- Masukan yang diinginkan: Cara mencapai metrik pergeseran tata letak yang lebih baik untuk halaman yang aktif dalam waktu lama
- Kapan harus menggunakan HTTPS untuk pengembangan lokal
- Menggunakan HTTPS untuk pengembangan lokal
- Codelab: Membuat komponen Sidenav
- Membuat komponen sidenav
- Codelab: Pemusatan di CSS
- Pemusatan di CSS
- Sukai cache Anda ❤️
- Publikasikan, kirimkan, dan instal JavaScript modern untuk aplikasi yang lebih cepat
- Worklet paint lintas browser dan Houdini.how
- Praktik terbaik formulir pembayaran dan alamat
- Mengotomatiskan audit dengan AutoWebPerf
- Praktik terbaik formulir OTP SMS
- Codelab praktik terbaik formulir pendaftaran
- Codelab praktik terbaik formulir pembayaran
- Praktik terbaik formulir pendaftaran
- Codelab praktik terbaik formulir alamat
- Ringkasan pekerja
- Panduan cache imperatif
- Komunikasi dua arah dengan pekerja layanan
- Menyiarkan pembaruan ke halaman dengan pekerja layanan
- Nonaktifkan akselerasi mouse untuk memberikan pengalaman bermain game FPS yang lebih baik
- Codelab: Membuat komponen Stories
- Membuat komponen Stories
- Situs yang Sama Skema
- Pemuatan lambat tingkat browser untuk CMS
- Codelab: Membuat klien notifikasi push
- Codelab: Membuat server notifikasi push
- Ringkasan notifikasi push
- Mengukur penggunaan offline
- Contoh animasi CSS berperforma tinggi
- CSS min(), max(), dan clamp()
- Signed HTTP Exchange (SXG)
- Penyempurnaan tata letak logis dengan pintasan yang relatif terhadap alur
- Mengapa beberapa animasi lambat?
- Cara membuat animasi CSS berperforma tinggi
- Menangani permintaan rentang dalam pekerja layanan
- Mengontrol geser, kemiringan, dan zoom kamera
- Apa yang dimaksud dengan uji coba origin pihak ketiga?
- Kebocoran memori jendela yang terpisah
- Membuat halaman penggantian offline
- Core Web Vitals
- Buat bentuk gambar yang menarik dengan properti clip-path CSS
- Menerapkan efek ke gambar dengan properti gambar mask CSS
- Butir kustom dengan CSS ::marker
- Bantu pengguna mengubah sandi secara mudah dengan menambahkan URL terkenal untuk mengubah sandi
- Menangani informasi pembayaran opsional dengan pekerja layanan
- Mengatur transaksi pembayaran dengan pekerja layanan
- Aksesibilitas media
- ARIA: racun atau penawar?
- Men-debug kebocoran memori di WebAssembly menggunakan Emscripten
- visibilitas konten: properti CSS baru yang meningkatkan performa rendering Anda
- Berhenti memblokir akses papan klip
- Web di Android
- Praktik terbaik Perujuk dan Kebijakan Perujuk
- Membuat PWA di Google, bagian 1
- Pemantauan performa dengan Lighthouse CI
- Mendesain pengalaman pengguna kunci sandi di Akun Google
- @property: memberikan kekuatan super ke variabel CSS
- Mengaitkan kecepatan situs dan metrik bisnis
- Mendaftarkan aplikasi pembayaran berbasis web
- Ringkasan aplikasi pembayaran berbasis web
- Menyediakan informasi pengiriman dan kontak dari aplikasi pembayaran Android
- Pembuatan cache pekerja layanan dan cache HTTP
- Menggunakan Laporan UX Chrome untuk melihat performa di lapangan
- Menangani permintaan navigasi
- Sepuluh tata letak modern dalam satu baris CSS
- Rendering sempurna piksel dengan devicePixelContentBox
- Rangkuman LIVE web.dev
- Praktik terbaik formulir login
- Meningkatkan Progressive Web App Anda secara bertahap
- Menggunakan fitur browser lintas platform untuk membuat formulir login
- Alat developer web untuk men-debug masalah JavaScript di Google Penelusuran
- Membangun pengalaman penelusuran yang andal dengan Workbox
- Menambahkan media ke halaman web
- Menautkan dengan cara tebal yang belum pernah ditautkan sebelumnya: Fragmen Teks
- Membuat PWA Anda terasa lebih seperti sebuah aplikasi
- Cara melaporkan bug browser yang baik
- Mengukur performa dengan model RAIL
- Mempercepat navigasi di React dengan Quicklink
- Lindungi resource Anda dari serangan web dengan Mengambil Metadata
- Pengurutan ulang konten
- Peningkatan Web Animations API di Chromium 84
- Panduan developer aplikasi pembayaran Android
- Memberdayakan aplikasi pembayaran dengan Pembayaran Web
- Menyiapkan metode pembayaran
- Masa berlaku transaksi pembayaran
- Opsi font variabel lainnya untuk font UI sistem macOS di Chromium 83
- Selesaikan berbagai hal dengan cepat menggunakan pintasan aplikasi
- Bagaimana Progressive Web App dapat mendorong kesuksesan bisnis
- Persiapan untuk penghapusan AppCache
- Penyimpanan persisten
- Cara menentukan strategi penginstalan
- Bagaimana CommonJS membuat paket Anda lebih besar
- Membuat profil aplikasi Audio Web di Chrome
- Alasan Anda perlu "isolasi lintas asal" untuk mendapatkan fitur canggih
- Meningkatkan performa pemuatan halaman Next.js dan Gatsby dengan pemotongan terperinci
- "Situs yang sama" dan "asal yang sama"
- Membuat situs Anda "terisolasi lintas asal" menggunakan COOP dan COEP
- Memantau total penggunaan memori halaman web Anda dengan measureUserAgentSpecificMemory()
- Blog engineering web.dev #1: Cara kami membangun situs dan menggunakan Komponen Web
- Meningkatkan gaya default mode gelap dengan properti CSS skema warna dan tag meta yang sesuai
- Pastikan situs Anda tersedia dan dapat digunakan oleh semua orang selama merebaknya COVID-19
- Memperbaiki server yang kelebihan beban
- Target ketuk yang dapat diakses
- Desain responsif yang aksesibel
- Aksesibilitas warna dan kontras
- Mencegah kerentanan pembuatan skrip lintas situs berbasis DOM dengan Jenis Tepercaya
- Menggunakan PWA di aplikasi Android
- Cegah pergeseran tata letak dan kedipan teks tak terlihat (FOIT) dengan melakukan pramuat font opsional
- Cara menyiapkan Signed HTTP Exchanges (SXG) menggunakan nginx
- Cara mendistribusikan Signed HTTP Exchanges (SXG) menggunakan nginx
- Mengoptimalkan gambar latar CSS dengan kueri media
- Memperbaiki kecepatan situs secara lintas fungsi
- Scroll snap setelah perubahan tata letak
- Cara menyiapkan Signed HTTP Exchange menggunakan Web Packager
- Cara memberikan pengalaman penginstalan dalam aplikasi Anda sendiri
- Virtual reality hadir di web, bagian II
- Memosisikan objek virtual dalam tampilan dunia nyata
- Augmented reality: Anda mungkin sudah mengetahuinya
- Mengembangkan ekosistem framework web
- Apa itu Progressive Web App?
- Dukungan ikon adaptif di PWA dengan ikon yang dapat disamarkan
- Mengintegrasikan PWA ke dalam UI berbagi bawaan dengan Workbox
- Meningkatkan penutupan halaman di XMLHttpRequest() sinkron
- Threading web dengan pekerja modul
- Pemuatan adaptif: meningkatkan performa web di perangkat yang lambat
- Evolusi alat kecepatan: sorotan dari Chrome Developer Summit 2019
- Menggunakan pekerja web untuk menjalankan JavaScript di luar thread utama browser
- Masukan dari survei pengoptimalan gambar musim panas 2019
- Membangun server notifikasi push
- Performa sebagai default dengan Next.js
- Cara AMP menjamin kecepatan di aplikasi Next.js
- Pemisahan kode dengan impor dinamis di Next.js
- Merutekan pengambilan data di Next.js
- Mengintegrasikan UI berbagi OS dengan Web Share API
- Virtual reality hadir di web
- Resep cookie SameSite
- Memahami cookie
- Iklan yang cepat itu penting
- Gunakan notifikasi push untuk berinteraksi dan melibatkan kembali pengguna
- Memulai Notifications API
- Menggunakan Service Worker untuk mengelola notifikasi
- Memperbaiki ketidakstabilan tata letak
- Teknik agar aplikasi web dimuat dengan cepat, bahkan di ponsel menengah
- Properti kustom yang lebih cerdas dengan API baru Houdini
- Dua cara untuk mengambil data: tag <link> dan header HTTP
- Ambil resource lebih awal untuk mempercepat navigasi di masa mendatang
- Apa yang dimaksud dengan konten campuran?
- Memperbaiki konten campuran
- Lakukan lebih dari sekadar gambar dengan video dasar untuk web
- Menambahkan ikon Apple touch ke Progressive Web App
- Web Pemutar yang Siap Pakai
- Progressive Web App di situs multi-origin
- Mengurangi ukuran font web
- Mengoptimalkan pemuatan dan rendering WebFont
- Membuat Progressive Web App dengan Angular CLI
- Memuat JavaScript pihak ketiga secara efisien
- Mengidentifikasi JavaScript pihak ketiga yang lambat
- Menggunakan CDN gambar untuk mengoptimalkan gambar
- Performa JavaScript pihak ketiga
- Kontrol formulir yang lebih andal
- Mengoptimalkan JavaScript pihak ketiga
- Buat koneksi jaringan lebih awal untuk meningkatkan kecepatan halaman yang dirasakan
- Membuat latar belakang bergaya OS dengan filter tampilan latar
- Menjaga segala sesuatunya tetap segar dengan yang sudah tidak berlaku saat validasi ulang
- Melakukan virtualisasi daftar besar dengan Angular CDK
- Mengoptimalkan deteksi perubahan Angular
- Merutekan strategi pramuat di Angular
- Navigasi web yang lebih cepat dengan pengambilan data prediktif
- Menyesuaikan penayangan video ke gambar berdasarkan kualitas jaringan
- Audit aksesibilitas aplikasi Angular Anda dengan codelyzer
- Precaching dengan pekerja layanan Angular
- Anggaran performa dengan Angular CLI
- Preferreds-color-scheme: Halo kegelapan, teman lama saya
- Tips terbaik untuk performa web
- Memulai: mengoptimalkan aplikasi Angular
- Pemisahan kode level rute di Angular
- Komponen web: bahan rahasia yang membantu memperkuat web
- Gunakan Lighthouse untuk anggaran performa
- Update pada Web Payments API
- Nilai kecepatan
- Panel Alamat Menginstal untuk Progressive Web App di Desktop
- Bagaimana performa dapat meningkatkan konversi?
- Pola pikir pekerja layanan
- Pola untuk mempromosikan penginstalan PWA
- Bagaimana cara memberi tahu pengguna bahwa PWA saya dapat diinstal?
- Kebijakan gambar untuk waktu pemuatan yang cepat dan lainnya
- Apakah tugas JavaScript yang lama menunda Waktu untuk Interaktif Anda?
- Mengekstrak CSS penting
- Mengekstrak dan menyisipkan CSS penting dengan Kritis
- Kecepatan dalam skala besar: apa yang baru dalam performa web?
- Memperkenalkan PROXX
- Penelusuran visual dengan Toolkit Persepsi Web
- Cookie SameSite dijelaskan
- Langsung menggunakan Portal: navigasi yang lancar di web
- Penayangan adaptif berdasarkan kualitas jaringan
- Meminifikasi dan mengompresi payload jaringan dengan brotli
- web.dev di I/O 2019
- Bagaimana agar tetap cepat?
- Bagaimana cara mengukur kecepatan?
- Apa itu kecepatan?
- Pengauditan aksesibilitas dengan reaksi-axe dan eslint-plugin-jsx-a11y
- Menambahkan manifes aplikasi web dengan Create React App
- Pemisahan kode dengan React.lazy dan Suspense
- Memulai: optimalkan aplikasi React Anda
- Virtualisasikan daftar besar dengan jendela reaksi
- Precaching di Create React App dengan Workbox
- Merender rute dengan reaksi-snap
- Codelab: Pramuat aset penting untuk meningkatkan kecepatan pemuatan
- Preferreds-Reduced-motion: Terkadang lebih sedikit gerakan lebih baik
- Tunda CSS yang tidak penting
- Kepercayaan itu baik, observasi lebih baik: Intersection Observer v2
- Dasar-dasar desain web responsif
- Stylesheet yang Dapat Dibangun
- Rendering di Web
- Sertakan anggaran performa ke dalam proses build Anda
- Menggunakan bundlesize dengan Travis CI
- Menetapkan anggaran performa dengan webpack
- Menggunakan Lighthouse Bot untuk menetapkan anggaran performa
- Emscripten dan npm
- Apakah aplikasi Anda sudah terinstal? getinstalledRecentApps() akan memberi tahu Anda.
- Menayangkan kode modern ke browser modern untuk pemuatan halaman yang lebih cepat
- Beradaptasi dengan Pengguna berdasarkan Petunjuk Klien
- Apa yang dimaksud dengan aksesibilitas?
- Label dan alternatif teks
- Semantik dan pembaca layar
- Dasar-dasar akses keyboard
- Menggunakan HTML semantik untuk memudahkan pencapaian keyboard
- Fokus gaya
- Mengontrol fokus dengan tabindex
- Judul dan penanda
- Menggunakan Imagemin dengan webpack
- Ganti GIF dengan video
- Menggunakan gambar WebP
- Keamanan seharusnya tidak begitu menakutkan.
- Menentukan beberapa lebar slot
- Menayangkan kode modern ke browser modern untuk pemuatan halaman yang lebih cepat
- Menayangkan gambar yang responsif
- Precaching dengan Workbox
- Anggaran performa pertama Anda
- Mengonfigurasi perilaku caching HTTP
- Menggunakan deskriptor kepadatan
- Buat agar mudah diinstal
- Hindari kilatan teks tak terlihat
- Sandbox browser
- Cache runtime dengan Workbox
- Ganti GIF animasi dengan video untuk pemuatan halaman yang lebih cepat
- Tayangkan gambar dengan dimensi yang benar
- Cross-Origin Resource Sharing (CORS)
- Mengurangi payload JavaScript dengan pemisahan kode
- Membuat Gambar WebP dengan Command Line
- Pramuat aset penting untuk meningkatkan kecepatan pemuatan
- Hapus kode yang tidak digunakan
- Mengurangi payload JavaScript dengan pemisahan kode
- Pekerja layanan dan Cache Storage API
- Kebijakan Asal yang Sama & iframe