Ringkasan berita dan info terbaru utama yang diumumkan selama acara komunitas online 3 hari kami, serta pengingat tentang acara regional mendatang.
Kami baru saja menyelesaikan acara tiga hari, web.dev LIVE, tempat beberapa komunitas developer web berkumpul secara online untuk membahas status pengembangan web. Kami memulai setiap hari di zona waktu regional yang berbeda, dan para Googler membagikan serangkaian info terbaru, berita, dan tips dengan semangat membantu developer dengan alat dan panduan untuk menjaga web tetap stabil, andal, dan mudah diakses.
Jika Anda melewatkan beberapa live stream, semua sesi direkam dan tersedia untuk Anda tonton di YouTube. Kami juga akan mengadakan acara regional di seluruh dunia yang diselenggarakan oleh Google Developer Group dan akan memberikan sesi pembahasan mendalam tentang topik yang terkait dengan apa yang kami bahas selama web.dev LIVE.
Mari kita bahas beberapa berita dan info terbaru yang dibagikan selama tiga hari tersebut.
Data Web
Tim Chrome mengumumkan inisiatif Data Web untuk memberikan panduan, metrik, dan alat terpadu guna membantu developer menghadirkan pengalaman pengguna yang luar biasa di web. Tim Google Penelusuran juga baru-baru ini mengumumkan bahwa mereka akan mengevaluasi pengalaman halaman sebagai kriteria penentu peringkat, dan akan menyertakan metrik Core Web Vitals sebagai dasarnya.
Tiga pilar Core Web Vitals 2020 adalah pemuatan, interaktivitas, dan stabilitas visual konten halaman, yang dicakup oleh metrik berikut:
- Largest Contentful Paint mengukur kecepatan pemuatan yang dirasakan dan menandai titik di linimasa pemuatan halaman saat konten utama halaman kemungkinan telah dimuat.
- First Input Delay mengukur responsivitas dan mengukur pengalaman yang dirasakan pengguna saat mencoba berinteraksi pertama kali dengan halaman.
- Cumulative Layout Shift mengukur stabilitas visual dan mengukur jumlah pergerakan konten halaman yang tidak terduga.
Di web.dev LIVE, kami membagikan praktik terbaik tentang cara mengoptimalkan Core Web Vitals dan cara menggunakan Chrome DevTools untuk mempelajari nilai vitals situs Anda. Kami juga membagikan banyak diskusi terkait performa lainnya yang dapat Anda temukan di web.dev/live dalam jadwal Hari ke-1.
tooling.report
Mengembangkan aplikasi untuk platform seluas web bisa menjadi tantangan. Alat build sering kali menjadi inti dari project pengembangan web Anda, yang mengambil peran penting dalam menangani siklus proses developer dan produk Anda.
Kita semua pernah melihat file konfigurasi build yang rumit, jadi untuk membantu developer web dan pembuat alat menaklukkan kompleksitas web, kami membangun tooling.report. Situs ini membantu Anda memilih alat build yang tepat untuk project berikutnya, memutuskan apakah migrasi dari satu alat ke alat lain sepadan, atau mencari tahu cara menerapkan praktik terbaik ke dalam konfigurasi alat dan code base Anda.
Kami merancang serangkaian pengujian untuk menentukan alat build mana yang memungkinkan Anda mengikuti praktik terbaik pengembangan web. Kami bekerja sama dengan pembuat alat build untuk memastikan bahwa kami menggunakan alat mereka dengan benar dan merepresentasikannya secara adil.
Rilis awal tooling.report mencakup webpack v4, Rollup v2, Parcel v2, dan Browserify dengan Gulp, yang tampaknya merupakan alat build paling populer saat ini. Kami membangun tooling.report dengan fleksibilitas untuk menambahkan lebih banyak alat build dan pengujian tambahan dengan bantuan dari komunitas.
Jika kami melewatkan praktik terbaik yang harus diuji, harap ajukan di laporan masalah GitHub. Jika Anda ingin menulis pengujian atau menambahkan alat baru yang tidak kami sertakan dalam set awal, kami menyambut Anda untuk berkontribusi.
Sementara itu, Anda dapat membaca selengkapnya tentang pendekatan kami dalam membangun tooling.report dan menonton sesi kami dari web.dev LIVE.
Privasi dan keamanan di web
Chrome percaya pada web terbuka yang menghormati privasi pengguna dan mempertahankan kasus penggunaan utama yang membuat web berfungsi untuk semua orang.
Pada tahun 2019, Chrome mengusulkan update pada standar cookie untuk membatasi cookie ke konteks pihak pertama secara default dan mewajibkan cookie untuk konteks pihak ketiga ditandai secara eksplisit. Secara khusus, hal ini memberikan garis pertahanan terhadap serangan Pemalsuan Permintaan Lintas Situs. Proposal ini sekarang diadopsi oleh Chrome, Firefox, Edge, dan browser lainnya.
Meskipun Chrome memutuskan untuk me-rollback sementara perubahan ini mengingat situasi COVID-19, sayangnya, selama krisis ketika orang-orang paling rentan, Anda juga akan melihat peningkatan serangan semacam ini. Jadi, dengan rilis Chrome 84 Stabil (pertengahan Juli 2020), perubahan akan mulai diluncurkan lagi di semua versi Chrome mulai dari 80 dan yang lebih baru. Lihat panduan cookie SameSite serta sesi LIVE web.dev untuk mempelajari lebih lanjut.
Selain itu, di bawah naungan Privacy Sandbox, Chrome memperkenalkan sejumlah proposal standar yang bertujuan untuk mendukung kasus penggunaan yang memungkinkan orang mencari nafkah menggunakan platform web, tetapi melakukannya dengan cara yang lebih menghormati privasi pengguna. Chrome secara aktif mencari masukan terkait proposal ini, dan berpartisipasi dalam forum terbuka W3C untuk membahas proposal tersebut serta proposal yang diajukan oleh pihak lain. Pelajari lebih lanjut inisiatif ini dalam sesi Keamanan dan privasi untuk web terbuka.
Terakhir, terkait keamanan pengguna, Spectre adalah kerentanan yang memungkinkan kode berbahaya yang berjalan dalam satu proses browser dapat membaca data apa pun yang terkait dengan proses tersebut, meskipun berasal dari origin yang berbeda. Salah satu mitigasi browser untuk hal ini adalah isolasi situs, yaitu menempatkan setiap situs ke dalam proses terpisah. Tonton sesi web.dev LIVE tentang Kebijakan Pembuka dan Penyemat Lintas Origin baru (COOP dan COEP) untuk mempelajari lebih lanjut.
Membangun web dengan kemampuan yang andal
Chrome ingin Anda bebas membuat aplikasi web berkualitas tertinggi yang memberi Anda jangkauan terbesar kepada pengguna di seluruh perangkat. Dengan menggabungkan kemampuan penginstalan dan keandalan PWA, dengan project kemampuan (Project Fugu), Chrome berfokus pada tiga hal untuk menutup kesenjangan antara aplikasi khusus platform dan web, untuk membantu Anda membangun dan memberikan pengalaman yang luar biasa.
Pertama, tim Chrome telah bekerja keras untuk memberi developer web dan pengguna kontrol lebih besar atas pengalaman penginstalan, menambahkan promosi penginstalan ke omnibox, dan lainnya. Meskipun web ada di mana-mana, beberapa bisnis masih perlu menyediakan aplikasi mereka di Play Store. Untuk membantu, Chrome meluncurkan Bubblewrap, library dan CLI yang memudahkan Anda memasukkan PWA ke Google Play Store. Bahkan, PWABuilder.com kini menggunakan Bubblewrap di balik layar. Hanya dengan beberapa klik mouse, Anda dapat membuat APK dan mengupload PWA ke Google Play Store, asalkan Anda memenuhi kriteria.
Kedua, Chrome menyediakan integrasi yang lebih ketat dengan sistem operasi, seperti kemampuan untuk membagikan foto, lagu, atau apa pun dengan memanggil layanan berbagi tingkat sistem dengan Web Share API, atau kemampuan untuk menerima konten saat dibagikan dari aplikasi terinstal yang berbeda. Anda dapat terus memberi pengguna informasi terbaru, atau memberi tahu mereka secara halus tentang aktivitas baru dengan badge aplikasi. Selain itu, kini pengguna dapat dengan cepat memulai tindakan menggunakan Pintasan Aplikasi, yang akan hadir di Chrome 84 (pertengahan Juli 2020).
Terakhir, Chrome telah mengembangkan kemampuan baru yang memungkinkan skenario baru yang sebelumnya tidak mungkin, seperti editor yang membaca dan menulis ke file di sistem file lokal pengguna, atau mendapatkan daftar font yang diinstal secara lokal sehingga pengguna dapat menggunakannya dalam desain mereka.
Selama web.dev LIVE, kami membahas banyak kemampuan dan fitur lainnya yang dapat memungkinkan Anda memberikan jenis pengalaman yang sama, dengan kemampuan yang sama, seperti aplikasi khusus platform. Lihat semua sesi di web.dev/live dalam jadwal Hari ke-2.
Yang baru di Chrome DevTools dan Lighthouse 6.0
Chrome Devtools: Tab Masalah baru, emulator defisiensi warna, dan dukungan Web Vitals
Salah satu fitur paling canggih dari Chrome DevTools adalah kemampuannya untuk menemukan masalah di halaman web dan menampilkannya kepada developer. Hal ini sangat relevan saat kita beralih ke fase berikutnya dari web yang mengutamakan privasi. Untuk mengurangi kelelahan dan kekacauan notifikasi di Konsol, Chrome DevTools meluncurkan tab Masalah yang berfokus pada tiga jenis masalah penting untuk memulai: masalah cookie, konten campuran, dan masalah COEP. Tonton sesi web.dev LIVE tentang menemukan dan memperbaiki masalah dengan tab Issues untuk memulai.
Selain itu, dengan Core Web Vitals yang menjadi salah satu set metrik paling penting untuk dilacak dan diukur oleh developer web, DevTools ingin memastikan developer dapat dengan mudah melacak performa mereka terhadap nilai minimum ini. Jadi, ketiga metrik ini sekarang ada di panel Performa Chrome DevTools.
Terakhir, dengan semakin banyaknya developer yang berfokus pada aksesibilitas, DevTools juga memperkenalkan emulator defisiensi penglihatan warna yang memungkinkan developer mengemulasi penglihatan kabur dan jenis defisiensi penglihatan lainnya. Anda dapat mempelajari lebih lanjut fitur ini dan banyak fitur lainnya dalam sesi Yang baru di DevTools.
Lighthouse 6.0: Metrik baru, pengukuran lab Core Web Vitals, Skor performa yang diperbarui, dan audit baru
Lighthouse adalah alat otomatis open source yang membantu developer meningkatkan performa situs mereka. Dalam versi terbarunya, tim Lighthouse berfokus untuk memberikan insight berdasarkan metrik yang memberi Anda gambaran seimbang tentang kualitas pengalaman pengguna terhadap dimensi penting.
Untuk memastikan konsistensi, Lighthouse menambahkan dukungan untuk Core Web Vitals: LCP, TBT (proxy untuk FID karena Lighthouse adalah alat lab dan FID hanya dapat diukur di lapangan), dan CLS. Lighthouse juga menghapus tiga metrik lama: First Meaningful Paint, First CPU Idle, dan Max Potential FID. Penghapusan ini disebabkan oleh pertimbangan seperti variabilitas metrik dan metrik yang lebih baru yang menawarkan refleksi yang lebih baik dari bagian pengalaman pengguna yang coba diukur oleh Lighthouse. Selain itu, Lighthouse juga melakukan beberapa penyesuaian pada seberapa besar pengaruh setiap metrik terhadap skor Performa keseluruhan berdasarkan masukan pengguna.
Lighthouse juga menambahkan kalkulator skor untuk membantu Anda mempelajari skor performa, dengan memberikan perbandingan antara skor versi 5 dan 6. Saat Anda menjalankan audit dengan Lighthouse 6.0, laporan akan dilengkapi dengan link ke kalkulator yang berisi hasil Anda.
Terakhir, Lighthouse menambahkan banyak audit baru, dengan fokus pada analisis JavaScript dan aksesibilitas.
Pelajari lebih lanjut dengan menonton sesi Yang baru dalam alat kecepatan.
Pelajari lebih lanjut
Terima kasih kepada semua orang di komunitas yang telah bergabung dengan kami untuk membahas peluang dan tantangan platform web.
Postingan ini merangkum beberapa sorotan acara, tetapi masih banyak lagi yang lainnya. Pastikan untuk melihat semua sesi dan berlangganan newsletter web.dev jika Anda ingin mendapatkan lebih banyak konten langsung ke kotak masuk Anda. Dan kunjungi bagian Acara Regional di web.dev/live untuk menemukan acara komunitas mendatang di zona waktu Anda.