Upload
others
View
15
Download
0
Embed Size (px)
Citation preview
Techniky rýchleho načítavania internetových stránok
Ako zrýchliť tie vašewordpressy pod 500ms
Jasom Dotnet
Pre koho je táto prednáška
Táto prednáška je pre niekoho, kto:
● robí / píše weby
● vie čo je to .css, .js, .jpg, .png, .html
Veľmi v skratke „ako na 500ms“
● Posielajte málo dát (iba tie potrebné)
● Používajte správne formáty
● Majte rýchly server
● Píšte veci do kódu tam kde patria
Jasom Dotnet 4 / 39
Vykresľovanie (render)
● 1000 ms sa spraví 60 frame-ov
● 1000 / 60 = 16 ms/frame
● 16ms = čas sťahovania + čas počítania
Jasom Dotnet 5 / 39
Úplne bežný zdroják
Jasom Dotnet 6 / 39
Zdroják vykreslený (základné ukazovatele)
Jasom Dotnet 7 / 39
Zdroják vykreslený (základné ukazovatele)
Jasom Dotnet 8 / 39
Filmový pás
Jasom Dotnet 9 / 39
Back-end
● Nginx vs. Apache2 (nemenný obsah / static content)
● Redis, Memcache, XCache, eAcccelerator
● HTTP/1.1 vs. HTTP/2
● SSD :-)
● „TCP Initial Window“ je 14KB, viac
● OCSP stapling
Jasom Dotnet 10 / 39
HTTP/2
Jasom Dotnet 11 / 39
HTTP/1.1 vs. HTTP/2
Jasom Dotnet 12 / 39
OCSP stapling
Jasom Dotnet 13 / 39
Front-end
● Sústredte sa na obsah nad zalomením (above the fold content)
● Javascript
● CSS
● Obrázky
● Pekné písmenká (fonty)
● Html (minify, gzip, brotli, DNS lookup, preload, preconnect)
● Iframy, videá
Jasom Dotnet 14 / 39
Javascript
● Do pätičky (zabraňuje vykresľovaniu / render blocking)
● Preč s jQuery, skompilujte si iba to čo treba (14KB aj tak nedame)
● Zepto (14KB stále nedávame)
● Čistý JS (juhuhúúú, 14KB!)
● Defer, async
● Deferujte js-ká čo netreba cez <noscript>
● Skamarátiť sa s Chrome dev tools (analýza JS kódu)
Jasom Dotnet 15 / 39
Defer, async
● zdroj: @DasSurma
Jasom Dotnet 16 / 39
CSS
● Žiadne externé CSS v hlavičke!
● Vpísať iba nevyhnutné CSS (inline critical CSS)
● Defer CSS
Jasom Dotnet 17 / 39
Inline critical CSS
Jasom Dotnet 18 / 39
Jasom Dotnet 19 / 39
Pekné písmenká (fonty)
● Nepoužívajte ich :-)
● Woff2
● Sťahujte zo servera (žiadne Google Fonts)
● Prednačítavajte (Preload)
● Natláčajte (Push)
● Font Awesome (cca 70KB) vs. Fontello (Iconmoon.io)
Jasom Dotnet 20 / 39
Obrázočke
● Kompresia (PNG, JPG) + progresívne JPGy
● Lazyload (jQuery Lazy, bLazy)
● Ikony cez SVG nie PNG
● Srcset
● WebP
● Zastúpenie (placeholder / fantasy render)
Jasom Dotnet 21 / 39
Kompresia (jpg, png)
● ImageOptim (Kornel Lesiński)– https://imageoptim.com/online
● Resmush.it („sadarmo“, francúzske pokračovanie Smush.it od Yahoo.com– https://resmush.it/– https://cs.wordpress.org/plugins/resmushit-image-optimizer/
Jasom Dotnet 22 / 39
Kompresia (jpg, png)
Jasom Dotnet 23 / 39
LazyLoad (urýchľuje „onload“)
● bLazy– Bjørn Klinggaard– min +gzip 2KB– https://github.com/dinbror/blazy
● jQuery Lazy– Daniel 'Eisbehr' Kern– min + gzip 1.5KB– https://github.com/eisbehr-/jquery.lazy/
Jasom Dotnet 24 / 39
SVG je svätý grál pre ikony
Ako sa rodí SVG:
● Inkscape (save as „optimized“)
● Svgminify.com
● Yoksel.github.io/url-encoder/ (inline SVG nie cez base64)
Jasom Dotnet 25 / 39
Srcset
Jasom Dotnet 26 / 39
WebP
● Formát obrázkov od Google, ktorý podporuje 60% prehliadačov● Cca 35% menšia veľkosť než jpg v rovnakej kompresnej kvalite
Jasom Dotnet 27 / 39
Zastúpenie / placeholder / fantasy render
● CSS background-image fantasy render
● SVG fantasy render
● Blur fantasy render (SVG + blur effect)
Jasom Dotnet 28 / 39
CSS fantasy render
Jasom Dotnet 29 / 39
SVG fantasy render
Jasom Dotnet 30 / 39
Blur fantasy render
Jasom Dotnet 31 / 39
Blur fantasy render
Jasom Dotnet 32 / 39
HTML
● Minify (W3 Total cache)
● Gzip vs. Brotli
● DNS lookup (spomeň „trio“ ak si ešte nie)
● Preload, preconnect
Jasom Dotnet 33 / 39
Gzip vs. Brotli
● Kompresný formát od Google lepší než gzip (menšia jQuery :-)
● https://github.com/google/brotli
Jasom Dotnet 34 / 39
Znižujte počet DNS lookups
Jasom Dotnet 35 / 39
Preload
Jasom Dotnet 36 / 39
Preconnect
Jasom Dotnet 37 / 39
4:56 ráno
● Mozog hlási „to stačí“
● Nespomenuli sme:– SeWo: service worker - apky bez inštalácie (šupa)– Server PUSH: automatické „natlačenie“ prehliadaču potrebných
súborov pri prvej požiadavke (treba certifikát)
● Pre pokračovanie musíte prísť na Barcamp Bratislava (21.4.2018)
Jasom Dotnet 38 / 39
Zhovievavosť
● Buďte zhovievavý k vášmu front-end developerovi
● Nikto nevie všetko
● Nechajte si spraviť audit
Jasom Dotnet 39 / 39
Ďakujem za váš čas
● Jasom Dotnet
● https://www.jasom.net/contact
● https://twitter.com/jasomdotnet
● Otázky?