Dengan semakin pentingnya Core Web Vitals, pemilik situs dan developer semakin berfokus pada performa dan pengalaman pengguna utama. Google menyediakan banyak alat untuk membantu mengevaluasi, mengoptimalkan, dan memantau halaman, tetapi pengguna sering kali bingung dengan sumber data yang berbeda dan cara menggunakannya secara efektif. Panduan ini mengusulkan alur kerja yang menggabungkan beberapa {i>tool<i} dan mengklarifikasi di mana dan bagaimana {i>tool<i} itu masuk akal selama proses pengembangan.

Baca berbagai hal yang terjadi dengan Dasar Pengukuran selama Februari 2025.

ruby-align kini menjadi bagian dari Dasar Pengukuran

Dipublikasikan: 20 Februari 2025 Mendownload model AI besar dengan andal adalah tugas yang menantang. Jika pengguna kehilangan koneksi internet atau menutup situs atau aplikasi web Anda, mereka akan kehilangan file model yang didownload sebagian dan

Pelajari petunjuk resource rel=fetch dan cara menggunakannya.

Pelajari cara mengidentifikasi dan memperbaiki pergeseran tata letak.

Pergeseran Tata Letak Kumulatif (CLS) adalah metrik yang mengukur seberapa sering pengguna mengalami pergeseran tata letak halaman secara tiba-tiba. Dalam panduan ini, kami akan membahas pengoptimalan penyebab umum CLS seperti gambar dan iframe tanpa dimensi atau konten dinamis.

scrollbar-color dan scrollbar-gutter CSS telah tersedia di semua mesin browser utama, sehingga Dasar Pengukuran Baru tersedia.

Dalam edisi pertamanya, ringkasan bulanan Dasar Pengukuran ini membahas peristiwa di Dasar Pengukuran di Google dan komunitas developer web pada Januari 2025.

Pengumpulan Sampah WebAssembly dan pengoptimalan panggilan akhir Wasm kini telah tersedia di semua mesin browser utama, sehingga Baseline Baru tersedia.

Postingan ini memperkenalkan metrik Largest Contentful Paint (LCP) dan menjelaskan cara mengukurnya

Promise.try kini telah tersedia di semua mesin browser utama, sehingga menjadi Dasar Pengukuran yang Baru tersedia.

Deskripsi singkat

Dipublikasikan: 13 Januari 2024 Ada begitu banyak project luar biasa yang dapat Anda buat dengan AI, dengan model machine learning klasik dan model bahasa besar (LLM) yang lebih baru. Dengan LLM, komputer dapat membuat konten baru, menulis ringkasan,

Dipublikasikan: 13 Januari 2024 Ini adalah bagian pertama dari seri tiga bagian tentang LLM dan chatbot. Bagian 2 tentang membuat chatbot dengan WebLLM dan bagian 3 tentang menggunakan Prompt API sudah aktif. Model bahasa besar (LLM) menjadi elemen

Anda diberitahu bahwa Anda tidak memblokir utas utama dan memecah tugas yang panjang, tetapi apa artinya melakukan hal-hal itu?

Penyamaran CSS memberi Anda opsi untuk menggunakan gambar sebagai lapisan mask. Ini berarti Anda dapat menggunakan gambar, SVG, atau gradien sebagai mask, untuk membuat efek yang menarik tanpa editor gambar.

set data fitur web, dasbor Status Platform Web, widget status Dasar Pengukuran, dan lainnya. Lihat kembali Dasar Pengukuran pada tahun 2024.

Postingan ini menjelaskan pemuatan lambat dan opsi yang tersedia untuk memuat video secara lambat.

Pramuat modul menawarkan cara untuk memuat modul JavaScript secara deklaratif sebelumnya.

Untuk mengoptimalkan pengalaman pengguna, Anda harus memahami cara pengguna berinteraksi dengan formulir Anda. Isi otomatis browser memainkan peran penting dalam proses ini. Pelajari cara mengumpulkan dan menganalisis data tentang cara pengguna menggunakan isi otomatis di formulir Anda.

Deteksi konten beracun melindungi pengguna Anda dan menciptakan lingkungan online yang lebih aman. Di bagian kedua, kita akan mempelajari cara membuat alat AI sisi klien untuk mendeteksi dan memitigasi toksisitas di sumbernya.

Postingan ini menjelaskan metrik Total Blocking Time (TBT) dan menjelaskan cara mengukurnya

Metrik penting untuk situs yang sehat

Panduan langkah demi langkah tentang cara menguraikan LCP dan mengidentifikasi area utama yang perlu ditingkatkan.

Pelajari cara mengukur Data Web situs Anda di lingkungan lab dan lingkungan sebenarnya.

Kumpulan praktik terbaik yang telah diidentifikasi Chrome sebagai peluang terbesar untuk mengoptimalkan performa web dan meningkatkan Data Web Inti

Properti visibilitas konten CSS kini tersedia di Dasar Pengukuran.

Riset dan metodologi di balik nilai minimum Data Web Inti

Anda telah memeriksa data bidang Anda, dan ternyata Anda memiliki beberapa interaksi yang lambat. Langkah berikutnya adalah mempelajari lebih lanjut tentang cara menguji interaksi tersebut secara manual, dan mengidentifikasi penyebabnya.

Artikel ini menjelaskan kisah asal Baseline, keterlibatan Google, dan kepemilikan Grup Komunitas WebDX.

Pelajari cara mengoptimalkan halaman untuk pemuatan instan saat menggunakan tombol kembali dan maju pada browser.

Penyusunan bertingkat CSS menjadi jauh lebih baik.

Postingan ini memperkenalkan metrik Penundaan Input Pertama (FID) dan menjelaskan cara mengukurnya

Pelajari cara mengatribusikan data performa dengan informasi debug untuk membantu Anda mengidentifikasi dan memperbaiki masalah pengguna nyata dengan analisis

Pelajari cara menggunakan alat Google untuk membantu mengaitkan Core Web Vitals dengan pendapatan iklan.

Apa dampak @property terhadap performa CSS Anda?

Postingan ini membahas atribut pemuatan dan cara menggunakannya untuk mengontrol pemuatan iframe.

Ada banyak opsi untuk menyimpan data di browser. Mana yang terbaik untuk kebutuhan Anda?

Pelajari cara yang direkomendasikan dan tidak direkomendasikan untuk membuat beberapa PWA yang menggunakan kembali domain yang sama beserta kelebihan dan kekurangannya.

Tutorial interaktif langkah demi langkah yang menunjukkan cara membangun server yang mengelola langganan notifikasi push dan mengirimkan permintaan protokol push web ke layanan push.

Yang diperlukan untuk mengubah ikon, pintasan, warna, dan metadata lainnya di manifes aplikasi web untuk PWA Anda.

Kriteria kemampuan penginstalan Progressive Web App.

Apa yang dimaksud dengan Progressive Web App yang bagus atau yang bagus?

Manifes aplikasi web adalah file JSON sederhana yang memberi tahu browser tentang perilaku aplikasi web Anda.

Pelajari cara men-deploy CSP berdasarkan nonce atau hash skrip sebagai pertahanan mendalam terhadap skrip lintas situs.

Artikel ini membantu developer Web memilih API hardware yang tepat berdasarkan perangkat tertentu.

Pelajari cara menggunakan Permintaan Origin Terkait untuk mengizinkan penggunaan ulang kunci sandi di seluruh situs Anda.

Memilih format gambar yang tepat adalah langkah pertama dalam mengirimkan gambar yang dioptimalkan di situs Anda. Postingan ini membantu Anda membuat pilihan yang tepat.

Postingan ini membahas atribut pemuatan dan cara penggunaannya untuk mengontrol pemuatan gambar.

Metrik khusus memungkinkan Anda mengukur dan mengoptimalkan aspek pengalaman situs yang unik bagi situs Anda.

Pelajari cara mengirimkan data Web Vitals ke properti Google Analytics 4 dan mengekspor data tersebut untuk dianalisis di BigQuery dan Looker Studio.

Panduan ini menguraikan praktik terbaik yang harus diikuti situs saat meminta izin kepada pengguna untuk mengakses kemampuan sensitif (seperti kamera, mikrofon, dan lokasi) untuk meminimalkan permintaan yang tidak perlu dan pemblokiran akses.

Pelajari bagaimana pemberitahuan cookie memengaruhi performa, pengukuran performa, dan UX.

Developer web dapat menyesuaikan notifikasi media dan merespons peristiwa terkait media seperti mencari atau melacak perubahan dengan Media Session API.

Sebelum Anda dapat mereproduksi interaksi yang lambat di lab untuk mengoptimalkan Interaction to Next Paint di situs Anda, Anda perlu mengandalkan data lapangan untuk menemukannya. Pelajari cara melakukannya dalam panduan ini.

Gunakan atribut tabindex untuk menetapkan posisi tab elemen secara eksplisit.

Postingan ini memperkenalkan metrik Time to First Byte (TTFB) dan menjelaskan cara mengukurnya.

Pelajari cara menyesuaikan perintah untuk mencapai hasil yang diinginkan di berbagai LLM, model, dan ukuran model.

Postingan ini memperkenalkan metrik Interaction to Next Paint (INP) dan menjelaskan cara kerjanya, cara mengukurnya, serta menawarkan saran tentang cara meningkatkannya.

deskripsi: Menentukan warna yang bereaksi terhadap skema warna yang digunakan dengan fungsi gelap-terang().

Dalam panduan ini, yang ditujukan bagi pengembang web yang ingin mendapatkan manfaat dari WebAssembly, Anda akan mempelajari cara memanfaatkan Wasm untuk melakukan {i>outsource<i} tugas yang menggunakan CPU dengan bantuan {i>run example<i} (contoh yang berjalan).

Dalam CSS Grid, properti `grid-template-columns` dan `grid-template-rows` memungkinkan Anda untuk menentukan nama baris dan melacak ukuran kolom dan baris petak. Mendukung interpolasi untuk properti ini memungkinkan tata letak petak bertransisi antar-status dengan lancar, bukan snap pada titik tengah animasi atau transisi.

Pelajari cara mengontrol game web dengan Gamepad API.

Properti inert adalah atribut HTML global yang menyederhanakan cara menghapus dan memulihkan peristiwa input pengguna untuk suatu elemen, termasuk peristiwa fokus dan peristiwa dari teknologi pendukung.

Pihak yang mengandalkan dapat menentukan asal kunci sandi dengan memeriksa AAGUID. Pelajari cara kerjanya.

Dengan menggunakan contoh bahasa mainan sintetis yang disebut ExampleScript, pelajari cara menulis dan mengoptimalkan modul WebAssembly di JavaScript menggunakan Binaryen.js API.

Perekaman Audio/Video telah menjadi "Holy Grail" pengembangan web sejak lama. Selama bertahun-tahun, kami harus mengandalkan plugin browser ( Flash atau Silverlight ) untuk menyelesaikan tugas. Ayo! HTML5 dapat membantu. Hal ini mungkin tidak

Komponen web <model-viewer> memungkinkan Anda menggunakan model 3D pada halaman web secara deklaratif.

Pelajari cara menggunakan `userVerification` di WebAuthn

Pelajari alasan mengapa data RUM dapat menampilkan angka Data Web Inti yang berbeda dari CrUX.

Penting untuk membuat situs yang inklusif dan dapat diakses oleh semua orang. Setidaknya ada enam area disabilitas utama yang dapat kita optimalkan: visual, pendengaran, mobilitas, kognisi, ucapan, dan saraf.

Skrip pihak ketiga memberikan berbagai fitur yang berguna, sehingga membuat web menjadi lebih dinamis. Pelajari cara mengoptimalkan pemuatan skrip pihak ketiga untuk mengurangi dampaknya terhadap performa.

Pelajari cara mencegah pembuatan kunci sandi baru jika sudah ada di pengelola sandi pengguna.

Panduan dasar-dasar IndexedDB.

CSS yang layak, andal, dan stabil di alat yang dapat Anda gunakan sekarang.

Pelajari cara mengoptimalkan metrik Time to First Byte.

Apa perbedaan antara host, situs, dan origin? Apa itu eTLD+1? Artikel ini menjelaskannya.

Pelajari apa yang dimaksud dengan kredensial yang dapat ditemukan dan cara membangun pengalaman pengguna yang sesuai dengan kasus penggunaan Anda.

Pengguna akan tahu jika situs dan aplikasi tidak berjalan dengan baik, jadi pengoptimalan performa rendering sangatlah penting.

`ResizeObserver` memberi tahu Anda ketika persegi panjang konten elemen berubah ukuran sehingga Anda dapat bereaksi dengan semestinya.

Selain menghilangkan hasil download aset yang tidak diperlukan, hal terbaik yang dapat Anda lakukan untuk meningkatkan kecepatan pemuatan halaman adalah meminimalkan ukuran download secara keseluruhan dengan mengoptimalkan dan mengompresi aset yang tersisa.

Dokumen ini menjelaskan bagaimana Anda dapat menggunakan OffscreenCanvas API untuk mencapai peningkatan kinerja saat merender grafik di aplikasi web Anda.

Postingan ini memperkenalkan metrik First Contentful Paint (FCP) dan menjelaskan cara mengukurnya

Artikel ini memberikan ringkasan komprehensif tentang jaringan penayangan konten (CDN). Selain itu, bagian ini juga menjelaskan cara memilih, mengonfigurasi, dan mengoptimalkan penyiapan CDN.

Panduan praktis developer tentang apa yang harus dilakukan saat pengguna logout dari situs.

Postingan ini memperkenalkan metrik Waktu untuk Interaktif (TTI) dan menjelaskan cara mengukurnya

Fetch Priority API menunjukkan prioritas relatif resource ke browser. API ini dapat memungkinkan pemuatan yang optimal dan meningkatkan Data Web Inti.

Tentang class pseudo :valid pengguna dan :tidak valid pengguna serta cara menggunakannya untuk meningkatkan pengalaman pengguna validasi input.

Pelajari cara pengambil keputusan bisnis dan non-developer dapat meningkatkan Data Web Inti.

Pahami dan hindari masalah umum saat menerapkan encoding dan decoding base64 ke string.

Subgrid memungkinkan kemudahan berbagi petak, sehingga memungkinkan petak bertingkat agar selaras dengan ancestor dan seinduk.

Di dunia digital saat ini, iklan online adalah bagian penting dari web gratis yang kita nikmati. Namun, iklan yang tidak diterapkan dengan baik dapat menyebabkan pengalaman penjelajahan yang lebih lambat, membuat pengguna frustrasi, dan mengurangi interaksi. Pelajari cara memuat iklan secara efektif tanpa memengaruhi kecepatan halaman, memastikan pengalaman pengguna yang lancar, dan memaksimalkan peluang pendapatan bagi pemilik situs.

Pelajari apa itu cakupan kode dan temukan empat cara umum untuk mengukurnya.

Tentukan hal yang perlu diuji dan hal yang dapat dikesampingkan.

Tentukan apa yang akan diuji, tentukan kasus pengujian Anda, dan prioritaskan.

Metrik performa yang berfokus pada pengguna adalah alat penting dalam memahami dan meningkatkan pengalaman situs Anda dengan cara yang bermanfaat bagi pengguna sungguhan.

Pelajari berbagai kemungkinan baru dan menarik untuk pramuat gambar responsif guna memastikan pengalaman pengguna yang luar biasa.

Metode untuk menyesuaikan {i>font<i} dengan preferensi pengguna, sehingga mereka sangat nyaman membaca konten Anda.

Temukan cara menggabungkan berbagai jenis pengujian ke dalam strategi wajar yang cocok dengan proyek Anda.

Mari kita mulai dengan dasar-dasarnya! Mempelajari dua mode pengujian umum dan tiga jenis otomatisasi pengujian.

Anda harus mengaudit sumber daya secara berkala untuk memastikan bahwa setiap sumber daya membantu memberikan pengalaman pengguna yang lebih baik.

Program mkbitmap C membaca gambar dan menerapkan satu atau lebih operasi berikut ke dalamnya, dalam urutan ini: inversi, penyaringan highpass, penskalaan, dan ambang batas. Setiap operasi dapat dikontrol satu per satu, serta diaktifkan atau dinonaktifkan. Artikel ini menunjukkan cara mengompilasi mkbitmap ke WebAssembly.

Pengantar WebAssembly (terkadang disingkat Wasm), format kode biner portabel dan format teks yang sesuai untuk program yang dapat dieksekusi serta antarmuka perangkat lunak untuk memfasilitasi interaksi antara program tersebut dan lingkungan host-nya.

Cara menampilkan konten yang dikontrol pengguna dengan aman di aplikasi web.

Standar Sistem File memperkenalkan sistem file pribadi asal (OPFS) sebagai endpoint penyimpanan yang bersifat pribadi untuk asal halaman dan tidak terlihat oleh pengguna yang memberikan akses opsional ke jenis file khusus yang sangat dioptimalkan

Ikhtisar tentang bagaimana AVIF diadopsi dalam ekosistem, dan seperti apa manfaat kinerja dan kualitas yang dapat diharapkan oleh developer dari AVIF untuk gambar diam dan animasi.

Pelajari cara mengoptimalkan Interaksi dengan Next Paint situs Anda.

Pelajari hanya beberapa fitur yang merupakan bagian dari Dasar Pengukuran.

Ukuran DOM yang besar dapat menjadi faktor apakah interaksi berlangsung cepat atau tidak. Pelajari lebih lanjut tentang hubungan antara ukuran DOM dan INP, serta hal yang dapat Anda lakukan untuk mengurangi ukuran DOM dan cara lain untuk membatasi pekerjaan rendering saat halaman memiliki banyak elemen DOM.

Penundaan input dapat berkontribusi signifikan terhadap latensi interaksi total dan berdampak negatif pada INP halaman Anda. Dalam panduan ini, pelajari apa yang dimaksud dengan penundaan input, dan cara menguranginya untuk interaktivitas yang lebih cepat.

Saat memuat skrip, browser perlu waktu untuk mengevaluasinya sebelum dieksekusi, yang dapat menyebabkan tugas yang berjalan lama. Pelajari cara kerja evaluasi skrip dan tindakan yang dapat Anda lakukan untuk mencegah terjadinya tugas yang berjalan lama selama pemuatan halaman.

Merender HTML dengan JavaScript berbeda dengan merender HTML yang dikirim oleh server—dan yang dapat memengaruhi performa. Pelajari perbedaannya dalam panduan ini, dan tindakan yang dapat Anda lakukan untuk mempertahankan performa rendering situs—terutama untuk interaksi yang berkaitan.

WordPress lengkap yang didukung PHP yang hanya berjalan di browser dengan WebAssembly

Postingan ini memperkenalkan metrik Pergeseran Tata Letak Kumulatif (CLS) dan menjelaskan cara mengukurnya.

Etalase alat kini tersedia di web berkat WebAssembly.

Progressive Web App dapat dikirimkan ke app store seperti Android Play Store atau Microsoft Store dan lainnya.

Meningkatkan kualitas pengalaman proses debug web dengan peta sumber.

CSS yang layak, andal, dan stabil di alat yang dapat Anda gunakan sekarang.

Hitung sinus, kosinus, tangen, dan lainnya di CSS.

Metode requestVideoFrameCallback() memungkinkan penulis web mendaftarkan callback yang berjalan dalam langkah-langkah rendering saat frame video baru dikirim ke compositor.

Salah satu dari serangkaian wawancara dengan anggota program Pakar Google Developers (GDE).

Postingan blog ini mengumumkan koleksi pola baru untuk aplikasi media.

Mari kita buat efek teks gradien animasi dengan properti kustom cakupan dan background-clip Buka CodePen dan buat pena baru. Buat markup untuk teks Anda. Mari kita gunakan header dengan kata "Cepat": Kemudian, mari kita beri body background-color

Bagaimana buku yang bisa digulir menjadi hidup karena berbagi tips dan trik yang seru dan menakutkan bagi Chrometober ini.

Ringkasan dasar tentang cara membuat elemen kustom tooltip yang adaptif warna dan mudah diakses.

Kunci sandi membuat akun pengguna situs lebih aman, mudah, lebih mudah digunakan, dan tanpa sandi. Artikel ini membahas cara mengizinkan pengguna membuat kunci sandi untuk situs Anda.

Kunci sandi membuat akun pengguna situs lebih aman, mudah, lebih mudah digunakan, dan tanpa sandi. Artikel ini membahas bagaimana desain login tanpa sandi dengan kunci sandi harus mengakomodasi pengguna sandi yang ada.

Ringkasan dasar tentang cara membuat komponen FAB yang adaptif warna, responsif, dan mudah diakses.

Pelajari cara mengoptimalkan font web untuk Data Web Inti.

Salah satu dari serangkaian wawancara dengan anggota program Pakar Google Developers (GDE).

Mari kita buat loader CSS animasi dengan properti kustom cakupan dan fungsi pengaturan waktu animasi Buka CodePen dan buat pena baru. Buat markup untuk loader. Perhatikan penggunaan properti kustom inline: Anda juga dapat menggunakan generator ( Pug

Ringkasan tiga alat dan teknik untuk menguji dan memverifikasi kontras warna yang mudah diakses pada desain Anda.

Tutorial ini menjelaskan cara membuat navigasi utama yang dapat diakses dari sebuah {i>website<i}. Anda akan belajar tentang HTML semantik, aksesibilitas, dan bagaimana penggunaan atribut ARIA terkadang dapat lebih membahayakan daripada kebaikan.

Pemilih semu CSS yang praktis ini memberi Anda cara untuk memilih elemen yang merupakan modal.

Eksplorasi menyenangkan tentang cara menciptakan kembali ilusi optik dengan CSS.

Mengoptimalkan tag dan tag manager untuk Core Web Vitals.

Lihat beberapa cara yang berguna dan kreatif untuk menata gaya daftar.

Manfaat menggunakan Properti Khusus dalam sistem desain dan library komponen.

Pelajari cara menggunakan masing-masing properti CSS, rotasi, dan terjemahan untuk mendekati transformasi dengan cara yang intuitif.

Melihat beberapa cara untuk menganimasikan batas di CSS

BBC meluncurkan HSTS untuk situs mereka guna meningkatkan keamanan dan performa. Cari tahu artinya dan bagaimana HSTS dapat membantu Anda.

Pelajari alasan alat yang memantau metrik Data Web Inti dapat melaporkan angka yang berbeda, dan cara menafsirkan perbedaan tersebut.

GDE Enrique Fernandez Guerra tentang open source LSM HelpDev-nya.

Apa arti dukungan akhir untuk Internet Explorer bagi pelanggan dan developer di Maersk.com.

Selama ini HTML5Rocks, senang sekali dapat mengenal Anda.

Pelajari cara menyetel cookie pihak pertama untuk memastikan keamanan, kompatibilitas lintas browser, dan meminimalkan peluang kerusakan setelah cookie pihak ketiga dihentikan.

Web Audio API memungkinkan sinkronisasi AV dilakukan dengan benar.

Gradien konik dapat digunakan untuk membuat beberapa efek menarik, seperti contoh batas yang bagus ini. CodePen ini dibuat oleh Adam Argyle, yang awalnya dibagikan melalui tweet ini di Twitter, menunjukkan cara menggunakan gradien konik untuk membuat

Pahami perbedaan antara framework dan library dalam konteks lingkungan JavaScript sisi klien.

Pahami keputusan terkait penggunaan library atau framework JavaScript.

Menangkap error saat menggunakan Fetch API.

Resource ini dapat membantu Anda menemukan cara menggunakan terminal dengan cepat.

Update pada Google Fonts CSS API—cara kerjanya, cara menggunakannya, dan cara Google Fonts CSS API dapat menampilkan font web Anda secara efisien.

GOV.UK menghentikan dependensi jQuery mereka dari front end. Anda tidak akan pernah menebak apa yang terjadi. (Ya, tentu saja.)

Ikhtisar dasar tentang cara membangun komponen yang adaptif warna, responsif, dan mudah diakses.

Cari tahu apa itu pemindai pramuat browser, bagaimana pemindai ini membantu performa, dan bagaimana Anda dapat menghindarinya.

Mempermudah pembuatan untuk web.

Cara mengukur Data Web dengan alat analisis saat ini

Pakar Google Developers Web tentang bagaimana program bimbingan memberdayakan mereka untuk menjadi pemimpin.

Berbagi panduan praktis untuk {i>font<i} variabel, dengan banyak contoh.

Alat dari Josh W Comeau ini sangat memudahkan untuk membuat gradien yang terlihat bagus.

Kumpulan insight tentang titik masalah teratas, yang dikumpulkan dari percakapan empat mata dengan developer web.

Periksa status alat gambar.

Pelajari cakupan dan cara kerjanya di JavaScript.

Ringkasan dasar tentang cara membuat modal mini dan mega yang adaptif terhadap warna, responsif, dan mudah diakses dengan elemen ``.

Pelajari cara men-debug error pemutaran media di web.

Salah satu dari serangkaian wawancara dengan anggota program Pakar Google Developers (GDE).

Memuat gambar dengan cepat dalam area pandang awal—sambil memuat sisanya dengan lambat—dapat meningkatkan Data Web sekaligus memuat lebih sedikit byte.

Ringkasan dasar tentang cara mem-build status pemuatan adaptif warna dan mudah diakses dengan elemen ``.

Buat formulir pendaftaran dan login Anda sesederhana mungkin. Simpan kredensial dari formulir login agar pengguna tidak perlu login lagi saat mereka kembali. Untuk menyimpan kredensial pengguna dari formulir: Sebelum melanjutkan, periksa apakah

String Agen Pengguna berubah, strategi yang dilakukan Chrome dan Firefox untuk mengurangi dampaknya, serta cara Anda dapat membantu.

Ringkasan dasar tentang cara membuat favicon adaptif.

Pelajari cara merender grafis 2D ke kanvas di web dari WebAssembly dengan Emscripten.

Melupakan atau menyalahgunakan header Cache-Control dapat berdampak negatif pada keamanan situs web dan privasi pengguna Anda. Dapatkan rekomendasi untuk situs bernilai tinggi.

Metrik penting untuk situs yang sehat

Pelajari cara gPhoto2 ditransfer ke WebAssembly untuk mengontrol kamera eksternal melalui USB dari aplikasi web.

Gunakan Network Error Logging (NEL) untuk mengumpulkan error jaringan sisi klien.

Pelajari cara menggunakan fitur WebAssembly terbaru sambil mendukung pengguna di semua browser.

Pelajari cara kode yang berinteraksi dengan perangkat eksternal dapat ditransfer ke web dengan WebAssembly dan Fugu API.

Ringkasan dasar tentang cara mem-build komponen tombol tema yang adaptif dan mudah diakses.

Pelajari cara menyematkan kode JavaScript di library WebAssembly untuk berkomunikasi dengan dunia luar.

Oculus Quest 2 adalah headset virtual reality (VR) yang dibuat oleh Oculus, sebuah divisi Meta. Kini developer dapat membuat dan mendistribusikan Progressive Web App (PWA) 2D dan 3D yang memanfaatkan fitur multitasking Oculus Quest 2. Artikel ini menjelaskan pengalaman dan cara mem-build, melakukan sideload, dan menguji PWA Anda di Oculus Quest 2.

Intip proses dan alat yang digunakan untuk menciptakan pengalaman Designcember bergaya kalender liburan.

Upaya skeuomorf untuk membuat ulang kalkulator surya di web yang memanfaatkan sensor cahaya sekitar dan fitur overlay kontrol jendela.

Untuk waktu yang paling lama, Anda harus menggunakan solusi dan library untuk membuat salinan mendalam dari nilai JavaScript. Platform ini sekarang dilengkapi dengan 'structuredClone()', sebuah fungsi bawaan untuk menyalin mendalam.

Ringkasan dasar tentang cara mem-build komponen toast yang adaptif dan mudah diakses.

Mengumumkan pendanaan UI dari Chrome, yang dirancang untuk memberikan hibah bagi orang-orang yang mengerjakan alat desain, CSS, dan HTML.

Ringkasan dasar tentang cara membuat menu game 3D yang responsif, adaptif, dan mudah diakses.

Pelajari cara mengukur animasi, cara memikirkan frame animasi, dan kelancaran halaman secara keseluruhan.

Rangkuman semua pengumuman penting dari Chrome Dev Summit 2021, dengan link yang Anda perlukan untuk mencari tahu lebih lanjut.

Pelajari informasi terbaru di PageSpeed Insights untuk membantu Anda mengukur dan mengoptimalkan halaman dan kualitas situs dengan lebih baik.

Coba Lighthouse API baru untuk mengukur performa dan praktik terbaik di seluruh alur pengguna.

Selama tiga tahun terakhir, Chrome telah berupaya untuk memberdayakan aplikasi web yang ingin menembus batas kemungkinan di browser. Salah satu aplikasi web tersebut adalah Photoshop. Gagasan untuk menjalankan perangkat lunak sekompleks Photoshop secara langsung di browser sulit dibayangkan beberapa tahun lalu. Namun, dengan menggunakan berbagai teknologi web baru, Adobe kini menghadirkan Photoshop versi beta publik ke web.

Ringkasan dasar tentang cara membangun komponen multi-pilihan yang responsif, adaptif, dan mudah diakses untuk mengurutkan dan memfilter pengalaman pengguna.

Pelajari dasar-dasar penggunaan API Navigasi dan Resource Timing untuk menilai performa pemuatan di lapangan.

Sanitizer API yang baru bertujuan untuk membangun prosesor yang tangguh untuk string arbitrer yang akan disisipkan dengan aman ke dalam halaman. Artikel ini memperkenalkan API tersebut dan menjelaskan penggunaannya.

Dokumen ini membahas praktik terbaik performa yang dapat Anda gunakan saat memuat sematan pihak ketiga, teknik pemuatan yang efisien, dan alat Layout Shift Terminator yang membantu mengurangi pergeseran tata letak untuk sematan populer.

Jawaban atas pertanyaan umum tentang SPA, Data Web Inti, dan rencana Google untuk mengatasi batasan pengukuran saat ini.

preventDefault dan stopPropagation: kapan harus menggunakan metode mana dan apa yang sebenarnya dilakukan oleh setiap metode. Penanganan peristiwa JavaScript sering kali mudah. Hal ini terutama berlaku saat menangani struktur HTML sederhana (relatif