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?