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