Nimble Konferansı - 21.08.2021 Social Media: Twitter: https://twitter.com/0guzKilic Medium: https://oguzkilic.medium.com Linkedin: https://www.linkedin.com/in/oguzzkilic Sources: https://web.dev/cls https://web.dev/fid https://web.dev/cls https://docs.sentry.io/product/performance https://github.com/GoogleChrome/lighthouse-ci https://developers.google.com/web/tools/chrome-user-experience-report https://vercel.com/analytics

1. Oğuz Kılıç
Software Architect - eBay/GittiGidiyor
Twitter, Medium, Linkedin
21.08.2021 / Nimble Conf

2. Web Vitals
Web deneyimini iyileştirmek için temel metrikler
26
1

3. Metrics
2
26

4. Loading
Largest Contentful Paint (LCP)
3
26

5. Loading
Largest Contentful Paint (LCP)
source: tezify.com
4
26

6. Loading
Largest Contentful Paint (LCP)
Kritik olmayan stillerinizi elimine edin.
Nasıl iyileştirebiliriz?
5
26

7. Loading
Largest Contentful Paint (LCP)
Kritik olmayan stillerinizi elimine edin.
JavaScript boyutunuzu küçültün ve sıkıştırın.
Nasıl iyileştirebiliriz?
6
26

8. Loading
Largest Contentful Paint (LCP)
Kritik olmayan stillerinizi elimine edin.
JavaScript boyutunuzu küçültün ve sıkıştırın.
Sunucu yanıt sürelerinizi iyileştirin.
Nasıl iyileştirebiliriz?
7
26

9. Loading
Largest Contentful Paint (LCP)
Kritik olmayan stillerinizi elimine edin.
JavaScript boyutunuzu küçültün ve sıkıştırın.
Sunucu yanıt sürelerinizi iyileştirin.
Modern resim formatlarını tercih edin. (webp)
Nasıl iyileştirebiliriz?
8
26

10. Loading
Largest Contentful Paint (LCP)
Kritik olmayan stillerinizi elimine edin.
JavaScript boyutunuzu küçültün ve sıkıştırın.
Sunucu yanıt sürelerinizi iyileştirin.
Modern resim formatlarını tercih edin. (webp)
Above the fold içerisinde CSR yapmaktan kaçının.
Nasıl iyileştirebiliriz?
9
26

11. Loading
Largest Contentful Paint (LCP)
Kritik olmayan stillerinizi elimine edin.
JavaScript boyutunuzu küçültün ve sıkıştırın.
Sunucu yanıt sürelerinizi iyileştirin.
Modern resim formatlarını tercih edin. (webp)
Above the fold içerisinde CSR yapmaktan kaçının.
Preconnect, Dns-Prefetch gibi yöntemlerden faydalanın.
Nasıl iyileştirebiliriz?
10
26

12. Loading
Largest Contentful Paint (LCP)
Kritik olmayan stillerinizi elimine edin.
JavaScript boyutunuzu küçültün ve sıkıştırın.
Sunucu yanıt sürelerinizi iyileştirin.
Modern resim formatlarını tercih edin. (webp)
Above the fold içerisinde CSR yapmaktan kaçının.
Preconnect, Dns-Prefetch gibi yöntemlerden faydalanın.
Kaynaklarınızı kullanıcı ağ kalitesine göre uyarlayın.
Nasıl iyileştirebiliriz?
11
26

13. Loading
Largest Contentful Paint (LCP)
Kritik olmayan stillerinizi elimine edin.
JavaScript boyutunuzu küçültün ve sıkıştırın.
Sunucu yanıt sürelerinizi iyileştirin.
Modern resim formatlarını tercih edin. (webp)
Above the fold içerisinde CSR yapmaktan kaçının.
Preconnect, Dns-Prefetch gibi yöntemlerden faydalanın.
Kaynaklarınızı kullanıcı ağ kalitesine göre uyarlayın.
Service-Worker ile ön bellek stratejileri oluşturun.
Nasıl iyileştirebiliriz?
12
26

14. Loading
Largest Contentful Paint (LCP)
Kritik olmayan stillerinizi elimine edin.
JavaScript boyutunuzu küçültün ve sıkıştırın.
Sunucu yanıt sürelerinizi iyileştirin.
Modern resim formatlarını tercih edin. (webp)
Above the fold içerisinde CSR yapmaktan kaçının.
Preconnect, Dns-Prefetch gibi yöntemlerden faydalanın.
Kaynaklarınızı kullanıcı ağ kalitesine göre uyarlayın.
Service-Worker ile ön bellek stratejileri oluşturun.
Nasıl iyileştirebiliriz?
13
26

15. Interactivity
First Input Delay (FID)
14
26

16. Interactivity
First Input Delay (FID)
sourceı: tezify.com
15
26

17. Visual Stability
Cumulative Layout Shift (CLS)
16
26

18. Visual Stability
Cumulative Layout Shift (CLS)
source: tezify.com
17
26

19. Visual Stability
Cumulative Layout Shift (CLS)
source: web.dev
18
26

20. Measure
LCP, CLS, FID and more
19
26

21. Desktop
19
26
Mobile

22. Chrome User Experience Report
PageSpeed Insight
Google Search Console
Web-Vitals JS Library
Chrome DevTools
Lighthouse
21
26

23. Realtime Analytics
Performance monitoring
22
26

24. Realtime Analytics
Vercel Analytics
23
26

25. Realtime Analytics
Sentry Performance Monitoring
24
26

26. Realtime Analytics
Lighthouse CI
25
26

27. Business Impact
Performance monitoring
26
26

28. Thanks