OPTIMIZING THE CRITICAL RENDERING PATH IN PHP

OPTIMIZING THE CRITICAL RENDERING PATH IN VUE

OPTIMIZING THE CRITICAL RENDERING PATH IN ANGULAR

OPTIMIZING THE CRITICAL RENDERING PATH IN HOOKS

OPTIMIZING THE CRITICAL RENDERING PATH IN REACT

Photo Credit: @JanLelis

OPTIMIZING THE CRITICAL RENDERING PATH

Single Page App

Bloated JS App

I'm Alex, nice to meet you!

@alexnmoldovan

Co-Founder @ JSHeroes

medium.com/@alexnm

Hello 🇩🇪 ReactDayBerlin!

Open Source Engineer @ TeleportHQ

slides: http://bit.ly/optimize-crp

Performance Mindset

CRP = Critical Rendering Path

TTFB = Time to first byte

FMP = First Meaningful Paint

TTI = Time To Interactive

Speed Index ?!

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

import { renderToString } from "react-dom/server";

app.get( "/*", ( req, res ) => {
    const reactDom = renderToString( <App /> );

    res.writeHead( 200, { "Content-Type": "text/html" } );
    res.end( htmlTemplate( reactDom ) );
} );

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)">