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
   

   View Slide

2. BILAL ÇINARLI
   Sr. Engineering Manager / GDE Web Teknolojileri
   @bcinarli
   

   View Slide

3. Bir sayfayı ne kadar hızlı yükleyebilirsiniz?
   

   View Slide

4. Nasıl hızlı kalabilirsiniz?
   

   View Slide

5. 10 SANIYE
   GÜNÜMÜZDE SAYFALARIN ORTALAMA ETKİLEŞİME BASLAMA SÜRESİ
   

   View Slide

6. 3 SANIYE
   ZİYARETÇİLERİN BOŞ EKRANI BEKLEDİĞİ MAKSİMUM SÜRE
   

   View Slide

7. 73 KB 466 KB 1 MB
   

   View Slide

8. Google Lighthouse bu iş için kullanabileceğimiz en
   temel araçlardan biri
   

   View Slide

9. Yarım saniyeye yolculuğun hikayesi
   

   View Slide

10. Bir tane e-ticaret sitesi
    üzerinden bu hikayeyi dinleyelim…
    

    View Slide

11. Başlangıç
    

    View Slide

12. Başlangıç
    

    View Slide

13. MINIFICATION
    KÜÇÜLTÜLMÜŞ TEXT TABANLI DOSYALAR DAHA HIZLI YÜKLENİR
    

    View Slide

14. optimization: {
    
    
    minimize: true,
    
    
    minimizer: ['...', new CssMinimizerPlugin()]
    
    
    }
    
    
    

    View Slide

15. Time to interactive
    5 saniyenin altında
    

    View Slide

16. CODE SPLITTING
    BÜYÜK DOSYALARI KÜÇÜK PARÇALARA BÖLEREK HIZLI YÜKLENMEYİ SAĞLAYABİLİRİZ
    

    View Slide

17. optimization: {
    
    
    runtimeChunk: 'single',
    
    
    splitChunks: {
    
    
    cacheGroups: {
    
    
    react: {
    
    
    chunks: 'all',
    
    
    name: 'react',
    
    
    test: /(?prop-types)[\\/]/,
    
    
    priority: 50,
    
    
    enforce: true
    
    
    },
    
    
    vendors: {
    
    
    test: /[\\/]node_modules[\\/]/,
    
    
    chunks: 'initial',
    
    
    name: 'vendor',
    
    
    priority: 30,
    
    
    enforce: true,
    
    
    minChunks: 1,
    
    
    reuseExistingChunk: true
    
    
    }
    
    
    }
    
    
    }
    
    
    }
    

    View Slide

18. Time to interactive
    4 saniyenin altında
    

    View Slide

19. COMPRESSION
    GZIP YA DA BROTLI İLE DOSYALARI SIKIŞTIRARAK SUNABİLİRİZ
    

    View Slide

20. Kaynak dosya
    boyutunu 4 MB’tan
    65 KB’ye indirdik
    

    View Slide

21. HTTP/2
    TEK BAĞLANTI İLE BİRDEN FAZLA DATA STREAM GÖNDEREBİLİRİZ
    

    View Slide

22. View Slide

23. Biraz performans
    artışı, biraz da LCP
    iyileşmesi
    

    View Slide

24. MODERN JS
    TARAYICI VERSİYONUNA UYGUN JAVASCRIPT YÜKLEME
    

    View Slide

25. EStimator
    analizi
    

    View Slide

26. "browserslist":[
    
    
    "IE 11",
    
    
    "> 0.5%",
    
    
    "last 1 version",
    
    
    "not dead"
    
    
    ]
    "browserslist":[
    
    
    "defaults and supports es6-modules"]
    

    View Slide

27. Biraz daha
    performans artışı,
    LCP ve FCP
    iyileşmesi
    

    View Slide

28. MEDIA OPTIMISATION
    SAYFALARIMIZ İÇİN UYGUN FORMATLANMIŞ RESİM VE VİDEO KULLANIMI
    

    View Slide

29. https://squoosh.app/ ile resimleri optimize edelim
    

    View Slide

30. LAZY LOADING
    RESİMLERİ İHTİYAÇ OLUNCAYA KADAR YÜKLEMEYELİM
    

    View Slide

31. 
    
    src={`${IMAGE_API}/next-gen/${nextgen}.webp`}
    
    
    alt={name}
    
    
    className={css('product-card-image-element')}
    
    
    loading="lazy"
    
    
    />
    

    View Slide

32. Biraz daha
    performans artışı,
    Speed Index, TTI,
    Total Blocking
    Time’da iyileşme
    

    View Slide

33. UYGUN BOYUTLAR
    RESİMLERİ GÖSTERDİĞİMİZ ALANA UYGUN BOYUTLARDA KÜÇÜLTEBİLİRİZ
    

    View Slide

34. 
    
    src={`${IMAGE_API}/next-gen-proper-sizes/${nextgen}.webp`}
    
    
    alt={name}
    
    
    className={css('product-card-image-element')}
    
    
    loading="lazy"
    
    
    />
    

    View Slide

35. 0.5 saniye FCP
    
    
    0.7 saniye TTI
    

    View Slide

36. SERVICE WORKERS
    SAYFALARI ÖN YÜKLEME, BELLEĞE KAYIT VE HIZA GÖRE OPTİMİZASYON İMKANI
    

    View Slide

37. new WorkboxPlugin.GenerateSW({
    
    
    clientsClaim: true,
    
    
    skipWaiting: true,
    
    
    exclude: [/\.LICENSE\.txt?$/, /\.html?$/]
    
    
    }),
    

    View Slide

38. Sayfamız bir PWA
    olarak çalışıyor
    artık
    

    View Slide

39. OFFLINE
    UYGULAMANIN OFFLINE ÇALIŞMASI
    

    View Slide

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));
    
    
    }
    
    
    }, []);
    

    View Slide

41. Yarım saniyeden
    hızlı yüklenme
    

    View Slide

42. Bu kadar hızlı yüklenme bize ne kazandıracak?
    

    View Slide

43. View Slide

44. ANINDA
    YÜKLENEN
    UYGULAMALAR
    BILAL ÇINARLI
    @bcinarli
    

    View Slide