Ngobrolin Performa CLS feat Jessica Cecilia - Ngobrolin WEB

2:03Halo, namaku Jessica Cecilia Budianto, dan ini pertama kali memang aku debut di Ngobrol Inweb.

2:12Cuman sebelumnya aku pernah, ya mungkin ada yang udah pernah lihat aku di GDG

2:19waktu aku jadi speaker di Defok atau enggak di Bogor,

2:25pernah di Bandung juga, dan yang kemarin terakhir baru di Makassar.

2:28Dan biasanya memang aku bawa entopik web di sana.

2:31Oh, kalau di Defok itu workshop ya, workshop paski ya kemarin ya?

2:37- Benar, benar. - Wah, seru tuh.

2:40- Ya, akhirnya kita ketemu langsung juga itu, Mas, kan? - Iya.

2:43Pertama kali kita ketemu secara offline ya, sebelumnya kita ketemunya online ya.

2:48Iya, sama Mbak Eka juga ini baru pertama kali beneran kenalan di sini.

2:52Baru kenalan di online, mudah-mudahan nanti bisa ketemu langsung ya offline.

2:56Wah, ini ada Adib nih, pasti kenal nih, satu kantor ya.

3:00- Ya, jadinya sebelahan, Mas. - Oh, sebelahan.

3:04- Seru datang aja, seru datang di sini, jadi bareng pat, gitu. - Iya, ya.

3:08- Sayangnya juga. - Sayangnya juga.

3:11Oke, oke, nah boleh cerita dong kantornya di mana, kerja di mana,

3:16terus mungkin bisa apa, share-share sedikit pekerjaan sehari-harinya, apa, ngertiain apa?

3:23- Oh iya, malah dari tadi belum di-mention ya. - Belum, belum.

3:27Iya, jadi, iya parah, parah emang.

3:30Jadi, aku front-end engineer di Tokopedia, dan ini udah tahun ke dua setengah aku di sini.

3:37- Oke. - Ya, mulai merasa mulai jadi fossil saya di sini ya.

3:42- Hah, dua setengah tahun jadi fossil? - Biasa, biasa, karena udah agak

3:47fresh-grade lagi, jadi ngerasanya udah mulai jadi fossil nih aku nih, kayak gitu.

3:52Terus, keseharian sih, sekarang aku di bagian share ya, jadi di bagian kalau kalian di Tokopedia,

4:01ini mau dikirimin ke, ya dikirimin ke keluarga, temen, pacar atau sesuatu,

4:05biasanya kan ada itu, ada link si produknya, terus kalau, ya nanti kebuka gitu, nah itu aku yang di bagian situ sih.

4:12Jadi, masing-masing fitur, subfitur pun ada itunya sendiri ya, ada timnya sendiri.

4:19Iya, menarik kan, karena kita pikirnya kadang-kadang Tokopedia ya, home, ya home, home, terus,

4:25terus apalagi ya, kayaknya fiturnya bingung juga nih timnya, berbagainya gimana, padahal,

4:31supaya kecil-kecil kayak gitu pun ada, ya bisa jadi tim-tim sendiri, gitu.

4:35Banyak ya, ada search, ada mobile web, ada mobile app ya, ada yang tadi apa, link juga.

4:43Shopping card, berarti shopping card sendiri, wishlist sendiri enggak?

4:48Wishlist bareng card sih.

4:53Oke, belum lagi aplikasi-aplikasi internal ya?

4:59Ya betul banget, yang buat ads, buat ini, analytics, ya itu kan yang enggak kelihatan mata itu,

5:09yang internal, ya internal kira-kira apa, ternyata, wah justru itu motor di belakangnya sih.

5:16Oke, oke, terus mungkin boleh dibocorkan sedikit teknologi yang digunakan sehari-hari apa di Tokopedia?

5:25Teknologi sehari-hari kita pakenya di front-end ya, kita pakenya react typescript sih.

5:30Hmm, react typescript. Oh, berarti sehari-hari udah, itu ya, hatam ya, typescript ya?

5:35Ya, gitu lah, dari asalnya masih JS-JS, sekarang jadi, ya sedikit lebih OOP.

5:43Masih ada nggak sih legacy code JavaScript?

5:47Oh jelas, masih banyak dong.

5:49Oh masih banyak ya, oh kirain udah full migrasi belum ya?

5:52Yang kelas komponen juga tetap ada-ada aja pasti.

5:56Ya, dan yang kayak gitu kan yang susah dipusnahkan kan.

5:59Terus itu diganti tiba-tiba di sana ada yang rontok.

6:04Ya bener banget.

6:06Kejadian gitu ya.

6:08Wow, udah pasti sih, itu kan, apalagi ganti dari asalnya komponen didmound, ganti pakai side effect, wah duar aja udah itu.

6:16Nah, terus cerita sedikit juga tentang perjalanan kok, sekarang jadi lebih sering suka sharing itu awalnya dari mana sih?

6:26Dari kegiatan apa?

6:28Hmm, jujur sih, ini awal-awalnya banget sebenarnya gara-gara, jadi kan aku lulusan bangkit juga, jadi aku lulusan bangkit angkatan pertama.

6:40Dan ceritanya kan, ya aku yang masuk Tokopedia nih, jadi testimoni aku itu sempat diliput juga sama Google masuk, ya masuk artikel juga.

6:52Di situ bisa dibilang mungkin pertama kali aku istilahnya speaker secara ga langsung ya.

6:58Go public.

7:02Ya, langkah pertama gue jadi influencer.

7:06Iya, dan kebetulan di internal juga mungkin karena aku yang kebanyakan ngomong kayak gini, jadi sering dijadikan MC juga sebenarnya di internal kayak gitu.

7:17Nah, dari situ tuh mulai jadi kayak, mungkin kayaknya karena wah ini cewek, apalagi di dunia teknologi, terus kebanyakan ngomong, ceria kayak gini, jadi kayaknya mungkin eye catching.

7:32Nah, itulah mungkin di situ itu yang bisa bikin aku masuk dalam dunia per-speakeran sih.

7:38Cuman dari aku sendiri sih, motivasi aku pengen jadi speaker itu as simple as, karena waktu aku dulu kuliah itu ga ada kan kayak, dulu mungkin jaman aku dulu kuliah ga ada ya.

7:50Kayak komunitas yang JDG gitu di kampus aku itu ga aktif, JDN-nya, jadi.

7:56Kampus apa?

7:57Eee, ITHB.

7:59ITHB, itu apa?

8:01Bandung.

8:02Oh, Bandung.

8:03Harapan bangsa di Bandung.

8:05Bukan ITB.

8:07Kita ada harapan.

8:09Ada harapan ke ITB gitu.

8:13Iya, itu bedanya kita.

8:15Oke.

8:17Nah, karena di kampus itu ga ada kan kayak GDE, GDE-nya ga aktif, terus kayak.

8:23GDSC maksudnya mungkin.

8:25Iya, GDSC, GDSC-nya ga aktif.

8:27Dulu tuh kayak, ya kuliah istilahnya belajar tech itu dari kuliah, dan disitu tuh kayak, hmm, ini kayak, ya setahunya ya teori doang, prakteknya gimana, terus kayak, jadi kayak ada gap kan antara dunia kerja dan dunia kuliah gitu.

8:45Dan disitu tuh kayak mikir, seandainya ada gitu, orang yang mau dari dunia kuliah, eh, dari dunia kerja, yang mau nge-bridging ke dunia kuliah, kayak gitu.

8:57Biar ga terlalu ketinggian bahasanya, tapi bisa relatable sama anak kuliah.

9:01Nah, aku kayak, aku mau jadi orang itu sih.

9:05Itu keinginan aku dari awal dan mungkin sampai sekarang juga.

9:09Wah, menarik sekali ya ini-nya.

9:13Misinya ya, misinya. Karena ngalamin, ngalamin sendiri ya.

9:17Bener banget.

9:19Tapi dulu lulus kuliah, udah bisa ngoading kan?

9:23Udah sih, udah-udah.

9:25Kalau ga bisa ngoading kayaknya langsung disempil sama dosen, sama kadep langsung disempil.

9:33Terus ikutan ini juga kan, kalo ga salah apa, Women Tech Academy, WTA?

9:41Women Developer Academy.

9:43Oh iya, Women Developer Academy.

9:45Ya ternyata aku angkatan terakhir, guys. Aku baru tau kemarin.

9:49Oh, udah ada lagi ya?

9:51Nggak ada lagi sekarang.

9:53Angkatan terakhir.

9:55Jadi kalau saya ada 4 angkatan, dan aku angkatan terakhir, gitu.

9:59Jadi kayak, wow, ga nyangka. Hoki banget, gitu.

10:03Ya, dan bergara WTA ini sih yang bikin aku kenal sama Mas Danang.

10:09Itu pertama kali akhirnya jadi debut di Depok.

10:13Tahun berapa tuh, debut di Depok?

10:17Tahun lalu. Belum, belum.

10:19Masih baru ya?

10:21Nggak, masih baru kok. Masih baby.

10:23Masih baru, masih baby.

10:25Iya, iya, iya. Terus sekarang udah mulai jalan-jalan.

10:27Keling-keling sedikit-sedikit ya.

10:29Iya, puji Tuhan ya.

10:31Ada alumni Bangkit 2022.

10:39Wow.

10:41Audi.

10:43Ini Audi yang Bangkit 2022 atau Jessica yang 2022?

10:47Ya, pasti dari Audi-nya sih.

10:51Kalau aku, berarti alumni Bangkit 2020.

10:552020.

10:57Nah, buat yang nanyain Irvan kemana, Irvan lagi dalam perjalanan menuju ke Kampung Halaman.

11:03Dari Kampung Halaman ke Sibolga.

11:07Iya, pokoknya itu lagi ada urusan keluarga.

11:11Ini kedua kalinya harusnya ketemu sama kak Irvan, tapi gagal.

11:19Jessica pengen banget ketemu sama Irvan ya.

11:21Iya, waktu itu udah satu event bareng, eh tiba-tiba dia, ya, kena Covid.

11:27Covid? Iya, yang di Bandung tahun lalu.

11:29Iya, benar.

11:31Batal.

11:33Iya, masih misteri ya.

11:35Sosok Irvan ini masih misteri ya buat Jessica ya.

11:39Oke, nah, berhubung malam ini, Irvan kan senang tuh dia ngomongin tentang performance ya.

11:47Kita juga akan bahas tentang performancenya sama Jessica juga.

11:51Kita malam ini akan ngomongin khususnya tentang CLS atau Cumulative Layout Shift.

11:59Yang biasanya kalau ada website, misalkan ada apa, layoutnya tiba-tiba bergeser sedikit.

12:07Nah, itu lah dia layout shiftnya yang berarti kurang bagus gitu ya.

12:11Iya.

12:13Kita akan bahas itu sedikit demi sedikit, jadi si apa, si CLS ini bagian dari Core Web Vitals sebenarnya.

12:25Nah, buat refreshing aja temen-temen, mungkin ada yang belum tahu, Core Web Vitals ini adalah inisiatif dari Google.

12:33Yang tujuannya adalah untuk delivering a great user experience.

12:39Nah, user experience itu kan abstrak ya, sulit di, patokannya apa sih? Cepet.

12:47Nah, yang cepet tuh apa? Respondary servernya atau apa? Walaupun respondary server cepet misalnya,

12:53tapi kalau layarnya putih doang nunggu di parsing semua kan bagi user dari perspektif user, itu nggak kerasa cepet.

13:01Jadi, Google merumuskan matrik-matrik khusus yang bisa dianggap bisa mewakili atau bisa dijadiin patokan user experience yang baik.

13:13Iya, dan ini menarik juga sih, karena kan kalau kita sandainya kita ditanya nih, apa ini website bagus atau nggak, kita bilangnya ya pokoknya loadnya lama nih, atau nggak ya sinyalnya jelek, atau ya pokoknya itu selalu tentang internet ya kalau di Indonesia kan.

13:32Nah, ya tapi Google tuh bisa kerennya sih bisa spesifik sih apa yang kayak faktor apa gitu dari istilahnya slow network ini dirumuskan jadi gimana cara mengukurnya kayak gitu itu yang keren sih kalau nggak salah.

13:50Jadi kan biasanya sesuatu yang ingin kita improve, ingin kita perbaiki itu harus diukur dulu kan apa nilai sebelumnya, nilai saat ini, terus setelah di improve, setelah diperbaiki apakah menjadi lebih baik atau malah jadi lebih buruk gitu.

14:10Kalau nggak ada pengukurnya, measure-nya, ya jadi apa ya tadi, jadi objektif, ya jadi subjektif apa objektif ya? / Subjektif. / Subjektif.

14:20- Ini kayaknya cepat. / Kayaknya cepat atau kayaknya lambat kan sulit dijadiin patokan. Menurut kita mengkuantifikasikan ya, jadiin kuantitatif dijadiin harus berapa detik atau CLS ini kalau konteksnya CLS ada yang geser, gesernya harus berapa persen, 0,5, berapa gesernya.

14:43Jadi ini upaya merunguskan metric sebagai patokan secara kuantitatif ya, berarti. / Ya. Kita udah sempat bahas juga di episode beberapa episode lapan. / Kita punya episode Core Web Vitals.

14:56Iya, dan ini cuma refreshing aja, yes. Salah satu yang menarik dari Core Web Vitals adalah ukurannya itu merefleksikan experience di user experience ya, jadi user centrik yang kita lihat, yang kita rasakan gitu.

15:14Bukan semata-mata kayak misalkan analytics, misalkan kayak Google Analytics itu ukurannya adalah jumlah user gitu kan, yang nggak kita rasa sebagai user, tapi kalau ini sesuatu yang bisa kita lihat, bisa kita rasakan, oh ini kok kurang bagus ya.

15:28Tapi kurang bagus itu berapa, seberapa kurang bagusnya, seberapa bagusnya gitu. Ada nilainya lah gitu, yang bisa kita jadikan patokan.

15:36Nah, sedangkan. / Ini bisa berubah ya, itu. / Bisa berubah. / Betul. / Kayak dulu, sekian tahun lalu kan bukan LCP tuh, dulu ada first content full pay. / Ya, first content full pay.

15:50Diakalin kan developer, LCP bagus, atau pakai logo di index ATML, di static shell-nya itu dikasih loader atau dikasih logo atau apalah, biar dapet FCP cepat. Tapi kan lama-lama itu kan nggak merefleksikan yang dialamin sama user.

16:08Jadi apa, itu bisa di-adjust sebelum. / Akhirnya tetap rasanya itu website-nya loading-nya lama, sama aja. / Sama-sama, karena diakalin. Terus angka-angkanya juga misalnya kayak 100 millisecond,

16:21atau berapa second lah, berapa detik, itu ke depannya ya bisa aja berubah. Karena misalnya 3 tahun lalu itu kayak di Indonesia kan masih banyak ya orang pakai 3G.

16:31Nah, terus tahun ini kayaknya 3G udah dihapuskan ya, dimatiin ya. / Oh iya, wow. / Kurang tahu sih.

16:39Konon, iya, jadi sama provider seluler itu kayaknya 3G udah di-remove, kan pelan-pelan speed-nya nambah. / Sudah ada 5G.

16:50Jadi ke depannya bisa aja itu angkanya berubah atau metrics-nya yang berubah. / Wah 3G aja dimusnahin, apalagi Edge ya. / Edge itu 2,5G ya? / Iya.

17:04Yang terbaru BTW sekarang FID mau di ganti nih, mulai tahun depan ganti jadi INP ya. / INP, iya betul. Kita juga udah bahas sebenarnya di beberapa episode yang lalu.

17:17Iya gak apa-apa, buat refreshing aja soalnya ini butuh ya. Nah, ada 3 ya, yang saat ini ya ada 3 yaitu Largest Contentful Pane.

17:26Ini menghitung loading performance, seberapa cepat loading dari web kita sampai, apa ya, Largest Contentful berarti sesuatu yang terlihat di... / Paling dominan. / Paling dominan.

17:44Apakah itu header atau image gitu ya? / Lighthouse punya algoritma sendiri buat nentukan apa yang dianggap sebagai LCP ya.

17:53Biasanya entah gambar apa main header atau judul atau semacamnya lah, pokoknya yang dianggap paling dominan di above the fold.

18:03Di layar yang tampil. / Iya itu, catchnya itu di bagian viewportnya sih. Jadi sebenarnya kalau sana gak ditampilin ya udah, gak dihitung.

18:15Iya kalau di bawah banget ya itu gak pengaruh kan, karena kita lihat ini dari perspektif user. User belum nge-scroll ke bawah, belum muncul ya gak apa-apa. / Benar.

18:27Oke kemudian yang kedua ada FID, First Input Delay, itu adalah mengukur interaktivitas. Jadi misalkan seberapa cepat website kita bisa di-scroll.

18:38User bisa nge-click, bisa scroll, bisa ngapa-ngapain lah gitu. Kalau ada form bisa diisi gitu ya, itu interaktivitas.

18:46Jadi kita bisa tahu bahwa, iya betul. / Iya, maksensi karena kan ini first-first doang ya. Kalau misalkan sudah first-nya jadi lama, akhirnya kan tutup aja user experience-nya memburuk ya kalau gitu.

18:59Iya memburuk, betul. / Ini lagi-lagi beda nilainya juga.

19:02Mungkin first-input delay-nya mungkin cepat, cuma maksudnya tetap aja banyak long-task-nya, ya mungkin tetap jelek. Jadi kalau interaction to next-pin kelihatannya terus-menerus ya.

19:16Iya, oh iya soalnya bisa diakalin ya kayak FCP tadi ya. / Betul. Lama-lama juga orang bisa ngakalin sih, makanya dia ini evolusi terus kan, ber evolusi terus.

19:29Sama aja kayak kita main SEO kan, ada teknik ini, terus dia abuse, terus abis itu ganti lagi algoritma-nya. / Iya, kalau yang jaman dulu banget, kita ingat gak sih yang pas keywords misalnya sepatu, shoes, sneakers,

19:43jadi itu terus pakai phone ukurannya 1 pixel atau pakai misalnya background-nya putih nih. / Iya jadi putih juga.

19:51Jadi pakai warna putih juga. Itu pertama kali buat belajar moding itu lagi nge-print tuh kayak gitu. / Oh iya, SEO gitu ya. Kalau sekarang udah gak bisa ditipu ya.

20:01Sekarang makin canggih ya alat si crawler-nya ya. Dan terakhir yang akan kita bahas malam ini ya itu tentang kumulatif layout shift.

20:12Ini mengukur stabilitas visual, jadi tampilannya tidak banyak berubah di awal, jadi dijanjikan sekian, dapatnya sekian, gak dijanjikan segini tiba-tiba jadi panjang gitu ya.

20:25Ada banyak faktor, kita akan bahas mungkin malam ini agak lebih dalam sedikit dibandingkan sebelum-sebelumnya.

20:32Jadi CLS ini, apa yang membuat CLS ini nilainya bagus? Kira-kira apa aja ini faktornya? Yang pasti ini ya page load ya? / Iya page load sih pasti.

20:45Terus konsistensi sih sebenarnya, konsistensi posisinya gitu. / Iya yang paling low hanging fruit-nya, kalau ada image yang cukup besar,

21:01kita tahu ukuran image-nya langsung dipatokin aja, height sama width, jadi udah ada kotaknya, udah ada placeholder-nya,

21:09jadi image-nya itu gak mulai dari yang kecil terus membesar, jadi kita udah tahu tinggi dan panjangnya image itu seberapa.

21:18Jadi gak shifting lah ini-nya ya, si layout-nya kira-kira itu. Itu untuk, itu baru image ya, ada font, ada macem-macem gitu ya, ada banyak.

21:31Iya dan itu pikir-pikir jadi agak-agak drawbacks kayaknya kalau seandainya, tadi kan image, kalau misalkan kayak div gitu di width height,

21:41ya jadinya dia agak kebatas juga ya, kayak gitu, nah itu mungkin mulai agak susah sih kalau udah kayak div gitu kan.

21:51Nah kan berarti solusinya itu tuh aspek rasio kan, kayaknya di link-nya Jessica tadi udah ada.

21:57Jadi kalau kelihatannya sebetulnya sumber CLS itu, sumber issue CLS kan sebenarnya bisa direcap sebagai pertama mungkin itu tadi punya block element, block element itu kan bisa image lah,

22:11bisa apalah container video atau ads atau apapun yang punya ada kotak lah intinya.

22:18Nah itu kuncinya kan asal kita bisa dapetin, kita tahu dan itu gak berubah-berubah rasio-nya, itu container-nya bisa dipatok pakai CSS aspek rasio.

22:33Jadi walaupun belum loading kan kita bisa pakai skeleton ya, nanti tinggal di-replace aja entah itu image atau apapun, itu sih sebenarnya kunciannya aspek rasio.

22:47Nah ada masalah lagi nih tapi kedua element inline kan misalnya text, terutama kalau text-nya gak static,

22:58maksudnya mungkin dari user submitted atau bisa berubah-ubah, nah itu pusing kan tuh.

23:04Jadi misalnya contohnya kadang hari ini feature post-nya 3 baris text, besok bisa 2 baris, nah kita bikin.

23:14Tapi itu mungkin harus manggil API line dulu, jadi harus loading spinner atau skeleton dulu.

23:20Nah kita kan gak tahu, gak bisa bikin skeleton-nya, nah mungkin itu bisa diakalin dengan CSS juga.

23:28Jadi kalau visual kita larinya kan banyak ke CSS ya, itu bisa pakai line clamp, bisa pakai text truncate, ellipsis, ada tuh link-nya yang di CSS.

23:42Kalau agak-agak illegal, tidak menolong masalah, itu ya, text-nya jangan direp-text, dia hajarin aja tak berakhir.

23:55Intinya kan biar kita punya, kita bisa skeleton yang ukurannya sama, setelah dialogin dia gak ngedorong sisanya ke bawah.

24:09Nah kalau text itu bisa diakalin pakai line clamp itu kalau lebih dari 1 baris, misalnya kita punya entah text-nya pendek atau panjang, kita sediain tempat buat 2 baris text, misalnya itu yang bawah.

24:24Kalau yang atas itu yang text ellipsis itu truncate cuma 1 baris doang, jadi kita punya sediain tempat buat 1 baris.

24:33Jadi ngurung ke bawah ya, dipotong gitu ya, ditambahin titik-titik.

24:39Biar enggak, ini kan terutama buat data dynamics sih yang kita belum tahu, kalau kita udah tahu misalnya server render udah waktu ada sih gak masalah ya, kan karena dia gak bergerak lagi.

24:49Tapi kalau kita belum tahu, misalnya datanya dipanggil di render client-side, kan kita kedu pasang placeholder, nah terutama ini berguna buat kayak gitu sih.

24:59Setelah datanya muncul, nggak bakal ngedorong bawahnya, yang bikin channel S itu kan pas kalau text-nya udah ke loading ternyata panjang dan gak dibatasiin kontainernya kotaknya kayak gitu.

25:13Setelah datanya muncul dia ngedorong sisanya ke bawah kan, nah itu sih kalau di pengalaman pribadi yang katal kayak gitu.

25:21Yang cukup sering kejadian juga biasanya di situs-situs berita ya, atau agregator dan lain-lain yang biasanya ada iklan, dan iklannya juga belum tahu nih ukurannya seberapa.

25:35Karena terparti kan dari orang luar kan, udah gitu mungkin bentuknya iframe lagi, kita gak tahu isinya apa, ukuran berapa, itu pasti pusing sekali ya gimana tuh cara mengakalinya ya.

25:47Kalau image mungkin kita masih bisa tanya ukurannya berapa, atau aspek rasio-nya berapa.

25:52Kalau ini text juga sekarang udah bisa pakai ellipsis seperti ini ya.

25:59Ellipsis atau line-clamp.

26:01Line-clamp, iya.

26:03Disini siapa yang belum tahu ini apa, text overflow ellipsis, jadi harus bikin sendiri pakai di string ya.

26:11Detailin aja jangan sendiri.

26:12Iya pakai di string.

26:14Tapi aku agak penasaran sih, itu kalau line-clamp itu kepengarungan responsif ya, tapi kalau kayak gitu ya.

26:23Sofif, aman. Jadi CSS tanpa javascript, jadi kalau zaman dulu nih primitifnya kan kita ambil dulu viewport height-nya, terus kita hitung aja, mesti motong berapa karakter gitu, font-nya itu berapa pixel, terus kita hitung karakternya, muat apa, terus kita potong padding-nya gitu, muatnya berapa, ya pokoknya gitu lah pusing.

26:47Sekarang sakti udah.

26:49Sakti ya, luar biasa.

26:51Canggih sih, cangih-canggih.

26:53Karena ini udah standard CSS, udah masuk tailwind, jadi kalau yang pakai tailwind itu cuma kayak kelas namanya line-clamp 1, line-clamp 2, ya udah potong 2 baris.

27:05Nah 2 barisnya itu ngikut, jadi kalau misalnya di apa, mobile, kecil, ya 2 barisnya mobile.

27:11Kalau di desktop besar, ya 2 barisnya desktop.

27:14Jadi dia udah.

27:16Penarik-penarik.

27:18Jadi intinya kita bisa pasang skeletone, playsoldernya tingginya kita udah tau, itu 2.

27:26Tinggal dihitung aja kan, kalau 2 baris itu seberapa, udah intinya sih buat memudahkan playsolder.

27:32Nah, kalau skeletone pada biasanya pakai laboratika atau bikin sendirika atau gimana?

27:38Skeletone.

27:40Kalau buat proyek sendiri sih biasanya bikin sendiri sih, memang pakai div aja.

27:46Ya, tapi memang width sama height, ya kan harus tau ya.

27:50Terus pakai warna abu-abu kayak gitu.

27:54Sama sih bikin sendiri sekarang cepet, lagi-lagi tailwind itu udah ada animasi yang buat apa, gitu loh.

28:01Yang kayak text mucil gitu ya?

28:03Iya, iya sih.

28:05Ya udah sih, saya pakai div aja, jangan lupa accessibility dipakai area hidden ya.

28:11Biar yang pakai screen reader nggak bingung banyak.

28:16Oh itu kebaca, oh kebaca di screen reader ya?

28:21Kalau kosong, nah kalau kosong nggak tau sih.

28:24Cuma ya kebiasaan aja sih kalau yang nggak make sense semantically ya di area hidden aja.

28:31Kosong atau NBSP?

28:33NBSP.

28:35Itu nyeblin sih.

28:37No breaking space.

28:41Di screen reader NBSP bacanya apa ya?

28:44Nggak tau ya?

28:46Iya ya bener juga, pertanyaan bagus.

28:48Kita nggak tau jawabannya, kapan-kapan kita bahas.

28:51Kapan-kapan kita bikin edition screen reader.

28:53Iya benar benar.

28:55Nah kalau di Tokopedia sendiri ya, pernah ada kasus-kasus yang berhubungan dengan CLS nggak?

29:02CLS mungkin sampai sekarang juga ini masih sesuatu ya.

29:08Ini ya kayak kita berusaha improve over time sih.

29:11Karena kan ya konten dinamiknya kan ya banyak ya.

29:15Dan terus kayak walaupun kayak beberapa banner misalkan udah pasti ukuran-ukurannya.

29:21Tapi kan kayak ya fiturnya Tokopedia luar biasa kompleks ya.

29:25Jadi akhirnya tetap suka ada shifting-shiftingnya kayak gitu sih memang.

29:30Ya memang secara umum untuk performance ya memang improving over the time ya.

29:38Nggak mungkin bisa sekali kita tweak, habis itu udah lepas tangan udah selesai gitu nggak.

29:45Jadi ini terus menerus ya dan di monitor terus ya.

29:49Ya apalagi dengan si core titlesnya juga kan direvisi terus ya.

29:53Akhirnya kita juga harus revisi lagi.

29:55Ya harus itu ya harus tetap update-update dengan yang gini-gini ya.

30:00Jadi biar tahu dan biar aware gitu ya.

30:03Tapi ada sistemnya nggak sih?

30:04Maksudnya di CI/CD lah atau pas lagi bikin pull request apa di cek?

30:09Cek regression gitu ada nggak sistemnya kalau di update?

30:15Kita biasanya misahin sih jadi kayak ya antara fitur development sama ini kan performance ya.

30:24Performance kayak gini ya ini dibisain.

30:26Soalnya kayaknya kalau tiap kali fitur development dipikirin kan overwhelming juga ya.

30:31Jadi ya ada kayak terpisahnya sendiri sih yang kayak di monitor over time kayak gitu paling.

30:38Tapi itu pakai apa? Mungkin bisa share?

30:43Mungkin ini ya.

30:44Kayak pakai hati atau apa?

30:46Ya apa? Belosan detail sih makanya kisi-kisinya.

30:50Jadi ini juga ada di link yang tadi ditunjukin sama Mas Riza deh.

30:54Kayaknya soal pakai Google Search Console kayak gitu.

30:58Itu kita pakai deh.

31:00Yang ini ya? Bukan.

31:02Iya ya Lighthouse ya.

31:06Paling cepat buatnya itu kan Lighthouse ya tetap ya.

31:09Ya Lighthouse juga ada CI-nya kan.

31:11Udah pada tahu kan.

31:13Ada CI-nya jadi bisa ditambahkan ke continuous integration.

31:17Jadi ketika kita develop sesuatu, kita post sesuatu, nanti dia ngitung si Lighthouse-nya, nilainya bertambah berkurang.

31:25Kita nge-set di JSON gitu apa semacam betasnya result-nya.

31:31Ya biasanya development sih ya jalan dulu aja nanti efeknya baru ditikirkan kemudian.

31:39Sama aja ya dimana-mana gitu ya.

31:45Akhirnya sama kira-kira impact-nya kayaknya nggak terlalu parah ya jalan dulu aja.

31:52Yang mana ini?

31:54Layout Instability API, visual feedback.

31:57Nah itu API yang menarik tuh si Layout Instability API.

32:01Udah pernah pakai belum ya?

32:03Layout Instability API, wah ini juga baru tahu nih ini.

32:07Ini kita bisa pakai API-nya untuk mengukur CLS kan.

32:11Jadi ini juga sediak tools-nya kan.

32:13Untuk programatikali mengukur.

32:16Jadi kan sebenarnya kalau di dev tools, di performance tab, ada tuh bisa nge-highlight pas dia geser.

32:22Tapi kan itu harus visual kan, kita harus manuali perhatikan manteng itu.

32:28Nah kalau ini, itu untuk ya itu automation atau programatikali cek lah.

32:35Jadi intinya dia nge-cek elemennya, gesernya seberapa.

32:38Yaitu ada value-value-nya.

32:41Oh dia lebih specific ya dibandingin yang Corel Vitals API-nya sendiri malahan ya.

32:47Kalau Corel Vitals kan ya as simple as score-score aja.

32:51Kalau ini beneran lebih granular kayak gitu ya, menarik sih.

32:55Betul.

32:57Nah kan karena dia dapet score geser sekian persen, misalnya berapa kan, under the hood kan sebenarnya pakai ini.

33:04Ini kayaknya Siobhan pernah jelasin juga deh sebelumnya, cuma lupa karena belum pernah pakai sebenarnya personally.

33:11Nah ini ada yang minta ini nih, bocoran.

33:19Lighthouse budget-nya berapa?

33:22Tunggu, Lighthouse, Lighthouse bukannya free aja ya?

33:26Bukan, budget untuk minimum berapa gitu.

33:31Oh budget, oh maksudnya budget itu.

33:34Nilainya, bukan duit.

33:39Otomatis budget, mikirnya oh cost.

33:43Kita disamain sih, kita ngikutin sama standarnya Corel Vitals yang disarankan Google ya.

33:50Itu kan ada merah-merah kuning hijunya, kita konsisten sih sama kayak gitu.

33:55Jadi kalau yang, kalau hijau itu dibiarin atau diimprove lagi atau tunggu sampai kuning baru diimprove?

34:07Biasanya sih kita awasin juga sih kayak hijaunya hijau berapa, kalau misalkan ya udah cukup ya udah biarin dulu aja, karena kan ya itu sih.

34:19Mungkin pengennya kan ya yang hijau pun diimprove, tapi ya balik lagi kita fitur banyak.

34:25Yang kuningnya banyak juga, ya jadi prioritas lagi akhirnya, yang kuning duluan.

34:31Oh, nah ini ngomongin budget ya, jadi Lighthouse itu juga ada performance budget-nya.

34:37Kalau mau diset, misalkan di sini kita bisa pakai konfigurasinya dalam bentuk JSON seperti ini, timingsnya berapa budget-nya?

34:46Nah, budget itu maksudnya milisecond.

34:50Eh, milisecond loh, maksudnya 3000 second.

34:54Ya, 3 second deh terus.

34:573 detik, ya ini 1 detik.

35:00Ini budgetnya berarti 125 itu size-nya ya, ukuran berapa nih, 125 bytes?

35:06Kilobytes.

35:08Oh, ini bandel size-nya deh kayaknya ya.

35:12Bandel size-nya ya?

35:13Iya, bandel size.

35:14Oh, oke.

35:16Ada keterangannya itu di bawah.

35:17Ini script, berarti java script kan?

35:19Iya, iya.

35:20Kenapa yang kita nebak-nebak ya?

35:22Iya.

35:24Oh, tapi keren banget ini sampai bandel size-nya maksudnya diukur juga ya di sini.

35:29Karena ini buat disambungin ke ICD sih sebetulnya, ke session kita sendiri.

35:34Inder kita pakai tool kayak husky, pas lagi mau...

35:39Jadi nggak bisa nge-push ya?

35:41Oh, iya.

35:43Kalau di bawah standar.

35:45Kalau mau boros, itu bisa di GitHub actions juga atau semacamnya.

35:49Cuma itu nggak recommended kali ya.

35:51Boros nggak sih?

35:52Kan itu makan waktu di server-nya mereka.

35:57Yes.

35:59Kalau pakai Netlify, ada plugin-nya.

36:02Ya itu juga sebenarnya boros sih, maksudnya kalau terlalu sering.

36:05Jadi kita push, tapi kalau misalnya bisa aja dibikin fail kalau nggak menungguin budget itu.

36:13Ingat banget tuh.

36:15Jadi dulu pernah sama anak-anak React ID yang dulu pernah featuring di sini juga

36:21kan bikin website yang buat...

36:24Akan dulu warga bantu warga tuh jaman Covid.

36:26Oh iya.

36:27Nah, terus ada itunya pasang plugin itu, ya bagus.

36:30Niatnya buat performance.

36:32Cuma kan ya itu kan lagi derut ya, maksudnya ada info yang ada hal-hal update

36:37yang sifatnya kayak harus banget sekarang, apa, secepat mungkin di-up.

36:41Terus ya akhirnya kita bypass gitu maklum-maklum budget chasennya di modifikasi sendiri lah.

36:48Budgetnya di naik-naikin terus ya biar pas.

36:51Di naik-naikin.

36:52Karena butuh apa harus deploy.

36:54Jadi cuma kan sebetulnya itu sistem yang bagus sih.

36:57Prevent regression dari awal.

37:00Iya, iya.

37:02Tapi ya itu sih mungkin, itu semacam standar-standar gitu juga di sini biasanya kayak ada.

37:09Tapi biasanya kayak itu bukan yang jadi standar, jadi gak bisa, apa, gak bisa commit gitu.

37:15Gak bisa commit gitu ya, gak bisa push gitu ya.

37:17Iya, kita biasanya gak kebatasin gitu sih.

37:20Karena kan ya itu ada kebutuhan dari produk.

37:22Kalau produknya memang butuhnya gede, apadah iya tanya.

37:26Akhirnya jadi memang harus naik-naikin budget juga kayak gitu.

37:29Jadi biasanya sih ya naikin.

37:33Kalau misalnya naikin budget, naikin dulu aja.

37:35Tinggal nanti di review lagi apakah ini harus di minify gitu gimana.

37:44Nah mungkin kayak gitu sih biasanya.

37:46Nah ini Mas Didik ini kayaknya sudah menerapkan ini ya performance budget ya.

37:51Kayaknya menarik nih buat topik kita bahas ya.

37:54Performance budget ya.

37:56Iya sih.

37:57Kapan-kapan?

37:59Iya, dicatat dulu ya.

38:00Terima kasih.

38:02Terima kasih.

38:03Jadi saran topik baru nih.

38:06Oke.

38:07Kita bahas apa lagi nih?

38:09Tentang CLS, lanjut lagi.

38:11Phone, kita mau bahas phone.

38:13Tadi kan tersukanya ada apa, container image dan sebagainya.

38:18Ada text, ada budget.

38:20Nah coba dijelasin kenapa phone bisa fatal buat CLS.

38:26Bisa mengaktifkan masalah CLS.

38:28Siapa yang coba?

38:32Tolong dibantu.

38:34Kenapa phone?

38:36Oh iya ada di sini kan, ada di catatan kita kan.

38:39Ada dong.

38:41Jadi kan apa, web phone kan pas loading, nggak bisa langsung kan, harus dipanggil dulu.

38:47Nah, dari phone back phone, phone default yang udah ada di device-nya user, terus pas apa, web phone-nya file, phone file-nya udah selesai loading kan diganti tuh.

39:00Nah, itu bisa berpotensi mengakibatkan CLS.

39:04Karena kan masing-masing phone ada lebarnya sendiri, terus apa sih, walaupun misalnya sama-sama line height-nya 1,5 kan tingginya juga bisa lain ya.

39:15Nah, kalau misalnya kebetulan kita bedanya banyak, itu kan elemennya yang ke bawah bisa kedorong semua.

39:23Jadi bisa bikin layout shift.

39:25Ini kentonya ya.

39:27Ada solving yang lebih gampang sih, makanya jangan pakai phone custom, pakai phone default.

39:34Emang Tokopedia pakai phone default?

39:37Kita pake phone default nggak ya? Kayaknya nggak juga deh, kita pakai phone custom. Eh, apa kita pake phone default?

39:48Mari kita lihat.

39:49Kita lihat.

39:51Ayo kita cek. Coba DevTools.

39:53Ayo.

39:56Phone family.

39:58Phone size?

39:59Kanan-kanan, atas, di filter aja tuh, filter.

40:04Phone family.

40:07Open source? Oh, bukan dong.

40:09Oh iya.

40:10Bukan dong, nih.

40:11Custom sih.

40:12Berubah kan.

40:13Custom.

40:16Aslinya apa nih ya?

40:18Tergantung ya, tergantung masing-masing OS-nya.

40:21Ya, dan browser-nya.

40:23Sayangnya custom ya, biar menjaga konsistensi, ada berbagai browser lagi-lagi.

40:27Oh iya, bener.

40:29Tadi itu solusi paling enak sih, udah font-nya sanserif lah, terserah.

40:34Nah, cuma itu kan perspektif kita ya sebagai developer yang bikin estetika visual ya, budu amat lah, udah yang sanserif kan.

40:41Yang penting kebaca, kan.

40:43Nah, cuman realistically, orang product dan mungkin orang UI ya, atau orang visual, orang branding kan nggak bisa se...

40:51Tidak bisa.

40:52Terima lah.

40:53Kan, soalnya itu bagian dari branding ya, apa?

40:55Benar.

40:56Oh iya, apalagi kalau ada, udah ada design system kan, pasti...

41:01Iya, design system juga.

41:03Yang semua ya.

41:04Iya, terus kita buka di mobile, pakai Roboto.

41:09Di sini pakai apa, beda lagi gitu ya.

41:12Jadi bisa berubah desainnya dan tampilan dan apa ya, brandingnya juga bisa berubah jadinya, gara-gara font aja ya.

41:20Iya, bener banget sih.

41:24Terus jaga konsisten readability juga kali ya.

41:29Iya, iya, iya.

41:31Alasannya.

41:32Cuman kan ada tricknya kan, kita udah sempat bahas juga.

41:38Jadi ada satu tools yang bisa memberikan alternatif kalau misalkan kita pakai tadi misalkan apa, open source.

41:46Itu font yang paling dekat secara bentuk dan ukuran itu apa gitu.

41:51Jadi, kalau pun berbasifnya tidak terlalu besar gitu.

41:55Ada kan, ada toolsnya ya.

41:57Ada dong.

41:58Ini mana dia?

41:59Coba buka.

42:00Di...

42:02Meoni.ka, cari aja coba di...

42:07Oh iya iya, Meoni.ka.

42:09Terasa tadi udah dibuka.

42:11Buka lagi deh.

42:13Nah ini.

42:20Oh, baru tahu ini ada website kayak gini.

42:23Sebetulnya sih kalau ini tools untuk mempermudah aja sih.

42:28Kalau kita pengen untuk mengkustom kayak line height sama kayak apa sih kerning dan lain-lain tuh ada.

42:34Cuma ini buat common web font yang pakai Google Fonts misalnya.

42:38Ya udah biar cepet.

42:39Jadi bisa pakai settingan yang dari sini.

42:42Oke, ini bisa ditulis ya?

42:45Dropdown, kan?

42:47Dropdown, gitu. Nah ini kan beda ya.

42:51Ini bisa satu baris, ini dua baris ya.

42:54Oh iya.

42:55Jadi dia nanti carinya gimana tuh?

42:57Oh, ini cuma melihat perbedaannya aja ya.

43:00Nggak dikasih saran font yang mana ya.

43:04Atau bisa dikecilin di sini supaya bisa sebaris.

43:08Kayaknya itu deh di-compare di bawahnya.

43:11Di sini ya, nah ini ya.

43:13Oh wow.

43:16Jadi kita bisa tahu kayaknya font line height-nya harusnya dikurangin gitu ya.

43:21Atau ditambah supaya...

43:23Ini harusnya dibikin satu view ini biar jadi kita nggak usah scroll.

43:26Iya, kiri-kanan gitu ya.

43:28Iya, kiri-kanan.

43:30Jadi bagus tuh.

43:31Nah, kurang lebih gitu lah.

43:34Jadi kita bisa cari kayaknya font yang udah pasti ada di desktop.

43:40Yang susah juga sih ya.

43:42Kalau dibukanya di mobile, Georgia kayaknya nggak ada ya.

43:46Nggak ada opsinya lagi ya?

43:48Iya.

43:49Iya, ini malah jadi ngomongin UX-nya ini kita.

43:55Udah di-scroll-scroll.

43:58Nah, kalau pengen customize sendiri ada ini CSS Size Adjust.

44:03Coba buka.

44:05CSS Size Adjust.

44:08Oh, di-comment, oke.

44:13Dari web dev ya.

44:14Oh, web dev.

44:16Nah, scroll aja ke bawah sampai ada bagian mitigating, CLS, blablabla.

44:27Ya intinya kebayang, tapi kan mau saya biar apa?

44:32Perbedaannya terlalu jauh.

44:34Kita cuma butuh tinggi, kurang lebih lebarnya harus mirip.

44:38Dan tingginya, spasinya juga harus mirip.

44:42Nah, jadi kita kayak nyesuainya pakai itu.

44:48Yang dimainin berarti line height gitu-gitu ya, bukan jenis font-nya ya?

44:54Kalau jenis font kan belum tentu kita bisa ngontrol ya?

44:57Belum tentu, iya.

44:59Nah, terus ini nih ada package.

45:01Ini sebenarnya dulu diposting sama event kalau nggak salah, Fontaine.

45:05Ini juga tools untuk menyesuaikan fallback font dengan font yang kita loading.

45:14Iya, jadi ini font placeholder ya.

45:19Jadi font-nya muncul ini dulu, begitu font yang mau kita pakai sudah berhasil di-download,

45:26baru keganti kan secara otomatis.

45:28Oh, berarti ini font-nya font custom juga ya?

45:32Enggak, dia pakai system font.

45:36Oh, dia punya list of system font, nah itu yang bisa di...

45:42Tapi ini secara programatik ya, jadi di-coding ya, pakai di-codingan kita, kita tambahin tools ini atau library ini.

45:54Itu outputnya adalah font face dengan custom kayak settingan itu tadi apa, sizing atau line height atau semacamnya lah pokoknya.

46:03Tapi udah otomatis ya, dicariin sama dia ya?

46:07Iya, biar sesuai, nah itu contohnya tuh outputnya.

46:12Nah, jadi asen override, asen sama desain itu kayak dia nyesuaikan kayak spasi lah sebenarnya, spasi horizontal atau vertical sih,

46:21yang dari atas ke bawah, ya gitu pokoknya.

46:23Kayak spasi atasnya disesuaikan di fine-tune lah, di tweaking berapa persen,

46:29terus spasinya yang di bawah berapa persen, biar secara dimensi tuh makan tempatnya sama kayak font yang mau kita pakai.

46:38Oke.

46:40Oh, menarik sih.

46:42Oh, berarti tapi dari CSS sendiri memang ada ya, asen override, desain override.

46:48Ini semua nggak ada, kalau kita iseng banget pengen itu sendiri juga boleh.

46:52Iya, bener banget, sebenarnya pengen milih sendiri.

46:55Iya, sebenarnya bisa sih kalau gitu.

46:57Ini property ini juga baru lihat nih.

47:00Iya, kemarin waktu dilihatin event juga udah sih, cuman baru nyadar ada ya ternyata ini ya.

47:06Iya, kayaknya banyak sih itu property CSS yang lusukan dan nggak apa-apa.

47:13Iya, bener, ada berapa banyak itu, yang kita tahu mungkin sebagian kecilnya saja.

47:20Iya, udah kayak lari kan.

47:23Kalau aku tuh dulu nemu ini gara-gara dulu kan next.js, kalau sekarang kan udah ada yang font otomatis di fine-tune lah, mirip-mirip kayak gitu.

47:34Dulu belum ada, terus sebel aja sih gemes di personal project, cuman gemes, sebenarnya performance-nya udah oke semua,

47:42karena sebenarnya nggak ada isinya, cuma ngetes doang, cuma ngetes layout, cuma ngetes UI simple, cuman satu itu doang,

47:50CLS, jelek, cuma gara-gara itu doang, jadi gemes nyari dan emang nemu property-property CSS itu.

47:58Cuman in real life kan nggak seselow itu ya kalau dikerjaan di production app, task lain yang feature-related masih banyak,

48:07jadi nggak pernah sempet memakai itu.

48:09Nah, terus dulu Ivan ngasih tahu ada tools buat meng-automate itu dan ngitung sampai ke exact persen-persennya.

48:19Iya, itu persenannya sampai angkanya panjang banget gitu lagi.

48:23Karena dia kan masuk ke build tool ya, dia masuk ke webpack atau feed, ya dia ngerender beneran sih.

48:30Dia ngerender dengan font yang lama, dia ngerender dengan font yang baru.

48:33Ya udah, bandingin aja kan, tinggal dibandingin selisih ukurannya, dia calculate, ngitung, nyesuaikan itu.

48:41Wah, banyak sekarang ya.

48:44Ya, berarti kalau gitu ada pre-rendernya gitu dulu ya, semacam yang membaca CSS-nya.

48:50Harus disambungin ke system pooling kita.

48:54Ya, nanti kalau kayak gitu ada bahasan kena performance lagi nggak tuh pas build-nya?

49:00Nah kan pas build ya.

49:03Iya, beneran sih.

49:05Aman sih, aman sih.

49:07Kan musim di kita, nah kan dia outputnya CSS, CSS biasa.

49:11Ya, pentingnya pas di run-nya aman sentosa ya, pas build-nya.

49:15Atau sebetulnya kalau kita nggak banyak gunta ganti font, ya kita running aja sekali di lokal, terus copy output-nya.

49:23Udah deh, nggak usah.

49:24Maksudnya besok-besok kan kita nggak harus ngeubah itu lagi sampai kita ganti font kan.

49:29Bener sih, iya.

49:31Ini lah pentingnya, jangan apa yang berbagai font gitu ya, satu itu berbagai jenis font beda, font-font lainnya.

49:39Iya, satu website biasanya ada berapa banyak font family?

49:47Satu lah.

49:49Tiga, dua, dua ya.

49:51Maksimal dua.

49:52Maksimal dua, cuman di kita juga satu deh perasaan satu.

49:56Kayak umumnya satu deh.

49:58Kalau misalnya buat apa lah, kayak logo atau apa kan bisa diakaliin pakai SVG aja ya.

50:04Iya, iya.

50:06Kalau website berita atau artikel mungkin butuhnya dua kali ya, untuk title sama untuk body, atau ada subtitle juga.

50:16Iya.

50:18Tergantung jenis webnya ya.

50:22Iya, iya benar sih.

50:24Biasanya kalau fontnya udah lebih dari dua, jangan-jangan itu ciri khas website waktu belajar CSS.

50:32Oh iya, lagi seneng-senengnya ini ya.

50:37Ada comic sans.

50:39Ada comic sans, masih ada ya comic sans.

50:48Wah, ada yang curhat nih, web Tokopedia suka crash kalau kita input search pas masih loading skeleton.

50:53Crash itu gimana, kalau di web crash itu gimana ya?

50:55Oh muncul itu ya, muncul dinosaurus ya.

50:59Not responding.

51:01Bukan dinosaurus, biasanya kita angkat beban sih sebutannya.

51:04Oh itu ya gambarnya itu ya.

51:07Iya, oh menarik nih.

51:10Bisa jadi input sih, itu kayak gitu.

51:13Beda departemen.

51:15Beda departemen, cuman disini biasanya kita kalau ada isu-isu, emang saling kasih tau gitu sih.

51:22Oh jadi ini masalahnya pada saat lagi loading, skeletonnya belum selesai, isinya belum muncul.

51:29Terus ini si user sudah langsung search input, inputnya udah ngetik lah gitu.

51:38Oh iya, berarti kalau gitu si inputnya juga udah bisa langsung diakses ya deh.

51:45Iya, mau ngejar itu kan first input display kan, FED kan.

51:48Iya, iya, wah ini contoh pengorbanan hasil demi FID mungkin.

51:55Demi FID, demi mengajar code for web vital.

51:59Iya, wah tapi ya itu gak tau sih memang banyak faktor ya.

52:03Banyak faktor.

52:05Iya, kadang-kadang kita kan sebagai developer juga kalau lagi bikin, lagi develop gitu kan,

52:12ya kita pakai dengan kondisi yang ideal kan, internetnya apa, bandwidthnya gede, layarnya gede gitu kan.

52:22Jadi harus diperhatikan juga ya mungkin harus di throttle gimana.

52:26Kalau ternyata loading datanya lambat sekali, tiba-tiba ada user yang langsung search gitu kan.

52:33Nah itu juga harus.

52:34Atau ngetiknya cepet atau apa? Nah kan kalau input element itu memang kudu di debounce ya.

52:44Di debounce.

52:46Oh, biar dia ngirimnya event, kan sebenarnya tiap kita ngetik tuh ngirim event.

52:53Nah kalau event itu nge-trigger request misalnya ke REST atau GraphQL server,

53:00kalau bolak-balik kirim-kirim-kirim-kirim kan mungkin ya dibowl.

53:04Jadi harus di debounce biar harus misalnya setengah detik sekali atau apa kirim eventnya.

53:11Iya, tapi kalau kayak gitu kalau misalnya ngetiknya kelamaan, dibowlnya juga...

53:16Kalau lama kan gak apa-apa.

53:17Iya sih.

53:18Kalau lama ya udah ngikut dia aja kan.

53:20Maksudnya jadi ngirimnya tetap misalnya setiap setengah detik atau seperempat detik sekali.

53:27Udah kalau dia detiknya satu hurus satu detik kan gak apa-apa gak ngaruh.

53:31Iya sih benar-benar.

53:33Tapi belakangan denger-denger ada tuh dari Google nyaranin selain pakai debounce,

53:39ada yang baru pakai kayak scheduler kayak gitu tuh.

53:43Wow, menarik.

53:44Hah, scheduler?

53:45Iya namanya scheduler itu kayak API baru gitu sih masih experimental.

53:49Oh, oke.

53:52Nah, lanjut lagi nih.

53:55Waduh, waduh.

53:58Nah, ini buat orang product ini.

54:00Tapi ini pertanyaannya, seberapa banyak orang yang mau taro barang di shopping cart lebih dari berapa nih?

54:08Sembilan, sembilan, sembilan, sembilan.

54:10Ya, nah itu sebetulnya...

54:11Satu juta.

54:12Balik lagi ke pertanyaan kenapa taro sebanyak gitu.

54:15Iya, buat apa? Taro aja di wishlist gitu kan.

54:18Di wishlist juga bisa dijebolin kayak gitu juga sih.

54:21Oh, bisa juga ya.

54:22Logik aja kan.

54:23Iya, benar, benar.

54:25Nanti ada pertanyaan lagi ya.

54:26Iya, kenapa? Kenapa?

54:28Ya, tapi kan sebetulnya apa pun gak ada yang namanya unlimited kan.

54:32Jadi, misalnya kita pakai data unlimited kan sebenarnya gak unlimited.

54:37Iya, betul.

54:38Invisibel atau apa pun ada betusnya kan.

54:40Kan, unlimited.

54:41Iya, mungkin keliatannya di...

54:43Ya, itu keliatannya unlimited sebenarnya padahal ya, limited digedein aja.

54:48Jadi, ilusinya unlimited.

54:51Iya, itu kan paling.

54:53Tapi kalau jawaban teknisnya adalah membatasi storage dan database.

54:57Jangan banyak-banyak.

54:58Benar banget.

54:59Nanti costly.

55:01Coba bayangin, satu orang bisa satu juta shopping cart, item, dikali berapa pengguna Tokopedia.

55:12Mungkin setengah atau nggak sampai setengah, mungkin berapa persen pengguna Tokopedia.

55:15Bayangkan berapa uang yang harus dikeluarkan oleh Tokopedia.

55:21Iya, terus pasti itu kalau jawaban orang produknya pasti ada risetnya.

55:27Kalau nyimpan wishlist atau itu lebih dari sekian, akhirnya gak kebeli juga.

55:32Pasti ada riset-risetnya kayak gitu kan.

55:35Iya, nah ini risetnya nih.

55:38Risetnya dari keluarga sendiri kayaknya ya.

55:41Observasinya luar biasa hari ya, sampai orang tua dan pacar juga jadi.

55:51Nah, tapi kan kalau dari sudut pandang infra, yaudah pertimbangannya.

55:57Yaitu kos sama mungkin bidangnya mana kali ya?

56:00Rata-rata produk yang kebeli dari wishlist atau dari shopping cart kan pasti ada presentasinya kan.

56:06Misalnya kita masukin 20 item di shopping cart, nggak semua orang punya duit unlimited.

56:12Ya, kita semua nggak ada yang punya duit unlimited, check out semua juga kan.

56:17Duit nggak unlimited, berarti misalnya dari 20 itu ternyata yang kebeli cuma 5.

56:22Yaudah kan berarti ada gambaran bahwa yaudah sekitar, pokoknya item allowance-nya harus di atas 5.

56:30Atau di atas berapa persen lah, persentase kali ya.

56:33Terus kalau kebanyakan yang di dasar itu pasti nggak pernah kebeli gitu di capi.

56:39Ya, pertimbangannya banyak sih ya.

56:44Kalau misalkan nih, anggap lah ada needs tertentu gitu ya, untuk tipe orang-orang yang mau taro barang di shopping cart-nya sebanyak 1 juta.

56:53Kita bikin aja coba, e-commerce unlimited shopping cart ada yang pakai nggak?

56:58Bukan itu faktornya ya, banyak diskon, UI/US dan lain-lain gitu.

57:04Itu hanya kecil banget gitu faktornya.

57:08Bisa istilahnya ada, ini pengganti kan bisa ditaro di wishlist, bisa di-copy link-nya, ditaro di catatan, atau di to-dolist gitu.

57:18Itu kan sebenarnya, ini kan keuntungannya teknologi web kan bisa di-bookmark pakai sistem apapun kita di browser bisa.

57:27Pakai tools kayak raindrop atau bookmark manager apapun ya bisa.

57:31Iya, ditaro di to-dolist juga bisa, tinggal di-copy link-nya kan.

57:35Buat beli sepatu.

57:37Oh, cuma, apa sih, aku kalau mau compare, misalnya compare sepatu atau HP atau apapun,

57:44ya emang literally pakai bookmark manager sih, pakai raindrop kan enak tuh.

57:49Ya, nggak harus raindrop sih, apapun yang bisa pakai folder kan lebih jelas ya.

57:54Compare sepatu lah, compare HP atau compare apa, earphone atau gadget atau apapun.

58:01Gak, campur-campur.

58:03Wah, ini bisa jadi masuk kan buat other product deh, bikin Twitter buat compare nanti.

58:08Kalau di shopping cart kan ketumpuk semua kan, dari mau beli smartwatch, dari mau beli sepatu lah, pusingan.

58:16Iya, mencet satu-satu ya.

58:18Iya.

58:20Oke, nah.

58:25Sebelum kita kemana-mana, sebelum ngomongin diskon dan lain-lain, nanti ngelantor kemana-mana,

58:31mungkin kita simpulan dulu ya, kita simpulkan, apa, kumulatif Leoship itu bisa kejadian di banyak item,

58:38di banyak element, salah satunya ada image, ya.

58:42Kalau image itu bisa diakalin dengan cara memastikan ukuran width dan height-nya, panjang dan lebarnya,

58:49atau menggunakan aspek rasio tadi, kemudian masalah kedua ada di, dimana tadi, di font.

58:57Ya, cari font yang mirip-mirip atau font line height dan width-nya disesuaikan.

59:04Terus, apa lagi?

59:06Text, panjang text-nya.

59:09Kalau text-nya dynamic atau lazy loaded, kita nggak tahu panjangnya, kita bisa masukin di apa, container,

59:19terus dibantasin jumlah barisnya, pakai trangkit atau line clamp.

59:23Di trangkit atau, ya, bisa menggunakan tadi apa, line clamp.

59:28Ya, line clamp.

59:33Nah, terus kalau buat ngecek, bisa pakai Lighthouse, bisa pakai DevTools performance tab.

59:39Kalau buat programatiknya ngecek, bisa tadi pakai apa, Lighthouse API?

59:44Lightout Instability API.

59:46Bisa pakai API Lightout Instability, bisa nge-set performance budget juga.

59:52Dari Corel Files sendiri juga menyediakan API, ya.

59:56Sudah ada API-nya, jadi bisa dicek juga di sana.

59:59Oke, mungkin untuk materi malam hari ini, itu dulu aja.

1:00:04Terima kasih banyak buat teman-teman semua.

1:00:06Terima kasih banyak juga buat Jessica yang udah nemenin kita ngobrol-ngobrol malam hari ini.

1:00:10Dan kasih bocoran-bocoran juga dari Tokopedia.

1:00:14Mudah-mudahan ke depannya nanti bisa diundang-undang lagi

1:00:19buat ngobrol-ngobrol lagi dengan topik yang sama atau topik yang berbeda.

1:00:22Kita ketemu lagi di line kesempatan.

1:00:27Kalau kita akan ketemu lagi minggu depan.

1:00:30Jadi selamat malam, sampai jumpa.

1:00:34Mudah-mudahan Ivan bole-bole, jangan lupa.

1:00:37-Ole-ole online, amun ya. -Ole-ole.

1:00:40-Ole-ole aja, ya. -Ole-ole.

1:00:43Oke, terima kasih semuanya.

1:00:46Sampai jumpa minggu depan. Bye-bye.

1:00:49Sampai jumpa semua.