Artikel
Mengoptimalkan tugas yang berjalan lama
Anda diberitahu bahwa Anda tidak memblokir utas utama dan memecah tugas yang panjang, tetapi apa artinya melakukan hal-hal itu?
Menyiapkan metode pembayaran
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.
Pramuat modul
Pramuat modul menawarkan cara untuk memuat modul JavaScript secara deklaratif sebelumnya.
Mengukur isi otomatis browser di formulir Anda
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.
Bagian 2: Membuat deteksi toksisitas AI sisi klien
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.
Bagian 1: AI sisi klien untuk memerangi toksisitas online
"Lindungi pengguna Anda dan ciptakan lingkungan online yang lebih aman dengan deteksi konten beracun. Di bagian pertama, kami membagikan konteks yang Anda perlukan untuk men-deploy AI guna mengurangi toksisitas di sumbernya: keyboard pengguna."
Total Waktu Pemblokiran (TBT)
Postingan ini menjelaskan metrik Total Blocking Time (TBT) dan menjelaskan cara mengukurnya
Cara paling efektif untuk meningkatkan Core Web Vitals
Kumpulan praktik terbaik yang telah diidentifikasi Chrome sebagai peluang terbesar untuk mengoptimalkan performa web dan meningkatkan Core Web Vitals
Memulai pengukuran Data Web
Pelajari cara mengukur Data Web situs Anda di lingkungan lab dan dunia nyata.
Web Vitals
Metrik penting untuk situs yang sehat
Mengoptimalkan Largest Contentful Paint
Panduan langkah demi langkah tentang cara menguraikan LCP dan mengidentifikasi area utama yang perlu ditingkatkan.
Membandingkan kemampuan LLM dengan ringkasan
Evaluasi hasil berbagai model dan perintah dengan LLM sebagai teknik penilaian. Validasi model didelegasikan ke LLM lain, bukan mengandalkan penilaian manusia.
Properti visibilitas konten CSS kini tersedia di Dasar Pengukuran
Properti visibilitas konten CSS kini tersedia di Dasar Pengukuran.
Cara menentukan nilai minimum metrik Core Web Vitals
Riset dan metodologi di balik nilai minimum Data Web Inti
Diagnosis interaksi lambat di lab secara manual
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.
Alur kerja Data Web Inti dengan alat Google
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.
Dasar pengukuran
Artikel ini menjelaskan kisah asal Baseline, keterlibatan Google, dan kepemilikan Grup Komunitas WebDX.
Back-forward cache
Pelajari cara mengoptimalkan halaman untuk pemuatan instan saat menggunakan tombol kembali dan maju pada browser.
CSS nesting ditingkatkan dengan CSSNestedDeclarations
Penyusunan bertingkat CSS menjadi jauh lebih baik.
First Input Delay (FID)
Postingan ini memperkenalkan metrik Penundaan Input Pertama (FID) dan menjelaskan cara mengukurnya
Men-debug performa dalam kolom
Pelajari cara mengatribusikan data performa dengan informasi debug untuk membantu Anda mengidentifikasi dan memperbaiki masalah pengguna nyata dengan analisis
Meningkatkan performa dan UX untuk AI sisi klien
Temukan manfaat AI sisi klien, termasuk latensi rendah, pengurangan biaya sisi server, tidak ada persyaratan kunci API, peningkatan privasi pengguna, dan akses offline.
Membuat tolok ukur performa @property CSS
Apa dampak @property terhadap performa CSS Anda?
Menghubungkan Core Web Vitals dan pendapatan iklan dengan alat Google
Pelajari cara menggunakan alat Google untuk membantu mengaitkan Core Web Vitals dengan pendapatan iklan.
Saatnya memuat lambat iframe di luar layar!
Postingan ini membahas atribut pemuatan dan cara menggunakannya untuk mengontrol pemuatan iframe.
Penyimpanan untuk web
Ada banyak opsi untuk menyimpan data di browser. Mana yang terbaik untuk kebutuhan Anda?
{i>Web Push Protocol<i}
Tutorial interaktif langkah demi langkah yang menunjukkan cara membangun server yang mengelola langganan notifikasi push dan mengirimkan permintaan protokol push web ke layanan push.
Membangun beberapa Progressive Web App di domain yang sama
Pelajari cara yang direkomendasikan dan tidak direkomendasikan untuk membuat beberapa PWA yang menggunakan kembali domain yang sama beserta kelebihan dan kekurangannya.
Apa yang diperlukan agar dapat diinstal?
Kriteria kemampuan penginstalan Progressive Web App.
Apa yang membuat Progressive Web App yang bagus?
Apa yang dimaksud dengan Progressive Web App yang bagus atau yang bagus?
Cara Chrome menangani update untuk manifes aplikasi web
Yang diperlukan untuk mengubah ikon, pintasan, warna, dan metadata lainnya di manifes aplikasi web untuk PWA Anda.
Menambahkan manifes aplikasi web
Manifes aplikasi web adalah file JSON sederhana yang memberi tahu browser tentang perilaku aplikasi web Anda.
Memitigasi pembuatan skrip lintas situs (XSS) dengan Kebijakan Keamanan Konten (CSP) yang ketat
Pelajari cara men-deploy CSP berdasarkan nonce atau hash skrip sebagai pertahanan mendalam terhadap skrip lintas situs.
Mengakses perangkat hardware di web
Artikel ini membantu developer Web memilih API hardware yang tepat berdasarkan perangkat tertentu.
Izinkan penggunaan ulang kunci sandi di seluruh situs Anda dengan Permintaan Asal Terkait
Pelajari cara menggunakan Permintaan Origin Terkait untuk mengizinkan penggunaan ulang kunci sandi di seluruh situs Anda.
Pemuatan lambat gambar tingkat browser untuk web
Postingan ini membahas atribut pemuatan dan cara penggunaannya untuk mengontrol pemuatan gambar.
Pilih format gambar yang tepat
Memilih format gambar yang tepat adalah langkah pertama dalam mengirimkan gambar yang dioptimalkan di situs Anda. Postingan ini membantu Anda membuat pilihan yang tepat.
Metrik kustom
Metrik khusus memungkinkan Anda mengukur dan mengoptimalkan aspek pengalaman situs yang unik bagi situs Anda.
Mengukur dan melakukan debug performa dengan Google Analytics 4 dan BigQuery
Pelajari cara mengirimkan data Web Vitals ke properti Google Analytics 4 dan mengekspor data tersebut untuk dianalisis di BigQuery dan Looker Studio.
Praktik terbaik izin web
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.
Praktik terbaik untuk pemberitahuan cookie
Pelajari bagaimana pemberitahuan cookie memengaruhi performa, pengukuran performa, dan UX.
Menyesuaikan notifikasi media dan kontrol pemutaran dengan Media Session API
Developer web dapat menyesuaikan notifikasi media dan merespons peristiwa terkait media seperti mencari atau melacak perubahan dengan Media Session API.
Menemukan interaksi lambat di lapangan
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.
Menggunakan tabindex
Gunakan atribut tabindex untuk menetapkan posisi tab elemen secara eksplisit.
Time to First Byte (TTFB)
Postingan ini memperkenalkan metrik Time to First Byte (TTFB) dan menjelaskan cara mengukurnya.
Engineering prompt yang praktis untuk LLM yang lebih kecil
Pelajari cara menyesuaikan perintah untuk mencapai hasil yang diinginkan di berbagai LLM, model, dan ukuran model.
Mengoptimalkan Time to First Byte
Pelajari cara mengoptimalkan metrik Time to First Byte.
Interaksi dengan Next Paint (INP)
Postingan ini memperkenalkan metrik Interaction to Next Paint (INP) dan menjelaskan cara kerjanya, cara mengukurnya, serta menawarkan saran tentang cara meningkatkannya.
Warna dependen warna skema CSS dengan terang-dark()
deskripsi: Menentukan warna yang bereaksi terhadap skema warna yang digunakan dengan fungsi gelap-terang().
Pola performa WebAssembly untuk aplikasi web
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).
Tata letak petak animasi CSS
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.
Mainkan game Chrome dino dengan gamepad
Pelajari cara mengontrol game web dengan Gamepad API.
Atribut inert
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.
Etika dan AI
Ada banyak pertimbangan etis saat menggunakan alat AI dan membuat konten baru.
Memperkenalkan Tim AI Web.dev
Berkenalan dengan penulis teknologi dan tim relasi developer.
Upgrade penelusuran situs Anda: Jawaban kontekstual dengan AI generatif
Ada banyak pertimbangan etis saat menggunakan alat AI dan membuat konten baru.
Apa itu Kecerdasan Buatan?
Akronim AI sering digunakan secara bergantian untuk mewakili berbagai jenis teknologi yang membentuk bidang AI.
Menentukan penyedia kunci sandi dengan AAGUID
Pihak yang mengandalkan dapat menentukan asal kunci sandi dengan memeriksa AAGUID. Pelajari cara kerjanya.
Mengompilasi dan mengoptimalkan Wasm dengan Binaryen
Dengan menggunakan contoh bahasa mainan sintetis yang disebut ExampleScript, pelajari cara menulis dan mengoptimalkan modul WebAssembly di JavaScript menggunakan Binaryen.js API.
Merekam audio dan video dalam HTML5
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>
Komponen web <model-viewer> memungkinkan Anda menggunakan model 3D pada halaman web secara deklaratif.
pembahasan mendalam userVerification
Pelajari cara menggunakan `userVerification` di WebAuthn
Mengapa data CrUX berbeda dengan data RUM saya?
Pelajari alasan mengapa data RUM dapat menampilkan angka Data Web Inti yang berbeda dari CrUX.
Aksesibilitas untuk developer web
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.
Memuat JavaScript Pihak Ketiga
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.
Largest Contentful Paint (LCP)
Postingan ini memperkenalkan metrik Largest Contentful Paint (LCP) dan menjelaskan cara mengukurnya
Mencegah pembuatan kunci sandi baru jika sudah ada
Pelajari cara mencegah pembuatan kunci sandi baru jika sudah ada di pengelola sandi pengguna.
Bekerja dengan IndexedDB
Panduan dasar-dasar IndexedDB.
5 cuplikan CSS yang harus diketahui setiap developer front-end pada tahun 2024
CSS yang layak, andal, dan stabil di alat yang dapat Anda gunakan sekarang.
Apa saja bagian dari URL?
Apa perbedaan antara host, situs, dan origin? Apa itu eTLD+1? Artikel ini menjelaskannya.
Mempelajari kredensial yang mudah ditemukan
Pelajari apa yang dimaksud dengan kredensial yang dapat ditemukan dan cara membangun pengalaman pengguna yang sesuai dengan kasus penggunaan Anda.
Performa rendering
Pengguna akan tahu jika situs dan aplikasi tidak berjalan dengan baik, jadi pengoptimalan performa rendering sangatlah penting.
ResizeObserver: seperti document.onresize untuk elemen
`ResizeObserver` memberi tahu Anda ketika persegi panjang konten elemen berubah ukuran sehingga Anda dapat bereaksi dengan semestinya.
Mengoptimalkan encoding dan ukuran transfer aset berbasis teks
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.
OffscreenCanvas—mempercepat operasi kanvas Anda dengan pekerja web
Dokumen ini menjelaskan bagaimana Anda dapat menggunakan OffscreenCanvas API untuk mencapai peningkatan kinerja saat merender grafik di aplikasi web Anda.
First Contentful Paint (FCP)
Postingan ini memperkenalkan metrik First Contentful Paint (FCP) dan menjelaskan cara mengukurnya
Jaringan penayangan konten (CDN)
Artikel ini memberikan ringkasan komprehensif tentang jaringan penayangan konten (CDN). Selain itu, bagian ini juga menjelaskan cara memilih, mengonfigurasi, dan mengoptimalkan penyiapan CDN.
Apa yang membuat pengalaman logout yang baik?
Panduan praktis developer tentang apa yang harus dilakukan saat pengguna logout dari situs.
Waktu untuk Interaktif (TTI)
Postingan ini memperkenalkan metrik Waktu untuk Interaktif (TTI) dan menjelaskan cara mengukurnya
Mengoptimalkan pemuatan resource dengan Fetch Priority API
Fetch Priority API menunjukkan prioritas relatif resource ke browser. API ini dapat memungkinkan pemuatan yang optimal dan meningkatkan Data Web Inti.
Pseudo class :user-valid dan :user-invalid
Tentang class pseudo :valid pengguna dan :tidak valid pengguna serta cara menggunakannya untuk meningkatkan pengalaman pengguna validasi input.
Mengoptimalkan Core Web Vitals untuk pengambil keputusan bisnis
Pelajari cara pengambil keputusan bisnis dan non-developer dapat meningkatkan Data Web Inti.
Nuansa string encoding base64 dalam JavaScript
Pahami dan hindari masalah umum saat menerapkan encoding dan decoding base64 ke string.
Subgrid CSS
Subgrid memungkinkan kemudahan berbagi petak, sehingga memungkinkan petak bertingkat agar selaras dengan ancestor dan seinduk.
Memuat iklan secara efektif tanpa memengaruhi kecepatan halaman
Di dunia digital saat ini, iklan online merupakan bagian penting dari web gratis yang kita semua nikmati. Namun, iklan yang tidak diterapkan dengan baik dapat menyebabkan pengalaman penjelajahan yang lebih lambat, pengguna yang frustrasi, dan berkurangnya engagement. Pelajari cara memuat iklan secara efektif tanpa memengaruhi kecepatan halaman Anda, memastikan pengalaman pengguna yang lancar, dan memaksimalkan peluang pendapatan bagi pemilik situs.
Empat jenis umum cakupan kode
Pelajari apa itu cakupan kode dan temukan empat cara umum untuk mengukurnya.
Perspektif teknis, baik menguji maupun tidak
Tentukan hal yang perlu diuji dan hal yang dapat dikesampingkan.
Menentukan kasus pengujian dan prioritas
Tentukan apa yang akan diuji, tentukan kasus pengujian Anda, dan prioritaskan.
Metrik performa yang berfokus pada pengguna
Metrik performa yang berfokus pada pengguna adalah alat penting dalam memahami dan meningkatkan pengalaman situs Anda dengan cara yang bermanfaat bagi pengguna sungguhan.
Pramuat gambar responsif
Pelajari berbagai kemungkinan baru dan menarik untuk pramuat gambar responsif guna memastikan pengalaman pengguna yang luar biasa.
Menyesuaikan tipografi ke preferensi pengguna dengan CSS
Metode untuk menyesuaikan {i>font<i} dengan preferensi pengguna, sehingga mereka sangat nyaman membaca konten Anda.
Limas atau Kepiting? Temukan strategi pengujian yang sesuai
Temukan cara menggabungkan berbagai jenis pengujian ke dalam strategi wajar yang cocok dengan proyek Anda.
Tiga jenis umum otomatisasi pengujian
Mari kita mulai dengan dasar-dasarnya! Mempelajari dua mode pengujian umum dan tiga jenis otomatisasi pengujian.
Menghapus Download yang Tidak Diperlukan
Anda harus mengaudit sumber daya secara berkala untuk memastikan bahwa setiap sumber daya membantu memberikan pengalaman pengguna yang lebih baik.
Apa itu WebAssembly dan dari mana asalnya?
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.
Mengompilasi mkbitmap ke WebAssembly
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.
Sistem file pribadi origin
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
Menghosting data pengguna dengan aman di aplikasi web modern
Cara menampilkan konten yang dikontrol pengguna dengan aman di aplikasi web.
Menerapkan AVIF untuk situs web yang lebih responsif
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.
Mengoptimalkan Interaksi ke Next Paint
Pelajari cara mengoptimalkan Interaksi dengan Next Paint situs Anda.
Fitur dasar pengukuran yang dapat Anda gunakan sekarang
Pelajari hanya beberapa fitur yang merupakan bagian dari Dasar Pengukuran.
Evaluasi skrip dan tugas yang berjalan lama
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.
Rendering sisi klien untuk HTML dan interaktivitas
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.
Pengaruh ukuran DOM yang besar terhadap interaktivitas, dan tindakan yang dapat Anda lakukan
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.
Mengoptimalkan penundaan input
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.
Menggunakan ekstensi Data Web untuk men-debug masalah Data Web Inti
Ekstensi Data Web kini menampilkan lebih banyak informasi proses debug untuk membantu Anda mengidentifikasi penyebab utama masalah Data Web Inti.
Mengoptimalkan Pergeseran Tata Letak Kumulatif
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.
Bangun pengalaman WordPress dalam browser dengan WordPress Playground dan WebAssembly
WordPress lengkap yang didukung PHP yang hanya berjalan di browser dengan WebAssembly
Cumulative Layout Shift (CLS)
Postingan ini memperkenalkan metrik Pergeseran Tata Letak Kumulatif (CLS) dan menjelaskan cara mengukurnya.
Fungsi baru untuk developer—disediakan oleh WebAssembly
Etalase alat kini tersedia di web berkat WebAssembly.
Apa itu peta sumber?
Meningkatkan kualitas pengalaman proses debug web dengan peta sumber.
PWA di app store
Progressive Web App dapat dikirimkan ke app store seperti Android Play Store atau Microsoft Store dan lainnya.
6 cuplikan CSS yang harus diketahui setiap developer front-end pada tahun 2023
CSS yang layak, andal, dan stabil di alat yang dapat Anda gunakan sekarang.
Fungsi trigonometri di CSS
Hitung sinus, kosinus, tangen, dan lainnya di CSS.
Melakukan operasi per frame video yang efisien pada video dengan requestVideoFrameCallback()
Metode requestVideoFrameCallback() memungkinkan penulis web mendaftarkan callback yang berjalan dalam langkah-langkah rendering saat frame video baru dikirim ke compositor.
Sorotan komunitas GDE: Lars Knudsen
Salah satu dari serangkaian wawancara dengan anggota program Pakar Google Developers (GDE).
Tips CSS Cepat! Teks Gradien Animasi
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
Pola baru untuk aplikasi media
Postingan blog ini mengumumkan koleksi pola baru untuk aplikasi media.
Membangun Chrometober!
Bagaimana buku yang bisa digulir menjadi hidup karena berbagi tips dan trik yang seru dan menakutkan bagi Chrometober ini.
Membuat komponen tooltip
Ringkasan dasar tentang cara membuat elemen kustom tooltip yang adaptif warna dan mudah diakses.
Login dengan kunci sandi melalui isi otomatis formulir
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.
Buat kunci sandi untuk login tanpa sandi
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.
Membuat komponen tombol tindakan mengambang (FAB)
Ringkasan dasar tentang cara membuat komponen FAB yang adaptif warna, responsif, dan mudah diakses.
Praktik terbaik untuk font
Pelajari cara mengoptimalkan font web untuk Data Web Inti.
Sorotan komunitas GDE: Alba Silvente Fuentes
Salah satu dari serangkaian wawancara dengan anggota program Pakar Google Developers (GDE).
Tips CSS Cepat! Loader Animasi
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
Menguji Kontras Warna Desain Web
Ikhtisar tentang tiga alat dan teknik untuk menguji dan memverifikasi kontras warna desain Anda yang mudah diakses.
Membangun navigasi utama untuk {i>website<i}
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.
Apakah :modal?
Pemilih semu CSS yang praktis ini memberi Anda cara untuk memilih elemen yang merupakan modal.
Membangun ilusi petak yang bengkok
Eksplorasi menyenangkan tentang cara menciptakan kembali ilusi optik dengan CSS.
Praktik terbaik untuk tag dan tag manager
Mengoptimalkan tag dan tag manager untuk Core Web Vitals.
Gaya daftar materi iklan
Lihat beberapa cara yang berguna dan kreatif untuk menata gaya daftar.
Cara Nordhealth menggunakan Properti Khusus di Komponen Web
Manfaat menggunakan Properti Khusus dalam sistem desain dan library komponen.
Kontrol yang lebih mendetail atas transformasi CSS dengan properti transformasi individual
Pelajari cara menggunakan masing-masing properti CSS, rotasi, dan terjemahan untuk mendekati transformasi dengan cara yang intuitif.
Animasi batas CSS
Melihat beberapa cara untuk menganimasikan batas di CSS
Bagaimana BBC meluncurkan HSTS untuk keamanan dan performa yang lebih baik.
BBC meluncurkan HSTS untuk situs mereka guna meningkatkan keamanan dan performa. Cari tahu artinya dan bagaimana HSTS dapat membantu Anda.
Alasan data lab dan lapangan bisa berbeda (dan tindakan yang harus dilakukan terhadap data tersebut)
Pelajari alasan alat yang memantau metrik Data Web Inti dapat melaporkan angka yang berbeda, dan cara menafsirkan perbedaan tersebut.
Situasi yang saling menguntungkan
GDE Enrique Fernandez Guerra tentang open source LSM HelpDev-nya.
Akhir dari Internet Explorer
Apa arti dukungan akhir untuk Internet Explorer bagi pelanggan dan developer di Maersk.com.
Selamat tinggal HTML5Rocks
Selama ini HTML5Rocks, senang sekali dapat mengenal Anda.
Resep kue pihak pertama
Pelajari cara menyetel cookie pihak pertama untuk memastikan keamanan, kompatibilitas lintas browser, dan meminimalkan peluang kerusakan setelah cookie pihak ketiga dihentikan.
Menyinkronkan pemutaran audio dan video di web
Web Audio API memungkinkan sinkronisasi AV dilakukan dengan benar.
Gunakan gradien kerucut untuk membuat batas yang keren
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
Perbedaan antara library dan framework JavaScript
Pahami perbedaan antara framework dan library dalam konteks lingkungan JavaScript sisi klien.
Memilih library atau framework JavaScript
Pahami keputusan seputar penggunaan library atau framework JavaScript.
Mengimplementasikan penanganan error saat menggunakan Fetch API
Menangkap error saat menggunakan Fetch API.
Panduan Developer Front-End untuk Terminal
Resource ini dapat membantu Anda menemukan cara menggunakan terminal dengan cepat.
API untuk font web yang cepat dan indah
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 menghapus jQuery dari front end-nya.
GOV.UK menghentikan dependensi jQuery mereka dari front end. Anda tidak akan pernah menebak apa yang terjadi. (Ya, tentu saja.)
Membuat komponen tombol
Ikhtisar dasar tentang cara membangun komponen yang adaptif warna, responsif, dan mudah diakses.
Jangan melawan pemindai pramuat browser
Cari tahu apa itu pemindai pramuat browser, bagaimana pemindai ini membantu performa, dan bagaimana Anda dapat menghindarinya.
Praktik terbaik untuk mengukur Data Web di lapangan
Cara mengukur Data Web dengan alat analisis saat ini
Menjembatani kesenjangan
Mempermudah pembuatan untuk web.
Menemukan keberanian dan inspirasi di komunitas developer
Pakar Google Developers Web tentang bagaimana program bimbingan memberdayakan mereka untuk menjadi pemimpin.
Font variabel di kehidupan nyata
Berbagi panduan praktis untuk {i>font<i} variabel, dengan banyak contoh.
Buat gradien CSS yang bagus dengan cepat menggunakan CSS Gradient Creator
Alat dari Josh W Comeau ini sangat memudahkan untuk membuat gradien yang terlihat bagus.
Pelajari lebih dalam masalah utama developer web
Kumpulan insight tentang titik masalah teratas, yang dikumpulkan dari percakapan empat mata dengan developer web.
Jadikan gambar situs Anda sempurna dengan images.tooling.report
Periksa status alat gambar.
Cakupan variabel global dan lokal
Pelajari cakupan dan cara kerjanya di JavaScript.
Membuat komponen dialog
Ikhtisar dasar tentang cara membangun modal mini dan mega yang adaptif warna, responsif, dan mudah diakses dengan elemen ``.
Men-debug error pemutaran media di web
Pelajari cara men-debug error pemutaran media di web.
Sorotan komunitas GDE: Nishu Goel
Salah satu dari serangkaian wawancara dengan anggota program Pakar Google Developers (GDE).
Efek performa dari pemuatan lambat yang terlalu sering
Memuat gambar dengan cepat di area pandang awal, sekaligus memuat sisanya dengan sangat lambat—dapat meningkatkan Data Web sekaligus memuat lebih sedikit byte.
Membuat komponen panel pemuatan
Ringkasan dasar tentang cara mem-build status pemuatan adaptif warna dan mudah diakses dengan elemen ``.
Simpan Kredensial dari Formulir
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
Chrome dan Firefox akan segera mencapai versi utama 100
String Agen Pengguna berubah, strategi yang dilakukan Chrome dan Firefox untuk mengurangi dampaknya, serta cara Anda dapat membantu.
Membuat favicon adaptif
Ringkasan dasar tentang cara membuat favicon adaptif.
Menggambar ke kanvas di Emscripten
Pelajari cara merender grafis 2D ke kanvas di web dari WebAssembly dengan Emscripten.
Tingkatkan keamanan dan privasi dengan mengupdate Cache HTTP
Melupakan atau menyalahgunakan header Cache-Control dapat berdampak negatif pada keamanan situs web dan privasi pengguna Anda. Dapatkan rekomendasi untuk situs bernilai tinggi.
Elemen HTML tambahan
Metrik penting untuk situs yang sehat
Melakukan porting aplikasi USB ke web. Bagian 2: gPhoto2
Pelajari cara gPhoto2 ditransfer ke WebAssembly untuk mengontrol kamera eksternal melalui USB dari aplikasi web.
Logging Error Jaringan (NEL)
Gunakan Network Error Logging (NEL) untuk mengumpulkan error jaringan sisi klien.
Deteksi fitur WebAssembly
Pelajari cara menggunakan fitur WebAssembly terbaru sambil mendukung pengguna di semua browser.
Melakukan porting aplikasi USB ke web. Bagian 1: libusb
Pelajari cara kode yang berinteraksi dengan perangkat eksternal dapat ditransfer ke web dengan WebAssembly dan Fugu API.
Membuat komponen switch tema
Ringkasan dasar tentang cara mem-build komponen tombol tema yang adaptif dan mudah diakses.
Menyematkan cuplikan JavaScript di C++ dengan Emscripten
Pelajari cara menyematkan kode JavaScript di library WebAssembly untuk berkomunikasi dengan dunia luar.
PWA di Oculus Quest 2
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.
Gedung Designcember
Intip proses dan alat yang digunakan untuk menciptakan pengalaman Designcember bergaya kalender liburan.
Kalkulator Designcember
Upaya skeuomorf untuk membuat ulang kalkulator surya di web yang memanfaatkan sensor cahaya sekitar dan fitur overlay kontrol jendela.
Membuat salinan dalam dalam JavaScript menggunakan structuredClone
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.
Membuat komponen toast
Ringkasan dasar tentang cara mem-build komponen toast yang adaptif dan mudah diakses.
Pendanaan UI
Mengumumkan pendanaan UI dari Chrome, yang dirancang untuk memberikan hibah bagi orang-orang yang mengerjakan alat desain, CSS, dan HTML.
Membuat komponen menu game 3D
Ringkasan dasar tentang cara membuat menu game 3D yang responsif, adaptif, dan mudah diakses.
Alur penggunaan Lighthouse
Coba Lighthouse API baru untuk mengukur performa dan praktik terbaik di seluruh alur pengguna.
Menuju metrik kelancaran animasi
Pelajari cara mengukur animasi, cara memikirkan frame animasi, dan kelancaran halaman secara keseluruhan.
Yang baru di PageSpeed Insights
Pelajari informasi terbaru di PageSpeed Insights untuk membantu Anda mengukur dan mengoptimalkan halaman dan kualitas situs dengan lebih baik.
Semua yang diumumkan di Chrome Dev Summit 2021
Rangkuman semua pengumuman penting dari Chrome Dev Summit 2021, dengan link yang Anda perlukan untuk mencari tahu lebih lanjut.
Perjalanan Photoshop ke web
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.
Membuat komponen multi-pilihan
Ringkasan dasar tentang cara membangun komponen multi-pilihan yang responsif, adaptif, dan mudah diakses untuk mengurutkan dan memfilter pengalaman pengguna.
Cara menilai performa pemuatan di lapangan dengan Navigation Timing dan Resource Timing
Pelajari dasar-dasar penggunaan API Navigasi dan Resource Timing untuk menilai performa pemuatan di lapangan.
Manipulasi DOM aman dengan Sanitizer API
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.
Praktik terbaik untuk menggunakan sematan pihak ketiga
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.
Pengaruh arsitektur SPA terhadap Data Web Inti
Jawaban atas pertanyaan umum tentang SPA, Data Web Inti, dan rencana Google untuk mengatasi batasan pengukuran saat ini.
Pembahasan mendalam tentang peristiwa JavaScript
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
Memaketkan resource non-JavaScript
Pelajari cara mengimpor dan memaketkan berbagai jenis aset dari JavaScript dengan cara yang berfungsi di browser dan pemaket.
Membuat komponen tombol terpisah
Ringkasan dasar tentang cara membuat komponen tombol terpisah yang mudah diakses.
Menggunakan Skrip Modul CSS untuk mengimpor stylesheet
Pelajari cara menggunakan skrip modul CSS untuk mengimpor stylesheet CSS menggunakan sintaksis yang sama dengan modul JavaScript.
Membuat komponen {i>switch<i}
Ikhtisar dasar tentang cara membangun komponen {i>switch<i} yang responsif dan mudah diakses.
Warna aksen CSS
Warnai merek Anda di input formulir HTML bawaan dengan satu baris kode.
Header petunjuk klien fitur media preferensi pengguna
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
Membuat komponen breadcrumb
Ringkasan dasar tentang cara membuat komponen breadcrumb yang responsif dan mudah diakses bagi pengguna untuk membuka situs Anda.
Menggunakan thread WebAssembly dari C, C++, dan Rust
Pelajari cara menghadirkan aplikasi multi-thread yang ditulis dalam bahasa lain ke WebAssembly.
Dasar-dasar streaming media
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.
Framework media
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.
PWA dengan streaming offline
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.
Enkripsi media
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.
Menemukan jalan Anda dengan data lapangan di update ekstensi Data Web
Ekstensi Data Web kini menunjukkan keterkaitan antara pengalaman lokal Anda dengan pengalaman pengguna yang sebenarnya di lapangan.
Penyesuaian ukuran CSS untuk @font-face
Saat font web dimuat, kini Anda dapat menyesuaikan skalanya untuk menormalkan ukuran font dokumen dan mencegah pergeseran tata letak saat beralih antar-font
Membuat skema warna
Ringkasan dasar tentang cara membuat skema warna yang dinamis dan dapat dikonfigurasi
Menggunakan AVIF untuk mengompresi gambar di situs Anda
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.
CSS untuk Data Web
Artikel ini membahas teknik terkait CSS untuk mengoptimalkan Data Web.
Mengembangkan Pergeseran Tata Letak Kumulatif di alat web
Mulai hari ini, perubahan pada CLS telah diluncurkan di sejumlah platform alat web Chrome, termasuk Lighthouse, PageSpeed Insights, dan Laporan UX Chrome.
Pemilih kelas semu fungsional CSS baru :is() dan :where()
Penambahan yang tampaknya kecil pada sintaksis pemilih CSS ini akan memiliki dampak besar.
Pelatihan Progressive Web App baru kini tersedia
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.
Desain baru yang responsif: Desain web di dunia yang berbasis komponen
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.
Bermigrasi ke Petunjuk Klien Agen Pengguna
Strategi untuk memigrasikan situs Anda dari mengandalkan string agen pengguna ke Petunjuk Klien Agen Pengguna yang baru.
Excalidraw dan Fugu: Meningkatkan Perjalanan Pengguna Inti
Rangkuman presentasi Google I/O 2021 Thomas Steiner yang berjudul Excalidraw and Fugu: Improve Core User Journeys
Referensi cepat header keamanan
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.
Modul ES di pekerja layanan
Pekerja layanan dapat menggunakan impor statis modul ES untuk membawa kode tambahan, sebagai alternatif untuk importScripts().
Membuat komponen scroller media
Ringkasan dasar tentang cara membuat tampilan scroll horizontal responsif untuk TV, ponsel, desktop, dll.
Mengoptimalkan Data Web menggunakan Lighthouse
Hari ini, kita akan membahas fitur alat baru di Lighthouse, PageSpeed, dan DevTools untuk membantu mengidentifikasi bagaimana situs Anda dapat meningkatkan Data Web.
Menggunakan API web asinkron dari WebAssembly
Pelajari cara memanggil API web asinkron saat mengompilasi bahasa yang secara tradisional disinkronkan ke WebAssembly.
Menjaga agar skrip pihak ketiga tetap terkendali
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.
Menyesuaikan overlay kontrol jendela pada kolom judul PWA Anda
Dengan fitur Overlay Kontrol Jendela, developer dapat menyesuaikan kolom judul PWA yang terinstal sehingga PWA mereka terasa lebih seperti aplikasi.
Mendobrak hambatan menggunakan DataTransfer API
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.
Mengisi formulir OTP dalam iframe lintas origin dengan WebOTP API
WebOTP API kini dapat menerima OTP dari dalam iframe.
Membuat animasi teks terpisah
Ikhtisar dasar tentang cara membuat animasi kata dan huruf terpisah.
Mengembangkan metrik CLS
Rencana untuk meningkatkan metrik CLS agar lebih adil untuk halaman yang berumur panjang.
Mengembangkan metrik CLS
Rencana untuk meningkatkan metrik CLS agar lebih adil untuk halaman yang berumur panjang.
Kepuasan Developer Web
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.
Membuat komponen Setelan
Ringkasan dasar tentang cara membuat komponen setelan dari penggeser dan kotak centang.
Men-debug pergeseran tata letak
Pelajari cara mengidentifikasi dan memperbaiki pergeseran tata letak.
JavaScript: Apa artinya?
Mencari tahu nilai `this` bisa jadi rumit di JavaScript, berikut cara melakukannya...
Struktur proyek, siklus hidup, dan pemaketan proyek
Bab ini membahas struktur project, siklus proses, dan bundling aplikasi mini.
Markup, penataan gaya, skrip, dan update aplikasi mini
Bab ini membahas opsi markup, penataan gaya, skrip, dan pembaruan berbagai platform aplikasi mini.
Mengakhiri pendapat tentang aplikasi mini dari developer web
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.
Pemrograman dengan cara aplikasi mini
Bab ini memperkenalkan cara memprogram dengan cara aplikasi mini.
Project open source aplikasi mini
Bab ini menyajikan pilihan project open source aplikasi mini yang menarik.
Apa itu H5 dan QuickApp?
Bab ini memberikan latar belakang tentang aplikasi H5 dan QuickApp, yang keduanya berbeda dengan aplikasi mini.
Menerapkan prinsip-prinsip pemrograman aplikasi mini pada contoh project
Bab ini menunjukkan contoh proyek yang mengikuti pendekatan "pemrograman dengan cara aplikasi mini".
Komponen aplikasi mini
Bab ini berisi detail tentang komponen yang disediakan oleh semua platform aplikasi mini.
Streaming—Panduan definitif
Streams API memungkinkan JavaScript mengakses aliran data yang diterima melalui jaringan secara terprogram dan memprosesnya sesuai keinginan.
Membuat komponen Tab
Ringkasan dasar tentang cara membuat komponen tab yang mirip dengan yang ditemukan di aplikasi iOS dan Android.
Panduan untuk mengaktifkan isolasi lintas asal
Isolasi lintas origin memungkinkan halaman web menggunakan fitur canggih seperti SharedArrayBuffer. Artikel ini menjelaskan cara mengaktifkan isolasi lintas asal di situs Anda.
Meminta isolasi performa dengan header Origin-Agent-Cluster
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.
Properti rasio aspek CSS
Mempertahankan rasio aspek dalam gambar dan elemen kini lebih mudah dicapai dengan properti CSS rasio aspek yang baru.
Praktik terbaik untuk carousel
Pelajari cara mengoptimalkan carousel untuk performa dan kegunaan.
WebRTC sekarang menjadi standar W3C dan IETF
Ringkasan singkat tentang histori, arsitektur, kasus penggunaan, dan masa depan WebRTC.
Masukan yang diinginkan: Cara mencapai metrik pergeseran tata letak yang lebih baik untuk halaman yang aktif dalam waktu lama
Pelajari rencana kami untuk meningkatkan metrik Pergeseran Tata Letak Kumulatif dan beri kami masukan.
Kapan harus menggunakan HTTPS untuk pengembangan lokal
Umumnya, Anda dapat menggunakan http://localhost untuk pengembangan lokal, kecuali dalam beberapa kasus khusus. Postingan ini menjelaskan kapan Anda perlu menjalankan situs pengembangan lokal dengan HTTPS. Lihat juga: Cara menggunakan HTTPS untuk
Menggunakan HTTPS untuk pengembangan lokal
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
Codelab: Membuat komponen Sidenav
Pelajari cara membuat komponen tata letak navigasi samping geser yang responsif.
Membuat komponen sidenav
Ringkasan dasar tentang cara membuat sidenav slide yang responsif
Codelab: Pemusatan di CSS
Pelajari 5 teknik pemusatan yang berbeda dengan CSS.
Pemusatan di CSS
Ikuti 5 teknik pemusatan saat mereka menjalani serangkaian pengujian untuk melihat teknik mana yang paling tahan diubah.
Sukai cache Anda ❤️
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.
Publikasikan, kirimkan, dan instal JavaScript modern untuk aplikasi yang lebih cepat
JavaScript modern menawarkan peningkatan kinerja dan ukuran dibandingkan ES5 yang ditranspilasi, dan didukung di 95% browser web. Mengaktifkan output JavaScript modern akan memberikan manfaat ini pada aplikasi Anda, tetapi dampaknya dibatasi oleh dependensi yang sudah ditranspilasi ke ES5. Panduan ini menunjukkan cara memublikasikan paket modern ke npm, serta cara menginstal dan memaketkan paket JavaScript modern secara optimal.
Worklet paint lintas browser dan Houdini.how
Pelajari cara mengimplementasikan Houdini Paint API lintas browser dan jelajahi dunia worklet Houdini bersama Houdini.how.
Praktik terbaik formulir pembayaran dan alamat
Maksimalkan konversi dengan membantu pengguna melengkapi alamat dan formulir pembayaran secepat dan semudah mungkin.
Mengotomatiskan audit dengan AutoWebPerf
Alat modular baru yang memungkinkan pengumpulan otomatis data performa dari berbagai sumber.
Praktik terbaik formulir OTP SMS
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.
Codelab praktik terbaik formulir pendaftaran
Gunakan fitur browser lintas platform untuk membuat formulir pendaftaran sederhana yang aman, mudah diakses, dan mudah digunakan.
Codelab praktik terbaik formulir pembayaran
Pelajari praktik terbaik untuk formulir pembayaran.
Praktik terbaik formulir pendaftaran
Bantu pengguna Anda mendaftar, login, dan mengelola detail akun tanpa repot.
Codelab praktik terbaik formulir alamat
Pelajari praktik terbaik untuk formulir alamat.
Ringkasan pekerja
Cara pekerja web dan pekerja layanan dapat meningkatkan performa situs Anda, serta kapan harus menggunakan pekerja web versus pekerja layanan.
Panduan cache imperatif
Cara mengomunikasikan pekerja jendela dan layanan untuk melakukan tugas yang terkait dengan performa, penyimpanan dalam cache, dan offline.
Komunikasi dua arah dengan pekerja layanan
Cara membuat saluran komunikasi dua arah antara halaman dan pekerja layanan.
Menyiarkan pembaruan ke halaman dengan pekerja layanan
Cara pekerja layanan dapat berkomunikasi secara proaktif dengan halaman untuk memberitahukan peristiwa tertentu.
Nonaktifkan akselerasi mouse untuk memberikan pengalaman bermain game FPS yang lebih baik
Aplikasi web sekarang dapat menonaktifkan akselerasi mouse saat merekam peristiwa pointer.
Codelab: Membuat komponen Stories
Pelajari cara menciptakan pengalaman yang mirip dengan Instagram Stories di web.
Membuat komponen Stories
Ringkasan dasar tentang cara membangun pengalaman yang mirip dengan Instagram Stories di web.
Situs yang Sama Skema
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.
Pemuatan lambat tingkat browser untuk CMS
Postingan ini memberikan panduan tentang cara menggunakan atribut pemuatan di sistem pengelolaan konten.
Codelab: Membuat klien notifikasi push
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.
Codelab: Membuat server 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 notifikasi push
Ringkasan tentang apa yang dimaksud dengan notifikasi push, alasan Anda mungkin menggunakannya, dan cara kerjanya.
Mengukur penggunaan offline
Cara melacak penggunaan offline situs Anda sehingga Anda dapat menjelaskan mengapa situs Anda membutuhkan pengalaman offline yang lebih baik.
Contoh animasi CSS berperforma tinggi
Mendemonstrasikan bagaimana teknik berperforma tinggi dapat membuat animasi yang kompleks dan indah.
CSS min(), max(), dan clamp()
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.
Signed HTTP Exchange (SXG)
SXG adalah mekanisme pengiriman yang memungkinkan otentikasi asal resource secara terpisah dari cara pengirimannya.
Penyempurnaan tata letak logis dengan pintasan yang relatif terhadap alur
Singkatan properti logis baru dan properti inset baru untuk Chromium.
Mengapa beberapa animasi lambat?
Menganimasikan dengan baik adalah inti untuk pengalaman web yang luar biasa. Postingan ini menjelaskan mengapa jenis animasi tertentu berperforma lebih baik daripada yang lain.
Cara membuat animasi CSS berperforma tinggi
Untuk meningkatkan performa animasi CSS, gunakan properti CSS transformasi dan opasitas sebanyak mungkin, dan hindari apa pun yang memicu tata letak atau penggambaran.
Menangani permintaan rentang dalam pekerja layanan
Pastikan pekerja layanan mengetahui apa yang harus dilakukan saat respons parsial diminta.
Mengontrol geser, kemiringan, dan zoom kamera
Fitur geser, kemiringan, dan zoom pada kamera akhirnya dapat dikontrol di web.
Apa yang dimaksud dengan uji coba origin pihak ketiga?
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
Kebocoran memori jendela yang terpisah
Jendela terpisah adalah jenis kebocoran memori umum yang sangat sulit ditemukan dan diperbaiki.
Membuat halaman penggantian offline
Pelajari cara membuat pengalaman offline yang sederhana untuk aplikasi Anda.
Buat bentuk gambar yang menarik dengan properti clip-path CSS
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.
Menerapkan efek ke gambar dengan properti gambar mask CSS
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.
Butir kustom dengan CSS ::marker
Gunakan CSS untuk menyesuaikan warna, ukuran, atau jenis angka atau poin dalam elemen `` atau ``.
Bantu pengguna mengubah sandi secara mudah dengan menambahkan URL terkenal untuk mengubah sandi
Dengan mengalihkan permintaan ke /.well-known/change-password ke URL ubah sandi, Anda dapat memungkinkan pengguna memperbarui sandi mereka dengan lebih mudah daripada sebelumnya.
Menangani informasi pembayaran opsional dengan pekerja layanan
Setelah didaftarkan, aplikasi pembayaran berbasis web dapat menerima permintaan pembayaran dari penjual. Artikel ini menjelaskan cara mengorkestrasi transaksi pembayaran dari pekerja layanan selama runtime.
Mengatur transaksi pembayaran dengan pekerja layanan
Setelah didaftarkan, aplikasi pembayaran berbasis web dapat menerima permintaan pembayaran dari penjual. Artikel ini menjelaskan cara mengorkestrasi transaksi pembayaran dari pekerja layanan selama runtime.
ARIA: racun atau penawar?
Bagaimana berbohong kepada {i>screen reader<i} dapat menyembuhkan aksesibilitas, ketika tidak menggosok garam di dalamnya!
Men-debug kebocoran memori di WebAssembly menggunakan Emscripten
Pelajari cara menggunakan WebAssembly untuk menghadirkan library, yang ditulis dalam bahasa lain, ke Web dengan cara yang aman dan idiomatis.
visibilitas konten: properti CSS baru yang meningkatkan performa rendering Anda
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.
Berhenti memblokir akses papan klip
Async Clipboard API menyederhanakan proses salin dan tempel yang sesuai dengan izin.
Web di Android
Pelajari cara berbagai komponen dapat digunakan untuk merender konten web di dalam aplikasi Android.
Praktik terbaik Perujuk dan Kebijakan Perujuk
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.
Membuat PWA di Google, bagian 1
Yang dipelajari tim Buletin tentang pekerja layanan saat mengembangkan PWA.
Pemantauan performa dengan Lighthouse CI
Pelajari cara menyiapkan Lighthouse CI dan mengintegrasikannya ke dalam alur kerja developer.
Mendesain pengalaman pengguna kunci sandi di Akun Google
Menghadirkan keamanan dan pengalaman pengguna yang lebih baik untuk Akun Google.
@property: memberikan kekuatan super ke variabel CSS
Pelajari cara menerapkan properti kustom CSS dengan pengetikan semantik, nilai penggantian, dan lainnya, langsung di file CSS Anda.
Mengaitkan kecepatan situs dan metrik bisnis
Manfaatkan pengujian A/B untuk mengevaluasi dampak kecepatan situs terhadap metrik bisnis Anda.
Mendaftarkan aplikasi pembayaran berbasis web
Pelajari cara mendaftarkan aplikasi pembayaran berbasis web ke browser pelanggan. Anda juga akan mempelajari cara melakukan debug.
Ringkasan aplikasi pembayaran berbasis web
Pelajari cara menyesuaikan aplikasi pembayaran berbasis web Anda agar berfungsi dengan Pembayaran Web dan memberikan pengalaman pengguna yang lebih baik bagi pelanggan.
Menyediakan informasi pengiriman dan kontak dari aplikasi pembayaran Android
Pelajari cara mengubah aplikasi pembayaran Android untuk memberikan alamat pengiriman yang dipilih pengguna serta informasi kontak saat penjual memintanya melalui Payment Request API.
Pembuatan cache pekerja layanan dan cache HTTP
Kelebihan dan kekurangan menggunakan logika masa berakhir yang konsisten atau berbeda di seluruh cache pekerja layanan dan lapisan cache HTTP.
Menggunakan Laporan UX Chrome untuk melihat performa di lapangan
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.
Menangani permintaan navigasi
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.
Sepuluh tata letak modern dalam satu baris CSS
Postingan ini menyoroti beberapa baris CSS canggih yang melakukan tugas berat yang serius dan membantu Anda membuat tata letak modern yang andal.
Rendering sempurna piksel dengan devicePixelContentBox
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.
Rangkuman LIVE web.dev
Ringkasan berita utama dan pembaruan yang diumumkan dalam acara komunitas online selama 3 hari, dan pengingat tentang acara regional yang akan datang.
Praktik terbaik formulir login
Gunakan fitur browser lintas platform untuk membuat formulir login yang aman, mudah diakses, dan mudah digunakan.
Meningkatkan Progressive Web App Anda secara bertahap
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.
Menggunakan fitur browser lintas platform untuk membuat formulir login
Gunakan fitur browser lintas platform untuk membuat formulir login sederhana yang aman, mudah diakses, dan mudah digunakan.
Alat developer web untuk men-debug masalah JavaScript di Google Penelusuran
Cara men-debug masalah SEO di setiap halaman atau seluruh situs.
Membangun pengalaman penelusuran yang andal dengan Workbox
Cara menerapkan pengalaman penelusuran yang andal dengan Workbox, menggunakan Sinkronisasi Latar Belakang dan Push API.
Menambahkan media ke halaman web
Menyematkan file media di halaman web menggunakan tag dan.
Menautkan dengan cara tebal yang belum pernah ditautkan sebelumnya: Fragmen Teks
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.
Membuat PWA Anda terasa lebih seperti sebuah aplikasi
Pelajari cara membuat Progressive Web App terasa seperti aplikasi 'sebenarnya' dengan memahami cara menerapkan pola aplikasi khusus platform dengan teknologi web.
Cara melaporkan bug browser yang baik
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.
Mengukur performa dengan model RAIL
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.
Mempercepat navigasi di React dengan Quicklink
quicklink adalah library untuk mempercepat pemuatan halaman berikutnya dengan mengambil data link dalam area pandang selama waktu tidak ada aktivitas.
Lindungi resource Anda dari serangan web dengan Mengambil Metadata
Fetch Metadata adalah fitur platform web baru yang dirancang untuk memungkinkan server melindungi diri dari serangan lintas origin.
Pengurutan ulang konten
Saat membuat tata letak menggunakan CSS, Anda perlu berhati-hati agar tidak membuat pengalaman terputus bagi pengguna yang menggunakan keyboard.
Peningkatan Web Animations API di Chromium 84
Mengacaukan animasi web Anda akan menjadi jauh lebih mudah.
Panduan developer aplikasi pembayaran Android
Pelajari cara menyesuaikan aplikasi pembayaran Android Anda agar berfungsi dengan Pembayaran Web dan memberikan pengalaman pengguna yang lebih baik bagi pelanggan.
Memberdayakan aplikasi pembayaran dengan Pembayaran Web
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.
Masa berlaku transaksi pembayaran
Pelajari bagaimana penjual mengintegrasikan aplikasi pembayaran, cara kerja transaksi pembayaran dengan Payment Request API, dan apa yang dapat dilakukan di Pembayaran Web.
Opsi font variabel lainnya untuk font UI sistem macOS di Chromium 83
Chromium 80 memiliki regresi ketebalan font sistem UI di macOS. Alasan kerusakan, dan kekuatan super baru pasca-resolusi, pantas untuk ditunggu di Chromium 83.
Selesaikan berbagai hal dengan cepat menggunakan pintasan aplikasi
Pintasan aplikasi memberikan akses cepat ke beberapa tindakan umum yang sering kali diperlukan pengguna.
Bagaimana Progressive Web App dapat mendorong kesuksesan bisnis
Buat kasus bisnis yang solid untuk PWA Anda. Pelajari kapan Anda harus berinvestasi, dan bagaimana Anda dapat mengukur keberhasilannya.
Persiapan untuk penghapusan AppCache
Detail rencana Chrome dan browser lainnya untuk menghapus AppCache.
Penyimpanan persisten
Penyimpanan persisten dapat membantu melindungi data penting agar tidak dipindahkan, dan mengurangi kemungkinan kehilangan data.
Cara menentukan strategi penginstalan
Praktik terbaik untuk menggabungkan berbagai penawaran penginstalan guna meningkatkan tingkat penginstalan serta menghindari persaingan dan kanibalisasi platform.
Bagaimana CommonJS membuat paket Anda lebih besar
Modul umumJS sangat dinamis, yang mencegah pengoptimal dan paket JavaScript melakukan pengoptimalan lanjutan atas modul tersebut.
Membuat profil aplikasi Audio Web di Chrome
Pelajari cara membuat profil performa aplikasi Audio Web di Chrome menggunakan `about://tracing` dan ekstensi **WebAudio** di Chrome DevTools.
Alasan Anda perlu "isolasi lintas asal" untuk mendapatkan fitur canggih
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.
Meningkatkan performa pemuatan halaman Next.js dan Gatsby dengan pemotongan terperinci
Pelajari cara Next.js dan Gatsby meningkatkan output build mereka untuk meminimalkan kode duplikat dan meningkatkan performa pemuatan halaman
"Situs yang sama" dan "asal yang sama"
Istilah "situs yang sama" dan "origin yang sama" sering dikutip tetapi sering disalahpahami. Halaman ini menjelaskan perbedaan antara kedua sistem tersebut dan perbedaannya.
Membuat situs Anda "terisolasi lintas asal" menggunakan COOP dan COEP
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.
Memantau total penggunaan memori halaman web Anda dengan measureUserAgentSpecificMemory()
Pelajari cara mengukur penggunaan memori halaman web dalam produksi untuk mendeteksi regresi.
Blog engineering web.dev #1: Cara kami membangun situs dan menggunakan Komponen Web
Dalam postingan pertama dari tim engineer web.dev ini, pelajari cara kami membangun situs—termasuk penggunaan Eleventy dan Komponen Web oleh kami.
Meningkatkan gaya default mode gelap dengan properti CSS skema warna dan tag meta yang sesuai
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.
Pastikan situs Anda tersedia dan dapat digunakan oleh semua orang selama merebaknya COVID-19
Cara memastikan bahwa fungsi inti situs Anda selalu tersedia, dapat diakses, aman, dapat digunakan, dapat ditemukan, dan cepat.
Memperbaiki server yang kelebihan beban
Cara menentukan bottleneck server, memperbaiki bottleneck dengan cepat, meningkatkan performa server, dan mencegah regresi.
Target ketuk yang dapat diakses
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.
Desain responsif yang aksesibel
Kami tahu bahwa mendesain secara responsif untuk memberikan pengalaman multiperangkat terbaik adalah ide yang baik, tetapi desain responsif juga menghasilkan aksesibilitas.
Aksesibilitas warna dan kontras
Pelajari cara membuat halaman Anda lebih mudah diakses dengan meningkatkan penggunaan warna dan kontras.
Mencegah kerentanan pembuatan skrip lintas situs berbasis DOM dengan Jenis Tepercaya
Memperkenalkan Jenis Tepercaya: API browser untuk mencegah pembuatan skrip lintas situs berbasis DOM di aplikasi web modern.
Menggunakan PWA di aplikasi Android
Cara membuka Progressive Web App di aplikasi Android.
Cegah pergeseran tata letak dan kedipan teks tak terlihat (FOIT) dengan melakukan pramuat font opsional
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 menyiapkan Signed HTTP Exchanges (SXG) menggunakan nginx
Cara membuat sertifikat TLS dengan ekstensi SXG, menginstal alat untuk membuat file SXG, dan mengonfigurasi nginx untuk menyalurkan file SXG.
Cara mendistribusikan Signed HTTP Exchanges (SXG) menggunakan nginx
Cara mendapatkan dan menyalurkan file SXG menggunakan nginx, serta tantangan pengambilan data subresource.
Mengoptimalkan gambar latar CSS dengan kueri media
Gunakan kueri media untuk mengirim gambar yang hanya sebesar yang diperlukan, sebuah teknik yang umumnya dikenal sebagai gambar responsif.
Memperbaiki kecepatan situs secara lintas fungsi
Bagaimana departemen lain dapat membantu menyukseskan proyek pengoptimalan kecepatan situs Anda.
Scroll snap setelah perubahan tata letak
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.
Cara menyiapkan Signed HTTP Exchange menggunakan Web Packager
Pelajari cara menyalurkan Signed HTTP Exchange (SXG) menggunakan Web Packager.
Cara memberikan pengalaman penginstalan dalam aplikasi Anda sendiri
Gunakan peristiwa beforeinstallprompt untuk memberikan pengalaman penginstalan dalam aplikasi yang lancar dan kustom bagi pengguna.
Virtual reality hadir di web, bagian II
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.
Memosisikan objek virtual dalam tampilan dunia nyata
WebXR Hit Test API adalah penyempurnaan untuk augmented reality web yang memungkinkan Anda menempatkan objek virtual dalam tampilan dunia nyata.
Augmented reality: Anda mungkin sudah mengetahuinya
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.
Mengembangkan ekosistem framework web
Pelajari cara Chrome menginvestasikan upaya di sejumlah alat open source untuk memajukan ekosistem JavaScript
Apa itu Progressive Web App?
Pengantar Progressive Web App (PWA) dan tiga pilar yang membedakannya dari aplikasi web lainnya.
Dukungan ikon adaptif di PWA dengan ikon yang dapat disamarkan
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.
Mengintegrasikan PWA ke dalam UI berbagi bawaan dengan Workbox
Cara mendaftarkan rute di Workbox sehingga Progressive Web App Anda muncul di UI berbagi tingkat sistem, bersama aplikasi khusus platform.
Meningkatkan penutupan halaman di XMLHttpRequest() sinkron
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.
Threading web dengan pekerja modul
Pekerja modul memudahkan pemblokiran thread utama dengan memindahkan kode mahal ke thread latar belakang sekaligus mempertahankan manfaat ergonomis dan performa dari modul JavaScript standar.
Pemuatan adaptif: meningkatkan performa web di perangkat yang lambat
Pelajari pola pemuatan adaptif, cara menerapkannya, dan cara Facebook, Tinder, eBay, dan perusahaan lainnya menggunakan pemuatan adaptif dalam produksi.
Evolusi alat kecepatan: sorotan dari Chrome Developer Summit 2019
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.
Menggunakan pekerja web untuk menjalankan JavaScript di luar thread utama browser
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.
Masukan dari survei pengoptimalan gambar musim panas 2019
Komentar dari responden survei tentang berbagai teknik pengoptimalan gambar.
Membangun server notifikasi push
Dalam codelab ini, pelajari cara mem-build server notifikasi push.
Performa sebagai default dengan Next.js
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
Cara AMP menjamin kecepatan di aplikasi Next.js
Pelajari manfaat dan kekurangan mendukung AMP di aplikasi Next.js Anda AMP adalah framework komponen web yang menjamin pemuatan halaman yang cepat. Next.js memiliki dukungan bawaan untuk AMP. Panduan ini terlebih dahulu menjelaskan cara AMP menjamin
Pemisahan kode dengan impor dinamis di Next.js
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
Merutekan pengambilan data di Next.js
Cara Next.js mempercepat navigasi dengan pra-pengambilan 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
Mengintegrasikan UI berbagi OS dengan Web Share API
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.
Virtual reality hadir di web
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.
Resep cookie SameSite
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 cookie
Pelajari cara kerja cookie dan apa itu cookie pihak pertama dan pihak ketiga.
Iklan yang cepat itu penting
Memahami manfaat iklan yang cepat dan cara mempertimbangkan kecepatan iklan.
Gunakan notifikasi push untuk berinteraksi dan melibatkan kembali pengguna
Gunakan notifikasi push untuk berinteraksi dengan pengguna melalui update bertarget dan tepat waktu.
Memulai Notifications API
Dalam codelab ini, pelajari cara meminta izin pengguna dan mengirim notifikasi.
Menggunakan Service Worker untuk mengelola notifikasi
Dalam codelab ini, pelajari cara mengelola notifikasi dengan pekerja layanan.
Memperbaiki ketidakstabilan tata letak
Panduan penggunaan WebPageTest untuk mengidentifikasi dan memperbaiki masalah ketidakstabilan tata letak.
Teknik agar aplikasi web dimuat dengan cepat, bahkan di ponsel menengah
Ponsel menengah makin populer dan makin populer, terutama di pasar negara berkembang yang mengandalkan jaringan 2G. Berikut ini pembelajaran kami dari pembuatan PROXX, clone Minesweeper seluler, yang dimuat dengan cepat di ponsel menengah di 2G.
Properti kustom yang lebih cerdas dengan API baru Houdini
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.
Dua cara untuk mengambil data: tag <link> dan header HTTP
Pelajari cara mempercepat navigasi mendatang dengan mengambil data resource.
Ambil resource lebih awal untuk mempercepat navigasi di masa mendatang
Pelajari petunjuk resource rel=fetch dan cara menggunakannya.
Apa yang dimaksud dengan konten campuran?
Konten campuran terjadi saat HTML awal dimuat melalui koneksi HTTPS yang aman, namun resource lainnya dimuat melalui koneksi HTTP yang tidak aman.
Memperbaiki konten campuran
Cari tahu cara memperbaiki error konten campuran di situs Anda, untuk melindungi pengguna dan memastikan semua konten Anda dimuat.
Lakukan lebih dari sekadar gambar dengan video dasar untuk web
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.
Menambahkan ikon Apple touch ke Progressive Web App
Demonstrasi interaktif tentang cara menentukan ikon yang harus muncul di layar utama iOS.
Web Pemutar yang Siap Pakai
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.
Progressive Web App di situs multi-origin
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.
Mengurangi ukuran font web
Posting ini menjelaskan cara mengurangi ukuran WebFont yang Anda gunakan di situs Anda, sehingga tipografi yang baik tidak berarti situs yang lambat.
Mengoptimalkan pemuatan dan rendering WebFont
Postingan ini menjelaskan cara memuat WebFont untuk mencegah pergeseran tata letak dan halaman kosong saat WebFont tidak tersedia saat halaman dimuat.
Membuat Progressive Web App dengan Angular CLI
Pelajari cara membuat aplikasi Angular progresif yang dapat diinstal.
Memuat JavaScript pihak ketiga secara efisien
Pelajari cara meningkatkan waktu pemuatan dan pengalaman pengguna dengan menghindari kesalahan umum saat menggunakan skrip pihak ketiga.
Mengidentifikasi JavaScript pihak ketiga yang lambat
Pelajari cara menggunakan Lighthouse dan Chrome DevTools untuk mengidentifikasi resource pihak ketiga yang lambat.
Menggunakan CDN gambar untuk mengoptimalkan gambar
Pertimbangkan untuk menggunakan CDN gambar untuk mengoptimalkan gambar situs Anda dan mengurangi biaya data untuk pengguna Anda.
Performa JavaScript pihak ketiga
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.
Kontrol formulir yang lebih andal
Fitur platform web baru mempermudah pembuatan elemen khusus yang berfungsi seperti kontrol formulir bawaan.
Mengoptimalkan JavaScript pihak ketiga
Pelajari teknik untuk mengoptimalkan resource pihak ketiga yang lambat dengan beberapa bantuan dari Lighthouse.
Buat koneksi jaringan lebih awal untuk meningkatkan kecepatan halaman yang dirasakan
Pelajari petunjuk resource rel=preconnect dan rel=dns-prefetch serta cara menggunakannya.
Membuat latar belakang bergaya OS dengan filter tampilan latar
Pelajari cara menambahkan efek latar belakang seperti pemburaman dan transparansi ke elemen UI di web menggunakan properti filter tampilan latar CSS.
Menjaga segala sesuatunya tetap segar dengan yang sudah tidak berlaku saat validasi ulang
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.
Melakukan virtualisasi daftar besar dengan Angular CDK
Pelajari cara membuat daftar besar menjadi lebih responsif dengan mengimplementasikan scroll virtual dengan Dev Kit Komponen Angular.
Mengoptimalkan deteksi perubahan Angular
Pelajari cara mengoptimalkan deteksi perubahan aplikasi Angular Anda untuk membuatnya lebih responsif.
Merutekan strategi pramuat di Angular
Pelajari cara menggunakan strategi pramuat Angular untuk aplikasi yang lebih cepat.
Navigasi web yang lebih cepat dengan pengambilan data prediktif
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.
Menyesuaikan penayangan video ke gambar berdasarkan kualitas jaringan
Pelajari cara menggunakan Network Information API untuk menyesuaikan konten Anda berdasarkan kualitas jaringan.
Audit aksesibilitas aplikasi Angular Anda dengan codelyzer
Pelajari cara membuat aplikasi Angular Anda dapat diakses menggunakan codelyzer.
Precaching dengan pekerja layanan Angular
Pelajari cara menggunakan pekerja layanan Angular untuk melakukan precache aset statis di aplikasi Anda.
Anggaran performa dengan Angular CLI
Pelajari cara menggunakan anggaran performa langsung di Angular CLI.
Preferreds-color-scheme: Halo kegelapan, teman lama saya
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.
Tips terbaik untuk performa web
Gunakan srcset untuk memilih ukuran gambar yang tepat secara otomatis.
Memulai: mengoptimalkan aplikasi Angular
Pelajari cara membuat aplikasi Angular Anda lebih cepat, lebih andal, dapat ditemukan, dapat diinstal, dan mudah diakses.
Pemisahan kode level rute di Angular
Pelajari cara memperkecil app bundle awal dengan menggunakan pemisahan kode tingkat rute.
Komponen web: bahan rahasia yang membantu memperkuat web
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.
Gunakan Lighthouse untuk anggaran performa
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.
Update pada Web Payments API
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.
Nilai kecepatan
Menunjukkan pendapatan yang dihasilkan oleh peningkatan situs, sekaligus mengecualikan faktor eksternal seperti kampanye pemasaran.
Panel Alamat Menginstal untuk Progressive Web App di Desktop
Progressive Web App mudah diinstal dengan tombol instal baru di kolom URL Chrome (omnibox).
Bagaimana performa dapat meningkatkan konversi?
Mempelajari dampak performa situs di berbagai bagian funnel e-commerce
Pola pikir pekerja layanan
Bekerja dengan pekerja layanan masih baru dan asing bagi banyak developer web. Postingan ini memberikan beberapa tips untuk memusatkan pikiran Anda.
Pola untuk mempromosikan penginstalan PWA
Cara mempromosikan penginstalan Progressive Web App dan praktik terbaik.
Bagaimana cara memberi tahu pengguna bahwa PWA saya dapat diinstal?
Cara mempromosikan penginstalan Progressive Web App dan praktik terbaik.
Kebijakan gambar untuk waktu pemuatan yang cepat dan lainnya
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.
Apakah tugas JavaScript yang lama menunda Waktu untuk Interaktif Anda?
Mempelajari cara mendiagnosis interaksi pengguna yang mahal dan mengganggu pekerjaan.
Mengekstrak CSS penting
Pelajari cara meningkatkan waktu render dengan teknik CSS yang penting dan cara memilih alat terbaik untuk proyek Anda.
Mengekstrak dan menyisipkan CSS penting dengan Kritis
Pelajari cara menggunakan Penting untuk mengekstrak dan menyisipkan CSS penting secara inline, serta meningkatkan waktu render.
Kecepatan dalam skala besar: apa yang baru dalam performa web?
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.
Memperkenalkan PROXX
PROXX sebagai game mirip minesweeper yang dibuat sebagai PWA. Fitur ini berfungsi di berbagai perangkat dan secara bertahap meningkatkan tampilan visual perangkat tersebut.
Penelusuran visual dengan Toolkit Persepsi Web
Bukankah akan menyenangkan jika pengguna dapat menelusuri situs Anda menggunakan kamera mereka?
Cookie SameSite dijelaskan
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.
Langsung menggunakan Portal: navigasi yang lancar di web
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.
Penayangan adaptif berdasarkan kualitas jaringan
Menggunakan Network Information API untuk menyesuaikan aset yang ditayangkan kepada pengguna berdasarkan kualitas koneksi mereka.
Meminifikasi dan mengompresi payload jaringan dengan brotli
Dalam codelab ini, pelajari bagaimana kompresi Brotli dapat lebih mengurangi rasio kompresi dan ukuran keseluruhan aplikasi Anda.
web.dev di I/O 2019
Untuk Google I/O 2019, orang-orang di tim web.dev telah mengirimkan sejumlah update termasuk desain baru, dokumen Lighthouse lainnya, dan blog baru.
Bagaimana agar tetap cepat?
Brand yang mengoptimalkan kecepatan sering kali mengalami kemunduran dengan cepat. Dalam postingan ini, kita akan membahas cara memastikan pengalaman cepat Anda tetap cepat.
Bagaimana cara mengukur kecepatan?
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.
Apa itu kecepatan?
Kecepatan itu penting, tetapi apa sebenarnya yang kami maksud? Apa yang dimaksud dengan memiliki situs yang cepat?
Audit aksesibilitas dengan react-axe dan eslint-plugin-jsx-a11y
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.
Menambahkan manifes aplikasi web dengan Create React App
Create React App menyertakan manifes aplikasi web secara default. Memodifikasi file ini akan memungkinkan Anda mengubah cara aplikasi ditampilkan saat diinstal di perangkat pengguna.
Pemisahan kode dengan React.lazy dan Suspense
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.
Memulai: optimalkan aplikasi React Anda
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.
Virtualisasikan daftar besar dengan jendela reaksi
reaksi-window adalah library yang memungkinkan daftar besar dirender secara efisien.
Precaching di Create React App dengan Workbox
Workbox disertakan ke dalam Create React App dengan konfigurasi default yang melakukan precache semua aset statis di aplikasi Anda dengan setiap build.
Merender rute dengan reaksi-snap
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.
Codelab: Pramuat aset penting untuk meningkatkan kecepatan pemuatan
Dalam codelab ini, pelajari cara meningkatkan performa halaman dengan melakukan pramuat dan pengambilan data resource.
Preferreds-Reduced-motion: Terkadang lebih sedikit gerakan lebih baik
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.
Tunda CSS yang tidak penting
Pelajari cara menunda CSS yang tidak penting dengan tujuan untuk mengoptimalkan Jalur Rendering Penting, dan meningkatkan First Contentful Paint (FCP).
Kepercayaan itu baik, observasi lebih baik: Intersection Observer v2
Intersection Observer v2 menambahkan kemampuan untuk tidak hanya mengamati persimpangan per se, tetapi juga mendeteksi apakah elemen yang berpotongan terlihat pada saat persimpangan.
Dasar-dasar desain web responsif
Buat situs yang merespons kebutuhan dan kemampuan perangkat yang digunakan untuk melihatnya.
Stylesheet yang Dapat Dibangun
Stylesheet yang dapat dibangun memberikan cara yang mulus untuk membuat dan mendistribusikan gaya ke dokumen atau akar bayangan tanpa perlu mengkhawatirkan FOUC.
Rendering di Web
Rekomendasi untuk menerapkan logika dan rendering dalam aplikasi.
Sertakan anggaran performa ke dalam proses build Anda
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.
Menggunakan bundlesize dengan Travis CI
Tentukan anggaran performa dengan penyiapan minimal dan terapkan sebagai bagian dari alur kerja pengembangan Anda menggunakan bundlesize dengan Travis CI.
Menetapkan anggaran performa dengan webpack
Pelajari cara menetapkan anggaran performa dan menjaga ukuran paket Anda tetap terkontrol dengan webpack.
Menggunakan Lighthouse Bot untuk menetapkan anggaran performa
Anda telah bekerja keras untuk menjadi cepat, sekarang pastikan Anda tetap cepat dengan mengotomatiskan pengujian performa di Travis CI dengan Lighthouse Bot.
Emscripten dan npm
Bagaimana cara mengintegrasikan WebAssembly ke dalam penyiapan ini? Dalam artikel ini, kita akan mengerjakan ini dengan C/C++ dan Emscripten sebagai contoh.
Apakah aplikasi Anda sudah terinstal? getinstalledRecentApps() akan memberi tahu Anda.
GetInstallationRecentApps() API adalah API platform web yang memungkinkan Anda memeriksa apakah aplikasi iOS/Android/desktop atau PWA Anda terinstal di perangkat pengguna.
Menayangkan kode modern ke browser modern untuk pemuatan halaman yang lebih cepat
Dalam codelab ini, pelajari cara meningkatkan performa aplikasi dengan meminimalkan jumlah kode yang ditranspilasi.
Beradaptasi dengan Pengguna berdasarkan Petunjuk Klien
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.
Apa yang dimaksud dengan aksesibilitas?
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.
Label dan alternatif teks
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.
Semantik dan pembaca layar
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?
Dasar-dasar akses 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.
Menggunakan HTML semantik untuk memudahkan pencapaian keyboard
Dengan menggunakan elemen HTML semantik yang tepat, Anda mungkin dapat memenuhi sebagian besar atau semua kebutuhan akses keyboard. Itu berarti lebih sedikit waktu untuk mengutak-atik tabindex, dan lebih banyak pengguna yang puas!
Fokus gaya
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.
Mengontrol fokus dengan tabindex
Elemen HTML standar memiliki aksesibilitas keyboard bawaan. Saat membuat komponen interaktif kustom, gunakan tabindex untuk memastikan komponen tersebut dapat diakses dari keyboard.
Judul dan penanda
Dengan menggunakan elemen yang benar untuk {i>heading<i} dan {i>landmark<i}, Anda dapat secara dramatis meningkatkan pengalaman navigasi bagi pengguna teknologi asitif.
Menggunakan Imagemin dengan webpack
Dalam codelab ini, pelajari cara menggunakan imagemin dengan webpack untuk mengoptimalkan gambar JPEG dan PNG agar dapat didownload lebih cepat.
Ganti GIF dengan video
Dalam codelab ini, pelajari cara meningkatkan performa dengan mengganti GIF animasi dengan video.
Menggunakan gambar WebP
Gambar WebP lebih kecil daripada format JPEG dan PNG—biasanya dengan pengurangan ukuran file 25–35%. Tindakan ini mengurangi ukuran halaman dan meningkatkan performa.
Keamanan seharusnya tidak begitu menakutkan.
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'.
Menentukan beberapa lebar slot
Dalam codelab ini, pelajari cara menggunakan atribut ukuran untuk mengubah ukuran gambar dengan benar bergantung pada area pandang pengguna.
Menayangkan kode modern ke browser modern untuk pemuatan halaman yang lebih cepat
Membangun situs yang berfungsi dengan baik di semua browser utama adalah prinsip inti dari ekosistem web terbuka. Namun, hal ini berarti pekerjaan tambahan untuk memastikan bahwa semua kode yang Anda tulis didukung di setiap browser yang rencananya akan Anda targetkan. Jika ingin menggunakan fitur bahasa JavaScript yang baru, Anda perlu mentranspilasi fitur ini ke format yang kompatibel dengan versi sebelumnya.
Menayangkan gambar yang responsif
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.
Anggaran performa pertama Anda
Pastikan situs Anda dimuat dengan cepat dengan panduan langkah demi langkah untuk menentukan nilai minimum metrik performa yang bermanfaat bagi situs Anda.
Mengonfigurasi perilaku caching HTTP
Dalam codelab ini, pelajari cara mengontrol perilaku caching resource menggunakan header HTTP.
Menggunakan deskriptor kepadatan
Dalam codelab ini, pelajari cara menggunakan deskripsi dan srcset kepadatan untuk memuat gambar dengan kepadatan piksel yang tepat untuk perangkat pengguna.
Buat agar mudah diinstal
Dalam codelab ini, pelajari cara membuat situs dapat diinstal menggunakan peristiwa beforeinstallprompt.
Hindari kilatan teks tak terlihat
Dalam codelab ini, pelajari cara menampilkan teks secara langsung menggunakan Font Face Observer.
Sandbox browser
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'.
Ganti GIF animasi dengan video untuk pemuatan halaman yang lebih cepat
Pernahkah Anda melihat GIF animasi di layanan seperti Imgur atau Gfycat, memeriksanya di alat developer, hanya untuk mengetahui bahwa GIF benar-benar video? Ada alasan yang tepat untuk itu. GIF animasi bisa benar-benar besar! Dengan mengonversi GIF besar menjadi video, Anda dapat menghemat bandwidth pengguna secara besar.
Tayangkan gambar dengan dimensi yang benar
Dalam codelab ini, pelajari cara menyajikan gambar dengan dimensi yang benar untuk meningkatkan performa jaringan.
Cross-Origin Resource Sharing (CORS)
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.
Mengurangi payload JavaScript dengan pemisahan kode
Dalam codelab ini, pelajari cara meningkatkan performa aplikasi sederhana melalui pemisahan kode.
Membuat Gambar WebP dengan Command Line
Dalam codelab ini, pelajari cara menyajikan gambar yang dioptimalkan menggunakan WebP.
Pramuat aset penting untuk meningkatkan kecepatan pemuatan
Segera setelah Anda membuka laman web, browser meminta dokumen HTML dari server, menguraikan konten file HTML, dan mengirimkan permintaan terpisah untuk referensi eksternal lainnya. Rantai permintaan penting mewakili urutan resource yang diprioritaskan dan diambil oleh browser.
Hapus kode yang tidak digunakan
Dalam codelab ini, pelajari cara meningkatkan performa aplikasi dengan menghapus dependensi yang tidak terpakai dan tidak diperlukan.
Mengurangi payload JavaScript dengan pemisahan kode
Mengirim payload JavaScript yang besar akan memengaruhi kecepatan situs Anda secara signifikan. Alih-alih mengirimkan semua JavaScript ke pengguna segera setelah halaman pertama aplikasi Anda dimuat, bagi paket Anda menjadi beberapa bagian dan hanya kirimkan apa yang diperlukan di awal.
Pekerja layanan dan Cache Storage API
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.