Bedah Situs
Ringkasan Episode
Bantu KoreksiEpisode ini merupakan edisi perdana segmen "Bedah Situs" di mana tim Ngobrolin WEB mengulas website mereka sendiri, yaitu ngobrol.in. Website ini dibangun dengan bantuan berbagai AI tools seperti GitHub Copilot, Claude Code, Amazon Q Developer CLI, dan Cursor untuk hampir seluruh aspek pengembangan termasuk coding, testing, dan dokumentasi. Website menggunakan teknologi Elixir dengan Phoenix Framework, Live View, PostgreSQL, dan Tailwind CSS. Website ini berfungsi sebagai showcase arsip episode podcast Ngobrolin WEB yang bersumber dari YouTube playlist, dengan fitur RSS feed yang kompatibel dengan format podcast sehingga dapat didengarkan di Spotify. Diskusi juga mencakup proses konversi video YouTube menjadi MP3 menggunakan yt-dlp, deployment menggunakan Coolify (open source alternatif Heroku) di AWS, dan analisis performa website menggunakan Chrome DevTools Performance tab.
Poin-poin Utama
- •Website ngobrol.in dibangun hampir sepenuhnya menggunakan berbagai AI tools (GitHub Copilot, Claude Code, Amazon Q Developer CLI, Cursor) untuk coding, testing, dan dokumentasi
- •Teknologi yang digunakan: Elixir, Phoenix Framework, Live View, PostgreSQL, dan Tailwind CSS dengan desain neo-brutalisme yang dibuat dengan bantuan v0.dev
- •Website mengambil data dari YouTube Data API dan mengkonversi video ke audio MP3 menggunakan yt-dlp untuk podcast feed yang kompatibel dengan Spotify
- •Deployment menggunakan Coolify (versi open source Heroku) di infrastruktur AWS dengan konfigurasi Docker dan webhook untuk auto-deploy
- •Website memiliki fitur RSS feed, pencarian episode, dan halaman detail untuk setiap episode dengan catatan yang diambil dari deskripsi video
- •Analisis performa menggunakan Chrome DevTools menunjukkan TTFB 215ms (bagus), penggunaan HTTP/3 untuk beberapa resource, dan area yang perlu ditingkatkan seperti font display swap dan preconnect untuk domain YouTube image
- •Rencana pengembangan masa depan termasuk menambahkan fitur transcript otomatis dengan AI, ringkasan episode, dan perbaikan performa serta responsivitas mobile
[musik]
Selamat malam para pemirsa.
Kita kembali lagi dalam acara kita yang kita cinta ini, yaitu ngobrolin web di hari Selasa malam.
Sambut teman-teman saya, Riza dan Eka. Tuput tangan dong.
[tepuk tangan]
Kurang pro ini, kurang pro nanti bikin scriptnya dulu pakai Jemenai-Jemenai.
Bisa dibaca doang lagi.
[tertawa]
Sudah kayak penyara dia belum?
[tertawa]
Selamat malam Mas Ricky.
Gimana kabarnya? Selamat lebaran lah ya, minggu lalu kita mengirimkan ucapan selamat.
Sekarang live-nya ya, selamat lebaran.
[tepuk tangan]
Ya, latensinya ternyata ya.
Kita tidak menyatakan selamanya ternyata latensinya lumayan ya.
Padahal kita masih di satu negara ya. Gimana kalau beda negara ya?
Servernya di negara apa masalahnya?
Ya benar juga. Tapi ucapannya lucu.
[tertawa]
Ya susah Mas, susah.
Kita berapa kali rekam? Itu sebenarnya hasil rekaman yang pertama.
Itu yang satu kan? Yang di populis.
Tapi lebih natural, kalau yang kedua, yang ketiga ya.
Berapa kali kita take itu kayak apa ya?
Kita putus-putus soalnya.
Terus bukan putus. Lebih tepatnya latensi.
Selisih dua detik.
Ya, ngomongnya juga kita di-post kan.
Pake strategy-nya Mas Danny.
Lihat transkrip lengkap (568 segmen lagi)
Kita diam-diamin.
Oh iya, satu kalimat berhenti, satu kalimat berhenti, abis itu dipotong-potong kan.
Jadi kurang natural. Makanya akhirnya ngambil yang pertama, yang salah itu.
Justru sengaja dibikin lucu. Karena spiritnya ngobrol di nuet kan.
Jadi spontan aja, spontan.
Uhui, belum ada uhui.
[tertawa]
Efek uhui.
Oke, jadi malam ini tanggal 8 April 2025.
-Bahas apa? -Bahas tarif.
-Tarif gak? -Tarif.
[tertawa]
Kalau beli buku, udah mahal ini sekarang.
Atau beli tiket pesawat. Semakin jauh ya.
Mimpi untuk ikutan Google I/O semakin menjauh ya.
-Iya. -Apa-apa mahal?
Termasuk I/O China juga, kayaknya gak bisa.
Terima kasih.
Jangan pesimis gitu dong.
Pesimis-pesimis karena sudah ada executive order dari US World ini.
Untuk kayak membatasi perusahaan Amerika untuk tidak berjagang atau kolaborasi dengan non-aliensi.
Non-aliensi.
Jadi, daripada kita ngomongin tarif, malam hari ini kita bahas tentang bedah situs.
Bedah situs. Ini segment apa? Ini edisi perdana.
-Segmen baru. -Segmen baru.
Sebenarnya kita sempat waktu Imre, kan kita bahas website-nya ya.
Aplikasi web-nya kan ya. Tapi itu kan lebih ke narasumber ya.
Ini narasumbernya bukan bedah situsnya, cuma lebih ke Imre jelasin cara dia belajar.
Sekaligus kita lagi cari target kita selanjutnya.
Malam ini kan malam versi perdana nih buat bedah situs.
Kalau misalnya temen-temen ada situsnya mau dibedah, kasih aja hashtag #bedahsitus.
Nah, #bedahsitus nanti kita cari dari hashtag, nanti kita bisa masukin.
Jangan nyusahin diri sendiri.
Jangan nyusahin diri sendiri lho kok. Screen-nya hilang.
Bentar ya, cari screen dulu ya.
Nah, atau kalau mau membuat pekerjaan kita lebih gampang,
temen-temen bisa menuju kesini, github.com/orks/ngobrolin/discussions.
-Di sini ada... -Kesana Indo aja.
-Ya, kan ada itu di situ. -Bisa juga.
Nah, di sini ada bedah situs. Masukin aja.
Masukin aja URL-nya. Jadi malam ini berhubung...
Bukan kred sendiri ngepost sendiri.
Ya, emang namanya kan pilot project.
Apa namanya? Greenfield. Eh, bukan dog-fooding ya?
-Dog-fooding. -Apa sih, ada istilahnya?
Biasa kalau di Indonesia tuh...
Apa sih, aneh mu itu yang asal-asal, soalnya eating your own dog food.
Nah, ngapain makan-makan anjing.
Scratch your own itch.
Iya. Jadi malam ini kita akan coba...
Kita ada bedah buku, bedah situs.
Iya, bedah buku ini cukup luar biasa.
-Eh, sudah dua kali kan? -Beda orang.
-Beda buku kan sudah dua. -Beda buku dua kali.
Beda orang yang kemarin, beda Imre.
-Oh iya, itu beda developer. -Beda orang.
Oh iya, dia budak developer jadi nanti.
Sama ini, kita mau ini nih, pengalaman horor ya.
Kalau teman-teman punya pengalaman horor, misalnya.
Malam Satu Suruh itu tanggal berapa tuh? Bulan Juni ya?
Ya, episode Malam Satu Suruh, kita cerita seram.
Cuma cerita seram ini mungkin agak sensitif ya.
Kita kayaknya perlu setting email adres anonim.
-Oh iya, benar. -Yang misalnya, saya nggak sengaja.
Apalah, nge-push API key di repo.
Ya, mana ada orang yang mau nge-post di sini.
Iya sih, harus anonimus ya.
-Bener, bener, bener. -Ya, kalau mau kasih nama di email,
nggak apa-apa, tapi kan by default kanan aja.
Oke, nanti kita bahas lagi tentang diskusi itu di akhir ya.
Sambil memilih topik berikutnya.
Jadi topik malam ini karena belum ada,
saya nyumbang project pribadi.
-Project kita bersama. -Cepet banget.
Ini adalah webnya Ngobrol In Web.
Eh, ini meta banget nggak sih episode Ngobrol In Web?
-Ngabahas website. -Ngabahas website, Ngobrol In Web.
-Website, Ngobrol In Web. -Tinggal dipindahkan.
-Circular ya, circular dependency. -Komen pertama, butuh dipindah domainnya.
-Butuh dipindah domainnya. -Komen kedua, baru sample request.
Barusan 5 menit lalu.
Sebelum masuk stream ya, baru sample request.
Ya, nanti aja sambil dibahas.
Oke-oke, nah ini adalah showcase ya, kumpulan episode.
Sebenarnya tujuan utamanya adalah ini sebenarnya, feed.
Feed ini adalah RRS feed yang compatible dengan podcast format.
Jadi ada title, description, terus ada episode-nya.
Item ini episode, episode berapa, episode berapa.
Dan ada publication date-nya, terus ada ID-nya,
terus ada URL-nya ke podcast-nya.
Sehingga sekarang teman-teman bisa buka di Spotify.
Ngobrol In Web sudah ada di Spotify.
-AWS-nya siapa itu? -AWS-nya saya, pribadi.
-Kok nggak ada? -Itu?
-Tepuk tangan dong. -Tepuk tangan.
-Like and subscribe ya. -Iya, bisa komen juga.
Di sini ternyata udah ada fitur komentarnya juga.
Jadi, kan yang awalnya ini adalah sebenarnya tujuan, bukan tujuan ya.
-Source dari... -Komen kedua.
-Komen kedua? -Iya, BF Case-nya nggak jalan.
-Back Forward Case. -Ketawa nih.
-Iya, langsung PR lah. -Bagus-bagus.
-Iya, yang PPR. -Bagus-bagus.
Nah, tadi mau ngomong apa ya? Karena ini kan sumber datanya adalah dari YouTube playlist.
Karena ini video kan, sebenarnya bukan podcast yang formatnya audio doang.
Jadi ini adalah dari playlist. Dan YouTube nggak ada, itu tidak menyediakan fit ini.
Jadi harus buat sendiri.
Nah, makanya kayaknya butuh, selain butuh website ya butuhnya sebenarnya tujuan utamanya kesitu.
Dan juga biar bisa dipamerin lah di showcase ke kalau ada yang mau sponsor kan.
Wah, ini website-nya udah beberapa episode udah kelihatan gitu kan.
Terus apa lagi ya? Terus ya...
-Itu ada database nggak? Itu maksudnya langsung narik dari... -Aka database.
Nanti, eh, bentar kita tuh bahas fitur ya satu persatu gitu ya? Nanti sambil buka kodinya.
Nah, yaudah nanti aja bahasnya.
Ya, ini kan halaman depannya hanya dibatasi ke 20 sekian episode nih.
Berapa nih? Ya, hitung sendiri lah ya.
Kalau semua episode berarti ini, ini semua nih.
Panjang sampai ke bawah tuh, sampai episode satu.
Kalau dicari, nah ini masih ada bug nih.
Kalau misalkan kita mau cari kata, harus di-enter dulu baru keluar.
Jadi dia nggak auto ini, nggak auto apa namanya, nggak live-search ya istilahnya.
-Iya, itu. -Iya.
Itu masih nge-bug sedikit, terus apa lagi? Udah.
Ini about, ya. Ini juga generated by AI kontennya.
Dan website-nya juga generated by AI, mostly, sebagian besar.
Di sini saya pakai berbagai macam AI, mulai dari Cloud Code, Github Copilot,
Either chat, Amazon Q Developer CLI.
Testing-nya juga dibantu sama AI, dokumentasinya juga dibantu sama AI.
Jadi hampir semua kerjaannya AI.
Saya cuma bagian nge-review aja.
Oh, mantap. Tepu tangan tuh.
Oh, perlu ya. Nggak usah lah. Malu itu sebenarnya.
Kalau di-click satu episode, gimana?
Di-click satu episode ke detail page. Detail page-nya masih nampilin iframe.
Belum pakai yang iframe yang ringan itu. Harusnya nanti diganti.
Catatannya juga masih ngambil dari video detail-nya.
Ya, dari video detail-nya.
Nah, ini pengennya nanti kita bikin aja markdown di satu folder, gitu ya.
Nanti mungkin bisa jadi kayak ada transcript-nya atau ada catatan tambahannya.
Oh, direpo satunya tuh.
Kan sempet bikin, cuma terbungkala dikit cuma maksudnya berarti ya nanti tinggal sebagian yang udah ada tinggal dipindahin aja.
Iya, dipindahin aja.
Nah, pengennya sih ke depannya juga dibikin semacam semi-automatis.
Jadi dia bikinin transcript sendiri, AI lah, pakai apa gitu ya.
Kayak whisper, jadi transcript, dari transcript jadi summarize.
Pengen, ya.
Nah, cuma kalau yang transcript itu, kalau kita nyebut nama, kayak nama framework itu, itu perjalanan saya sih.
Kalau teknologinya, coba dari teknologinya.
Teknologinya, pakai Elixir, Phoenix, Live View, sama Postgre.
Oh, berarti ada database.
Ada database, jadi kalau, ya ini masih belum terlalu secure sih.
Kalau misalkan ada episode baru, saya bisa tambahin sync di sini, nanti dia akan syncing ke database.
Ini semua orang bisa melakukan.
Semua orang bisa, ya udah dimatikan dulu, sekarang gimana?
Iya, nanti kita bikin methodnya post lah ya.
Kita bikin methodnya post, pakai password lah, apa gitu ya.
Tapi sekarang begitu.
Sekarang lah, ini orang pendek nonton, pendek nyobain semua, jebol.
Iya, jebol ya.
Kalau episodenya udah ada, dia nggak itu kok, dia apa namanya, nge-query dulu.
Skip.
Iya, skip.
Terus ada CI-nya, kalau ngeliat di, apa namanya, di GitHub-nya itu ada CI-nya,
walaupun sempat ngaco gara-gara si AI-nya mengubah konfigurasi database.
Cuman berarti AI-nya ada bahaya juga ya.
Kelewat satu kan, kelewat ini apa kok, error mulu ya tuh, error-nya banyak tuh.
CI update database.
Baru ketahuan, baru di sini.
Ya dan kadang emang apa ya, AI assistant itu kadang suka aneh-aneh.
Review dulu dong, itu PR-nya Eka, di review dong.
Oh PR-nya Eka, boleh.
Ini nih, soalnya kalau ngomong soal AI bikin keubahan ngaco,
dari sekarang juga nyoba iseng wipe folding, kayak suruh bikinin test,
nyoba Honoo, Honoo API, enak banget.
Ya suruh buatin testnya, buat apa sih, kayak authentication, blablabla.
Ya jalannya normal, cuma maksudnya dia tiba-tiba bikin test suite-nya,
mindahin secret invariant variable, dimasukin ke dalam test-nya,
beneran jadi string gitu.
Jadi kalau orang yang meleng, nggak teliti, cuma suruh generate test,
jalanin test-nya, test-nya passing semua, terus di-commit, yaudah, selaruh.
Jadi kayak, maksudnya overall kerjanya bagus, bukan jelek.
Cuma kayak dia ngelakuin satu atau dua hal yang fatal.
Iya, kadang-kadang begitu.
Nah ini hanya bisa dilakukan oleh orang yang mahir, ini ya, tailwind ya.
Oh iya, ini pakai tailwind juga, jadi cocok lah ya.
Itu gue nge-pool request-nya langsung edit di GitHub web-nya dong, nggak dijalani.
Harus itu ya, harus nge-jalani, harus install-install ya.
Gak tahu caranya, malas, yaudah coba di-browser kan.
Coba aja sekarang dibuka, kayak responsif yang mobile,
pasti itunya kan nightmare-nya kepotong, sama window-nya jadi ke-stretch,
apa, viewport-nya jadi ke-stretch, bencet yang, nah.
Nah itu, ya gitu lah.
Yaudah, langsung di-fixis itu, terus.
Langsung aja, di-accept dah.
Percaya, percaya, percaya, langsung accept.
Harus percaya.
Merge, merge dulu ya.
Merge, squash and merge.
Gua tambahin protected branch ya.
Oh iya, siap-siap.
Sudah.
Biar nggak langsung nge-push ke main semuanya.
Ya, mungkin cerita pembuatannya sedikit ya,
jadi kan banyak dibantu AI, oh iya, untuk UI-nya juga dibantu sama AI.
Untuk UI-nya, pakai bold.
Jadi awalnya tuh bentuknya begini, yang versi awalnya.
Wah, belum-belum udah versi awal kan.
Terus selang beberapa minggu, selang beberapa hari lah ya, nggak sampai seminggu ya,
pas lagi demo-in bold juga di satu acara, jadilah ada website,
tapi website-nya website restoran yang pernah saya tunjukin, yang bentuknya kayak tadi.
Jadi kita bikin website restoran dan temanya neo-brutalis, gitu ya.
Tapi silah keren banget.
Loh, mana?
Kok nggak jalan?
Belum start application.
Ya, ini biasanya dia start otomatis loh, reload ya.
Nah, dari situ, nah ini kan baru mulai lagi dia.
Dari situ akhirnya saya download ini, di-export kan, download.
Terus dari download, taro di folder project-nya misalkan /docs/something gitu ya.
Terus dari situ saya kasih tahu ke waktu itu pakai copilot,
saya bilang ini ada contoh project, aplikasinya TypeScript.
Tolong design-nya diambil, dipindahkan ke project Elixir.
Karena kan beda ini kan, beda teknologi kan, akhirnya jadilah seperti ini.
Dari yang udah ada, jadi salah satu kegunaannya,
walaupun misalkan v0 atau bold.new itu, nah ini dia.
Bold.new itu dia menghasilkan aplikasi yang mungkin Next.js lah, atau ini VT ya kalau nggak salah ya.
Tapi kita bisa ngambil desainnya aja, kita implementasi ke project yang lain dengan teknologi yang berbeda.
Berarti kan sebenarnya dia tinggal ngambil class name-nya kan, dia ngambil CSS-nya aja kan.
Ya, maksudnya logic-nya si AI-nya.
Jadi dia mungkin dia ambil ini, oh ini background kalau untuk, apa namanya, untuk button putih.
Sama-sama pakai Tailwind nggak? / Sama-sama pakai Tailwind.
Ya gampang kan, berarti tinggal si box-nya, masing-masing kart-nya tinggal dipakein class name-nya itu kan.
Masa yang terjadi di balik layar. / Betul.
Ya, tapi kan setidaknya dia tetap harus tahu. / Iya, dia harus nyari kart-nya, elemen atau komponennya yang mana.
Elemennya apa, terus dan juga ini-nya kan sebenarnya udah ada.
Design basic-nya udah ada kan, ini udah ada list-nya, udah ada detail page-nya kan.
Terus cuma diminta untuk mengubah konsep view aja, jadi seperti ini, ya style-nya aja.
Kita pakai bahasa Inggris apa bahasa Indonesia di ini ya? / Iya bahasa Indonesia.
Bahasa Indonesia aja ya? / Bahasa Indonesia.
Sudah, terus apa lagi yang menarik ya? / Oh di PR-nya, di website-nya.
CI-nya itu berarti build-nya di remote ya? Di GitHub Action. / Di GitHub Action.
Server, server gimana nih? / Server di, saya pakai Coolify.
Ada yang tahu Coolify? Coolify itu versi open source-nya Heroku.
Jadi saya punya namanya paas.riza.world, disini bisa login, nanti kelihatan tuh.
Pasword-nya... / 1-2-3-4. Pasword-nya rahasia.
Pake OTP, biar aman. Terus untuk ininya pakai docker, docker file.
Mana dia? Ini nggak apa-apa kan kalau dilihatin kan? / Nggak apa-apa. / Ya harusnya nggak apa-apa.
Kalau nggak boleh dia udah hidden. / Iya, jadi post green-nya disini, terus apa yang perlu dilihat disini ya?
Inilah tampilannya. Jadi bikin project baru, terus siapin environment variable-nya,
konek ke GitHub supaya bisa itu, webhook.
Jadi kalau ada perubahan, ada pull request dll. dia akan otomatis deploy, ulang.
Itu free atau apa? Berbayar si hosting? / Pullify-nya free. Pullify-nya free, tapi kan kita harus ada hosting-nya ya.
Harus ada VM-nya. / VM-nya di? / VM-nya di AWS. / Mahal dong.
Pakai kredit, bukan ada kredit. / Berarti kita terima sponsor nanti untuk membayar ini ya?
Yang pertama ada isu tarif, kemudian yang kedua US Dollar semakin tinggi.
Jadi solusi untuk hosting lokal kayaknya bisa jadi pilihannya ya.
Sponsor, sponsor, ayo silahkan. Hostingan lokal boleh.
Berapa kali bolak-balik prom? Bolak-balik prom banyak sih bolak-balik.
Dan pakenya juga ganti-ganti. Ada yang pakai CLI, ada yang pakai co-pilot, berkali-kali sih.
Itu iseng aja pengen nyoba? Atau emang maksudnya ada spesialisasinya kayak co-pilot jago di cloud, jago di apa?
Enggak, iseng aja nyoba. / Oh, kirain serumit itu setup-nya.
Enggak, sebenarnya yang sehari-hari dipakai itu di co-pilot. Cuman kemarin itu ada, begitu ada, kan AI perubahannya cepat banget kan.
Tiba-tiba, wah Gemini 2.5. / 2.5, yang jago banget. / Buat coding, kan? Buat coding.
Ah, cobain lah. Tolong bikinin Dockerfile, wah bisa dia.
Ya lah, cuma kalau bikin Dockerfile kayaknya model yang nggak sepintar itu bisa buat common use case.
Maksudnya ini kan juga bootstrap dari starter ya, kelihatannya ya.
Iya, benar-benar. Terus, apa lagi ya. Terus tiba-tiba ada cloud code, cobain ah, cobain.
Ternyata harganya lumayan mahal. Akhirnya berhenti, nggak pakai. Beberapa minggu nggak pakai, tiba-tiba di-email sama Anthropic.
"Kok kamu udah nggak pakai lagi? Ini saya kasih 40 dolar." Akhirnya pakai lagi, ngabisin. Sayang, nggak dipakai.
Ya gitu lah, jadi buat eksperimen sekalian. / Itu ada direct GDI dapat tuh, bisa dipakai buat gimana ya?
Dapat, bisa, bisa. Iya, pakai Vortex ya. Bisa juga tuh. / Iya.
Ntar deh, nggak mau apply juga tuh. / Ya, ya, ya. Lumayan 500 dolar. Tergantung prom-nya betul, tergantung prom-nya, tergantung modelnya juga.
Saya juga ganti-ganti model, nggak pakai Sonnet doang, tapi sempat pakai OpenAI juga.
Jadi kalau misalkan di VS Code kan, misalkan kita buka apa ya? Misalkan kayak Readme lah ya.
Tuh, di sini ada Cloud, di sini ada AIDER, ada semua lah pokoknya ya.
Misalkan ini, kalau saya buka di sini kan, bisa pakai Sonnet atau 4.0.
Nah, kadang-kadang yang 4.0 lebih bagus, terutama untuk solving problem biasanya.
Tuh, kalau ada error ada apa, 4.0 lebih bagus dibandingkan Sonnet.
Kalau untuk generate code, biasanya saya pakai Sonnet dulu awalnya. / Ini kursor ya?
Bukan. / Apa nih? / VS Code. / Oh, VS Code.
Tapi side panelnya itu GitHub Copilot ya? / Iya, ini Copilot. Jadi Copilot itu, ini kok cuma tinggal satu ya?
Sebelumnya itu, dia ada dua sebenarnya. Ada Copilot Chat yang khusus buat nanya aja, ada Copilot Edit.
Nah, ini sebenarnya Edit nih. / Itu klik di bawah, di kanan bawah. / Oh ganti ya?
Iya, ganti UI. Dulu di sini. / Berkembang terus.
Kalau Edit itu dia otomatis nge-edit file-nya langsung. Kalau Ask itu dia nanya, cuma nanya aja.
Agent, ya agentik ya, agentik. Kok jadi ngomongin AI ya? Bukan ngomongin web-nya ya? / Ngomongin AI.
Ngomongin AI. Udah, iya tantangannya itu tadi ya. Tantangannya baru pertama kali konsumsi YouTube Data API,
terus ambil data playlist-nya, terus singkat database, terus juga file, kalau untuk podcast yang di Spotify kan butuh mp3.
Jadi ada proses konversi dari YouTube video ke audio.
Ini kalau nggak salah saya pakai YouTube DLP. Iya, DLP. Mana ya? YouTube, nah ini.
Ada nggak ya di sini? Nah, ini. Ini, terus... / Oh itu dijalani di dalam server-nya, server-site-nya.
Iya, jadi di Docker-nya juga ditambahin. Dia install GTDLP-nya dulu.
Terus dari sini nanti... / .ex itu apa sih? / Extract Audio.
Ini Extract Audio, jadi audio only. Nggak perlu videonya, terus audio formatnya mp3. / Oh bukan, maksudnya file-nya, file extension-nya.
Ada .ex. / .ex itu Elixir. Ada .ex, HTML, ini HTML. / Elixir. / Format HTML.
Kalau .ex.s itu script-nya. Jadi ini jalan di runtime, kalau ini di compile dulu. Yang .ex itu di compile dulu.
Kalau .ex.s itu yang jalan di runtime. Jadi dia ada dua tipe.
Biasanya untuk konfigurasi kebanyakan, sama untuk testing. Testing-nya juga menggunakan .exs.
Udah, dari sini dia download, taruh di satu folder lokal, abis itu ada perintah lagi yang upload ke S3.
Mana dia? Nggak ada ya? Ada kan? Upload.
Nah ini, upload audio. Yang ini-ini juga semuanya minta bantuan AI.
Jadi abis bikin ini, pasti in the jalan, udah fix baru minta AI lagi untuk bikinin dokumentasi.
Jadi Elixir itu bisa buat bikin API endpoint juga ya? / Bisa.
Oke. Aduh, ini kok ngaco banget sih. / Apaan?
Apa yang ngaco? / Sisi-sisi-sisi-situsnya. / Oh iya? Kenapa?
Hah? Nggak, normal kok. / Nggak, maksudnya di testing-testing-nya. / Oh testing.
Ya. Terus juga kemarin sempet mau implementasi view transition, tapi kayaknya AI-nya masih belum terlalu ngerti.
Tiba-tiba web-nya blank, kosong gitu. Jadi awalnya ada kayak nge-glitch gitu, tiba-tiba hilang. Akhirnya nggak jadi.
Terus juga performance belum dilihat sama sekali, belum diperhatikan sama sekali. Ini kalau kita mau nge-check performance-nya dimana?
Ya, yuk biar saya yang... / Silakan.
Yang bedah performa. / Lumayan kan? Dapat ini gratis kan? Performance Suggestion gratis kan?
Jadi kalau temen-temen punya website, boleh ya. Lumayan. Dapat konsultasi gratis dari pakar performance dan pakar UI.
Jadi masih baru ini ya. Baru desktop-nya aja ya.
Baru desktop, iya. / Kalau kayak... / Tampilannya gila ya?
Jelek. Kalau mobile-nya, mobile-nya jelek. / Kamu makanya di-merge.
Udah? Belum ya? / Belum. Sudah gua up-proceeding.
Belum di-merge. / Iya, tapi belum di-merge.
Tapi dia udah, si Elixir-CI-nya nge-build, tapi kayaknya buat brands yang terpisah. Nggak tahu setelannya gimana ini.
Ini udah di-approved kan? Merge pull request-nya? / Coba pull request-nya di-approved. Udah. / Udah? Ini udah?
Sudah gua approve. Tinggal di-merge.
Oh, dia ada dua ya. Buat Codespace juga ya.
Kayaknya itu kan CI-nya. CI-nya bikin deployment buat branch-nya sih. Jadi masing-masing branch, ada itunya sendiri nggak?
Kayaknya nggak. / Ini maksudnya kan sudah di-approved ya.
Sama nanti kita bikin supaya orang bisa main. Oh, sudah bikin dev container juga ya. Good, good, good.
Ini bagian dari yang ini nih. Di issues, coba klik issues. / Dev X? / Iya, saya lagi improve dev X-nya.
Salah satunya, Docker, Docker Compose karena ada database, dan juga dev container.
Teman-teman bisa langsung main nih. Langsung open kitabspace, langsung jalan tuh.
Tapi hati-hati ya. Bayar ya. Ada free tiernya. / Ada freenya sekian.
Jangan ditinggal jalan. / Gak apa-apa, dia otomatis mati kok kalau 5 menit atau 10 menit nggak di-open-in.
Dia... / Gak di-peduliin? Mati? / Iya, dia shut down sendiri kok. Jadi tenang aja. Mereka nggak sekejam itu.
Itu berarti kalau code space itu berarti personal ya? Ke account personal kita ya, ngambilnya?
Yes, yes, yes. Bukan ke mobile. Tiba-tiba ada billing gitu. Orang kita nggak masukin kata kredit.
Mungkin lah masukin kata kredit aja nggak. Nah itu berulang. / Oke, sekarang kita cek performance ya.
Jadi, biasanya saya cek performance itu nggak ke page speed dev, nggak ke GT matrix. / Jadi gimana caranya?
Saya langsung buka dev tool. Ini kita desktop aja ya, karena mobile-nya jelek.
Iya. Mobile-nya terlalu brutal. Ini juga jelek sih, banyak space. / Gak apa-apa. / Iya nggak penting.
Itu nggak apa-apa space. / Kalau terlalu lebar, malah capai nggak sih? Nanti kita bacanya. / Bukan horizontal space.
Apa? Horizontal yang atas ini, atas-bawah. / Kalau di mobile jelek sih kalau kegedean. / Iya, harusnya dikecilin ya.
Beda desain kali. / Jadi biasanya kalau saya main-main ya, sebelum buka, jadi ada performance type,
tapi sebelum kita kesana, saya biasanya cek-cek aja dulu, klik dulu, load, oh cepet. / Itu networknya di Throttle?
Iya, saya biasanya suka pakai fast 4G di Throttle. Jadi klik network, ada pro preset, atau mau nambah preset juga bisa,
nambah wifi juga bisa, segala macam. / Jangan lupa balikin abis ngecek, nanti bingung sendiri. Kenapa ya ini?
Tanya ke Slack kalian lambat nggak? Nggak, tahunnya kita lupa.
500 Error. / Yang suka saya lihat itu konsol, ada nggak JavaScript Error atau apa yang Error?
Set Manifest hilang? / Iya, maksudnya nggak ada Set Manifest.
Tapi ini Errornya internal server Error, bukan 404. Jadi kayaknya rewrite rule atau something happen.
Jadi tolong dicatat. Kalau saya sama junior, tolong dicatat.
Tanyain deh, jadi juniornya penting.
Terus cek dulu di network tab, klik, refresh, dilihat bawahnya, berapa banyak sih ininya, request-nya kecil banget ya?
Kita ngasih di bawah nggak ya? / Iya, kecil. Bisa di gedein nggak? Bisa di klik.
Di hitungnya, tombol plus aja, tombol plus, komen plus.
Klik di itunya, di panel ini.
Bawah ini kelihatan nggak ya? 1,49 byte ya? Karena ada 37 request total,
yang di transfer dari network 1,4 megabyte setelah di uncompres, unzip 1,5 mega, dan dem content loadednya selesai dalam 2,16 second.
- Oh ya tanya Elixir Phoenix, ini dia otomatis, apa sih kayak nge-build, kayak nge-compress, minify segala macem, itu di handle dia semua?
Jadi kayak minify-minify asset gitu udah include juga ya?
- Betul. Ada di docker file kok, ada ininya, komennya kelihatan.
- Aset, aset itu, aset compiler. / Yang kedua saya lihat, kok saya cuma lihat 2 image tapi yang di-download banyak banget image.
Sudah ada kan loading lazy, nah tolong dicatat.
- Kita semua jadi juniornya Ivan ini. - Oke, apa tadi? Yang pertama, site manifest, 500 error.
Terus yang kedua, image lazy load.
Ini, saya biasanya cek dulu ini, ada javascript kan, ada javascript, saya klik kanan, terus open in source panel.
Saya cari, saya hunt down dulu javascriptnya, load-nya gimana nih, saya cari di, bisa gak sih, dulu ada sih ini kayak goto element itu bisa, tapi sekarang gak.
- Goto source gitu atau apa? / Iya, nah, which is sudah good ya, sudah dipakai differ, jadi gak render blocking.
Good, thumbs up. Jadi sudah differ, kalau tadinya gak bisa differ atau asing, biasanya kalau gak butuh-butuh amat, ya di-diver aja, atau load di footer.
Kita kayaknya pernah bahas ini di episode apa gitu, yang soal pesen makanan. / Terus sudah ada skema data, thumbs up lagi, keren.
- Betul-betul ini sebuah di handle sama framework-nya sebetulnya kan ya, kayak termasuk apa, kayak hasilnya. Tapi berarti maksudnya itu framework cool stack yang bagus kan, maksudnya bukan cuma server, bukan cuma back-end, tapi front-end-nya juga dia beneran detail kan.
Terus, pakai Google phone dan Google phone-nya sudah di-preconnect, bagus, thumbs up. Dan sudah menambahkan display swap, jadi tidak ada phone blocking.
Phone-nya waktu nge-load typography, dia gak nge-blocking, nanti setelah phone-nya selesai di-download, di-swap. Good, thumbs up. / Ini AI, ini kerjaannya AI.
Tapi kan Mas Riza jadi supervisi, jadi thumbs up buat Mas Riza. / Kalau jelek, yang disalahin Mas Riza juga. Dan bagusnya emang display swap itu dari Google phone-nya kan emang ada, itu tuh yang kayak copyface-nya buat pikokas, emang sudah pakai itu. / Sudah ada ini.
Paking itu, jadi sudah best practice. Yang dapat display swap, berarti... / Tapi tidak semua orang melakukannya. Kadang ada yang pernah saya nemukan, dia gak pakai preconnect, jadi lebih lama aja untuk ngeresolve phone-nya.
Nah ini bukan orang yang bikin. / Good, good, nothing else. Oke, dari network. Oke, kecilan ya? / Kecil. / Oke. Dari network, biasanya saya lihat dulu ini, yang di sisi docs-nya gini kan.
Biasanya di ini, saya lihat timing. Ada timing, biasanya kalau... TTFB, bahasa simpelnya TTFB. / Time to? / Time to force buy.
Jadi bisa kelihatan, TTFB-nya bagus atau tidak. Dari setelah request send dan waiting. Jadi TTFB-nya, servernya Mas Riza itu 215 ms. Jadi which is, mantap.
Sebagai rule of thumb, 500 ms itu sudah yellow. / 500 itu yellow, Bu. / Ya, 400 ms itu batas akhir green.
Ya, batas akhir green lah ya. Jadi sebisa mungkin di bawah 500 ms. / Jadi misalkan di bawah 500 ms ini jadi yellow gitu, warnanya? / Nggak, itu kayak best practice TTFB aja.
Oh nggak ada ini ya. / Untuk ada di web.dev, ada web vital. Jadi TTFB itu ada range-nya good, yellow, sama worse. Jadi di atas 700 ms itu sudah.
Karena kalau udah TTFB-nya kelamaan, ya everything else lama. Oke, terus kita lihat. Yang lain saya lihat ini biasanya gini, saya tambahin lagi protocol.
Protocolnya H2. Berarti sudah HTTP2. Sebenarnya sudah ada HTTP3. Lebih bagus lagi kalau sudah bisa HTTP3.
Terus kita lihat lagi CSS. Sarah, CSS yang ini. CSS-nya sudah, apa namanya? CSS-nya sudah, oh ini sudah HTTP3. Lihat nih kalau yang gini.
Tapi dari ini dari YouTube pastinya kan. YouTube-nya sudah HTTP3, H3-nya. Nah, sekarang kan banyak request dari YouTube.
Dari I.YT.IMG ini kan. Tapi yang kita pre-connect, si YouTube itu nggak ada. Jadi saya bisa, tolong dicatat tambahin pre-connect dari I.YT.IMG itu.
Jadi lebih cepat lagi nanti kayak DNS prefix. Jadi sebelum semuanya didownload, dia sudah DNS prefix. Karena akan ketahuan.
Mending lazy load image-nya atau di-pre-connect. Lazy worker. Pre-connect domain-nya. Jadi di-warm dulu DNS-nya.
Jadi kelihatan nanti di timing. Ada DNS lookup kan, initial connection. Ya kan. Nah, lihat ini yang pertama ini.
Terlihat initial connection. Terus yang kedua sudah nggak ada. Lihat. Nah, kalau misalnya tadi kita warm, dia kayak, ini font, ini font dari Google.
Ini, sorry, ini, ya. Oke, font. Kalau kita misalnya dia sudah kita DNS prefix atau pre-connect, kita bisa menghilangkan DNS lookup ini. Sama initial connection.
Begitu. Jadi kita selanjutnya, image yang selanjutnya, kita sudah nge-cache. -Hanya sekali aja ya? -Ya, sudah open connection.
Oke, selanjutnya. Oke, baru kita ke performance tab. Ada performance tab di sini. Nah, di performance tab ini sebelum kita record,
ini dia bisa, kerennya yang baru adalah bisa kita lihat layout shift terjadi di mana. Interaction. Jadi kalau misalnya mau ENP,
tapi kalau saya klik-klik ini, kelihatan ya, dia ngerecord. Dan berapa millisecond. Jadi kalau misalnya terjadi apa namanya, banyak script yang membuat,
contohnya slider atau accordion, swipe, apa lagi, tab. Kalau pakai JavaScript yang heavy-heavy, kalau misalnya tab-nya diklik,
waktu-nya bisa lebih kayak contohnya, ini dibagi dengan refresh rate. Jadi kalau misalnya monitor kita itu 60 refresh rate,
yang mata kita bisa lihat kan 60 Hz. 60 fps. Dan itu sekitar 60 Hz ya. Betul ya? -Kurang lebih ya. -Betul ya.
Jadi saya lupa hitungannya, tetapi di bawah, saya lupa lagi, ENP itu kalau misalnya dia sudah nggak bagus,
nanti dia akan merah sendiri di sini. Kalau misalnya kliknya kelamaan. Jadi pengaruhnya di situ, kalau terjadi interaction,
misalnya kalau accordion dipencet dan kelamaan, dan itu membuat jadi feel lagging kan. Accordionnya diklik, kelamaan.
Dan user bakal ngeklik sekali lagi, terus nanti accordionnya buka, langsung tutup lagi. Itu annoying banget sih.
Betul. Nah, selanjutnya saya lihat layout shift. Wah, terjadi layout shift nih. -Ada ya? -Gak kelihatan kan?
Nah, kita bisa lihat nanti dimana layout shift-nya. Kita masuk ke, saya suka pakai CPU-nya, saya throttling ke empat kali aja.
Nggak usah yang heboh sampai enam kali kalau kayak Motorola G4. Jadi kalau misalnya record, saya record. -Record and restart, refresh.
Ya, dia providing. Jadi di sini kita bisa lihat FCP, first content full pane, last content full pane,
dan layout shift dan interaction to next pane. Nah, saya klik sidebar-nya. Di sini tuh timeline, di sini network request,
di sini main thread, nggak kelihatan ya. Saya gedein. Nah, di sini, saya ulang ya, network request, dari atas deh.
Ini kayak pane. -Loading page. -Ini pane, pane process nih. Jadi ada, kalau yang pink itu adalah CSS,
kalau gray itu idle, hijau itu image, kalau kuning itu JavaScript. Kalau yang merah-merah ini,
artinya blocking time. Dan istilahnya render blocking. -Main thread-nya lagi ke pane, berarti.
-Dan ada juga merah long-task. Nah, lebih tepatnya long-task. Yang merah-merah di atas ini long-task.
Lebih dari berapa? 50ms ya. Eh, berapa? -Dan di sini dia 400ms. Kelihatan ya, 400ms? -Ya. -Okay.
Saya kecilin dulu yang di bawah karena ini terlalu detail. Lihat ya, di bawah ada, saya gedein.
Ini bisa didrag bagian mana? Sets. -Untuk zoom ya? -Iya. Untuk, ini kan time frame ya. Time frame bisa di,
kalau saya pakai mouse-nya, ya, ini saya bilang bug aneh ini. -Iya, itu ya? Wills-nya? -Iya. -Bukan.
Nge-bug, si ininya nge-bug, nggak tahu kenapa. -Oh, di hilang ya? Harus di record lagi? -Ya udah lah, nggak apa-apa lah.
Tuh, somehow dia nge-bug, si Chrome-nya nge-bug. Anyway, saya pakai wheel, karena ada wheel kiri-kanan,
saya suka pakai wheel kiri-kanan itu buat geser-geser biasanya. -Zoom in, zoom out. Apa geser-gesernya?
-Zoom in ya. Something is wrong. Kayak mesin saya langsung panas deh. Kayaknya ada proses yang berjalan somehow.
-The memory leaking. -Iya. Oke, terus kita lihat ada fcp, lcp, dcl. Ini first content full pane, largest content full pane, don't content loaded, sama page load,
window.load, ini window.load event disini. Jadi, kalau pakai fast 4G, situsnya ini sekitar 4 second lah selesainya semuanya di-download.
Oke, kita bahas satu-satu. Kalau yang ada merah begini artinya render blocking. Jadi, yang pengen tahu lebih dalam tonton render blocking bisa baca
artikelnya Mas Ilya Grigorik tentang critical rendering path di chrome.dev. Ilya Grigorik critical rendering path, biar tahu apa maksudnya render blocking.
Dan css itu termasuk render blocking. Jadi, setelah page di-load, css di-download, jadi dia menemukan css dan dia harus download dulu css-nya dan
dia uncompress dulu dan dia parsing dulu sebelum melanjutkan semua proses yang lainnya. Dan itu ada reason-nya di behind itu. Jadi bacalah critical rendering path.
Dan sudah pernah kita bahas di salah satu episode kalau nggak salah. Oke, sekarang kita bahas sedikit mengenai lcp. Yang paling sering kan dari core web vital lcp, cls, dan imp.
Ini dia lcp, imp, dan cls. Nah, kita bahas ini dulu deh tadi yang saya bilang cls ya. Kita bisa lihat layout shift culprits. Kalau culprits itu bahasanya
jelik banget tapi ya, lucu sih. Culprits itu penyebab tersangka. Nah, kerennya si performance tab yang baru ini dia sudah bisa ngasih tau worst layout shift-nya itu terjadi di
detik ke 2,27 bagian ini. Nah, bisa di-hover, kelihatan nggak? - Terus kelihatan. - Tuh, kelihatan tuh. Dia jadi jif. Dia akan kejap-kejap.
- Oh, swap ini ya? Swap font? - Font display swap. Iya, betul. Font display swap jadi di sini. - Oh, font-nya kurang compatible ya? Kurang apa?
- Ya, mungkin bisa cari yang namanya nanti font... - Ada tools-nya kan yang kita kena bahas. - Iya, tools-nya untuk kalau pakai font X ini,
berapa kerning gun spacing, letter spacing yang harus kita gunakan supaya tidak terjadi layout shift. - Kayaknya di Google Docs kita ada deh, tapi somewhere malas nyari.
- Tapi ini juga nggak terlalu... - Nanti di salah satu video. - Masih hijau kan? - Iya, masih hijau. Betul. Nah, terus kita bahas LCP.
Karena itulah yang paling sering digembar-gemburkan para ahli expert di bidang performance lah biasanya.
Oke, LCP-nya kita pengen tahu. LCP itu nggak selalu sama di semua device. LCP itu bisa jadi di desktop berbeda, di mobile berbeda,
dan misalnya sama-sama artikel page. Bisa jadi saat LCP-nya itu title, bisa jadi image, atau bisa jadi video. Jadi tergantung. Tergantung kondisi.
Selama page-nya loading, LCP itu bisa berubah-ubah. Jadi sebisa mungkin LCP-nya itu dari sisi desain, kita sudah menentukan, oh kita mau bagian inilah menjadi LCP. Jadi kita bisa optimize lebih pasti.
- Untuk menentukan LCP. - Bisa mencana algoritma Lighthouse menentukan. Ternyata LCP-nya malah teksi yang dinamik.
Iya, sudah capek-capek dibikin image-nya kecil. Ternyata ya LCP-nya, titlenya yang segeri gaban.
Untuk mengetahui LCP bisa ada banyak. LCP-by-face, LCP-by-request ini, Render Blocking Request, Network... Ini mempengaruhi semua LCP.
Pertama kita lihat LCP-by-face. Kita pengen tahu LCP-nya apa sih gitu ya. Kita bisa klik di LCP ini.
Largest Contentful Paint. Ternyata image yang ada senyumannya Eka tuh yang jadi LCP.
Nah, kita cari tahu bagaimana cara kita ingin memundurkan si LCP ini. Tentunya kan kita lihat ya dari sisi request.
LCP itu yang ada senyumnya Eka. Mungkin yang ini kali ya. Yang ini. Ya, yang ini. Kita lihat dia request-nya telat.
Ya, dia request-nya telat. Dia harusnya, kalau kita ingin dia lebih cepat dan LCP-nya turun, tentunya dia harus di sebelah kiri ya.
Setelah browser ngelihat, dia harus di-party dan segera di-download. Jadi LCP-by-face bisa kelihatan.
LCP ini dipengaruhi time to first byte. Jadi ada 900 milliseconds sebelum LCP-nya ditemukan.
Resource load delay. Karena ada parsing-parsing segala macam, 60 milliseconds cepet lah. Jadi nggak usah terlalu di pikirin amat.
Nah, masih ada resource load duration dan render delay. Ini yang bisa kita optimize. TTFB-nya bisa kita optimize.
Resource load duration-nya bisa kita optimize dan render delay bisa kita optimize. Caranya ya itu.
Pertama bisa pakai, kalau kita sudah tahu dua ini yang kita mau benerin, kita bisa pertama membuatin dua ini loading.
Bukan lazy load, jangan pasang lazy load karena justru harus cepat ya. Jadi LCP-by-discovery kita bisa lihat di sini.
Kita perlu menambahkan fetch priority high dan jangan di-lazy load. Itu akan membuat LCP bisa lebih cepat lagi.
Oh iya, ini pengalaman pribadi juga ngomong-ngomong fetch priority high. Kalau web ini sih, karena web personal dan semua di satu halaman,
ya udahlah ya, nggak bakal kenapa-napa. Kalau kalian web-nya component-based, misalnya banner, terus dikasih fetch priority high
karena ya itu ada keperluan buat LCP atau semacamnya, jangan lupa tinggalin notes atau dokumentasikan somewhere.
Kalau suatu hari ada rombak layout, taunya banner itu yang tadinya di atas turunin ke bawah karena yang atas adalah lainnya,
itu nanti malah bikin buyar semua LCP dan lain-lain karena fetch priority high-nya padahal yang below default pengalaman pribadi.
Nah, sudah waktunya. Kita lanjut. Mau? Karena saya mau bagikan satu tips yang bisa membuat ini jadi lebih baik. Langsung.
Wih, mahal ini. Ini ilmunya mahal ini. Dari tadi ini harus diperhatikan ya. Kita bisa klik kanan di dokumen, klik kanan, overwrite content.
Oh, ini yang kemarin dibagi ya? Ya, saya sudah pernah set up sebentar. Saya harus ganti dulu ya. Sebentar-sebentar. Karena kelihatan semua.
Ganti ke desktop ya? Ganti ke Chrome aja? Bukan. Ini konten-konten yang saya tidak mau tunjukin harus dihapus dulu.
Hmm. Ya, ya, ya. Sebentar, sebentar.
Eh ini copyright ya? Udah jangan lama-lama sih. Sebentar, saya ganti dulu posisi. Ini aja, jadi nggak copyright.
Tung, copyright, tung. Jadi nggak konsen, Ivan. Malah yang ditampilin, yang rahasia, yang dihilangin, yang mau ditunjukin.
Kebalik ya. Kita sambil baca komentar dulu ya. Mantap, iya mantap. Ini mahal nih. Topik malam ini ilmunya mahal. Jadi harus dicatat ya.
Maaf lahir batin. Jangan lupa mengundang-undang. Eh makasih ada gue di TRI ya nggak?
Sob-sodara, kemarin di studio Sob-sodara. Pengen Sob-sodara.
Sob-sodara, tolong dicatat. Iya, ilmu malam ini luar biasa mahal. Jadi tolong dicatat ya, teman-teman ya.
Jadi kita bisa dari network klik kanan, overwrite konten, dan kita bisa langsung overwrite index HTML-nya.
Jadi yang tadi kita mau lakukan apa tadi? Contohnya kita mau pre-fetch. Pre-connect.
Kita mau, pre-connect itu base domain-nya aja, maksudnya semua yang di dalam domain itu otomatis udah warm. Udah anget. Ya betul. Kita bisa tambahin di header ya.
Link, pre-connect, yang sama. Tapi beda domain-nya doang.
Iya, oke. Lalu yang kita bisa langsung save, dan yang ini kita bisa edit. Fetch Priority.
Fetch Priority. Hi. Hi. Loading. Eager.
Oke. Kalau kita ganti disitu, disini juga harusnya berubah. Mana dia? Oh, salah ya. Bawah lagi, bawah. Bawah lagi.
Epsiode berapa itu? Epsiode satu. Epsiode satu. Bukan. Epsiode berapa ya? Design pattern. Cari aja design pattern. Nggak bisa pukain ya.
Kenapa nggak konek ya? Harusnya diubah. Harusnya diubah yang di dalam source. Kita ganti aja sini. Fetch Priority. Hi.
Terus kita bisa loading Eager. Eager. Terus, itu kan ada image yang kedua tuh. Satu lagi. Iya satu lagi.
Kiri-kanan-kanan yang memang di atas. Dua itu. Above default ya. Dan yang lain kita bisa buat loading Lazy. Lazy. Tapi banyak banget. Harus copy paste semua.
Udah sisanya diapus aja dulu. Bisa. Bisa. Ya bisa sih. Contohnya. Sudah, nggak usah semua. Save. Terus kita. Harus di-save ya? Control + S gitu?
Iya. Control + S atau Cmd + S. Terus kalau di-refresh. Oh oke. CSS-nya ilang. CSS-nya ilang. Karena CSS-nya.
Kena Lazy lho. Nggak. Kena. Bukan. CSS-nya. Error. Itu ada error tuh. JavaScript-nya.
Karena. Not found. Wait. Kenapa not found? Oh karena saya tadi ganti ya. Ganti. Karena itu ya. Cache ya. Karena baru push.
Karena baru di deploy ya? Kayaknya iya. Baru selesai deploy. Refresh dulu. Oh iya tau. Barusan banget berubah nih.
Saya ganti begini caranya. Di-enable-nya dimatiin dulu. Terus. Oh baru di. Ini diambil. Copy URL. Terus di. Mana si script-nya ini ya?
Itu. Atas. Atasnya. CSS. Oh JS. CSS-nya juga kayak gini ya? Iya. CSS juga berubah. Iya. Tadi CSS-nya juga. Itu JS ya.
Oh atasnya. Kebetulan karena saya, eh karena berubah di tengah jalan saat demo. Ini kalau demo tuh ada aja. Ada aja. Terus enable.
Udah. Enable lagi. Kalau kita load. Tadah. Kita langsung. Check lagi. Berubahannya. Kita bisa kesini. Dan record.
Oh di record pun yang kalau dari versi HTML markup lokal. Dari yang sudah di overwrite. Betul. Wah cantik. Si dia jadi. Wow. Di depan.
Iya tadinya kan nunggu apa nunggu ke blocker sih. Karena saya nggak hapus ya. Kalau nggak hapus kan. Ini kan kalau kita mau hapus semua. Kita bisa bandingin dari. Oh dari yang sebelumnya.
Kan ada nih garisnya. Iya kan. Ya. Sedangkan kalau yang. Dia blocking dulu ya. Yang baru. Sudah tidak ada garisnya. Karena fetch priority high. Dan lcp-nya meningkat tajam tuh.
Turun. Dua dari ya. 2,13 ya. Bekurang lah. Jadi 1,7. Nah. Karena kita loading lazy. Sebagian tadi ya. Sebagian besar. Jadi lebih cepat lagi. Ya. Yang ini saya males.
Tetapi yang ini kelihatan ya. Yang itu ya. Jadi belakangan. Nggak perlu di download gitu ceritanya. Ya seperti itulah demo singkat saya. Luar biasa. Tolong dicatat.
Tolong dicatat. Tolong diperbaiki. Klien besok minta ini udah live ya. Tolong.
Udah live. Jadi dari tadi juga udah live. Makanya yang di production. By the way fix ini cuma di local overrides nya ya. Jadi yang saya lakukan sebelum saya push kodenya.
Karena commit segala macam. Itu saya testing nya itu pakai local override aja dulu. Handler nya saya roba. Local override. Kalau kira-kira hasil lendernya seperti apa yang saya mau.
Yang bisa bikin cepat. Nah. Kalau sudah dapat pattern nya. Barulah dipindahin ke kode. Kode aslinya. Yes. Oke. Mantap.
Episode isinya ada geng semua. Nggak lah. Harus ada tulangnya lah. Harus ada geng semua.
Berarti pull request harus nambah nih dari saya nanti nih. Harus belajar lagi seer. Itu dia. Sambil-sambil.
Nggak lah. Gue ngapain jalanin lokal di code space aja entar. Sekalian. Sekalian perbaiki ritminya. Kalau ada yang mau cobain jalan di lokal.
Kalau ada. Ya. Kalau temen-temen juga mau ikutan. Emang code space bisa jalanin elixir juga? Kan dia pakai docker. Kuat nggak ya tapi ya.
Jebul. Kalau yang free. Yang free kuat nggak ya? Iya. Only one way to find out kan. Ya berarti dicoba aja.
Kuat-kuat-kuat. Saya pakai yang dua core untuk WordPress bisa kok. Kuat ya. Kan pas key nya saya harus pakai WordPress kan.
Dan install dockernya WordPress, database main skill segala macam. Bisa. Docker bisa kok. Meman ya. WordPress sama elixir beratnya.
WordPress sama elixir emang setara ya beratnya. Kan ada pose gray nya juga kan ini. Ada pose gray ya. Betul.
Ya sama lah. Kurang lebih ya. Nah tadi kan baru LCP ya. Masih ada INP. Masih ada CLS. Paling nanti jadi episode saya di Google IO.
Kasih. Episode contoh palu basah sama sop saudara. Asli. Bisa nih. Apalagi dari sekarang bisa nggak nih? Kita dibolehin kemakasan nggak nih Mas Dito?
Ada budget nggak? Ada budget nggak? Tanyaannya bukan Dito lah. Mas Denang lah. Kita bersikap itu yang apply ke Medan.
Apply ke Medan direject karena nggak bisa menerima speaker dari luar Medan. Kok bisa ya? Nggak tahu.
Mungkin untuk yang built with AI mungkin berbeda. Budgetnya. Kalau Google IO beda lagi kan.
Kan kalau BWAI kita bisa bikin sendiri kata Mas Riza.
Iya bisa kalau mau. Ini tadi perubahannya. Tergantung kalian gimana. Ini perubahannya tadi dari Eka ya. Ini ya. Yang naikin ke atas ini ya.
Coba kecilin deh. Cukup kan. Oke. Begitulah untuk malam ini. Cukup lah ya. Cukup.
Sudah banyak ilmu yang dibagikan terutama performans belajar banyak sih. Jadi teman-teman juga mudah-mudahan belajar banyak.
Sebelum kita udahan, seperti biasa kita mau pilih topik buat minggu depan. Kira-kira kita mau bahas apa.
Ada di discussion. Topiknya apa. Dokumentasi. Semantik versi ini. Buku.
Csp. Csp mana sih. Csp apa aja gue lupa. Astro bukannya udah ya kita ya?
Iya. Udah ya. Kita close aja ya. Eh lupa udah belum sih. Astro lima. Kayaknya udah deh. CLA.
Eh tapi belum bahas astro lima. Pas itu malah yang baru adalah astro empat. Cuma gak bisa habis-habis kayak gitu ya.
Yang gak usah di close ya. Biarin aja. Oh iya sama ini. Kemarin baru ubah episode sembilan lima.
Salah. Beda ya. Beda nomor episode ya. Sembilan enam berarti. Sembilan enam.
Enggak juga. Sembilan empat. Salah ya. Wah beda ini ya. Beda cara perhitungan.
Soalnya kan gak bisa. Soalnya gak bisa ini berdasarkan jumlah dari yang ada di playlist.
Kan gak ada nomornya kalau di Youtube playlist kan gak ada nomornya.
Tadi kita mau bahas apa nih? Yang security ya? Bukan? Coba balikin lagi yang activity ya.
Yang ini mau bahas browser policy. Ya dipolling aja browser policy atau bentar apa ya.
Ionic framework ini dari dulu cuma gak ada yang belum dapet bintang tam. Belum dapet vote ya.
CLI design? CLI design itu apa sih? Ya boleh masukin juga. Boleh yaudah antara dua itu voting apa.
Oke sebentar sebentar. Itu voting CLI design dong. Tolong pencetin.
Huh? CLI design. Pencet disini? Oh enggak gak bisa. Di Youtube. Kok lambat ya Youtube-nya.
Kok gak bisa? Tergantung beliau. Ini ditunggu episode-nya. Oh episode untuk performance lagi.
Nanti di Google I/O masing-masing daerah. Expanded. Iya.
Nanti saya mau bawa performance. Ini Dui ini dari daerah mana? Ikutan GDG apa nih kalau boleh tahu?
Wah Youtube-nya ini loh. Gak bisa dibuka. Gak bisa buka Youtube. Tuh. Kenapa gitu? Muter-muter.
Palu? Wow. Jauh ya. Lumayan ya. Kalau Palu GDG terdekat itu Makasar bukan? Makasar. Yang luar pulau itu cuma ada di mana sih?
Buka-buka Youtube-nya. Iya kayaknya. Coba buka browser lainnya. Palu, Palu Basah. Palu dan Palu Basah.
Palu Basah. Dekat Manado. Oh di atas ya. Di bagian atas ya. Manado. Coba kita buka Youtube disini.
Biasanya disebelahnya Ray. Hah? Jadi sebelum Ray kan ada Do. Please stay. Bahasan buat minggu depan. Tadi apa?
CLI Design. Browser. Eh CSB apaan? Content Security Policy ya browser. Browser Security. Apa lagi? Satu lagi. Cukup. Dua itu aja.
Buku. Buku Broking Algorithm. Buku. Bedah Buku. Start Polling. Kita punya waktu tiga menit. Dua menit. Tiga menit.
Tiga menit. Silahkan CLI Design atau Browser Security. Wah CLI Design. Jokes bapak-bapak. Oh iya selalu.
Ini apa? Bedah Buku ya. Wah kalian saling kenal. Kenal lah ya satu komunitas kan ya harusnya ya.
Browser Security. Bedah Buku 14%. CLI Design 29%. Gimana cara polling ya? Oh iya bikin polling gak bisa. Gak bisa itu ya. Gak bisa mencek polling ya.
Gak bisa. Iya gak bisa. Emang kalo KPU, anggota KPU gak boleh milih ya? Ya kalo di channel Youtube-nya KPU. Itu kan beda. Kalo pemilihnya KPU polling Youtube gak bisa.
Ayo kita tunggu sampe 21-20. Teman-teman Pak Lu apa kabar? Dui Funksi. Nama panjangnya Dui Funksi. Itu namanya Fullstack. Funksinya banyak.
Developer Dui Funksi. Developer Fullstack sebenernya ya. Ada yang kalo function itu super function ya. Satu function bisa handle banyak hal.
Bukannya gak boleh ya? Apa sih namanya? Boleh. Tidak disarankan. Kan bukan function ini. Bukan function development. Eh function bukan pattern. Jadi semuanya satu function.
Apa kan python begitu? Satu function main. Tapi jalanin semua. Boleh boleh boleh. Semua juga gitu kan ya?
Semua yang singletone juga. Semua kan dalam satu singletone. Satu objek. Iya sih. Gak ada yang ngelarang juga. Satu menit lagi. Ayo silahkan. Sembilan vote.
Masa cuma 9 orang? Kita yang nonton berapa nih? 11. Oh 11. Kalau gak login bisa nge-vote gak sih? Gak bisa ya? Gak bisa kayaknya.
Coba pake akun lain. Akun kloningan. Akun kloningan. Browser security gas. Browser security kayaknya yang menang nih. 56%.
Berat. Yang gue paling enak itu yang menang. Kita belajar dulu berarti ntar. Ini apa sih? Di thread-nya ada penjelasannya gak? Skopnya apa?
Enggak. Ini kan Ivan yang suggest kan? Iya kita lagi di tengah-tengah ngomong ngebahas sesuatu. Terus biar gak ke sidetrack kayak masukin aja di topic kita bahas besok-besok.
Cuma bahas suatunya itu exactly apa lupa pas yang bahas osint itu security. Oh harus nonton lagi kan videonya. Berapa sih topiknya di github? Satu.
Oh ada nih keterangannya CORS, CORP, COOP. Oh bahas course ya. Bahas course, corp, COOP sama co-app. Yang ini nih. Browser security. Iya bahas tentang fungsi course itu apa.
Terus yang kita tau kan kebanyakan course kan. Yang ini ternyata ada banyak lagi yang lain. Boleh lah. Bukan gak semuanya harus yang kita sharing.
Kita harus belajar bersama juga kan ceritanya. Yes betul. Udah lewat 2-1 ya. Kita tutup ya. Jadi pemenangnya adalah browser security untuk minggu depan.
Minggu depannya lagi mungkin CLI design. 40%. Langsung gitu aja kali ya. Dari pada kita polling lagi.
Oh biar gak tiap episode polling ya. Boleh, boleh. Iya. Oke kalau gitu. Untuk malam ini kita cukupkan sampai di sini. Terima kasih banyak buat semuanya.
Terima kasih banyak juga buat Ivan yang sudah memberikan ilmu mahalnya. Luar biasa. Kita belajar performance malam hari ini.
Sebenarnya tau teorinya sebenarnya tau. Cuman panel performance itu sendiri udah kayaknya overwhelming banget ya.
Banyak banget item-itemnya. Kalau mau belajar itu kayak belum-belum udah takut duluan.
Dilihat karena udah kebiasa kan. Kalau Ivan mau udah biasa, udah sehari-hari. Iya. Konsepnya sama-sama. Konsepnya sama-sama apa? Konsepnya dari tulisnya yang berkembang.
Justru tulisnya yang berkembang. Kalau tambah helpful ya. Tambah helpful tapi karena belum pernah pake gak familiar.
Kalau tadi sih semua sinteksnya, kodingnya sih ya biasanya emang udah tau caranya bikin kayak gitu. Cuman ya selama ini gak pernah pake performance panel
buat nunjukin dan ngejelasin aja. Keuntungannya di satu tim run-end cuma satu, udah semua langsung percaya gak usah ngejelasin apa-apa.
Perlu pake lighthouse C-I gak? Buat presentasi ke client, iya pake itu. Cuma untuk nge-debug, untuk ngejelasin, ya pake performance panel.
Kan kalau ke client kan masih butuh score. Kalau di performance panel kan gak ada scoring. Nggak ada score.
Hanya untuk nge-debug. Performance panel itu buat nge-debug.
Oke, oke. Yaudah kalau begitu. Kita pamit. Selamat malam. Selamat istirahat. Sampai jumpa minggu depan. Bye bye.
Deskripsi asli dari YouTube
Kali ini, kita akan membedah situs baru, terutama seputar performa web. Mulai dari Core Web Vitals (LCP, CLS, INP) hingga tips praktis untuk mengoptimalkan kecepatan dan pengalaman pengguna! ⚡️📊 📌 Apa yang akan kamu pelajari? ✅ Mengenal LCP (Largest Contentful Paint ) dan cara mempercepatnya dengan teknik seperti Fetch Priority . ✅ Pentingnya memantau JavaScript error dan cara men-debug menggunakan konsol browser 🛠️. ✅ Tips optimasi TTFB (Time to First Byte ), lazy loading gambar, dan pre-co Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
1 Nov 2023
Ngoding di browser
Episode ini kedatangan seorang developer advocate dari AWS, dan pertanyaan pembukanya membumi: masih menjalankan lingkun...
14 Des 2022
Ngobrolin Testing
Riza, Ivan, dan Eka membahas testing — atau pengujian, istilah yang diakui masih terasa asing di telinga. Definisinya se...
3 Des 2025
Ngobrolin Gemini 3
Episode 158 ini membahas tentang Gemini 3, model AI terbaru dari Google yang dirilis beberapa minggu sebelumnya. Pembawa...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .