STAY AWAY FROM

MY PATH!

I'm Alex, nice to meet you!

@alexnmoldovan

Co-Founder @ JSHeroes

medium.com/@alexnm

Hello 🇨🇿 ReactiveConf!

Open Source Engineer @ TeleportHQ

slides: http://bit.ly/reactive-alex

Performance Mindset

CRP = Critical Rendering Path

TTFB = Time to first byte

FMP = First Meaningful Paint

TTI = Time To Interactive

Speed Index ?!

First Paint

First Contentful Paint

First Meaningful Paint

Page Interactive

Page Loaded

GET https://example.com

HTML

GET .css .woff2

TTFB

FCP

FMP

TTI

GET .js .json

Server Side Rendering

🔗 Article on medium

Defer JavaScript

Source: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Fonts

https://css-tricks.com/font-display-masses/

font-display: swap / block / fallback

Flash of Invisible Text = FOIT

Prioritize Above the Fold

inline critical CSS

lazy load below the fold images

https://github.com/addyosmani/critical

https://github.com/jamiebuilds/react-loadable

progressively load content

Image Optimization

load images based on resolution

lazy load images

modern encoding (ex: webp)

360px

https://github.com/aFarkas/lazysizes

https://images.guide/


<link rel="preload" href="main.css" as="style">

<link rel="preload" href="webfont.woff2" as="font" type="font/woff2" crossorigin>

<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">