Langkah alami setelah mendapatkan PushSubscription dan menyimpannya, server kita akan memicu pesan push, tetapi ada satu hal yang saya abaikan. Pengalaman pengguna saat meminta izin dari pengguna untuk mengirim pesan push kepadanya. Sayangnya, sangat

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

Mengetahui kapan harus menggunakan polyfill bisa menjadi keputusan yang sulit, tetapi menggunakan fitur Dasar Pengukuran dapat membantu Anda menjawab pertanyaan ini. Pelajari lebih lanjut dalam panduan ini.

Pelajari Dasbor Platform Web dan cara membuat kueri HTTP API-nya untuk mendapatkan data tentang fitur yang telah mencapai Dasar Pengukuran guna membuat alat untuk alur kerja pengembangan Anda.

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.

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.

WasmFS dan fitur mimalloc di Emscripten dapat sangat membantu performa alokasi dan I/O. Panduan ini menunjukkan bagaimana fitur ini dapat meningkatkan kecepatan hingga 10 kali lipat atau lebih dalam beberapa kasus.

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

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?

Transaksi pembayaran menggunakan Pembayaran Web dimulai dengan ditemukannya aplikasi pembayaran. Pelajari cara menyiapkan metode pembayaran dan menyiapkan aplikasi pembayaran untuk penjual dan pelanggan untuk melakukan pembayaran.

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 pribadi untuk asal halaman dan tidak terlihat oleh pengguna yang memberikan akses opsional ke jenis file khusus yang sangat dioptimalkan untuk performa.

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 berikan background-color yang

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 menjadi lebih aman, lebih sederhana, lebih mudah digunakan, dan tanpa sandi. Dokumen 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

Pelajari cara mengimpor dan memaketkan berbagai jenis aset dari JavaScript dengan cara yang berfungsi di browser dan pemaket.

Ringkasan dasar tentang cara membuat komponen tombol terpisah yang mudah diakses.

Pelajari cara menggunakan skrip modul CSS untuk mengimpor stylesheet CSS menggunakan sintaksis yang sama dengan modul JavaScript.

Warnai merek Anda di input formulir HTML bawaan dengan satu baris kode.

Ikhtisar dasar tentang cara membangun komponen {i>switch<i} yang responsif dan mudah diakses.

Kumpulan header petunjuk klien memungkinkan situs mendapatkan preferensi media pengguna secara opsional pada waktu permintaan, sehingga server dapat menyisipkan CSS yang tepat untuk alasan performa. Kueri media CSS, dan secara khusus fitur media

Ringkasan dasar tentang cara membuat komponen breadcrumb yang responsif dan mudah diakses bagi pengguna untuk membuka situs Anda.

Pelajari cara menghadirkan aplikasi multi-thread yang ditulis dalam bahasa lain ke WebAssembly.

Streaming media adalah metode untuk terus mengirimkan konten multimedia dari server dengan konten yang telah dibagi menjadi beberapa potongan data yang dapat digabungkan kembali selama pemutaran dalam urutan tertentu melalui permintaan rentang menggunakan protokol seperti DASH dan HLS.

Membangun PWA dengan streaming offline memiliki tantangan tersendiri. Dalam artikel ini, Anda akan mempelajari API dan teknik yang memberikan pengalaman media offline berkualitas tinggi kepada pengguna.

Pelajari konsep pengelolaan hak digital, dan perintah yang diperlukan untuk beralih dari file bergerak mentah ke media terenkripsi yang dikemas untuk MPEG-DASH atau HLS menggunakan enkripsi Clear Key atau Widevine.

Framework media tersedia baik dalam variasi eksklusif maupun open source, dan pada intinya terdapat serangkaian API yang mendukung pemutaran audio dan/atau video untuk berbagai format container dan protokol transmisi.

Saat font web dimuat, kini Anda dapat menyesuaikan skalanya untuk menormalkan ukuran font dokumen dan mencegah pergeseran tata letak saat beralih antar-font

Ringkasan dasar tentang cara membuat skema warna yang dinamis dan dapat dikonfigurasi

Menampilkan gambar berukuran desktop ke perangkat seluler dapat menggunakan data 2–4x lebih banyak dari yang dibutuhkan. Sebagai ganti pendekatan “one-size-fits-all” untuk gambar, sediakan ukuran gambar yang berbeda ke berbagai perangkat.

Artikel ini membahas teknik terkait CSS untuk mengoptimalkan Data Web.

Mulai hari ini, perubahan pada CLS telah diluncurkan di sejumlah platform alat web Chrome, termasuk Lighthouse, PageSpeed Insights, dan Laporan UX Chrome.

Penambahan yang tampaknya kecil pada sintaksis pemilih CSS ini akan memiliki dampak besar.

Pelatihan Progressive Web App baru enam bagian kini tersedia, lengkap dengan rangkaian codelab baru untuk mengajari Anda cara membuat PWA yang andal, dapat diinstal, dan mumpuni.

Strategi untuk memigrasikan situs Anda dari mengandalkan string agen pengguna ke Petunjuk Klien Agen Pengguna yang baru.

Fitur media berbasis preferensi pengguna, kueri container, dan kueri media untuk jenis layar baru, seperti layar perangkat foldable, akan memungkinkan kita untuk menggunakan waktu di era baru desain web yang responsif.

Rangkuman presentasi Google I/O 2021 Thomas Steiner yang berjudul Excalidraw and Fugu: Improve Core User Journeys

Artikel ini mencantumkan header keamanan paling penting yang dapat Anda gunakan untuk melindungi situs. Gunakan data tersebut untuk memahami fitur keamanan berbasis web, mempelajari cara menerapkannya di situs Anda, dan sebagai referensi ketika Anda membutuhkan pengingat.

Pekerja layanan dapat menggunakan impor statis modul ES untuk membawa kode tambahan, sebagai alternatif untuk importScripts().

Ringkasan dasar tentang cara membuat scrollview horizontal responsif untuk TV, ponsel, desktop, dll.

Hari ini, kita akan membahas fitur alat baru di Lighthouse, PageSpeed, dan DevTools untuk membantu mengidentifikasi bagaimana situs Anda dapat meningkatkan Data Web.

Pelajari cara memanggil API web asinkron saat mengompilasi bahasa sinkron tradisional ke WebAssembly.

Dengan fitur Overlay Kontrol Jendela, developer dapat menyesuaikan kolom judul PWA yang terinstal sehingga PWA mereka terasa lebih seperti aplikasi.

Skrip pihak ketiga atau "tag" dapat menjadi sumber masalah performa di situs Anda, sehingga menjadi target pengoptimalan. Namun, sebelum Anda mulai mengoptimalkan tag yang telah ditambahkan, pastikan bahwa Anda tidak mengoptimalkan tag yang bahkan tidak Anda butuhkan. Artikel ini menunjukkan cara menilai permintaan untuk tag baru, serta mengelola dan meninjau permintaan yang ada.

WebOTP API kini dapat menerima OTP dari dalam iframe.

Objek DataTransfer menyimpan data yang ditarik selama operasi tarik lalu lepas. File ini mungkin menyimpan satu atau beberapa item data, masing-masing dari satu atau beberapa jenis data. Artikel ini menjelaskan apa yang dapat Anda lakukan dengan DataTransfer API.

Ikhtisar dasar tentang cara membuat animasi kata dan huruf terpisah.

Rencana untuk meningkatkan metrik CLS agar lebih adil untuk halaman yang berumur panjang.

Kepuasan Pengembang Web adalah proyek Google untuk mengumpulkan informasi tentang kebutuhan pengembang web. Tujuannya adalah menyediakan platform web yang lebih andal, dapat diprediksi, dan memiliki interoperabilitas, yang memungkinkan developer berinvestasi dan memercayainya, serta mengadopsi dan menggunakan fitur baru untuk mengembangkan platform dan bisnis mereka.

Ringkasan dasar tentang cara membuat komponen setelan penggeser dan kotak centang.

Mencari tahu nilai `this` bisa jadi rumit di JavaScript, berikut cara melakukannya...

Bab ini memperkenalkan cara memprogram dengan cara aplikasi mini.

Bab ini berisi detail tentang komponen yang disediakan oleh semua platform aplikasi mini.

Bab ini menunjukkan contoh proyek yang mengikuti pendekatan "pemrograman dengan cara aplikasi mini".

Bab ini membahas opsi markup, penataan gaya, skrip, dan pembaruan berbagai platform aplikasi mini.

Bab ini menyajikan pilihan project open source aplikasi mini yang menarik.

Bab ini membahas struktur project, siklus proses, dan bundling aplikasi mini.

Bab ini mengakhiri koleksi aplikasi mini dengan pengamatan bahwa berpikir di luar kebiasaan serta mengambil masukan dan inspirasi dari luar gelembung seseorang benar-benar dapat membantu ketika membangun masa depan yang lebih baik di web.

Bab ini memberikan latar belakang tentang aplikasi H5 dan QuickApp, yang keduanya berbeda dengan aplikasi mini.

Streams API memungkinkan JavaScript mengakses aliran data yang diterima melalui jaringan secara terprogram dan memprosesnya sesuai keinginan.

Ringkasan dasar tentang cara membuat komponen tab yang mirip dengan yang ditemukan di aplikasi iOS dan Android.

Isolasi lintas origin memungkinkan halaman web menggunakan fitur canggih seperti SharedArrayBuffer. Artikel ini menjelaskan cara mengaktifkan isolasi lintas asal di situs Anda.

Header Origin-Agent-Cluster akan memotong akses sinkron ke origin lain di domain yang sama, dan memberikan petunjuk ke browser untuk memberikan resource khusus origin.

Mempertahankan rasio aspek dalam gambar dan elemen kini lebih mudah dicapai dengan properti CSS rasio aspek yang baru.

Pelajari cara mengoptimalkan carousel untuk performa dan kegunaan.

Ringkasan singkat tentang histori, arsitektur, kasus penggunaan, dan masa depan WebRTC.

Pelajari rencana kami untuk meningkatkan metrik Pergeseran Tata Letak Kumulatif dan beri kami masukan.

Sebagian besar waktu, http://localhost berperilaku seperti HTTPS untuk tujuan pengembangan. Namun, ada beberapa kasus khusus, seperti nama host kustom atau menggunakan cookie aman di seluruh browser, yang mengharuskan Anda menyiapkan situs

Menggunakan http://localhost untuk pengembangan lokal biasanya tidak masalah, kecuali dalam beberapa kasus khusus. Postingan ini menjelaskan kapan Anda perlu menjalankan situs pengembangan lokal dengan HTTPS. Lihat juga: Cara menggunakan HTTPS untuk

Pelajari cara membuat komponen tata letak navigasi samping geser yang responsif.

Ringkasan dasar tentang cara membuat sidenav slide yang responsif

Ikuti 5 teknik pemusatan saat mereka menjalani serangkaian pengujian untuk melihat teknik mana yang paling tahan diubah.

Pelajari 5 teknik pemusatan yang berbeda dengan CSS.

Performa pemuatan pertama itu penting, tetapi bukan segalanya. Pengguna yang memuat situs Anda untuk kedua kalinya akan menggunakan cache mereka untuk mendapatkan akses ke konten Anda, jadi ini adalah kunci untuk memastikan situs Anda berfungsi dengan baik, baik untuk kecepatan maupun ketepatan.

Pelajari cara mengimplementasikan Houdini Paint API lintas browser dan jelajahi dunia worklet Houdini bersama Houdini.how.

Meminta pengguna memberikan OTP (sandi sekali pakai) yang dikirim melalui SMS adalah cara umum untuk mengonfirmasi nomor telepon pengguna. Posting ini memberikan praktik terbaik untuk membuat formulir OTP melalui SMS dengan pengalaman pengguna yang luar biasa.

Pelajari praktik terbaik untuk formulir alamat.

Alat modular baru yang memungkinkan pengumpulan data performa secara otomatis dari beberapa sumber.

Maksimalkan konversi dengan membantu pengguna Anda menyelesaikan formulir alamat dan pembayaran secepat dan semudah mungkin.

Gunakan fitur browser lintas platform untuk membuat formulir pendaftaran sederhana yang aman, mudah diakses, dan mudah digunakan.

Pelajari praktik terbaik untuk formulir pembayaran.

Bantu pengguna Anda mendaftar, login, dan mengelola detail akun mereka dengan mudah.

Cara mengomunikasikan pekerja jendela dan layanan untuk melakukan tugas yang terkait dengan performa, penyimpanan dalam cache, dan offline.

Cara pekerja layanan dapat berkomunikasi secara proaktif dengan halaman untuk memberitahukan peristiwa tertentu.

Cara pekerja web dan pekerja layanan dapat meningkatkan performa situs Anda, serta kapan harus menggunakan pekerja web versus pekerja layanan.

Cara membuat saluran komunikasi dua arah antara halaman dan pekerja layanan.

Aplikasi web sekarang dapat menonaktifkan akselerasi mouse saat merekam peristiwa pointer.

Pelajari cara menciptakan pengalaman yang mirip dengan Instagram Stories di web.

Ringkasan dasar tentang cara membangun pengalaman yang mirip dengan Instagram Stories di web.

Definisi "situs yang sama" terus berkembang untuk menyertakan skema URL, sehingga link antara versi HTTP dan HTTPS dari sebuah situs kini dihitung sebagai permintaan lintas situs. Upgrade ke HTTPS secara default untuk menghindari masalah jika memungkinkan, atau baca terus untuk mengetahui detail nilai atribut SameSite yang diperlukan.

Postingan ini memberikan panduan tentang cara menggunakan atribut pemuatan di sistem pengelolaan konten.

Tutorial interaktif langkah demi langkah yang menunjukkan cara membangun klien yang membuat pengguna berlangganan notifikasi push, menampilkan pesan push sebagai notifikasi, dan membuat pengguna berhenti berlangganan notifikasi push.

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

Ringkasan tentang apa yang dimaksud dengan notifikasi push, alasan Anda mungkin menggunakannya, dan cara kerjanya.

Cara melacak penggunaan offline situs Anda sehingga Anda dapat menjelaskan mengapa situs Anda membutuhkan pengalaman offline yang lebih baik.

Mendemonstrasikan bagaimana teknik berperforma tinggi dapat membuat animasi yang kompleks dan indah.

Min, maks, dan clamp memberikan kemampuan CSS canggih yang memungkinkan gaya yang lebih responsif dengan lien kode yang lebih sedikit. Postingan ini membahas cara mengontrol ukuran elemen, mempertahankan spasi yang tepat, dan menerapkan tipografi yang lancar menggunakan fungsi matematika CSS yang didukung dengan baik ini.

SXG adalah mekanisme pengiriman yang memungkinkan otentikasi asal resource secara terpisah dari cara pengirimannya.

Singkatan properti logis baru dan properti inset baru untuk Chromium.

Menganimasikan dengan baik adalah inti untuk pengalaman web yang luar biasa. Postingan ini menjelaskan mengapa jenis animasi tertentu berperforma lebih baik daripada yang lain.

Untuk meningkatkan performa animasi CSS, gunakan properti CSS transformasi dan opasitas sebanyak mungkin, dan hindari apa pun yang memicu tata letak atau penggambaran.

Pastikan pekerja layanan mengetahui apa yang harus dilakukan saat respons parsial diminta.

Fitur geser, kemiringan, dan zoom pada kamera akhirnya dapat dikontrol di web.

Uji coba origin adalah cara untuk menguji fitur platform web baru atau eksperimental. Uji coba origin pihak ketiga memungkinkan penyedia konten tersemat untuk mencoba fitur baru di beberapa situs. Uji coba origin adalah cara untuk menguji fitur

Jendela terpisah adalah jenis kebocoran memori umum yang sangat sulit ditemukan dan diperbaiki.

Pelajari cara membuat pengalaman offline yang sederhana untuk aplikasi Anda.

Menggunakan {i>clipping<i} di CSS dapat membantu kita menjauh dari segala sesuatu dalam desain kita yang tampak seperti sebuah kotak. Dengan menggunakan berbagai bentuk dasar, atau SVG, Anda dapat membuat jalur klip. Kemudian potong bagian elemen yang tidak ingin Anda tampilkan.

Gunakan CSS untuk menyesuaikan warna, ukuran, atau jenis angka atau poin dalam elemen `` atau ``.

Dengan mengalihkan permintaan ke /.well-known/change-password ke URL ubah sandi, Anda dapat memungkinkan pengguna memperbarui sandi mereka dengan lebih mudah daripada sebelumnya.

Setelah didaftarkan, aplikasi pembayaran berbasis web dapat menerima permintaan pembayaran dari penjual. Artikel ini menjelaskan cara mengorkestrasi transaksi pembayaran dari pekerja layanan selama runtime.

Setelah didaftarkan, aplikasi pembayaran berbasis web dapat menerima permintaan pembayaran dari penjual. Artikel ini menjelaskan cara mengorkestrasi transaksi pembayaran dari pekerja layanan selama runtime.

Bagaimana berbohong kepada {i>screen reader<i} dapat menyembuhkan aksesibilitas, ketika tidak menggosok garam di dalamnya!

Pelajari cara menggunakan WebAssembly untuk menghadirkan library, yang ditulis dalam bahasa lain, ke Web dengan cara yang aman dan idiomatis.

Properti visibilitas konten CSS memungkinkan manfaat performa rendering konten web dengan melewati rendering konten di luar layar. Artikel ini menunjukkan cara menggunakan properti CSS baru ini untuk waktu pemuatan awal yang lebih cepat, menggunakan kata kunci otomatis. Anda juga akan mempelajari Spesifikasi Pembatasan CSS dan nilai lain untuk visibilitas konten yang memberi Anda kontrol lebih besar atas cara konten dirender di browser.

Async Clipboard API menyederhanakan proses salin dan tempel yang sesuai dengan izin.

Pertimbangkan untuk menetapkan kebijakan perujuk sebagai `strict-origin-when-cross-origin`. Kebijakan ini mempertahankan sebagian besar kegunaan perujuk, sekaligus mengurangi risiko kebocoran data lintas asal.

Pelajari cara berbagai komponen dapat digunakan untuk merender konten web di dalam aplikasi Android.

Yang dipelajari tim Buletin tentang pekerja layanan saat mengembangkan PWA.

Pelajari cara menyiapkan Lighthouse CI dan mengintegrasikannya ke dalam alur kerja developer.

Menghadirkan keamanan dan pengalaman pengguna yang lebih baik untuk Akun Google.

Pelajari cara menerapkan properti kustom CSS dengan pengetikan semantik, nilai penggantian, dan lainnya, langsung di file CSS Anda.

Kelebihan dan kekurangan menggunakan logika masa berakhir yang konsisten atau berbeda di seluruh cache pekerja layanan dan lapisan cache HTTP.

Pelajari cara mengubah aplikasi pembayaran Android untuk memberikan alamat pengiriman yang dipilih pengguna serta informasi kontak saat penjual memintanya melalui Payment Request API.

Manfaatkan pengujian A/B untuk mengevaluasi dampak kecepatan situs terhadap metrik bisnis Anda.

Pelajari cara mendaftarkan aplikasi pembayaran berbasis web ke browser pelanggan. Anda juga akan mempelajari cara melakukan debug.

Pelajari cara menyesuaikan aplikasi pembayaran berbasis web Anda agar berfungsi dengan Pembayaran Web dan memberikan pengalaman pengguna yang lebih baik bagi pelanggan.

Laporan UX Chrome (secara informal dikenal sebagai CrUX) adalah {i>dataset<i} publik yang berisi data pengalaman pengguna yang sebenarnya di jutaan situs web. Tidak seperti data lab, data CrUX sebenarnya berasal dari pengguna yang memilih untuk menonton di lapangan.

Permintaan navigasi adalah permintaan untuk HTML yang dibuat setiap kali Anda memasukkan URL baru di bilah navigasi, atau mengikuti link di halaman. Di sinilah pekerja layanan membuat dampak terbesarnya pada performa: dengan menggunakan pekerja layanan untuk merespons tanpa menunggu jaringan, Anda dapat memastikan bahwa navigasi yang cepat dan tangguh dapat diandalkan.

Sejak Chrome 84, ResizeObserver mendukung pengukuran kotak baru yang disebut device-pixel-content-box, yang mengukur dimensi elemen dalam piksel fisik. Hal ini penting untuk merender grafis yang sempurna dengan piksel, terutama dalam konteks layar berkepadatan tinggi.

Postingan ini menyoroti beberapa baris CSS canggih yang melakukan tugas berat yang serius dan membantu Anda membuat tata letak modern yang andal.

Ringkasan berita utama dan pembaruan yang diumumkan dalam acara komunitas online selama 3 hari, dan pengingat tentang acara regional yang akan datang.

Gunakan fitur browser lintas platform untuk membuat formulir login sederhana yang aman, mudah diakses, dan mudah digunakan.

Gunakan fitur browser lintas platform untuk membuat formulir login yang aman, dapat diakses, dan mudah digunakan.

Pelajari cara meningkatkan Progressive Web App secara bertahap agar tetap berguna di semua browser modern, namun memberikan pengalaman canggih di browser yang mendukung kemampuan web baru seperti akses sistem file, akses papan klip sistem, pengambilan kontak, sinkronisasi latar belakang berkala, penguncian layar saat aktif, fitur berbagi web, dan banyak lagi.

Cara men-debug masalah SEO di setiap halaman atau seluruh situs.

Cara menerapkan pengalaman penelusuran yang andal dengan Workbox, menggunakan Sinkronisasi Latar Belakang dan Push API.

Menyematkan file media di halaman web menggunakan tag dan.

Fragmen Teks memungkinkan Anda menentukan cuplikan teks dalam fragmen URL. Saat bernavigasi ke URL dengan fragmen teks seperti itu, browser dapat memberi penekanan dan/atau menariknya ke pengguna.

Memberi tahu vendor browser tentang masalah yang Anda temukan di browser mereka, di perangkat atau platform tertentu merupakan bagian integral dalam membuat platform web menjadi lebih baik.

Pelajari cara membuat Progressive Web App terasa seperti aplikasi 'sebenarnya' dengan memahami cara menerapkan pola aplikasi khusus platform dengan teknologi web.

Model RAIL memungkinkan desainer dan developer untuk secara andal menargetkan pekerjaan pengoptimalan performa yang memiliki dampak tertinggi pada pengalaman pengguna. Mempelajari sasaran dan pedoman yang ditetapkan model RAIL dan alat mana yang dapat Anda gunakan untuk mencapainya.

quicklink adalah library untuk mempercepat pemuatan halaman berikutnya dengan mengambil data link dalam area pandang selama waktu tidak ada aktivitas.

Fetch Metadata adalah fitur platform web baru yang dirancang untuk memungkinkan server melindungi diri dari serangan lintas origin.

Saat membuat tata letak menggunakan CSS, Anda perlu berhati-hati agar tidak membuat pengalaman terputus bagi pengguna yang menggunakan keyboard.

Mengacaukan animasi web Anda akan menjadi jauh lebih mudah.

Pembayaran Web bertujuan untuk memberikan pengalaman pembayaran yang lancar di web. Pelajari cara kerjanya, manfaatnya, dan bersiaplah untuk mengintegrasikan aplikasi pembayaran Anda dengan Pembayaran Web.

Pelajari cara penjual mengintegrasikan aplikasi pembayaran, cara kerja transaksi pembayaran dengan Payment Request API, dan hal-hal yang dapat dilakukan di Pembayaran Web.

Pelajari cara menyesuaikan aplikasi pembayaran Android Anda agar berfungsi dengan Pembayaran Web dan memberikan pengalaman pengguna yang lebih baik bagi pelanggan.

Chromium 80 memiliki regresi ketebalan font sistem UI di macOS. Alasan kerusakan, dan kekuatan super baru pasca-resolusi, pantas untuk ditunggu di Chromium 83.

Pintasan aplikasi memberikan akses cepat ke beberapa tindakan umum yang sering kali diperlukan pengguna.

Buat kasus bisnis yang solid untuk PWA Anda. Pelajari kapan Anda harus berinvestasi, dan bagaimana Anda dapat mengukur keberhasilannya.

Detail rencana Chrome dan browser lainnya untuk menghapus AppCache.

Praktik terbaik untuk menggabungkan berbagai penawaran penginstalan guna meningkatkan tingkat penginstalan serta menghindari persaingan dan kanibalisasi platform.

Penyimpanan persisten dapat membantu melindungi data penting agar tidak dipindahkan, dan mengurangi kemungkinan kehilangan data.

Modul umumJS sangat dinamis, yang mencegah pengoptimal dan paket JavaScript melakukan pengoptimalan lanjutan atas modul tersebut.

Pelajari cara membuat profil performa aplikasi Audio Web di Chrome menggunakan `about://tracing` dan ekstensi **WebAudio** di Chrome DevTools.

Beberapa web API meningkatkan risiko serangan side-channel seperti Spectre. Untuk mengurangi risiko tersebut, browser menawarkan lingkungan terisolasi berbasis keikutsertaan yang disebut isolasi lintas asal. Pelajari alasan diperlukannya isolasi lintas asal untuk menggunakan fitur canggih seperti `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()`, dan timer resolusi tinggi dengan presisi yang lebih baik.

Pelajari cara Next.js dan Gatsby meningkatkan output build mereka untuk meminimalkan kode duplikat dan meningkatkan performa pemuatan halaman

Istilah "situs yang sama" dan "origin yang sama" sering dikutip tetapi sering disalahpahami. Halaman ini menjelaskan perbedaan antara kedua sistem tersebut dan perbedaannya.

Beberapa web API meningkatkan risiko serangan side-channel seperti Spectre. Untuk mengurangi risiko tersebut, browser menawarkan lingkungan terisolasi berbasis keikutsertaan yang disebut isolasi lintas asal. Gunakan COOP dan COEP untuk menyiapkan lingkungan tersebut serta mengaktifkan fitur canggih seperti `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()`, atau timer resolusi tinggi dengan presisi yang lebih baik.

Pelajari cara mengukur penggunaan memori halaman web dalam produksi untuk mendeteksi regresi.

Dalam postingan pertama dari tim engineer web.dev ini, pelajari cara kami membangun situs—termasuk penggunaan Eleventy dan Komponen Web oleh kami.

Properti CSS skema warna dan tag meta yang sesuai memungkinkan developer mengikutsertakan halaman mereka ke default khusus tema dari stylesheet agen pengguna, seperti, misalnya, kontrol formulir, scroll bar, serta warna sistem CSS. Pada saat yang sama, fitur ini mencegah browser menerapkan transformasi apa pun sendiri.

Cara memastikan bahwa fungsi inti situs Anda selalu tersedia, dapat diakses, aman, dapat digunakan, dapat ditemukan, dan cepat.

Cara menentukan bottleneck server, memperbaiki bottleneck dengan cepat, meningkatkan performa server, dan mencegah regresi.

Pelajari cara membuat halaman Anda lebih mudah diakses dengan meningkatkan penggunaan warna dan kontras.

Elemen interaktif harus memiliki cukup ruang di sekelilingnya, ketika digunakan pada perangkat seluler atau layar sentuh. Hal ini akan membantu semua orang, terutama mereka yang memiliki gangguan motorik.

Kami tahu bahwa mendesain secara responsif untuk memberikan pengalaman multiperangkat terbaik adalah ide yang baik, tetapi desain responsif juga menghasilkan aksesibilitas.

Memperkenalkan Jenis Tepercaya: API browser untuk mencegah pembuatan skrip lintas situs berbasis DOM di aplikasi web modern.

Cara membuka Progressive Web App di aplikasi Android.

Dengan mengoptimalkan siklus rendering, Chrome 83 menghilangkan pergeseran tata letak saat melakukan pramuat font opsional. Menggabungkan dengan tampilan font: opsional adalah cara paling efektif untuk menjamin rendering font kustom bebas jank.

Cara mendapatkan dan menyalurkan file SXG menggunakan nginx, serta tantangan pengambilan data subresource.

Cara membuat sertifikat TLS dengan ekstensi SXG, menginstal alat untuk membuat file SXG, dan mengonfigurasi nginx untuk menyalurkan file SXG.

Gunakan kueri media untuk mengirim gambar yang hanya sebesar yang diperlukan, sebuah teknik yang umumnya dikenal sebagai gambar responsif.

Bagaimana departemen lain dapat membantu menyukseskan proyek pengoptimalan kecepatan situs Anda.

Mulai Chrome 81, scroller tetap tidak bergerak saat tata letak halaman berubah. Dengan kata lain, Anda tidak perlu lagi menambahkan pemroses peristiwa untuk memaksa renapping.

Pelajari cara menyalurkan Signed HTTP Exchange (SXG) menggunakan Web Packager.

Gunakan peristiwa beforeinstallprompt untuk memberikan pengalaman penginstalan dalam aplikasi yang lancar dan kustom bagi pengguna.

Jika Anda sudah menggunakan WebXR Device API, Anda akan senang mengetahui hanya ada sedikit hal baru yang dapat dipelajari. Hampir sama seperti cara memasukkan sesi WebXR. Menjalankan loop frame sebagian besar sama. Perbedaannya terletak pada konfigurasi yang memungkinkan konten ditampilkan dengan tepat untuk augmented reality.

WebXR Hit Test API adalah penyempurnaan untuk augmented reality web yang memungkinkan Anda menempatkan objek virtual dalam tampilan dunia nyata.

Virtual reality hadir di web di Chrome 79. Peluncuran WebXR Device API merupakan dasar untuk augmented reality dan virtual reality. Artikel ini adalah artikel kedua dalam seri, yang berfokus pada loop frame, yaitu bagian dari sesi XR tempat gambar ditampilkan kepada penonton. Browser lainnya akan segera mendukung WebXR Device API, antara lain Firefox Reality, Oculus Browser, Edge, dan browser Helio Magic Leap.

Pelajari cara Chrome menginvestasikan upaya di sejumlah alat open source untuk memajukan ekosistem JavaScript

Pengantar Progressive Web App (PWA) dan tiga pilar yang membedakannya dari aplikasi web lainnya.

Ikon yang dapat disamarkan adalah format yang memberi Anda lebih banyak kontrol dan memungkinkan Progressive Web App menggunakan ikon adaptif. Ikon maskable bisa terlihat bagus di semua perangkat Android.

Cara mendaftarkan rute di Workbox sehingga Progressive Web App Anda muncul di UI berbagi tingkat sistem, bersama aplikasi khusus platform.

Umumnya, halaman atau aplikasi memiliki analisis atau data lain yang belum dikirimkan saat pengguna menutupnya. Situs menggunakan panggilan sinkron ke XMLHttpRequest() untuk menjaga halaman atau aplikasi tetap terbuka hingga datanya diteruskan ke server. Ini akan berdampak buruk pada pengalaman pengguna dan mengabaikan cara yang lebih baik untuk menyimpan data. Chrome 80 menerapkan perubahan spesifikasi terbaru untuk mengatasi hal ini.

Pekerja modul memudahkan pemblokiran thread utama dengan memindahkan kode mahal ke thread latar belakang sekaligus mempertahankan manfaat ergonomis dan performa dari modul JavaScript standar.

Baca pengembangan terbaru dalam alat kecepatan termasuk metrik performa baru, pembaruan pada PageSpeed Insights dan Laporan Pengalaman Pengguna Chrome (CrUX), serta insight dari analisis Web Almanac tentang ekosistem web.

Pelajari pola pemuatan adaptif, cara menerapkannya, dan cara Facebook, Tinder, eBay, dan perusahaan lainnya menggunakan pemuatan adaptif dalam produksi.

Thread utama browser sangat kewalahan bekerja. Dengan menggunakan pekerja web untuk mengalihkan kode dari thread utama, Anda dapat meningkatkan keandalan dan pengalaman pengguna aplikasi Anda secara signifikan.

Komentar dari responden survei tentang berbagai teknik pengoptimalan gambar.

Dalam codelab ini, pelajari cara mem-build server notifikasi push.

Cara Next.js mempercepat navigasi dengan pramuat rute dan cara menyesuaikannya. Dalam postingan ini, Anda akan mempelajari cara kerja pemilihan rute di Next.js, cara mengoptimalkannya untuk kecepatan, dan cara menyesuaikannya agar sesuai dengan

Pelajari manfaat dan konsekuensi mendukung AMP di aplikasi Next.js Anda AMP adalah framework komponen web yang menjamin muat halaman yang cepat. Next.js memiliki dukungan bawaan untuk AMP. Panduan ini pertama-tama menjelaskan secara singkat cara AMP

Dengan Web Share API, aplikasi web dapat menggunakan kemampuan berbagi yang disediakan sistem yang sama dengan aplikasi khusus platform. Web Share API memungkinkan aplikasi web berbagi tautan, teks, dan file ke aplikasi lain yang diinstal di perangkat dengan cara yang sama seperti aplikasi khusus platform.

Cara mempercepat aplikasi Next.js dengan pemisahan kode dan strategi pemuatan cerdas. Postingan ini menjelaskan berbagai jenis pemisahan kode dan cara menggunakan impor dinamis untuk mempercepat aplikasi Next.js Anda. Secara default, Next.js membagi

Next.js menangani banyak pengoptimalan di aplikasi React sehingga Anda tidak perlu melakukannya Next.js adalah framework React yang memiliki sejumlah pengoptimalan performa bawaan. Ide utama di balik framework ini adalah untuk memastikan aplikasi

Virtual reality hadir di web di Chrome 79. Berdasarkan WebXR Devicer API, peluncuran ini adalah dasar untuk augmented reality dan virtual reality. Artikel ini adalah yang pertama dari seri yang membahas konsep dasar dan menjelaskan cara mengikuti sesi XR. Browser lainnya akan segera mendukung WebXR Device API, antara lain Firefox Reality, Oculus Browser, Edge, dan browser Helio Magic Leap.

Pelajari cara kerja cookie dan apa itu cookie pihak pertama dan pihak ketiga.

Situs kini dapat menandai cookie mereka secara eksplisit untuk penggunaan lintas situs. Pelajari cara me-markup cookie untuk memastikan cookie pihak pertama dan ketiga terus berfungsi setelah perubahan ini diterapkan.

Memahami manfaat iklan yang cepat dan cara mempertimbangkan kecepatan iklan.

Gunakan notifikasi push untuk berinteraksi dengan pengguna melalui update bertarget dan tepat waktu.

Dalam codelab ini, pelajari cara meminta izin pengguna dan mengirim notifikasi.

Dalam codelab ini, pelajari cara mengelola notifikasi dengan pekerja layanan.

Panduan penggunaan WebPageTest untuk mengidentifikasi dan memperbaiki masalah ketidakstabilan tata letak.

Ponsel fitur kembali populer, terutama di pasar berkembang yang menggunakan jaringan 2G. Berikut adalah pembelajaran kami dari membuat PROXX, tiruan Minesweeper seluler, yang dimuat dengan cepat di ponsel fitur pada jaringan 2G.

Meskipun berguna, variabel CSS sulit digunakan karena dapat mengambil nilai apa pun dan akan diganti, serta Anda tidak dapat menggunakan transisi dengan variabel tersebut. CSS Properties dan Values API Level 1 mengatasi masalah ini.

Pelajari cara mempercepat navigasi mendatang dengan mengambil data resource.

Cari tahu cara memperbaiki error konten campuran di situs Anda, untuk melindungi pengguna dan memastikan semua konten Anda dimuat.

Konten campuran terjadi saat HTML awal dimuat melalui koneksi HTTPS yang aman, namun resource lainnya dimuat melalui koneksi HTTP yang tidak aman.

Penelitian menunjukkan bahwa video web menghasilkan interaksi dan penjualan yang lebih tinggi. Bahkan jika Anda belum menambahkan video ke situs Anda, hanya masalah waktu hingga Anda melakukannya.

Demonstrasi interaktif tentang cara menentukan ikon yang harus muncul di layar utama iOS.

Platform Web sangat matang untuk pengembangan game saat ini. Kunci untuk membangun game web modern adalah menerapkan praktik terbaik dari desain dan monetisasi game. Postingan ini memberikan panduan untuk mencapai sasaran ini.

Arsitektur multi-origin menghadirkan banyak tantangan saat mem-build PWA. Pelajari manfaat dan kekurangan beberapa origin, serta beberapa solusi untuk mem-build PWA di situs multi-origin.

Posting ini menjelaskan cara mengurangi ukuran WebFont yang Anda gunakan di situs Anda, sehingga tipografi yang baik tidak berarti situs yang lambat.

Postingan ini menjelaskan cara memuat WebFont untuk mencegah pergeseran tata letak dan halaman kosong saat WebFont tidak tersedia saat halaman dimuat.

Pelajari cara membuat aplikasi Angular progresif yang dapat diinstal.

Pelajari cara meningkatkan waktu pemuatan dan pengalaman pengguna dengan menghindari kesalahan umum saat menggunakan skrip pihak ketiga.

Pelajari cara menggunakan Lighthouse dan Chrome DevTools untuk mengidentifikasi resource pihak ketiga yang lambat.

Pertimbangkan untuk menggunakan CDN gambar untuk mengoptimalkan gambar situs Anda dan mengurangi biaya data untuk pengguna Anda.

Postingan ini menjelaskan jenis JavaScript pihak ketiga yang umum dan masalah performa yang dapat disebabkan olehnya. Artikel ini juga memberikan panduan umum tentang cara mengoptimalkan skrip pihak ketiga.

Pelajari teknik untuk mengoptimalkan resource pihak ketiga yang lambat dengan beberapa bantuan dari Lighthouse.

Fitur platform web baru mempermudah pembuatan elemen khusus yang berfungsi seperti kontrol formulir bawaan.

Pelajari petunjuk resource rel=preconnect dan rel=dns-prefetch serta cara menggunakannya.

Pelajari cara menambahkan efek latar belakang seperti pemburaman dan transparansi ke elemen UI di web menggunakan properti filter tampilan latar CSS.

usang saat-pemvalidasian ulang membantu developer menyeimbangkan antara segera—memuat konten yang disimpan dalam cache—dan keaktualan—memastikan pembaruan pada konten yang disimpan dalam cache digunakan di masa mendatang.

Pelajari cara membuat daftar besar menjadi lebih responsif dengan mengimplementasikan scroll virtual dengan Dev Kit Komponen Angular.

Pelajari cara mengoptimalkan deteksi perubahan aplikasi Angular Anda untuk membuatnya lebih responsif.

Pelajari cara menggunakan strategi pramuat Angular untuk aplikasi yang lebih cepat.

Dengan pembagian kode, Anda dapat mempercepat aplikasi, tetapi dapat memperlambat navigasi selanjutnya. Pengambilan data prediktif adalah cara efisien untuk menggunakan analisis data untuk mengambil data dengan cerdas apa yang mungkin digunakan berikutnya oleh pengguna, yang mengoptimalkan pemanfaatan jaringan.

Pelajari cara menggunakan Network Information API untuk menyesuaikan konten Anda berdasarkan kualitas jaringan.

Pelajari cara membuat aplikasi Angular Anda dapat diakses menggunakan codelyzer.

Pelajari cara menggunakan pekerja layanan Angular untuk melakukan precache aset statis di aplikasi Anda.

Pelajari cara menggunakan anggaran performa langsung di Angular CLI.

Banyak perangkat kini mendukung mode gelap di seluruh sistem operasi atau pengalaman tema gelap. Postingan ini menjelaskan bagaimana mode gelap dapat didukung di halaman web, mencantumkan praktik terbaik, dan memperkenalkan elemen kustom bernama pengalihan mode gelap yang memungkinkan developer web menawarkan cara kepada pengguna untuk mengganti preferensi tingkat sistem operasi mereka di halaman web tertentu.

Pelajari cara membuat aplikasi Angular Anda lebih cepat, lebih andal, dapat ditemukan, dapat diinstal, dan mudah diakses.

Pelajari cara memperkecil app bundle awal dengan menggunakan pemisahan kode tingkat rute.

Gunakan srcset untuk memilih ukuran gambar yang tepat secara otomatis.

Postingan ini merangkum pembahasan tentang status komponen web pada tahun 2019, yang disampaikan oleh Kevin Schaaf dari Polymer Project dan Caridy Patiño dari Salesforce.

Lighthouse kini mendukung anggaran performa. Fitur ini, LightWallet, dapat disiapkan dalam waktu kurang dari lima menit dan menyediakan feedvack tentang ukuran dan jumlah resource halaman.

Menunjukkan pendapatan yang dihasilkan oleh peningkatan situs, sekaligus mengecualikan faktor eksternal seperti kampanye pemasaran.

Sejak peluncuran Payment Request API di Chrome 53 dan Payment Handler API di Chrome 68, telah ada beberapa perubahan yang dibuat pada spesifikasi masing-masing. Postingan ini merangkum pembaruan tersebut dan akan terus mengakumulasi perubahan API tersebut.

Progressive Web App mudah diinstal dengan tombol instal baru di kolom URL Chrome (omnibox).

Mempelajari dampak performa situs di berbagai bagian funnel e-commerce

Cara mempromosikan penginstalan Progressive Web App dan praktik terbaik.

Cara mempromosikan penginstalan Progressive Web App dan praktik terbaik.

Bekerja dengan pekerja layanan masih baru dan asing bagi banyak developer web. Postingan ini memberikan beberapa tips untuk memusatkan pikiran Anda.

Gambar menghabiskan sejumlah besar ruang visual dan menjadi sebagian besar byte yang didownload di situs web. Gunakan kebijakan fitur baru untuk mengidentifikasi gambar yang berukuran besar.

Pelajari cara menggunakan Penting untuk mengekstrak dan menyisipkan CSS penting secara inline, serta meningkatkan waktu render.

Mempelajari cara mendiagnosis interaksi pengguna yang mahal dan mengganggu pekerjaan.

Pelajari cara meningkatkan waktu render dengan teknik CSS yang penting dan cara memilih alat terbaik untuk proyek Anda.

Untuk Google I/O 2019, kami memperkenalkan tiga inisiatif Performa Web baru yang kami harap akan menghasilkan pengalaman pengguna yang lebih baik bagi semua orang.

PROXX sebagai game mirip minesweeper yang dibuat sebagai PWA. Fitur ini berfungsi di berbagai perangkat dan secara bertahap meningkatkan tampilan visual seiring dengan semakin canggihnya perangkat.

Bukankah akan menyenangkan jika pengguna dapat menelusuri situs Anda menggunakan kamera mereka?

Pelajari cara menandai cookie untuk penggunaan pihak pertama dan pihak ketiga dengan atribut SameSite. Anda dapat meningkatkan keamanan situs dengan menggunakan nilai Lax dan Strict SameSite's untuk meningkatkan perlindungan terhadap serangan CSRF. Menentukan atribut Tidak Ada yang baru memungkinkan Anda menandai cookie secara eksplisit untuk penggunaan lintas situs.

Portals API yang baru diusulkan membantu menjaga front-end Anda tetap sederhana sekaligus memungkinkan navigasi yang mulus dengan transisi khusus. Dalam artikel ini, dapatkan pengalaman langsung menggunakan Portal untuk meningkatkan pengalaman pengguna di seluruh situs Anda.

Menggunakan Network Information API untuk menyesuaikan aset yang ditayangkan kepada pengguna berdasarkan kualitas koneksi mereka.

Dalam codelab ini, pelajari bagaimana kompresi Brotli dapat lebih mengurangi rasio kompresi dan ukuran keseluruhan aplikasi Anda.

Untuk Google I/O 2019, orang-orang di tim web.dev telah mengirimkan sejumlah update termasuk desain baru, dokumen Lighthouse lainnya, dan blog baru.

Brand yang mengoptimalkan kecepatan sering kali mengalami kemunduran dengan cepat. Dalam postingan ini, kita akan membahas cara memastikan pengalaman cepat Anda tetap cepat.

Performa sebenarnya sangat bervariasi karena perbedaan pada perangkat pengguna, koneksi jaringan, dan faktor lainnya. Dalam postingan ini, kami membahas alat yang dapat membantu Anda mengumpulkan data lapangan atau lab untuk menilai performa halaman.

Kecepatan itu penting, tetapi apa sebenarnya yang kami maksud? Apa yang dimaksud dengan memiliki situs yang cepat?

React adalah library open source yang mempermudah pembuatan UI. Jalur pembelajaran ini akan membahas berbagai API dan alat di dalam ekosistem yang harus Anda pertimbangkan untuk digunakan guna meningkatkan performa dan kegunaan aplikasi Anda.

reaksi-window adalah library yang memungkinkan daftar besar dirender secara efisien.

Metode React.lazy memudahkan pemisahan kode aplikasi React pada tingkat komponen menggunakan impor dinamis. Gunakan bersama dengan Suspense untuk menunjukkan status pemuatan yang sesuai kepada pengguna Anda.

reaksi-snap adalah library pihak ketiga yang melakukan pra-render halaman di situs Anda menjadi file HTML statis. Hal ini dapat meningkatkan waktu First Paint dalam aplikasi Anda.

reaksi-axe adalah library yang mengaudit aplikasi React dan mencatat masalah aksesibilitas apa pun ke konsol Chrome DevTools. eslint-plugin-jsx-a11y adalah plugin ESLint yang mengidentifikasi dan menerapkan sejumlah aturan aksesibilitas langsung di JSX Anda. Menggunakan keduanya bersamaan dapat memberikan pendekatan audit yang komprehensif untuk menemukan dan mengatasi masalah aksesibilitas di aplikasi Anda.

Workbox disertakan ke dalam Create React App dengan konfigurasi default yang melakukan precache semua aset statis di aplikasi Anda dengan setiap build.

Create React App menyertakan manifes aplikasi web secara default. Memodifikasi file ini akan memungkinkan Anda mengubah cara aplikasi ditampilkan saat diinstal di perangkat pengguna.

Dalam codelab ini, pelajari cara meningkatkan performa halaman dengan melakukan pramuat dan pengambilan data resource.

Kueri media Preferreds-reduced-motion mendeteksi apakah pengguna telah meminta agar sistem meminimalkan jumlah animasi atau gerakan yang digunakannya. Ini untuk pengguna yang membutuhkan atau lebih memilih animasi yang diperkecil; misalnya, orang dengan gangguan vestibular sering lebih suka animasi seminimal mungkin.

Pelajari cara menunda CSS yang tidak penting dengan tujuan untuk mengoptimalkan Jalur Rendering Penting, dan meningkatkan First Contentful Paint (FCP).

Intersection Observer v2 menambahkan kemampuan untuk tidak hanya mengamati persimpangan per se, tetapi juga mendeteksi apakah elemen yang berpotongan terlihat pada saat persimpangan.

Buat situs yang merespons kebutuhan dan kemampuan perangkat yang digunakan untuk melihatnya.

Stylesheet yang dapat dibangun memberikan cara yang mulus untuk membuat dan mendistribusikan gaya ke dokumen atau akar bayangan tanpa perlu mengkhawatirkan FOUC.

Rekomendasi untuk menerapkan logika dan rendering dalam aplikasi.

Tentukan anggaran performa dengan penyiapan minimal dan terapkan sebagai bagian dari alur kerja pengembangan Anda menggunakan bundlesize dengan Travis CI.

Cara terbaik untuk memantau anggaran performa Anda adalah dengan mengotomatiskannya. Cari tahu cara memilih alat yang paling sesuai dengan kebutuhan Anda dan penyiapan saat ini.

Pelajari cara menetapkan anggaran performa dan menjaga ukuran paket Anda tetap terkontrol dengan webpack.

Anda telah bekerja keras untuk menjadi cepat, sekarang pastikan Anda tetap cepat dengan mengotomatiskan pengujian performa di Travis CI dengan Lighthouse Bot.

Bagaimana cara mengintegrasikan WebAssembly ke dalam penyiapan ini? Dalam artikel ini, kita akan mengerjakan ini dengan C/C++ dan Emscripten sebagai contoh.

GetInstallationRecentApps() API adalah API platform web yang memungkinkan Anda memeriksa apakah aplikasi iOS/Android/desktop atau PWA Anda terinstal di perangkat pengguna.

Dalam codelab ini, pelajari cara meningkatkan performa aplikasi dengan meminimalkan jumlah kode yang ditranspilasi.

Petunjuk klien adalah sekumpulan header permintaan HTTP yang dapat digunakan untuk mengubah cara kami menayangkan resource halaman berdasarkan karakteristik perangkat dan koneksi jaringan pengguna. Dalam artikel ini, Anda akan mempelajari semua petunjuk klien, cara kerjanya, dan beberapa ide tentang cara menggunakannya untuk membuat situs Anda lebih cepat bagi pengguna.

Agar pembaca layar dapat menampilkan UI lisan kepada pengguna, elemen yang bermakna harus memiliki label atau alternatif teks yang tepat. Alternatif label atau teks memberikan nama yang dapat diakses pada elemen, salah satu properti utama untuk mengekspresikan semantik elemen di hierarki aksesibilitas.

Indikator fokus (sering ditandai dengan "lingkaran fokus") mengidentifikasi elemen yang saat ini difokuskan. Bagi pengguna yang tidak dapat menggunakan mouse, indikator ini sangat penting, karena berfungsi sebagai pengganti pointer mouse.

Elemen HTML standar memiliki aksesibilitas keyboard bawaan. Saat membuat komponen interaktif kustom, gunakan tabindex untuk memastikan komponen tersebut dapat diakses dari keyboard.

Banyak pengguna yang berbeda mengandalkan keyboard untuk membuka aplikasi—dari pengguna dengan gangguan motorik sementara dan permanen hingga pengguna yang menggunakan pintasan keyboard agar lebih efisien dan produktif. Memiliki strategi navigasi keyboard yang baik untuk aplikasi Anda akan menciptakan pengalaman yang lebih baik bagi semua orang.

Pernahkah Anda bertanya-tanya bagaimana teknologi pendukung, seperti pembaca layar, tahu apa yang harus diumumkan kepada pengguna? Jawabannya adalah karena teknologi ini bergantung pada developer yang memberi markup pada halaman mereka dengan HTML semantik. Namun, apa yang dimaksud dengan semantik, dan bagaimana pembaca layar menggunakannya?

Dengan menggunakan elemen yang benar untuk {i>heading<i} dan {i>landmark<i}, Anda dapat secara dramatis meningkatkan pengalaman navigasi bagi pengguna teknologi asitif.

Situs yang dapat diakses adalah situs yang kontennya dapat diakses terlepas dari gangguan pengguna, dan yang fungsinya juga dapat dioperasikan oleh pengguna yang paling beragam.

Dengan menggunakan elemen HTML semantik yang benar, Anda mungkin dapat memenuhi sebagian besar atau semua kebutuhan akses keyboard. Artinya, Anda dapat menghemat waktu untuk mengelola tabindex, dan pengguna akan lebih puas.

Untuk mempertahankan diri dari serangan, pengembang perlu mengurangi kerentanan dan menambahkan fitur keamanan ke aplikasi. Untungnya, di web, browser menyediakan banyak fitur keamanan, termasuk ide tentang 'sandbox'.

Dalam codelab ini, pelajari cara menyajikan gambar dengan dimensi yang benar untuk meningkatkan performa jaringan.

Dalam codelab ini, pelajari cara memuat gambar yang benar-benar berbeda berdasarkan ukuran tampilan perangkat.

Dalam codelab ini, pelajari cara menampilkan teks secara langsung menggunakan Font Face Observer.

Ketika kata 'keamanan' muncul di pikiran, biasanya dalam konteks berita buruk. Tetapi keamanan adalah sesuatu yang dianggap sebagai bagian positif dan penting dari pengembangan web seperti 'pengalaman pengguna' atau 'aksesibilitas'.

Dalam codelab ini, pelajari cara mengontrol perilaku caching resource menggunakan header HTTP.

Cache HTTP browser adalah baris pertahanan pertama Anda. Ini bukan pendekatan yang paling ampuh atau fleksibel, dan Anda memiliki kontrol terbatas selama masa pakai respons yang di-cache. Namun ada beberapa aturan praktis yang memberi Anda implementasi caching yang masuk akal tanpa banyak upaya, jadi Anda harus selalu mencoba mengikutinya.

Gambar WebP lebih kecil daripada format JPEG dan PNG—biasanya dengan pengurangan ukuran file 25–35%. Tindakan ini mengurangi ukuran halaman dan meningkatkan performa.

Workbox adalah toolkit pekerja layanan tingkat tinggi yang dibuat di atas API Pekerja Layanan dan Cache Storage. Library ini menyediakan serangkaian library yang siap produksi untuk menambahkan dukungan offline ke aplikasi web.

Pastikan situs Anda dimuat dengan cepat dengan panduan langkah demi langkah untuk menentukan nilai minimum metrik performa yang bermanfaat bagi situs Anda.

PRPL adalah akronim yang menjelaskan pola yang digunakan untuk membuat halaman web dimuat dan menjadi interaktif lebih cepat. Dalam panduan ini, pelajari bagaimana masing-masing teknik ini saling cocok, tetapi masih dapat digunakan secara terpisah untuk mencapai hasil performa.

Dalam codelab ini, pelajari cara kerja kebijakan origin yang sama saat mengakses data di dalam iframe.

Menampilkan gambar berukuran desktop ke perangkat seluler dapat menggunakan data 2–4x lebih banyak dari yang dibutuhkan. Sebagai ganti pendekatan “one-size-fits-all” untuk gambar, sediakan ukuran gambar yang berbeda ke berbagai perangkat.

Kebijakan asal yang sama browser memblokir pembacaan resource dari asal yang berbeda untuk tujuan keamanan. Dengan mengaktifkan CORS, server dapat memberi tahu browser bahwa browser dapat menggunakan asal tambahan.

Dalam codelab ini, pelajari cara membuat aplikasi andal dengan mendaftarkan pekerja layanan.

Dalam codelab ini, pelajari cara melacak error 404 tersembunyi yang dapat mencegah halaman Anda diindeks dengan benar.

Cache HTTP browser adalah baris pertahanan pertama Anda terhadap permintaan jaringan yang tidak perlu.

Dalam codelab ini, pelajari cara meningkatkan performa aplikasi sederhana melalui pemisahan kode.

Lighthouse adalah alat yang membantu Anda mengukur dan menemukan cara untuk meningkatkan performa halaman. Lighthouse memberi Anda laporan tentang performa halaman tersebut. Laporan ini memberikan skor untuk setiap metrik dan daftar peluang yang, jika Anda menerapkannya, akan membuat halaman dimuat lebih cepat.