Tingkatkan Performa Website dengan Bantuan DevTools DevTools dapat digunakan untuk meningkatkan performa website dengan melakukan audit kinerja menggunakan Lighthouse, memperbaiki render-blocking JavaScript, mengoptimalkan gambar, menghapus kode tidak terpakai, dan mengaktifkan kompresi Gzip. Hal ini dapat meningkatkan pengalaman pengguna dan konversi dengan mempercepat waktu muat halaman.

1. Tingkatkan Performa Website
dengan Bantuan DevTools
Nasrul Gunawan
Software Engineer - Nutrifood Indonesia
Pembuat: Panuwat Sikham | Kredit: Getty Images/iStockphoto

3. Apakah performa itu
penting?

4. Performa adalah tentang
mempertahankan pengguna.
01
Performa adalah tentang user
experience.
03
Performa adalah tentang
people.
04
Performa adalah tentang
meningkatkan konversi.
02

5. Performa adalah tentang mempertahankan
pengguna.
01
800ms
COOK reduced
average page load
time by
7%
Increased
conversions by
7%
Decreased bounce
rates by
10%
Increased pages
per session by
40%
Pinterest reduced
perceived wait
times by
15%
Increased search
engine traffic and
sign-ups by
1)*
The BCC found they lost an additional
10%of users for every additional
second their site took to load. 2)*
3)*
1) https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7
2) https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale
3) https://www.nccgroup.trust/globalassets/resources/uk/case-studies/web-performance/cook-case-study.pdf

6. 02
AutoAnything reduced page load time by half, they saw
a boost of 12%to 13%in sales.
1) https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-conversion-and-sales-autoanything/
Performa adalah tentang meningkatkan konversi.
Situs lambat berdampak negatif pada pendapatan, dan situs cepat terbukti
meningkatkan rasio konversi.

7. 03
Sebuah studi konsumen yang dilakukan ericsson.com menunjukkan bahwa
respons stres terhadap penundaan dalam kecepatan seluler mirip dengan
saat menonton film horor atau memecahkan masalah matematika, dan lebih
besar daripada menunggu di antrean pembayaran di toko ritel.
Performa adalah tentang user experience.
“When it comes to user experience, speed matters”

8. 04
Performa adalah tentang people.
Situs dan aplikasi yang memiliki performa buruk dapat menimbulkan kerugian nyata
bagi orang yang menggunakannya.

9. Kenapa website lemot/lambat?
Performa Server
Tidak Optimal
Ukuran gambar yang
besar
Banyak redirect dan
http request
Load assets yang
tidak dibutuhkan
...

10. Bagaimana cara meningkatkan
performa dengan bantuan DevTools?

11. Fitur DevTools yang dapat digunakan..
Lighthouse
Coverage
Network
Performance

12. Lighthouse
Lighthouse is an open-source,
automated tool for improving the
performance, quality, and correctness
of your web apps.

13. Lighthouse di Chrome versi terbaru
● Ekstensi Browser
(Chrome/Firefox)
● Lighthouse CLI
● web.dev/measure
● PageSpeed Insights

14. Hasil audit

15. Before After
Skor Performa Lighthouse naik
66 poin

16. Metriks Performa Lighthouse Terbaru
First Contentful Paint
Mengukur waktu yang dibutuhkan
browser untuk merender bagian
pertama konten DOM setelah
pengguna membuka halaman
website.
Speed Index
Mengukur seberapa cepat konten
ditampilkan secara visual selama
pemuatan halaman.
Largest Contentful Paint
Mengukur saat elemen konten
terbesar di viewport dirender ke
layar. Ini mendekati saat konten
utama halaman dapat dilihat oleh
pengguna.
Time to Interactive
Mengukur berapa lama halaman
menjadi interaktif sepenuhnya.
Total Blocking Time
Mengukur jumlah total waktu
antara First Contentful Paint
(FCP) dan Time to Interactive
(TTI).
Cumulative Layout Shift
Indikator yang mengukur
seberapa banyak perubahan
layout halaman website yang
terjadi saat dimuat.

17. Meningkatkan performa
Optimasi Gambar
● Serve Responsive Images
○ Gunakan srcset
○ Gunakan media queries
● Optimasi kompresi gambar
● Gunakan gambar dengan next-gen format
● Gunakan Lazy Loading
● Icon? SVG atau Font?

18. Gunakan srcset
Agar ukuran gambar yang ditampilkan dapat menyesuaikan
sesuai lebar layar yang telah ditentukan

19. Gunakan media queries untuk background images

20. Gunakan gambar dengan next-gen format
Sumber: https://youtu.be/8VoCua-dEu0
● YouTube menghasilkan
pemuatan halaman 10% lebih
cepat setelah beralih ke
thumbnail WebP.
● Facebook mengalami
penghematan ukuran file
25-35% untuk JPEG dan 80%
penghematan ukuran file
untuk PNG ketika mereka
beralih menggunakan WebP.
Sumber: https://web.dev/serve-images-webp/

21. Gunakan Lazy Loading
1. Level Browser
https://web.dev/browser-level-image-lazy-loading/

22. Gunakan Lazy Loading
1. Lazy Load-Level Browser (Browser Support)

23. Gunakan Lazy Loading
2. Plugin/library LazySizes
lazysizes is the most popular library for lazy-loading images. It is a script that intelligently loads images
as the user moves through the page and prioritizes images that the user will encounter soon.
<- Tambahkan script lazysizes
<- Tambahkan class=”lazyload”

24. Gunakan Lazy Loading
https://web.dev/browser-level-image-lazy-loading/

25. Gunakan Lazy Loading
2. Lazy load Carousel/Image Slider
a. Slick Carousel b. Owl Carousel

26. Hapus kode yang tidak digunakan dan hapus
library yang tidak dibutuhkan

27. Minify dan gabungkan file-file assets

28. Fix render-blocking
Javascript Load Parse Execute
Proses load javascript
1. Gunakan library loadCSS untuk load CSS secara asynchronous
2. Three Levels of Goodness (Tiga teknik untuk mengoptimalkan kinerja situs web dengan memuat JavaScript
selambat mungkin)*
Solusi
Good
Don't let scripts
block content
Better
Use async and defer
attributes
Extreme
Load scripts last
*Google Chrome Developers

29. Fix render-blocking
Good
Don't let scripts
block content
Better
Use async and defer
attributes
Extreme
Load scripts last

30. Fix render-blocking
Good
Don't let scripts
block content
Better
Use async and defer
attributes
Extreme
Load scripts last
https://www.josefzacek.cz/

31. Fix render-blocking
Good
Don't let scripts
block content
Better
Use async and defer
attributes
Extreme
Load scripts last
1. With JQuery
2. Without JQuery

32. Enable Kompresi Gzip/Brotli
Gzip Brotli
● Enable via Web Server (Nginx/Apache)
● Enable menggunakan plugin/library
● Cloudflare

33. Cek Gzip dan Brotli
Akses: https://www.giftofspeed.com/gzip-test/

34. Rekap
● Penyebab Website lambat
○ Performa server yang tidak optimal
○ Menggunakan gambar ukuran besar
○ Banyak redirect dan http request
○ Banyak menggunakan assets/library yang tidak
digunakan dan dibutuhkan

35. Rekap
● Tools yang dapat digunakan untuk cek dan optimasi website
○ DevTools
■ Lighthouse
■ CSS/JS Coverage
■ Network Tab
■ Performance Tab
○ Cloudflare
○ https://www.giftofspeed.com/gzip-test/

36. Rekap
● Improve performa website
○ Optimasi gambar
○ Hapus kode/assets/library yang tidak digunakan/dibutuhkan
○ Minify dan gabungkan file-file asset
○ Enable kompresi Gzip/Brotli
○ Jalankan aplikasi dengan mode production

37. Pelajari lebih jauh tentang performa
website di..
● https://web.dev
● Google Chrome Developers
● https://www.youtube.com/watch?v=vgUJuqQO4fo&list=PLNYkxO
F6rcICVl6Vb-AFlw81bQLuv6a_P
● https://www.crazyegg.com/blog/speed-up-your-website/
● https://www.thinkwithgoogle.com/marketing-resources/data-me
asurement/mobile-page-speed-new-industry-benchmarks/

38. Nasrul Gunawan
Software Engineer at Nutrifood Indonesia
Surel: search.nasrul@gmail.com
IG: @nasrul.gunawan
Terima Kasih