Aninda Yüklenen Uygulamalar

Yavas calisan bir uygulamayi hizlandirmanin adimlari...

Gunumuz sitelerinde performans çok onemli bir rol oynuyor. Hızlı websiteleri kullanicisini koruyabilirken, yavaş olanlar zamanla kullanicisini kaybediyor.

Bir X aninda siteniz hizli olabilir ama onemli olan sitenin hizli kalmasını saglayabilmektir. Çünkü zamanla ekleyeceğiniz yeni özellikler, tarayici degisiklikleri, kullanıcı tercihleri sitenizin yavaşlamasına sebep olabilir.

Transcript

1. ANINDA YÜKLENEN UYGULAMALAR YARIM SANIYEYE YOLCULUK
2. BILAL ÇINARLI Sr. Engineering Manager / GDE Web Teknolojileri @bcinarli
3. Bir sayfayı ne kadar hızlı yükleyebilirsiniz?
4. Nasıl hızlı kalabilirsiniz?
5. 10 SANIYE GÜNÜMÜZDE SAYFALARIN ORTALAMA ETKİLEŞİME BASLAMA SÜRESİ
6. 3 SANIYE ZİYARETÇİLERİN BOŞ EKRANI BEKLEDİĞİ MAKSİMUM SÜRE
7. 73 KB 466 KB 1 MB
8. Google Lighthouse bu iş için kullanabileceğimiz en temel araçlardan biri
9. Yarım saniyeye yolculuğun hikayesi
10. Bir tane e-ticaret sitesi üzerinden bu hikayeyi dinleyelim…
11. Başlangıç
12. Başlangıç
13. MINIFICATION KÜÇÜLTÜLMÜŞ TEXT TABANLI DOSYALAR DAHA HIZLI YÜKLENİR
14. optimization: { minimize: true, minimizer: ['...', new CssMinimizerPlugin()] }
15. Time to interactive 5 saniyenin altında
16. CODE SPLITTING BÜYÜK DOSYALARI KÜÇÜK PARÇALARA BÖLEREK HIZLI YÜKLENMEYİ SAĞLAYABİLİRİZ
17. optimization: { runtimeChunk: 'single', splitChunks: { cacheGroups: { react: { chunks: 'all', name: 'react', test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|scheduler| prop-types)[\\/]/, priority: 50, enforce: true }, vendors: { test: /[\\/]node_modules[\\/]/, chunks: 'initial', name: 'vendor', priority: 30, enforce: true, minChunks: 1, reuseExistingChunk: true } } } }
18. Time to interactive 4 saniyenin altında
19. COMPRESSION GZIP YA DA BROTLI İLE DOSYALARI SIKIŞTIRARAK SUNABİLİRİZ
20. Kaynak dosya boyutunu 4 MB’tan 65 KB’ye indirdik
21. HTTP/2 TEK BAĞLANTI İLE BİRDEN FAZLA DATA STREAM GÖNDEREBİLİRİZ
23. Biraz performans artışı, biraz da LCP iyileşmesi
24. MODERN JS TARAYICI VERSİYONUNA UYGUN JAVASCRIPT YÜKLEME
25. EStimator analizi
26. "browserslist":[ "IE 11", "> 0.5%", "last 1 version", "not dead" ] "browserslist":[ "defaults and supports es6-modules"]
27. Biraz daha performans artışı, LCP ve FCP iyileşmesi
28. MEDIA OPTIMISATION SAYFALARIMIZ İÇİN UYGUN FORMATLANMIŞ RESİM VE VİDEO KULLANIMI
29. https://squoosh.app/ ile resimleri optimize edelim
30. LAZY LOADING RESİMLERİ İHTİYAÇ OLUNCAYA KADAR YÜKLEMEYELİM
31. <img src={`${IMAGE_API}/next-gen/${nextgen}.webp`} alt={name} className={css('product-card-image-element')} loading="lazy" />
32. Biraz daha performans artışı, Speed Index, TTI, Total Blocking Time’da iyileşme
33. UYGUN BOYUTLAR RESİMLERİ GÖSTERDİĞİMİZ ALANA UYGUN BOYUTLARDA KÜÇÜLTEBİLİRİZ
34. <img src={`${IMAGE_API}/next-gen-proper-sizes/${nextgen}.webp`} alt={name} className={css('product-card-image-element')} loading="lazy" />
35. 0.5 saniye FCP 0.7 saniye TTI
36. SERVICE WORKERS SAYFALARI ÖN YÜKLEME, BELLEĞE KAYIT VE HIZA GÖRE OPTİMİZASYON İMKANI
37. new WorkboxPlugin.GenerateSW({ clientsClaim: true, skipWaiting: true, exclude: [/\.LICENSE\.txt?$/, /\.html?$/] }),
38. Sayfamız bir PWA olarak çalışıyor artık
39. OFFLINE UYGULAMANIN OFFLINE ÇALIŞMASI
40. const cachedProducts = localStorage.getItem('gadgets'); useE f fect(() => { if (!cachedProducts) { (async () => { const response = await fetch(`${API}/gadgets`); const fetchedProducts = await response.json(); localStorage.setItem('gadgets', JSON.stringify(fetchedProducts)); setProducts(fetchedProducts); })(); } else { setProducts(JSON.parse(cachedProducts)); } }, []);
41. Yarım saniyeden hızlı yüklenme
42. Bu kadar hızlı yüklenme bize ne kazandıracak?
44. ANINDA YÜKLENEN UYGULAMALAR BILAL ÇINARLI @bcinarli