Ngobrolin Core Web Vitals - Ngobrolin WEB ep35

1:29Terus masih ada bahasanya "perceive speed".

1:32Nah, "perceive speed".

1:35Perceive speed itu apa?

1:37Jadi cepat itu yang...

1:38Cepat yang dirasakan sebenarnya nggak cepat.

1:42- Perasaan aja ya? Perasaan cepat gitu ya? - Perasaannya aja. Perceive speed.

1:45Itu juga sering...

1:47- Tapi itu biasa. - Rasa solo. Atau solo tambat?

1:50Contohnya, kalau kita ada input sesuatu ya.

1:55Input sesuatu. Misalnya...

1:57Apa ya? Tahu nggak sih kalau search bar yang bisa ada autocompletenya?

2:02Ya.

2:03Kalau misalnya kita typing something, terus kita typing aja, terus...

2:07Karakter kita munculnya lama, itu orang aja udah merasa "wah lambat banget nih website".

2:11- "Nge-lag nih website" gitu ya. - Nge-lag, iya.

2:14- Meskipun... - Padahal...

2:16- Iya, lanjut. - Meskipun...

2:18Hasilnya mungkin sama aja gitu ya.

2:21Kalau dibandingkan dengan...

2:23Kalau kita typing, ternyata tulisannya muncul duluan, ada loadingnya, terus baru muncul.

2:29Meskipun si hasil search result-nya untuk querinya ya...

2:33Sama aja jatuhnya.

2:351 detik, 2 detik butuh waktunya, tetapi...

2:38- Variable-nya banyak sekali ya. - Iya.

2:40Tetapi waktu si user yang menggunakannya...

2:44Sudah merasa, oh, ada feedback, ada response nih kalau gue typing something.

2:50Ada response dari aplikasinya.

2:52Nah, jadi beneran merahnya mengurangi subjektivitas...

2:58Biar nggak tentu saya cepat atau di mesin saya cepat, dan kedua kan...

3:02Itu tadi perkara apa yang diukur kan.

3:05- Iya, apa? - Kalau apa yang diukur...

3:08Buat mengekspresikan atau menggambarkan kecepatan.

3:12Nah, itu tuh nanti semua bakal kita bahas di topik lower web finals ini.

3:18Topik malam ini.

3:19Nah, teman-teman yang di chat, yang di kolom chat...

3:22Mungkin bisa share juga pakai tools apa nih buat mengukur dan...

3:27Bikin performa web kita jadi lebih cepat, mengetahui apakah...

3:30Misalkan setelah update, nambah fitur, apakah web kita performanya sama lebih cepat atau lebih lambat.

3:37Mungkin bisa di-share juga.

3:39Dan kalau malam hari ini kita akan bahas tentang satu tools yang lagi apa ya...

3:47Yang lagi digadah-gadangkan salah satunya oleh Google...

3:50Di beberapa tahun terakhir, yang namanya adalah core web finals.

3:55Nah, ini dia.

3:56Apa sih core web finals itu?

3:58Kayaknya pertama kali launching kapan ya? 2020 ya apa ya?

4:03- Saya ingat 2019. - Kayaknya masih 2019.

4:07Mas Yohan yang present.

4:10Maksudnya kenapa sih ada web finals- web finals segara gitu ya?

4:16Iya.

4:18Ini tujuannya apa?

4:20Web finals ini adalah inisiatif dari Google memang.

4:23Dan tujuannya adalah untuk menyediakan guidance itu adalah apa ya?

4:31- Stunt. - Panduan.

4:32- Panduan lah. - Panduan, umum.

4:35Panduan atau panduan, gimana biar UX-nya bagus.

4:39Jadi ini menarik sih karena term yang perspektif menipak itu dari usernya jadi bukan detail.

4:46Jadi sebetulnya kan implementation detail-nya bisa server-nya segera cepat di-demand response.

4:52Atau browser thread-nya segera cepat render suatu download.

4:58Misalnya itu kan hal yang teknis.

5:00Tapi di sini justru core web finals-nya sendiri,

5:03Deskripsi utamanya, definisi utamanya itu yang penting deliver user experience.

5:09Yang baik user merasa mendapatkan pengalamannya yang baik dengan metric-metric ini.

5:16Jadi user experience ini nggak ada hubungan, bukan nggak ada hubungannya.

5:21Kalau UX itu biasanya kan temannya itu UI, sebenarnya nggak gitu kan.

5:26UX itu adalah pengalaman pengguna.

5:29Cepat, snappy, nggak nge-lag, itu adalah salah satu pengalaman pengguna yang bagus.

5:36Nah, tapi pertanyaannya kenapa kita butuh core web finals-nya ini?

5:40Sebelum kita harus nilai sedikit satu langkah ke belakang.

5:43Kenapa sampai si Google ini capek-capek initiate ini gitu.

5:47Nah, ini pertanyaan saya juga nih.

5:49Sebelum web finals kita mengukur core format web kita tuh dengan apa?

5:54Kalau jaman saya dulu tuh, yang paling senang itu ada YSlow.

5:59- Dari Yahoo. - Apa? PageSpeed bukan?

6:01Nah, YSlow.

6:03- PageSpeed itu punya Google. - Punya Google tapi masih belum pakai core web finals.

6:07Tapi ada juga dulu, PageSpeed ada memang.

6:09Terus ada GTmetrics.

6:11Semua berlomba-lomba pakai skor A, skor A gitu.

6:16Nah, namun sebelumnya kalau kita tilik sejarahnya ya,

6:21ini berasal dari modern JavaScript framework si awalnya kalau menurut saya.

6:27- Pemicu-nya ya? - Pemicu-nya.

6:30Jadi makin ke belakang,

6:33jadi semenjak munculnya modern-modern JavaScript framework,

6:37itu berlomba-lomba semuanya serba JavaScript.

6:43Sampai nge-generate DOM aja pakai JavaScript.

6:46- SBA gitu ya? - Iya, pakai SBA juga.

6:50Jadi untuk download file bundle-nya aja sudah sampai...

6:57- Berapa mega? - Saya pernah sampai 4 mega sendiri hanya bundle-nya aja.

7:00- Jaman itu ya. - Itu belum image sih.

7:02- Belum ada menimpa ya? - Iya, image aja juga jaman dulu itu gede-gede kan.

7:08Ingat gak jamannya ada slider yang revolution slider yang dia bisa kudu-kudu terus bisa...

7:16Terus ingat gak jamannya Apple itu punya situs yang dia kalau di-scroll bisa paralaks-paralaks gitu.

7:25Semakin animasi, semakin besar, semakin bervariasi JavaScript, semakin banyak tools dan library-nya.

7:35Mengakibatkan wake dari setiap situs website itu, wake-nya meningkat tajam.

7:45- Jadi makin lama loading-nya. - Makin lama, user itu makin merasa berat memakai website-nya.

7:55Apalagi jaman itu penggunaan mobile phone semakin tinggi.

7:59Kita tilik kembali sebelum 2019 ya, berarti sekitar 2015, 2016 itu jamannya mulai handphone-handphone Android mulai naik kan.

8:08- Handphone Android kemudian iOS. - Mulai bisa buka website dari Apple. - Dan jaman itu masih 4G kayaknya ya, 4G awal-awal.

8:18- Bahkan 3.5G. - Iya, 3.5G gitu ya, jaman itu ya.

8:24Jadi si teknologi internet speed dan teknologi browser gak seimbang dengan kemajuan teknologi JavaScript.

8:38Jadi mau browser mau secepat apa? Gimana lagi supaya kita gak performance battle nih?

8:43Gak perlu, jadi mau cepet-cepetan gak bisa kalau dari sisi developer-nya gak di balasanya ditatar.

8:55Hey, ayo jangan bundle semuanya, perlunya cuma underscore debounce tapi seluruh sabruk-sabruk loadas dipakai misalnya.

9:08Jadi makanya muncul Web Vitals ini, jadi untuk menstandarisasi.

9:18Sebelum web vitals ya, performance matrix mungkin. - Lebih tepatnya saat mereka nge-launching Lighthouse.

9:29- Lighthouse ya, awalnya Lighthouse. - Lighthouse, dan jaman itu kan mau si Google nge-push untuk PWA ya.

9:36Cuma salah satu syarat PWA itu kan harus cepet.

9:43Dulu tuh sudah ada Lighthouse sama speed matrix ya, jadi dulu yang sampai sekarang juga masih ada.

9:50Cuma dulu belum di-codify sebagai Core Web Vitals matrixnya.

9:55- Betul, nah setelah ada inisiatif ini, karena melihat data ya, data itu semakin lama situs-situs yang top 20 itu makin lama makin berat.

10:10Akhirnya harus di-tone down, harus bagaimana mengajarkan developer untuk hemat.

10:21- Nanti ada itu lagi kan, budget, tapi itu nanti bisa buat topik yang lain.

10:29Tapi intinya adalah hemat, kita harus menghemat bandwidth, user.

10:33- Ya betul, jadi muncul ide untuk kita menstandarisasi vital-vital apa saja yang perlu diukur.

10:44Makanya ada performance API, munculnya performance API itu juga sejalan kan.

10:48Terus dari vital-vital tersebut, ada banyak sebenarnya vital, jadi Core Web Vitals itu adalah cornyah.

10:58Web Vitals itu ada banyak, ada TTFB, Time to First Buy.

11:03- Itu salah satu pertama tuh, ingat banget.

11:06Pas belom ada Web Vitals, yang merupakan Speed Insight sama Lighthouse kan, itu Time to First Buy.

11:14- Terus ada First Content Full Payne, ini TTFB dulu.

11:24- Ya, TTFB, Time to First Buy.

11:28- Waktu sampai, buy pertama.

11:31Coba Mas Rizal refresh, saya pengen tahu browser-nya supportnya ini, ada enggak?

11:40Oke, coba sekali lagi, sekali lagi, sorry, sekali lagi.

11:43- Mau lihat apa?

11:45- Tunggu, oh nggak kelihatan.

11:48Jaman dulu kalau kita refresh browser, dia loading ikonnya, kalau dia spinner-nya ke kiri itu berarti dia menuju server.

12:01Kalau dia sudah ada response spinner-nya ke kanan, bukalah sesuatu yang berat.

12:08Coba sesuatu yang belum, mungkin yahoo.com mungkin.

12:16- Apple?

12:18- Ya boleh lah, enggak tahu.

12:20Oh udah langsung response, mungkin yahoo.com.

12:28- Oh iya, ini kiri, sekarang counter clockwise, sekarang ini clockwise.

12:36To the island.

12:40- Jangan lupa, saya GDI di bidang performance kan.

12:45Jadi Time to First Buy, kembali ke Time to First Buy.

12:53Saat loading screen-nya ke kiri, itu kita dari sisi browser, nge-request ke server, lagi mendengar, menunggu response.

13:10Dan saat dia sudah response, saat buy pertama nyampe itu adalah DTFB, buy pertama diterima.

13:20- Clockwise tadi?

13:22- Kalo dia berganti arah, pertama kali dia ganti arah.

13:28Untuk lebih jelasnya bisa dilihat dari DevTool, coba masuk DevTool.

13:35Itu di network, eh network, apa ya gue lupa.

13:41Bukan, ini di timing API, kayaknya di timing itu dimana yah?

13:47- Performance bukan?

13:49- Bukan, sorry, di network, betul di network.

13:52Terus ininya tab-nya di dock, D-O-C.

13:57D-O-C, di tab masnya, kiri, kiri, kiri, terus ke kiri, ke kanan sorry, ke kanan.

14:04Yang itu loh, filter-nya itu kan image, filter-nya image.

14:07Nah dock, coba refresh, coba refresh.

14:11Oke, klik yang DTFB-nya.

14:15Itu ada timing, tab timing, oke.

14:19Nah itu bisa dilihat, duration untuk resource-nya saat dia initial connection.

14:25Ini ada connection-nya mulai, jadi begitu mas Riza click reload.

14:32Cue-nya untuk si browser nge-cue, action itu 1,65 second.

14:39Ke stall sebelum dia bisa mulai, 1,21.

14:43Initial connection-nya dia buka, DNS lookup-nya 21 microsecond.

14:48Itu berarti sudah ke cache, sudah ke cache yah.

14:51Dan ada initial connection, SSL handshake, ya itu handshake.

14:57Kadang kalau kayak situs bank, handshake-nya aja 100 millisecond.

15:02- Karena dia pakai firewall khususnya.

15:05- Multi-layer.

15:07Terus request-sen, dia request-sen-nya 87 microsecond, waiting for server response 38 millisecond.

15:17Jadi si situs ini cepet banget terhitungnya, karena dia cuma butuh 38 millisecond.

15:26Jadi total-totalnya adalah 80 millisecond.

15:35Karena dia sudah di CD, dan pasti mas Riza-nya request-nya ini cuma ke Jakarta doang.

15:40- Caching nggak? Apa harus di empty cache and hardly load, biar lihat aslinya?

15:46- Coba aja disabled cache, pencet disabled cache itu yang...

15:49- Oh iya, terus refresh lagi ya?

15:51- Iya, refresh. Coba lihat.

15:56- Sama, kurang lebih sama.

15:59- Beda.

16:00- Beda, lebih besar.

16:02- Waiting response-nya lebih gede ya.

16:04- Tapi ini hampir-hampir sama. Queuing-nya sama.

16:06- Ini kan static code.

16:09- Iya.

16:10- Ininya juga naik sedikit. Ini yang paling gede ya.

16:14- Iya karena...

16:15- Sama port download-nya juga lebih gede.

16:16- Iya.

16:18- Oke, ini TTFB.

16:20- Itu hanya untuk nge-request HTML-nya ya.

16:23Ini bisa berlaku hal yang sama dengan image, JS, CSS juga sama.

16:26Bisa lihat timing API di sini.

16:28- Ini hanya satu file ttfb/index.html kan?

16:32- Yes, betul.

16:33- Oke.

16:34Kalau misalkan nanti image, teman-teman juga bisa klik aja di image-nya misalkan ini.

16:38- Iya, bisa kelihatan tuh.

16:40241.ttfb untuk si image.

16:43Nah, web vital itu ttfb untuk HTML-nya ya, bukan untuk image ya.

16:48- Oke.

16:49- Nah, cuma ini menarik sih, metric ini menarik.

16:51Karena kan time_to_first_by itu salah satu yang paling awal.

16:54Apakah dia mengukur speed kecepatan?

16:57Iya, betul.

16:58Apakah dia mengukur, ya pokoknya itu kecepatan betul.

17:04Cuma kan ini dulu belum fokus ke perspektif user experience ya.

17:11Jadi fokusnya ke kecepatan dan itu tadi apa?

17:15- Ini back-end.

17:16Lebih ke arah back-end.

17:18- Server response.

17:19- Server performance.

17:20Jadi kalau mau optimize ini supaya lebih cepat lagi, optimize-nya di back-end.

17:25- Nah, ini dulu saya nggak ini nih.

17:29Belum ada.

17:30Jadi bingung.

17:31Measure-nya berapa?

17:33Yang cepat itu berapa?

17:34Nggak ada angkanya kan.

17:35Kalau ini kan ada ya.

17:36Kira-kira 800 millisecond di atas 800.

17:39Lebih cepat dari 800 millisecond artinya itu bagus, gitu kan.

17:42- Iya.

17:43- Cuma kan ini penting, tapi nggak dimasukin core web vitals.

17:46Nah, kenapa kayak gitu?

17:47Karena buat user kan nih juga nggak penting di byte pertama itu munculnya kapan, apa, diterima oleh browser kapan kan.

17:56User nggak tahu.

17:58Kalau selama belum diparsing, belum diproses lah, belum diolah.

18:02Nah, itu kan nggak bisa dibilang tanda putih nggak penting buat user.

18:07Bukan berarti nggak penting beneran.

18:08Kalau misalnya diterima dari server lama banget, ya pasti ngaruh ke user juga.

18:13- Kalau TTFP-nya kelamakan, LCP-nya jadi naik.

18:21- Iya, pasti semua juga jadi lambat.

18:23- Ada hubungannya, cuman...

18:24- Semuanya ke delay, semua ke delay.

18:27- Tapi nggak secara langsung.

18:30- Tidak secara langsung.

18:32- Walaupun ya itu sampai sekarang kan tetap bisa dihukur tuh untuk diintegrasi ke DevTools juga.

18:37Tapi nggak dimasukin ke tiga item core web vitals itu.

18:42- Hmm, oke.

18:45Jadi yang masuk ke dalam kategori core web vitals adalah ini ya, tiga ini ya.

18:51- LCP, CLS, dan soon FID menjadi INP.

18:59- FID itu nanti bakal direplace oleh yang baru namanya INP dan ini masih ada hubungannya sama topik IO 2023 ya.

19:06Kita bahas dua episode kemarin, ini di-announce-nya di IO.

19:10Ini mungkin bisa dijelaskan secara singkat, LCP apa, FID apa, LCS apa.

19:18- Bisa, nah kalau...

19:21- Ini udah ada di sini.

19:22- Iya.

19:23- Iya, sambil baca, sambil di...

19:25- Iya, sambil baca.

19:26Nah, agak supaya, temen-temen supaya jangan salah persepsi, LCP itu bagian, kalau diartikan adalah bagian yang terbesar

19:39yang above the fold.

19:42Jadi saat page load, bagian elemen yang terbesar di layar, yang muncul di layar itu adalah largest contentful element.

19:54Nah, tetapi itu bisa berganti ya, misalnya begini.

20:00Bayangkan di halaman page, di desktop dulu deh supaya gampang.

20:08Coba Mas Riza scroll paling atas dulu deh, saya mau jelasin paling atas.

20:12Scroll paling atas biar ada nggak.

20:14Oke, stop.

20:16Nah, sebagai salah satu contoh, kalau kita lihat dari sini, largest contentful pane-nya tentu

20:22mudah dibilang dikatakan adalah si background image.

20:25- Image.

20:26- Si image itu ya.

20:27Tetapi bisa jadi begini.

20:29- Prakteknya, prakteknya kan yang malah jagungnya itu.

20:32- Iya, bisa jadi begini.

20:34- Saat pertama kali di load, ternyata kita nggak membuat si image ini face priority-nya tinggi

20:43atau loading eager, atau kita bikin dia loading lazy.

20:48- Iya.

20:49- Karena kita nggak tahu, kita bikin dia lazy load.

20:52Dan yang muncul pertama kali adalah si title web vital.

20:56Maka yang dianggap largest contentful pane pertama kali itu web vital tulisannya.

21:02- Tetapi ternyata si image ini lazy load atau kegedean.

21:08Dan dia selesai di download dan di render.

21:14Maka next si LCP itu berganti menjadi si image.

21:20Dan kalau itu terjadi, maka LCP score kalian akan menjadi sangat tinggi.

21:27Bisa jadi di atas 3 second.

21:30- Kalau tinggi berarti nggak bagus ya?

21:33- Iya, karena bagi si user, waktu dia pertama kali load, dia lihat web vital-nya dulu baru muncul si image.

21:40Yang harusnya, kalau bisa sih berbandingan.

21:44Karena si image-nya dibuat face priority-nya tinggi atau pakai HTTP/2 sudah dipush.

21:55Jadi sudah tahu image ini bakal ada, dipakai, sudah dipush.

21:59Jadi saat di render sudah berbandingan.

22:02- Atau bisa diakalin lazy loading pakai placeholder yang base 4 atau blur hash atau apapun.

22:10Jadi si algoritmanya, dia kan mendeteksi kurang lebih bentuknya, proporsinya, ukurannya, tampilannya.

22:18- Dia cuma mendetek elemennya sih sebenarnya.

22:20Dia ngedetek elemennya, karena elemen itu termasuk size.

22:25Jadi size elemennya itu kalau terbesar itu yang dianggap dan setelah selesai di load.

22:31Jadi untuk memperbaiki LCP, lihat saat face loading mana elemen terbesar dan optimize itu.

22:41Kalau dia image, cepetin download-nya.

22:44Kalau dia title, cepetin font-nya selesai.

22:48Kalau dia embed, itu yang susah.

22:52- Pelajarannya adalah jangan sampai embed, jadi LCP.

22:57Kan bisa di cek pakai DevTools juga ya.

23:00Kita tak tahu, kita tepat-tepat wawangis dimana yang LCP gambarnya atau text-nya.

23:07Nah, biar tahu, biar dilihat.

23:09Bisa cek di DevTools atau di PageSpeed.

23:13- DevTools, kemana nih?

23:16- Lighthouse ya.

23:18Eh, gimana ya?

23:20Bukan, kalau mau itu di ini.

23:23Bukan, ini lama.

23:25Bisa pakai measure-nya itu, inside.

23:31Eh, sorry, kok gua...

23:33- PageSpeed, inside?

23:35- Bukan, bukan, bukan.

23:36Itu loh, apa?

23:39Performance...

23:42- Nah, ini respons-nya lama nih.

23:45- Performance Monitor.

23:48Bukan, salah.

23:51Gua kadang...

23:54Performance Insight.

23:56- From extension.

23:57- Bukan, Performance Insight.

24:00- Performance Insight.

24:06- Ya, itu ini si...

24:08- Effective Insight.

24:09Terus, apa lagi ini?

24:11Actionable Insight on your web performance.

24:16Ada banyak sebenarnya.

24:19- Performance Insight Panel, ada di DevTools.

24:23Iya, Performance Insight Panel.

24:25- Ini bukan.

24:27Atau ada more?

24:28Ada, ada, more.

24:32Gua pernah pakai, kok sekarang jadi lupa sih.

24:35- More, more monitor.

24:37Bukan, itu kalau yang untuk monitoring secara ini.

24:41Ada yang sampai kayak dikotakkan gitu, tambahnya kayak dikotakkan.

24:46Element yang dihitung sebagai LCP.

24:50- Kok sudah mana sih?

24:52- Iya kan, dulu ada kan.

24:54Masalahnya dulu di PageSpeed tuh udah juga sebetulnya.

24:57Cuma sekarang udah berapa?

24:59- Kayaknya ini deh.

25:02Gua maksudnya di Opera nggak ada, jadi gua harus ke ini.

25:07Harus ke Chrome.

25:09- Bisa gitu ya?

25:11Iya, si si siapa tahu si Opera-nya nggak ini lagi nggak.

25:16Nggak hapus bagian itu bisa juga.

25:19Yep, Performance Insight.

25:21Eh, sini gua share stream.

25:26Paling enak sih menggunakannya ya.

25:33Bisa ada banyak hal yang lain juga sih yang.

25:36Performance Insight, ini ya.

25:41Jadi dari Chrome, hapus dulu deh.

25:47Nah, More Tools, Performance Insight.

25:54Terus, Measure Page Load.

26:01Nanti kelihatan beberapa metrics.

26:09Bisa dilihat.

26:13Bisa kita lihat.

26:16Matiin dulu.

26:18Ada kapan DOM Content Load selesai.

26:22Kapan Largest Content Load ini.

26:24Ketau kita ukur kesini, dia langsung kasih tau Largest Content Load ini yang mana.

26:29Dan kalau terjadi Layout Shift, misalnya kelihatan di sini nih.

26:39Terjadi Layout Shift.

26:41Kita bisa gedein.

26:43Terus kita lihat.

26:45Bisa replay.

26:47Bisa kita lihat apa sih yang berubah.

26:50Ternyata nggak ada yang berubah sih sebenarnya.

26:52Oh, ada tuh.

26:54Lihat, ini. Si apa namanya? Si...

27:00Si icon.

27:02Iya, lihat tuh.

27:04Apa istilahnya? FAB ya? Floating Action Button.

27:08Nggak tau lah apa ya. Pokoknya terjadi Shift di situ.

27:12Kelihatan tuh.

27:14Nah, kita bisa perbaiki.

27:16Itu kolong sampai mendetail.

27:19Terus bisa kita lihat juga.

27:23Si saat page load apa aja yang dikirim.

27:27Jadi dia kirim HTML-nya dulu, dia kirim font, dia kirim CSS.

27:33Terus kemudian JavaScript dikirim.

27:36Ini kan ternyata dia kirim JavaScript itu setelah selesai Dom Content Loaded nih.

27:42Which is bagus kan.

27:44Jadi nggak ada yang render blocking.

27:46Iyalah. Web.dev.

27:50Contohnya terlalu bagus ini, terlalu ideal.

27:53Gitu ya, terlalu ideal ya.

27:55Gak apa-apa lah.

27:57Terus yang kayak GTM-GTM dia di-for setelah, setelah ini nih.

28:07Dom Content Loaded.

28:09Setelah LCP.

28:13Setelah LCP di-render.

28:16Setelah selesai LCP di-render baru dia jalanin GTM dan segala macemnya.

28:21Karena terlalu cepat jadi nggak kelihatan.

28:23Biasanya ada load. Load itu ada-ada.

28:28Terus ada TTI, Time To Interactive.

28:32Dia di sini setelah selesai apa ini?

28:39Kayaknya si set storage dia ini.

28:43Atau analytics ya. Gak tahu deh apa yang mau dijebakan itu.

28:47Oke.

28:49Nah, kalau mau yang versi simple banget sih bisa cek di speed web dev juga.

28:57Coba ya, share stream.

28:59Oke. Yang ini atau?

29:03Benar ya. Ini ya?

29:05Iya. Nah, coba scroll ke bawah.

29:13Ini, first content in vain.

29:17Terus kan ada itu tuh ke bawah lagi, show audits related to click LCP.

29:25Di bawahnya screenshot.

29:27Di bawahnya screenshot.

29:29Show audits related to LCP.

29:33Oke.

29:35Nah, terus.

29:37LCP element.

29:41Ini menarik banget sih kan kita nebak bahwa LCP-nya itu bakal apa?

29:46Ini di mobile ya. Keadaan di apa? HP.

29:50Kita nebak, entah itu double atau gather image.

29:54Ternyata salah semua.

29:56Ternyata cookie consent.

29:58Cookie consent.

30:00Ya betul.

30:01Kalau di layar HP kan yang paling peminan, yang paling apa ya, bagi user itu secara visual itu bagian konten utama dari layar itu.

30:10Memang si cookie consent kan.

30:12Kalau di desktop, mungkin lain. Coba deh cek di desktop apa LCP.

30:18Itu di tab paling atas kan ada mobile dan desktop.

30:23Oh oke.

30:25Performance 100 semua.

30:27Pake party town kali dia.

30:30LCP-nya apa? LCP-nya apa kalau di desktop coba?

30:34Naik dikit naik dikit.

30:36Pas audits, atas dikit.

30:39Atas.

30:42Oh ini ya.

30:44Blog quote.

30:48Jadi emang nggak bisa di prediksi.

30:52Pertua manggis itu nggak bisa.

30:54Karena yang menurut algoritmanya si Lighthouse ini dia paling peminan secara visual, ternyata itu.

31:02Oke.

31:04Perlu direlat sedikit itu bukan algoritma si Lighthouse tetapi algoritma si performance API.

31:10Oh itu ada API-nya sendiri?

31:12Iya. Si Lighthouse itu sendiri hanya mengambil data dari performance API.

31:16Meskipun performance API itu inisiatifnya si Google dan temen-temennya juga sih.

31:22Tapi konsorsi om.

31:24Underlying teknologinya dari performance API.

31:27Performance API.

31:29Lighthouse.

31:31Lighthouse cuma jadi reporting-nya saja sih sebenarnya.

31:37Rapper lah ya.

31:39Nah LCP ini menarik karena sebenarnya dia evolusi, semacam evolusi dari FCP kan.

31:45Dulu sebelum ada LCP, sebelum ada Larges Contentful Pay, dulu ada ya sampe sekarang juga ada FCP.

31:53First Contentful Pay.

31:55Iya.

31:57Jadi itu dulu dia mengukur.

32:01Jadi kan paling pertama dulu ada time to first bite, dianggap itu nggak merepresentasikan penalaman user.

32:08Karena first bite diterima, ya kan kalau layarnya kosong tetap aja bagi user itu terasa lambat.

32:14Walaupun sebetulnya udah diterima.

32:16Terus ada First Contentful Pay, itu kan pixel pertama ya?

32:20Atau apa lah? Element, oh download element di render ya kalau misalnya.

32:24Bukan, element pertama yang kelihatan.

32:27Yang ada visualnya.

32:29Bisa jadi header, bisa jadi logo.

32:34Bisa jadi logo.

32:36Loading spinner.

32:38Loading spinner.

32:40Dulu jamannya create-create app itu kayaknya cara ngakalin FCP yang paling populer yaitu

32:46pokoknya langsung tampilin loading spinner di shell indexa TML-nya.

32:52Nah, abis itu diganti.

32:56Tapi kan itu juga nggak mewakili user experience.

33:00Kalau misalnya cepet, terus langsung render logo atau loading spinner atau text loading.

33:06Itu kan tetap aja buat user experience kurang bagus.

33:10Jadi makanya apa?

33:12Berevolusi, yang dimasukin kurang by vitals, akhirnya si largest study kan, si LCP tadi.

33:19Oke, jadi LCP.

33:23Berikutnya kita bahas CLS dulu ya.

33:27Ya, CLS dulu.

33:28CLS ini apa?

33:30Stability, Layout Stability itu kestabilan dari si...

33:37Pernah nggak melihat ada situs font-nya kegedean atau kebanyakan.

33:44Sehingga waktu di-load, pertama kali font biasa, terus dia berubah.

33:49Tapi berubahnya banyak.

33:52Oh, mungkin satu font-nya terlalu pendek, terus tiba-tiba jadi memanjang atau semacamnya.

33:58Atau bentuk font-nya aja yang...

34:00Bentuk font.

34:01Bukan font ada yang gepeng, ada yang...

34:03Iya, bahasanya kerningnya.

34:06Kerningnya beda tuh, space antar karakternya berbeda.

34:11Nah, jadi font satu dengan yang lain ternyata yang default-nya nggak mirip dengan font yang kalian butuhkan.

34:21Dan pakai biasanya jaman dulu itu, pakai Google Font semua size dipakai.

34:28Terus ada 5 font, semua dari Google Font, semua-semua size dibawa.

34:33Dan di-load cuma satu URL.

34:38Dan font-nya pun di-import dari CSS.

34:41Jadi tunggu CSS-nya kelar, diparsing, baru dia download lagi font.

34:46Jadi kayak chaining.

34:48Chaining URL gitu.

34:50Sehingga font-nya download-nya kelamaan.

34:53Akhirnya tadi font-nya kecil, terus akhirnya membesar, kerningnya berbeda, akhirnya mendorong semua.

35:02Nah, itu pengalaman yang nggak enak banget buat si user untuk membaca.

35:08Ada juga yang kayak gini nih.

35:10Nah, ini yang paling ekstrim sih nih.

35:12Dia nge-load.

35:14Sering banget.

35:16Ada iklan.

35:18Jadi ada elemen entah itu iklan, image atau apapun itu yang di atas, tapi nggak dikasih ukuran.

35:24Belum selesai loading kan, kalo belum di-load, belum ketahuan ukurannya, ya nggak occupy tiksel sama sekali.

35:33Selesai langsung nular, otomatisnya dibawahnya kedorong semua.

35:38Nah, iklan juga sama ya.

35:40Ini contohnya banyak.

35:42Tapi beneran ada loh kayak gini itu.

35:44Oh beneran?

35:46Ya beneran.

35:48Selama ini kan gue pikir, ini cuma buat demo.

35:50Yang kasus ekstrim kayak gini cuma buat demo.

35:53Tapi beneran, jadi di sebuah situs, ya ini mah bukan sebuah monopoli.

35:59Pas pesen tiket, kereta, bandara.

36:02Itu beneran ada logo.

36:04Jadi itu kasusnya logo-logo pembayaran bank.

36:07Bisa lewat credit card, bank atau Bitmootown, blablabla.

36:10Itu logonya kan pake image.

36:12Nah, itu beneran nggak dikasih exact size gitu.

36:17Dan beneran kepencet reset dong.

36:20Kenapa juga form pemesanan ada resetnya, nggak ngerti.

36:24Ke reset.

36:26Jadi itu kisah nyata, dan bukan cuma di demo doang.

36:31Bisa terjadi.

36:33Nah, ada sedikit sesuatu yang ingin saya luruskan mengenai CLS.

36:40Bisa naik sedikit, Mas Liza.

36:43Jadi CLS itu bukan hanya saat page load aja di ukurnya.

36:53Jadi teman-teman nanti naik terus, naik terus, terus.

36:58Tadi ada grafiknya.

37:01Terus, terus, terus, terus, terus, terus, terus, terus, terus.

37:13Ini dia.

37:15Comulative Layout Shift diukur sepanjang halaman itu hidup.

37:31Jadi artinya supaya fair untuk yang pengguna SPA, dibuat last session.

37:37Kalau nggak salah, X amount of seconds, saya nanti bisa baca di sini, kalau nggak salah sih 10 detik ya.

37:45Itu ada session-sessionnya sebelum dia di reset.

37:50Jadi kalau misalnya si user nge-scroll, kalau dia stop, terus scroll lagi, stop, scroll lagi.

38:03Itu artinya saat dia stop, CLS-nya di reset.

38:07Jadi nggak naik terus, nggak cumulative terus.

38:11Kedua, kalau ada user interaction dan terjadi shift, itu tidak dihitung.

38:19Contohnya ingat nggak kalau ada kita pagination, load more, puter, terus kan dia nge-scroll.

38:27Itu tidak dihitung Layout Shift ya. Karena ada user interaction.

38:35Tetapi dalam jangka waktu tertentu selama dalam session ini.

38:39Jadi ada jedahnya.

38:41Ada window, ada durasi toleransi setelah user melakukan satu action.

38:46Betul.

38:48Kayak gini ya? Yang ini ya?

38:51Ini kan klik "me" itu, pen ke bawah itu kayak misalnya, itu tahu nggak sih drop-down atau tab content.

39:00Kalau kita pencet ternyata tab yang kedua, kontennya lebih panjang.

39:05Itu nggak dihitung Layout Shift.

39:07Nice ya. Ini beneran bikin kriterianya dan parameternya beneran berdasarkan user experience ya.

39:15Jadi kayak kalau user melakukan satu action, kayak mencet button gitu kan, itu ekspektasinya bakal terjadi sesuatu.

39:22Oke, untuk saya itu hal yang normal.

39:24Cuma kalau user nggak ngapain, belum ngapain, tiba-tiba geser sendiri, nah itu kan annoying.

39:30Karena ya itu tadi bisa bikin, bisa mengganggu user lagi ngebaca atau nonton sesuatu.

39:36Bisa mengganggu target user ingin akan melakukan suatu action, salah pencet.

39:42Nice, jadi kayak itu udah bukan biur teknis, tapi dari perspektif mata atau interaksi user-nya.

39:51Nah, bagi saya CLS ini adalah web vital yang paling susah diperbaiki.

40:04Jadi kalau simplenya ya bagi temen-temen yang pakai untuk mencegah Layout Shift, semua elemen pastikan ada height-nya.

40:16Kalau itu X, ya pasang height-nya.

40:19Untuk X, jadi sudah tahu di situ ada X, ukurannya berapa, kasih height-nya berapa.

40:24Kalau itu button atau image, tahu height-nya, dikasih height-nya berapa.

40:28Itu sudah pertanyaannya, kenapa kadang kalau total page-nya sedikit itu gampang.

40:38Tapi kalau anggap ini situs berita yang halaman artikelnya sudah ada jutaan,

40:43itu CLS score ke seluruh domain itu kan adalah rata-rata dari seluruh page, bukan satu page.

40:51Jadi bisa jadi CLS, home page-nya sudah bagus, tapi kenapa CLS kita kok begitu-gitu saja, susah perbaikinya.

40:59Dan harus di teliti itu per page-nya, dan ternyata kita ke page itu juga ternyata nggak ada CLS, terus kemana kita harus cari.

41:05Itu bisa jadi ads, terus ads targeting, geografik, bisa beda geo, beda ads.

41:15Jadi user itu kan dari berbagai macam device juga dan berbagai macam negara.

41:20Jadi harus cek per negara.

41:23Nah, yang paling susah adalah embed.

41:28Tiktok embed, Instagram embed, ya kalau kita embed, itu videonya sekian.

41:35Content-nya, caption-nya bisa dynamic.

41:40Dan cara kita nge-embed TikTok atau Twitter itu kan cuma kasih snippet, dan JavaScript-nya nge-load,

41:50dan kita belum tahu, kita nggak tahu berapa total size embed-nya.

41:56Nggak bisa tahu, itu tergantung hasil response dari hasil embed-nya itu.

42:05Itu sampai sekarang belum ada obatnya, hanya bisa diakalin.

42:13Square terus C-more ya? Kayak di ekspansi?

42:18Nggak, nggak. Jadi itu dari ada satu, pernah saya baca, CLS salah satu situs di Medium.

42:35Nanti saya ingat nanti saya kasih link-nya.

42:38Jadi caranya mengumpulkan field data, nanti kita bahas mengumpulkan field data bagaimana.

42:44Data-nya itu dia kirim ke via GTM, dia kirim ke BigQuery, via analytic.

42:51Dia kirim CLS-nya, dia target embed tertentu, misalnya TikTok embed.

42:58Terus kemudian dia target, dapat tuh CLS-nya, dia kirim CLS-nya.

43:02Terus kemudian, sorry bukan CLS yang dikirim, element height-nya dia kirim.

43:09Jadi dia bisa dapat rata-rata height TikTok yang dia pakai berapa.

43:18Nah, dari data itu dikembalikan ke parameter-nya sistem mereka untuk nge-set.

43:27Oke, rata-rata total element TikTok kita 300 pixel height-nya.

43:35Ya udah, diset lah 300. Jadi kalau height-nya lebih kecil, ya udah nggak masalah jadi kosong.

43:44Ya udah, nggak masalah kalau jadi kosong kan.

43:46Tapi kalau yang lebih besar, at least, yang besar nggak terlalu jauh loncatnya.

43:53Jadi bisa diminimalkan, hanya bisa begitu caranya sekarang.

43:57Itu pakai mengumpulkan data, jadi field data.

44:02Itu CLS, gampang-gampang susah.

44:05Susah, susah, gampang.

44:07Susah, susah, susah.

44:08Lebih banyak susahnya apa lebih banyak gampangnya?

44:10Kayaknya nggak ada gampangnya susah, susah, susah.

44:13Ya tapi kan sebenarnya di luar, kalau embed itu kan kasus unik ya.

44:17Maksudnya kasus khusus karena kontennya dinamik, kita nggak bisa expect.

44:21Tapi kalau buat hal-hal lain kayak image atau apapun.

44:24Even embed, kalau embed-nya kayak video gitu kan kita udah tahu rasio-nya ya.

44:29Pernah nggak baca situs yang kayak board panda jaman dulu?

44:36Atau jaman sekarang sih masih ada sih board panda.

44:39Dia kumpulan, kumpulan lucu-lucuan.

44:43Dia kumpulan lucu-lucuan dari Twitter, kumpulan lucu-lucuan dari embed-embed.

44:48Dia kumpulin, kan dia kumpulin itu satu page.

44:51Isi satu page isinya embed semua.

44:54Ya itu shifting semua ya.

44:57Kalau kebetulan atas dapet tugas nge-develop halaman yang kayak gitu ya sebetulnya gimana lagi.

45:04Kalau itu sih ya kita kan minimal kita bisa ngomunikasiin ke stakeholder.

45:09Kenapa CLS-nya nggak sebagus situs lain.

45:13Ya karena monennya gitu.

45:15Ada ini kan.

45:17Nanti Google bikin inisiatif lagi apalah buat men-streamline format atau metadata juga.

45:24Kalau nggak salah beberapa embed, terutama yang Twitter ya.

45:29Beberapa embed Twitter itu ada orang yang bikinin semacam tools atau plugin

45:34yang bisa melakukan screenshot.

45:37Jadi nanti dia embed terus abis itu dia embednya dalam bentuk image yang ukurannya sudah tau, udah ketahuan.

45:44Ya jadi si embednya itu bukan embed HTML tapi embed screenshot dari Twitter itu.

45:53Tapi ada proses di servernya.

45:56Iya ada kerja berat di servernya untuk melakukan screenshot tadi.

46:03Cuma buat kasus di luar itu sebenarnya property CSS aspek rasio itu membantu banget sih.

46:09Untungnya udah stabil di semua browser aspek rasio kalau nggak salah.

46:15Jadi di luar kasus-kasus yang kayak gitu kalau hal-hal normal kayak image static asset gitu, static image,

46:23static video, atau embed YouTube yang rasio-nya udah pasti fix, itu pakai aspek rasio juga aman.

46:31Itu linknya Mas Rizah.

46:33Itu yang saya dapat improving CLS dan Buzzfeed.

46:37Nah itu saya praktekkan dan saya coba dari sampai tiga-tiga part itu.

46:46Ya kalau Buzzfeed resource-nya cukup lah kayak mau saya apa buat mastiin CLS bagus aja beneran se-niat ini.

46:57Iya, nah ini kayak kalau misalnya saya mau belajar banyak bacalah yang Buzzfeed ini untuk mengetahui

47:06tekniknya karena mereka ada downfall, proses-nya itu bagus banget dengan nulisnya.

47:11Oh nice, seru banget sih.

47:14Wah seru ya.

47:16Ada satu ini kok ada, gue cari dulu linknya di Buzzfeed ini juga kok untuk cara ngitung

47:31layer-nya si embed itu gimana ya.

47:36Sampai teriak banget.

47:41Nah ini kan CLS ini kan kalau ada iklan yang baik itu iframe, atau image, ataupun apapun yang

47:49nggak ada hit-nya kan tiba-tiba dia muncul kan kayak tadian.

47:53Ini ya, awalnya kan gini ya, terus tiba-tiba ada iklan di atasnya.

47:58Layoutnya jadi turun ke bawah, gimana kalau iklannya overlay di atasnya.

48:08Kalau overlay malah nggak apa-apa kan.

48:11Oh malah lebih bagus gitu, jadi lebih banyak iklannya menimpa aja si kontennya.

48:16Eh iya kan, CLS gitu kalau elemennya geser kan, jadi pergeseran yang dihitung.

48:22Tapi kalau Google Ads, Google Ads harus ada rapper-nya dan mengatakan itu Ads.

48:27Kalau nggak melanggar tos.

48:32Tapi kan itu dari user experience kan jelek, kita lagi mau baca tiba-tiba ada iklan di tengah gitu.

48:38Kita jangan di atas ya, kan banyak banget itu yang footer, namanya footer ads kan.

48:44Footer ads-nya float kan, sampai kita harus klik manual supaya dia tutup.

48:49Itu ya everything yang saya lakukan sehari-hari.

48:54Tapi kan nggak apa-apa ya, just room.

48:58Tapi CTR-nya tinggi, CTR-nya tinggi itu yang Ads yang dibawa itu.

49:03Di mana pun kebutuhan conversion rate ya?

49:07Iya CTR, quick to write.

49:10Ya kan kebutuhan business juga tetap harus diakomodasi.

49:16Kalau misalnya kita sebagai developer kayak malah kayak bertentangan sama business ads yang bakal jalan juga.

49:24Itu coba klik satu link-nya Mas Riza, sekaligus embed itu kenapa susah kita nggak tahu ukuran sebenarnya.

49:32Karena setiap device atau width-nya berbeda, ukurannya berbeda.

49:37Klik aja deh salah satu twitter ya.

49:46Nanti dia akan misalnya ukuran device berapa, dia akan ngecek ukuran si embed itu berapa.

49:55Jadi dia akan sampai ukuran device yang terkecil, nanti kita lihat hasil code snippet-nya ya.

50:08Tapi kalau nggak salah ya, kalau kita mau embed youtube itu kita bisa tambahkan ukurannya, width dan height-nya.

50:17Oh kalau youtube emang bisa iframe.

50:21Kalau si embed twitter nggak bisa iframe kan, jadi CSS-nya jadi begitu tuh.

50:27Jadi kasih minimum height.

50:31Kalau twitter harus pure dynamic kan.

50:35Nah Instagram juga.

50:39Jadi untuk size berapa, minimum height-nya berapa.

50:47Kalau video tiktok juga gitu ya beda ya.

50:51Oh iya, ada yang portrait gitu ya.

50:55Betul.

50:58Portrait semua, yang beda itu caption-nya.

51:01Di bawah ada caption-nya itu misalnya.

51:03Video-nya tetap pasti sama ya.

51:05Kalau di bawah ada orang nulis puisi, nah repot.

51:10Oke oke oke, make sense.

51:14Ini salah satu tools-nya ya.

51:17Ya, CLS.

51:19Oke, nah itu CLS.

51:30Ada lagi yang mau dibahas?

51:32Nah ada nih yang relatif lebih sepele, kalau misalnya tadi masalah yang dari phone.

51:36Ada tuh tools-nya, phone style matcher.

51:40Bukan di chat.

51:42Nah kalau misalnya, ya sebenernya kita pernah bahas ini kan ya dulu di episode phone.

51:49Soal apa, fallback phone, teknik-teknik web phone.

51:54Silahkan klik link di bawah sini loh.

51:57Di atas sini ya, di mana lah, cari sendiri lah.

52:00Tapi salah satu teknik yang, teknik standarnya ini.

52:05Kita pilih fallback phone yang bentuknya kurang lebih mirip sama web phone yang kita pakai.

52:11Sudah ada, ada yang otomatis loh.

52:14Tapi gue lupa namanya.

52:16Sudah pernah kita bahas juga, ada yang otomatis.

52:18Ya udah, cari aja.

52:20Iya, cari aja.

52:22Ada, bisa tau ininya.

52:25Kemiripan phone-nya.

52:27Ya kalau Google phone apa kita pakai, yang mirip sama apa kita.

52:31Oh iya iya, similar ya.

52:34Ya kamu yang, nah ini juga kan kita tinggal pilih, terus udah dibikinin loh.

52:39Oh iya iya.

52:41Tuh bisa matchernya gitu, tuh bisa kelihatan.

52:45Cari yang pas.

52:47Apa bawa-bawahnya nggak kedorong.

52:49Oh bisa tambahin line height-nya gitu ya.

52:51Kita customize bisa, tapi kalau kita nggak mau nge-customize, itu udah di programmetically dipilihin yang mirip.

52:59Jadi tidak terlalu jauh perbedaan shifting in layout-nya ya.

53:05Yang penting jangan sampai ngedorong sih.

53:09Ini jelas banget, ngedorong antara satu dan yang lain.

53:13Beda height, cari yang sama height-nya.

53:17Sampai pas.

53:19Oh iya.

53:21Oh iya.

53:23Ya intinya begitu.

53:27Pake grid CSS dong, ini sudah ada paketnya.

53:31Siap-siap, kita belum bahas tentang layout-leot ya.

53:35Iya, flex sama grid belum?

53:37Flex sama grid.

53:39Float lah.

53:41Table lah.

53:43Table, table.

53:45Position absolute.

53:47Table lah, table.

53:49Envas lah, kayak kemarin kita udah dapet semua.

53:53Oke, untuk CLS cukup ya.

53:55Nah, berikutnya, ini ada FID.

53:59Tapi FID akan tergantikan.

54:01Jadi kita mungkin singkatkan FID adalah measure to interactivity kan.

54:05Jadi tujuannya adalah untuk menyediakan experience yang bagus ketika...

54:11User berinteraksi dengan element.

54:13User bisa berinteraksi, bisa scroll, bisa...

54:17Bisa scroll, bisa ngetik di input.

54:19Bisa ngetik di form, search misalkan, gitu ya.

54:23Klik, buka misalnya hamburger menu atau accordion atau apa, diklik, ya pas habis diklik...

54:29Mendingnya langsung muncul, ekspektasinya begitu.

54:31Berapa detik sampai ke tahapan itu berarti ya?

54:35Bedanya fast input delay ini...

54:37Hanya mengukur input delay yang pertama kali terjadi.

54:41Setelah page load.

54:43Oh, oke.

54:45Jadi user itu ngeklik setelah page load selesai...

54:49Tak usah nunggu page selesai, jadi page-nya lagi render, kita pencet apapun...

54:55Berapa lama delay sampai action kita itu bisa di eksekusi.

55:01Jadi kalau misalnya main thread-nya sibuk terus...

55:07Ya maka kita punya action-nya akan lama, gitu.

55:11Oke.

55:13Jadi diulang sedikit sekilas, kita kan browser ini cuma bisa single thread ya.

55:19Jadi kalau misalnya lagi parsing, apalah membaca CSS atau bikin fast script...

55:25Atau lagi render sesuatu, dia nggak bisa disambil ngapa-ngapain.

55:31Maksudnya nggak bisa disambil melakukan hal lain, harus menyelesaikan yang sedang dilakukan.

55:35Habis itu baru melakukan task selanjutnya.

55:39Kita punya episode event work juga, click link-nya di sini ya, di manalah.

55:44Jadi maksudnya itu yang menyebabkan delay.

55:47Mau nggak mau sih, pasti ada sekian millisecond buat memproses...

55:55Apalah JavaScript, render component, atau melakukan hal-hal lainnya.

55:59Cuma dibatasi jangan sampai terlalu lama ya.

56:03Jangan sampai nggak halangin task lainnya, kalau nggak salah 200 millisecond-nya.

56:11100.

56:14Eh 100, oh iya 100.

56:16Dan tambahan juga pada saat browser parsing HTML, itu dia sequential, jadi baris per baris.

56:23Baris ini, terus kesini, terus kesini, gitu kan.

56:27Makanya kan ada beberapa tips yang menyatakan bahwa...

56:30Kalau script loading itu dibawah aja sebelum gue ditutupkan.

56:34Ada yang masuk dibawah, tapi habis itu ada teknologi asing, defer.

56:40Ya, ya.

56:42Nah disini ada beberapa script yang ada disini juga.

56:45Jadi ini dieksekusi dulu sebelum kesini, sebelum ke CSS.

56:48Jadi script ini dijalankan dulu.

56:50Kalau script ini istilahnya ada bottleneck atau agak lambat,

56:53Maka CSS ini akan menunggu giliran, jadi satu persatu.

56:57Gak diasing atau defer, ya udah sampe dia selesai.

57:01Ya, kecuali ditambahkan property asing dan defer ya.

57:05Oke, itu FID, dan dari Google I/O beberapa waktu yang lalu,

57:12FID ini akan digantikan oleh INP.

57:17INP, tapi belum. Masih belum dapat stable-nya tahun depan.

57:22Cuma di-announce dari sekarang, biar kita sebagai developer punya waktu

57:27buat mempelajari dan coba improvement.

57:32Tetapi akan datang, jadi ini bukan coba-coba lagi, ini sudah di-announce.

57:38Tapi sudah pasti ya, sudah pasti akan digunakan.

57:41Tapi sekarang belum.

57:43Interaction to next page.

57:46Nanti kita lihat di Almanak 2024 gimana ya hasilnya.

57:50Hasilnya IRP.

57:52Ini apa nih GNC ini?

57:54Nah, ini evolusinya.

57:56Kalau menurut gue sih ini evolusinya si apa tadi?

57:59FID.

58:00FID tadi, kan FID cuma ngukur yang pertama kali first interaction.

58:05Wadah kan interaksi bisa lebih dari sekali ya.

58:08Nah, apa? Mungkin ini first lebih advance-nya.

58:11Jadi dia mengukur semua tab, click, dan keypress ya, gitu kalau gak salah.

58:17Nah, itu event-event.

58:21Keyboard dan tab.

58:23Performance API-nya sudah ada loh.

58:31Jadi tinggal dicoba aja kalau mau.

58:35Kapan-kapan deh episode performance API sendiri kali ini?

58:39Iya nih, performance API itu apa dan gimana cara kita eksplorasi kesana.

58:45Jadi gue kasih dimana ya.

58:51Disini aja deh.

58:53Bisa gak ya?

58:55Mana?

58:56Oh, itu gue kasih di link-nya, bukan link-nya.

58:59Maksudnya script-nya.

59:01Bisa.

59:02Copy aja, kasih kejalanan di konsol.

59:06Oke, dibuat...

59:11Bisa playing site ya.

59:13Di samping aja.

59:15Buat kesamping aja, Mas Riza, biar enak liatnya.

59:19Iya, nah.

59:21Jalanin, ketek.

59:23Tenang-tenang, ini gak nyuri data kok.

59:29Nah, ini Mas Riza, klik aja di mana-mana, klik aja terserah.

59:35Tuh, kelihatan tuh.

59:37Bisa juga klik, ya itu.

59:41Itu kelihatan tuh ya, jadi processing start, processing end, cancel level.

59:46Kalau salah satu objeknya diturunkan.

59:49Objek?

59:52Objek itu objek yang diturunkan.

59:55Itu ada duration.

59:57Duration.

59:58Nah, nanti yang diambil itu duration-nya itu, 32.

1:00:0132 apa nih, detik?

1:00:04Millisecond.

1:00:06Nah, yang bagus dibawah 200 millisecond, which is, ini bagus.

1:00:12Yang gak bagus itu adalah yang di atas...

1:00:16Ya, di atas 200 udah gak bagus sih.

1:00:19So, yang, ini gak ada, gak ada ini ya, gak ada...

1:00:24Gak ada form.

1:00:25Gak ada form-nya, kalau ada form bisa lebih jelas.

1:00:27Di atas coba, di atas ada search-nya gak sih?

1:00:30Ada, coba type something.

1:00:37Aku mau type something, mau type something.

1:00:40Nah.

1:00:42Tuh.

1:00:43Klik.

1:00:44Eh, ini gila.

1:00:45Eh, ya.

1:00:46Kepencet.

1:00:47Pes lagi.

1:00:50Ya.

1:00:52Tadi ya.

1:00:53Klik.

1:00:54Something.

1:00:56Something.

1:00:58Jangan diklik.

1:00:59Jangan diklik, oke.

1:01:01Keydown, berapa lama tuh?

1:01:03Keydown, keydown 1.

1:01:05Duration-nya 24 millisecond.

1:01:07Iya.

1:01:08Keydown 0, 24 juga.

1:01:11Ini bagus ya, berarti ya?

1:01:13Bagus.

1:01:14Bagus lah.

1:01:15Kalau jelek...

1:01:17Itu 0.24.

1:01:19Belum.

1:01:20Jadi sebenarnya datanya sudah ada di performance API.

1:01:25API.

1:01:26Tapi ini diadopsi sebagai core Web Vitals, kan.

1:01:29Terus significance-nya itu.

1:01:32Ya, berarti buat apa?

1:01:35Yang belum tahu lah ya.

1:01:36Yang belum tahu.

1:01:37Perlumahan dari API itu berarti browser JavaScript API

1:01:41yang berhubungan dengan menghitung atau mengukur performance-nya.

1:01:45Metrik, metrik.

1:01:47Metriknya.

1:01:48Oke.

1:01:49Nah.

1:01:50Ini INP ini juga misalnya kayak drop-down, search, form, input.

1:01:56Drop-down kayak gini.

1:01:57Misalnya kalau kita klik kelamaan, itu kan user tuh bisa klik-klik-klik kan.

1:02:01Ternyata kok nggak muncul-muncul dia, gitu.

1:02:03Itu ada contohnya kan di INP itu kita buka menu.

1:02:06Tapi karena lambat, kirain, oh, nggak pencet nih, kita pencet lagi.

1:02:10Padahal dia benar-benar buka.

1:02:11Ternyata dia...

1:02:12Dia tutup lagi.

1:02:13Itu annoying.

1:02:14Iya, pencet dua kali, gitu ya.

1:02:15Iya.

1:02:16Dan malah jadi motu, bukan?

1:02:18Iya, iya, iya.

1:02:20Sama kayak itu ya klik tombol like ya.

1:02:22Klik tombol like dua kali.

1:02:24Oh iya, betul.

1:02:26Jadi biasa aja, jadi netral.

1:02:31Cukup namakan kerjaan sempen.

1:02:33Iya, betul.

1:02:36Oh ini dia ya, yang tadi?

1:02:42Iya, betul.

1:02:43Untuk ngukurnya itu sudah bisa pakai ini.

1:02:45Sudah, kalau mau lebih simpel pakai yang Web Vitals JavaScript Library.

1:02:50Sudah bisa kita ukur pakai on INP.

1:02:53Ada banyak lagi on LCP, on TTFP, on CLS.

1:02:57Kita bisa kirik.

1:02:59Kan datanya bisa di-capture nih.

1:03:01Ini sebenarnya wrapper dari performance API.

1:03:03Data yang kita dapat sini bisa kita kirimkan ke Google Analytics sebagai custom event.

1:03:09Oke, jadi bukan hanya kita ukur lewat DevTools atau PatchSpeed Insight atau apapun.

1:03:17Tapi juga bisa diukur melalui kode ya.

1:03:20Iya, kode kita sendiri.

1:03:22Sebenernya kalau kita mau bikin custom dashboard deh, kalau cuma pengen lihat field data atau real data.

1:03:29Itu tuh sebenarnya otomatis terintegrasi di Search Console.

1:03:34Udah ada kok.

1:03:36Nah, cuma kan maksudnya.

1:03:38Field data kita memang ada di Search Console.

1:03:42Namun nggak enaknya delay.

1:03:44Jadi kita misalnya deploy sekarang nih.

1:03:49Ternyata kita bisa tau itu setelah seminggu rata-rata tuh rata-rata seminggu.

1:03:57Ternyata naik dari CLS-nya kita.

1:04:00Kita perbaiki.

1:04:02Nunggu seminggu lagi?

1:04:03Nggak, nunggu 28 hari untuk nge-process-nya.

1:04:09Iya, maka jadi supaya kita tetap bisa...

1:04:12Tetanggui di PatchSpeed juga itu ya, delaynya.

1:04:15Data PatchSpeed Insight.

1:04:16Mungkin sama ya.

1:04:17Gini, supaya lebih jelasnya.

1:04:20Datanya Search Console sama PatchSpeed Insight itu datangnya dari Krooks.

1:04:24CRUX.

1:04:25CRUX User Experience.

1:04:28Krooks Report.

1:04:30Jadi data itu kan dari semua pengguna Chrome ya.

1:04:35Dan dikirimkan secara anonimus.

1:04:38Dan prosesnya kan banyak dan lama.

1:04:42Jadi minimal rata-rata 28 hari baru bisa kita lihat datanya.

1:04:46Jadi kalau nggak sabaran, kayak saya,

1:04:49kalau perbaiki sesuatu, ya kumpulin aja datanya sendiri.

1:04:54Dan kelebihannya bisa custom.

1:04:56Misalnya kita edit testing kan,

1:04:58kalau halamannya sama, route-nya sama,

1:05:00apa URL-nya sama kan di Search Console atau PatchSpeed kan bakal sama.

1:05:04Tapi kalau misalnya kita pingin detect ada custom tracking-nya ya

1:05:09harus diintegrate ke analytics kan.

1:05:12Analytics system.

1:05:13Betul.

1:05:14Atau berdasarkan template.

1:05:16Maksudnya kita kan mungkin punya beberapa variasi halaman

1:05:19berdasarkan satu template yang sama lah.

1:05:22Template atau apa pun itu.

1:05:24Layout, template atau grouping apapun

1:05:26sesuai kebutuhan bisnis.

1:05:28Nah kalau kayak gitu harus pakai butuh analytics ya.

1:05:32Oke.

1:05:38Itu dia INP.

1:05:40Jadi ini coming soon.

1:05:42Jadi kalau kita bisa belajar dari sekarang,

1:05:45nanti begitu sudah launching, kita udah siap.

1:05:48Website kita juga sudah siap.

1:05:50Karena ini sebenarnya kelanjutannya si FID.

1:05:54Jadi intinya kan kita meminimalisir long blocking task.

1:05:58Jadi ini bukan hal yang beneran 100% baru banget sih.

1:06:03Enggak.

1:06:04Jadi effort kita untuk mengimprove FID selama ini

1:06:08tetap bisa dipakai buat INP.

1:06:11Mungkin ada yang lain yang lebih poeh dan lebih diperhatikan.

1:06:15Sebenarnya ada juga sih akhir-akhir ini kenakalan para vendor-vendor.

1:06:24Vendor-vendor ini sih.

1:06:27Maksudnya pembuat plugin,

1:06:29khususnya di WordPress ya.

1:06:31Pembuat plugin optimize performance.

1:06:34Itu mereka mengakalinya begini.

1:06:39Supaya bisa jadi LCP-nya 100, FID-nya 100, CLS-nya 100, semuanya 100.

1:06:45Itu mereka hanya melod JavaScript jika ada user interaction.

1:06:53Jadi si Google kan datang gak ada user interaction.

1:06:59Dia juga gak detek user header kan.

1:07:03Dia gak detek user email.

1:07:05Hanya ada mouse scroll atau klik.

1:07:11Baru dia ngelod semua JavaScript yang berat-berat itu.

1:07:15Sudah INP ini, kena gitu.

1:07:21Sebenarnya kayaknya konungsi semua metric-metric on Web Vitals

1:07:26itu kan kucing-kucingan antara akal-akalan developer

1:07:31sama efforts selanjutnya biar gak diakalin.

1:07:35Misalnya tadi time to first play, FCP.

1:07:39FCP diakalin dengan loading spinner atau logo.

1:07:43Sekarang udah gak bisa karena LCP ya udah.

1:07:45Ini kan sebenarnya gitu juga.

1:07:47Sama aja kayak CEO juga begitu kan.

1:07:49Berepolusi terus kan.

1:07:51Itu dari akal-akalan, akal-akalannya.

1:07:55Pasti bakal ada merombong lagi.

1:07:58Nanti bakal aja.

1:08:00Makanya ini alasannya ini selalu berepolusi sih ya.

1:08:04Ya, mereka selalu belajar lah ya.

1:08:06Untuk back end, pada tau gak sih timing API?

1:08:10User timing API.

1:08:15Siap dong, siap dong.

1:08:20Sebentar deh ya.

1:08:24Kalau, lagi cari, lagi cari.

1:08:27User timing API.

1:08:30Ini, ini, ini.

1:08:32Ini jaman dulu, masih, ini udah lama banget sih user timing API.

1:08:36Itu bisa, kayak kita bisa mark sendiri.

1:08:39Kita punya data untuk start and stop-nya.

1:08:46Ntar, ntar, ntar.

1:08:48Gue lagi cari, ayo kita coba.

1:08:52Ada satu lagi bukan user timing API.

1:09:01Bisa ngirim data dari server.

1:09:06Sehingga muncul di timing API-nya kita.

1:09:09Di timing window-nya tadi.

1:09:11Ini server timing bukan ya?

1:09:15Ya, server timing API bukannya.

1:09:17Ini berupa header nih, kalau di MDN.

1:09:22Iya, dia di kirim header.

1:09:24Dan header-nya itu akan muncul.

1:09:26Bisa di track nih, performance.

1:09:28Muncul, iya.

1:09:30Apa lagi, coba buka, buka, buka.

1:09:32Jadi server timing, iya ini maksud saya.

1:09:34Server timing API ini.

1:09:36Kalau kita kirim kan tadi yang, ingat gak timingnya?

1:09:38Oh, itu part of the performance API itu.

1:09:41Ternyata bagian dari performance API juga.

1:09:44Iya.

1:09:45Dan, tadi ingat gak yang tadi saya katakan sama Sriza.

1:09:48Buka timing, lihat dock-nya, lihat timing-nya.

1:09:51Itu kita bisa kirimkan dari server.

1:09:54Untuk via server timing API ini.

1:09:58Misalnya kita mau optimize modul tertentu, block tertentu.

1:10:04Yang banyak memakan data.

1:10:09Banyak memakan database access.

1:10:13Kita bisa kirimkan header tertentu.

1:10:17Nanti muncul disini, jadi kita bisa lihat dari sisi user.

1:10:20Kira-kira berapa, jadi kita gak usah harus punya yang mewah-mewah.

1:10:26Kayak New Relic lah, atau apa.

1:10:29Ini ya, pake ini ya, kirimin pake header gini ya.

1:10:37Iya.

1:10:39Jadi di sisi server, dihitung durasinya.

1:10:43Terus abis itu dikirimin ke client.

1:10:46Sebagai respon, bagian dari respon header ya.

1:10:49Iya, nanti akan di-capture disitu.

1:10:53Nice, ini juga TIL.

1:10:55Iya.

1:10:58Jadi kalau buat teman-teman yang punya website atau punya project kantor

1:11:05yang butuh tweak performance, bisa kontak kita.

1:11:09Kita jadi konsultan.

1:11:12Konsultan controlling web.

1:11:15Nanti Ivan yang akan kerjain.

1:11:19Kita tidur ngomong.

1:11:22Nanti Mas Rizal jadi ininya, account-nya.

1:11:29TK jadi ininya, accounting.

1:11:32Finance.

1:11:36Kita jadi konsultan.

1:11:38Tapi kerjanya ngobrol dulu, kenapa?

1:11:40Karena kita diayani sebagai konsultan ngobrol.

1:11:43Silahkan, website client-nya tulis di kolom komentar.

1:11:47Nanti kita audit ya.

1:11:51Tapi kita auditnya cuma ngomong doang.

1:11:53Yang kerjanya pada saat itu kali ya?

1:11:54Iya, kerjanya sendiri.

1:11:56Kerjanya sendiri, kita cuma kasih petunjuk aja.

1:11:59Oke.

1:12:01Jadi ini nih.

1:12:04Kalau misalkan tadi ada website client atau mungkin website pribadi

1:12:08atau ada aplikasi web yang teman-teman nonton di rumah

1:12:13terus pengen supaya performance-nya bagus, low hanging fruit-nya apa?

1:12:18Hal pertama yang harus dilakukan apa?

1:12:21Mending buka fake speed aja, ikutin saran-saran.

1:12:25Ikutin tadi.

1:12:26Saran-saran fake speed? Betul. Karena kan dia udah di contoh-contoh, ya entah fake speed

1:12:31atau tools yang ada tadi, performance insights yang ditunjukin tadi.

1:12:36Itu kan udah saran-saran yang dibawa, kita ikutin.

1:12:40Kalau core web vital sendiri ada di mana? Di sini ada?

1:12:45Di mana-mana.

1:12:46Di lighthouse.

1:12:47Iya, kalau gak salah, ini ya. Di sini ya.

1:12:49Ini ada ya.

1:12:50Di lighthouse ada.

1:12:52Di lighthouse ada, di web vital ada.

1:12:55Oke.

1:12:56Which video sih ada?

1:12:58Kalau dari saya, kalau misalnya kalian ketemu client

1:13:02atau misalnya diminta menganalisis ya,

1:13:05kalian selalu developer, diminta untuk menganalisis.

1:13:08Ini situsnya cepet gak sih? Apa sih yang harus kalian lihat?

1:13:12Pertama, start dari jangan lihat per page.

1:13:18Karena terlalu dalam. Lihat dulu overview-nya.

1:13:21Kalau dia sudah punya search console, terima kasih, alhamdulillah.

1:13:26Kalian lihat aja di search console, sudah ada web vital.

1:13:31Lihat bagaimana performance di search console.

1:13:35Selanjutnya, coba cek juga di page speed insight.

1:13:41Karena itu ada data crook di sana.

1:13:43Jangan lihat lab data dulu.

1:13:45Jangan langsung keren-kerenan buka browser,

1:13:49klik lighthouse analysis.

1:13:52Lihat hasilnya, bagus nih, 90.

1:13:55Bukan, jadi itu user-nya.

1:13:57Oke sih, karena field data ditaruh di atas.

1:14:00Jadi, secara layout, secara six-nya, itu juga membantuan.

1:14:05Ya, betul.

1:14:07Lihat field data dulu. Lihat dari hasil pengunjung situsnya bagaimana.

1:14:12Nah, kalau sudah kelihatan situasinya, tanya dulu ke klien-nya.

1:14:20Ini tujuannya apa, mau dinaikkan sales-ka?

1:14:24Atau sekedar ingin cepat aja?

1:14:29Atau tanya juga, cepat itu bagaimana?

1:14:34Apakah cepat secara diklik, loading, apa yang paling kritikal harus cepat.

1:14:46Terus, bisa juga dibandingkan dengan kompetitor.

1:14:52Siapa kompetitornya yang head-to-head?

1:14:55Siapa yang kompetitor head-to-head? Tiga.

1:14:58Terus, compare halaman yang paling kritikal yang kalian punya.

1:15:03Apa yang kira-kira kompetitor kritikal page-nya apa?

1:15:07Compare dari semua device, mulai dari mobile, tablet, sama desktop.

1:15:15Nah, PageSpeed Insight kan punya cross data.

1:15:18Jadi, bisa lihat juga data kompetitor seperti apa.

1:15:21Berarti harus pakai BigQuery ya?

1:15:23Nggak, kalau di PageSpeed Insight kita bisa masukin situs kompetitor.

1:15:28Baca aja dong.

1:15:30Iya, manual. Kumpulkan aja di spreadsheet.

1:15:34Bandingkan, saya bagiin ini ya.

1:15:38Gak apa-apalah, teman-teman juga.

1:15:40Bandingkan tuh titik awal kalian, compare ke kompetitor.

1:15:46Dan compare ke, dan kalian analisi selanjutnya.

1:15:51Apa aja misalnya bisa diterapin.

1:15:55Itu kalau nggak salah dari sisi yang paling simple ya.

1:16:02Selanjutnya, kalian bisa buat static file dari situs itu.

1:16:06Dan coba tweak tanpa harus mengutak-ngatik coding-nya.

1:16:12Tahu nggak sih, POC dulu ke kliennya.

1:16:16Kalau sudah dioptimize, bundlenya segala macam, itu dengan static HTML,

1:16:22tentu TTFP di eliminate.

1:16:26Hasil LCP dan segala macamnya jadi bagaimana dengan static file.

1:16:32Dan bisa kalian buat perbandingan yang spreadsheet tadi.

1:16:39Data awal, data kompetitor.

1:16:42Dan kira-kira kalau proyek itu kalian ambil, bisa jadi seperti ini loh.

1:16:47Misalnya, skornya dari 40 di mobile, jadi 90 di mobile.

1:16:55Ya udah, kalau kalian bikin proposal-nya kayak gitu, menang deh kalian.

1:16:59Nah, itu ada calculator skornya juga, siapa tahu ada yang belum tahu.

1:17:07Oh iya, sekarang udah berubah ya bobotnya ya.

1:17:11Setiap versi, bobotnya kan perhitungannya selalu berubah.

1:17:17Versi skor sudah berubah.

1:17:19Zoom in.

1:17:21Nah kan Core Web Vitals itu tiga hal yang dibawah ya.

1:17:25LCP dan TBC Total Doving Time itu mau pilih versi untuk pilih.

1:17:31Karena FID itu kan cuma bisa dihitung di field.

1:17:33Harus pakai input user beneran.

1:17:36Nah, itu kan nggak bisa di prediksi, jadi di prediksinya pakai metric line Total Doving Time.

1:17:43Terus paling bawah CLS tuh, kita lihat loh, bobotnya kan paling tinggi.

1:17:47Tiga itu dua lima persen, tiga bulu, dua lima.

1:17:50Nah, itu tadi misalnya kita, bedanya, biasa sama kompetitor kan kita bisa ngitung-ngitung,

1:17:55kita bisa mengirang-irang di sini, di bagian mana aja yang harus dinaikin.

1:18:00Oke, iya.

1:18:02Yang harus di-prove, dinaikin atau di-prove.

1:18:04Lima lima, kalau Core Web Vitals ini udah lapan puluh persen ya?

1:18:08Iya.

1:18:10Bobotnya, Core Web Vitals itu lapan puluh persen.

1:18:14Lapan puluh persen, oke.

1:18:18Siap, siap.

1:18:20Iya, bisa bawa kita di kolom komentar.

1:18:25Kita jadi konsolons gitu.

1:18:27Iya, soalnya kan apa ya, yang ukur-ukur kayak gini kan, ya nggak tahu ya,

1:18:36kalau konsultan untuk bikin software kayaknya udah banyak sekali kan.

1:18:41Biasanya kalau konsultan besar, jadi satu lah.

1:18:44Oh iya, sekaligus ya, sekaligus.

1:18:46Tergantung, tergantung scope-nya.

1:18:50Tapi kalau yang re-review dulu agensi, ya pasti apa,

1:18:53pemperhitungan performansi juga lah, karena itu kan sejujurnya ngaruh ke target business.

1:18:58Ke SEO juga, ujung-ujungnya kan ya?

1:19:00Iya.

1:19:01Dan udah banyak case tadinya juga kan.

1:19:04Maksudnya misalnya, launching menurun, atau apalah,

1:19:07reach rate-nya naik dengan Core Web Vitals yang lebih bagus.

1:19:11Jadi ya, agensi pun pasti harusnya mempertimbangkan.

1:19:16Semakin cepat aplikasi atau website kita,

1:19:19ya semakin banyak mungkin orang yang suka,

1:19:23atau semakin berpengaruh ke revenue juga, ujung-ujungnya, gitu kan.

1:19:27Website kita bagus, search rate-nya bagus.

1:19:30Kalau lambat, jangan di tinggalkan.

1:19:33Iya, bounce rate-nya tinggi, ya kan.

1:19:36Jadi itu secara tidak langsung berpengaruh kepada gaji kita.

1:19:42Kalau dilihat secara ini ya, secara garis besar, gitu kan.

1:19:47Kalau perusahaan misalnya dapat keuntungannya dari website.

1:19:51Kalau website-nya cepat, user-nya senang, user-nya akan bayar.

1:19:55Kita dapat gaji, gitu kan.

1:19:56Atau user banyak melihat iklan, ya kan?

1:19:59Ya, banyak melihat iklan juga sama.

1:20:02Eh, salah juga loh.

1:20:04Makin banyak iklan, bukan berarti makin banyak revenue loh.

1:20:07Oh, masa?

1:20:08Iya, banyak user.

1:20:11Oh, banyak user, yes.

1:20:13Karena ada ad impression juga ada.

1:20:17Terus user yang datang, besok datang lagi, besok buka lagi.

1:20:19Karena dia senang, experience-nya enak.

1:20:21Meskipun dia, iya.

1:20:23Gak terganggu.

1:20:24Meskipun banyak iklan, tapi KLS-nya bagus, gitu kan.

1:20:27Yang ga usah banyak lah, ada iklan.

1:20:29Tapi, ada iklan, tapi gak terlalu ganggu.

1:20:32Iya, tidak mengganggu.

1:20:35Dia dapat visualnya, dapat informasi yang berguna.

1:20:37Atau apalah, dia dapat pengetahuan dari website kita.

1:20:40Ada iklannya tak dikit, gak terlalu ganggu.

1:20:43Ya, besok dia buka lagi, besoknya dia buka lagi.

1:20:45Ya, kan sebenarnya itu tipis-tipis.

1:20:48Gak kayak main game di mobile ya.

1:20:52Begitu kalah gitu muncul iklan.

1:20:55Tunggu 15 detik, 20 detik, apa-apa sih.

1:20:59Itu mau di premium kali?

1:21:01Enggak, ya intinya experience kayak gitu banyak di mobile.

1:21:10Nggak enak banget.

1:21:12Jangan sampai kejadian kayak pengalaman Eka tadi ya.

1:21:15Mau beli tiket, malah pencet reset.

1:21:20Masih di tahun 2023 ini, masih ada tombol reset

1:21:26di form pembelian, itu juga udah aneh sih.

1:21:28Iya, coba bayangkan kalau ada...

1:21:31Nggak jadi di tutupan, ya kan?

1:21:33Iya, kalau ada aplikasi kompetitor,

1:21:36pasti Eka akan berpindah ke kompetitor yang lain.

1:21:39Iya, kan?

1:21:41Jadi itu sangat berpengaruh.

1:21:43Tergantung harga.

1:21:45Tergantung ada diskon atau nggak.

1:21:48Kalau harga sama mungkin mau pindah,

1:21:53tapi kalau harganya lebih mahal.

1:21:55Reset nggak apa-apa aja, ulang lagi.

1:21:58Tiket Coldplay, usitusnya lambat aja,

1:22:03ditungguin tuh, direfres-refres terus tuh.

1:22:06Ya, itulah namanya tiket war.

1:22:10Kalau nggak, nggak ada warnya, nggak seru.

1:22:12Nah, itu udah di luar mana, web tip.

1:22:16Oke, oke, oke.

1:22:18Oke, kalau gitu, buat malam ini...

1:22:20Eh betul, ini link terakhir dulu.

1:22:22Oh, terakhir, penutup, penutup.

1:22:24Yang mau belajar, ya?

1:22:26Yang mau belajar, penasaran.

1:22:28Yang mau belajar bisa ke...

1:22:30Yang mau barengan sama saya di GDE Performance,

1:22:36belajar banyak ini.

1:22:38Semoga ada.

1:22:40Karena web capability ada dua nih.

1:22:42Ya, performance sama gue doang.

1:22:44CSS belum ada juga ya?

1:22:46Ada yang CSS lah, biar ramai.

1:22:50Eh, masih ada nggak sih?

1:22:52Pas gue...

1:22:54Ada dia.

1:22:56Jadi kalau mau belajar,

1:22:58ke web.dev/learn -core -web -fighters.

1:23:02Nanti kita taruh di...

1:23:04Apa? Di deskripsi ya.

1:23:06Show notes.

1:23:08Oke, mungkin itu aja.

1:23:10Pesan terakhir dari kita.

1:23:12Silahkan belajar web fighters

1:23:14kalau teman-teman yang tertarik.

1:23:16Siapa tahu beberapa bulan lagi

1:23:18kita jadi tidak trio web-web,

1:23:20tapi jadi berempat, ya?

1:23:22Trio kuat-kuat.

1:23:24Trio kuat-kuat.

1:23:28Jadi apa?

1:23:30Bisnis konsultasi kita jadi lebih berkembang lagi,

1:23:32karena...

1:23:34Bisnis konsultasi kuat-kuat.

1:23:36Oke, kalau gitu terima kasih banyak

1:23:40buat teman-teman yang sudah nonton,

1:23:42yang sudah meramaikan.

1:23:44Kita ketemu lagi selasa depan.

1:23:46Nah, selasa depan ada...

1:23:48Ada bintang tamu.

1:23:50Ada bintang tamu.

1:23:52Kita udah sempat obrolin

1:23:54beberapa episode yang lalu.

1:23:56Nanti tungguin aja.

1:23:58Minggu depan kehadirannya Beliau.

1:24:00Kita akan ngobrol bareng-bareng.

1:24:02Jadi kita berempat minggu depan.

1:24:04Oke, terima kasih.

1:24:06Selamat malam. Sampai jumpa.

1:24:08Wow.

1:24:10Eka nya ngefreeze ternyata.