Slide 1
Slide 1 text
Lightning Fast Web Apps
Slide 2
Slide 2 text
Bilal Çınarlı
Sr. Frontend Architect @Adidas
@bcinarli
Slide 3
Slide 3 text
How soon can you load a page?
#iJScon
@bcinarli
Slide 4
Slide 4 text
How can you stay fast?
#iJScon
@bcinarli
Slide 5
Slide 5 text
Nowadays, average time to interactive duration is
almost 10 seconds
#iJScon
@bcinarli
Slide 6
Slide 6 text
#iJScon
@bcinarli
73 KB 1 MB
466 KB
Slide 7
Slide 7 text
How can I check those for my website?
#iJScon
@bcinarli
Slide 8
Slide 8 text
Lighthouse is the most simple one to use
#iJScon
@bcinarli
Slide 9
Slide 9 text
A Journey to Loading Fast
Slide 10
Slide 10 text
Let’s think we have an online shop
#iJScon
@bcinarli
Slide 11
Slide 11 text
#iJScon
@bcinarli
Slide 12
Slide 12 text
#iJScon
@bcinarli
Slide 13
Slide 13 text
Minifying text based assets will reduce
download and loading times.
#iJScon
@bcinarli
Slide 14
Slide 14 text
optimization: {
minimize: true,
minimizer: ['...', new CssMinimizerPlugin()]
}
#iJScon
@bcinarli
Slide 15
Slide 15 text
#iJScon
@bcinarli
Slide 16
Slide 16 text
Splitting big single file to
smaller easy to load chunks will easy code execution timing.
#iJScon
@bcinarli
Slide 17
Slide 17 text
optimization: {
minimize: true,
minimizer: ['...', new CssMinimizerPlugin()],
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
react: {
chunks: 'all',
name: 'react',
test: /(?
Slide 18
Slide 18 text
#iJScon
@bcinarli
Slide 19
Slide 19 text
Serving compressed files
with gzip or Brotli
#iJScon
@bcinarli
Slide 20
Slide 20 text
#iJScon
@bcinarli
Slide 21
Slide 21 text
Using HTTP/2 provides multiplexing
and parallel requests
#iJScon
@bcinarli
Slide 22
Slide 22 text
#iJScon
@bcinarli
Slide 23
Slide 23 text
#iJScon
@bcinarli
Slide 24
Slide 24 text
IE11 will officially end its life this August
Serving modern code for modern browsers
#iJScon
@bcinarli
Slide 25
Slide 25 text
#iJScon
@bcinarli
Slide 26
Slide 26 text
"browserslist":[
"IE 11",
"> 0.5%",
"last 1 version",
"not dead"
]
#iJScon
@bcinarli
"browserslist":[
"Chrome >= 61",
"Edge >= 16",
"Firefox >= 60",
"Safari >= 10.1",
"Opera >= 48"
]
Slide 27
Slide 27 text
#iJScon
@bcinarli
Slide 28
Slide 28 text
Serving web optimised images or videos
will improve loading performance
#iJScon
@bcinarli
Slide 29
Slide 29 text
#iJScon
@bcinarli
Slide 30
Slide 30 text
…and lazy loading images will reduce network calls.
#iJScon
@bcinarli
Slide 31
Slide 31 text
#iJScon
@bcinarli
Slide 32
Slide 32 text
#iJScon
@bcinarli
Slide 33
Slide 33 text
Using proper size images
will drastically improve the performance
#iJScon
@bcinarli
Slide 34
Slide 34 text
#iJScon
@bcinarli
Slide 35
Slide 35 text
#iJScon
@bcinarli
Slide 36
Slide 36 text
A service-worker file can run in the background,
helps to prefetch/preload next resources,
can provide route based caching,
and network optimisation.
#iJScon
@bcinarli
Slide 37
Slide 37 text
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true,
exclude: [/\.LICENSE\.txt?$/, /\.html?$/]
}),
#iJScon
@bcinarli
Slide 38
Slide 38 text
#iJScon
@bcinarli
Slide 39
Slide 39 text
And as a last step, lets add some
API caching and offline support
#iJScon
@bcinarli
Slide 40
Slide 40 text
const cachedProducts = localStorage.getItem('gadgets');
useEffect(() =>" {
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));
}
}, []);
#iJScon
@bcinarli
Slide 41
Slide 41 text
#iJScon
@bcinarli
Slide 42
Slide 42 text
By using PWAs and optimisation techniques,
we were able to improve our page loading time
from 5+ s to < 0.5 s
#iJScon
@bcinarli
Slide 43
Slide 43 text
#iJScon
@bcinarli
Slide 44
Slide 44 text
• Demo app: https://github.com/bcinarli/lightning-fast-
loading
• Fast Load Times: https://web.dev/fast/
• Progressive Web Apps: https://web.dev/progressive-web-
apps/
Slide 45
Slide 45 text
Thank you
@bcinarli