Jonathan Hervieux

Engineering Manager

@Takima

1. Du vocabulaire

Web Vitals

1. Du vocabulaire

- FCP (First Contentful Paint)

- TTFB (Time To First Byte)

1. Du vocabulaire

- FID (First Input Delay)

1. Du vocabulaire

1. Du vocabulaire

1. Du vocabulaire

  • Core Web Vitals        
    • LCP -> performance de chargement
    • INP -> interactivité
    • CLS -> stabilité visuelle               

 

📝 Take Away

✔️

 

Comment on les mesure ?  

 

❓

2. Comment mesurer les web vitals ? 

LightHouse

Avec une simulation

- DevTools

- Extension (Firefox)

2. Comment mesurer les web vitals ?

Avec une simulation

- DevTools

- Extension (Firefox)

2. Comment mesurer les web vitals ?

- DevTools

- Extension (Firefox)

 

- Sur un outil de CI/CD avec ligthouse-ci

Avec une simulation

2. Comment mesurer les web vitals ?

- DevTools

- Extension (Firefox)

 

- Sur un outil de CI/CD avec ligthouse-ci

Avec une simulation

2. Comment mesurer les web vitals ?

Lighthouse CI Server

- DevTools

 

- Sur un outil de CI/CD avec ligthouse-ci

Avec une simulation

En conditions réelles

(Real User Monitoring)

- librairie js web-vitals

import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

2. Comment mesurer les web vitals ?

- avec les SDK de vos outils d'observabilité (Datadog, Sentry, ...)

2. Comment mesurer les web vitals ?

2. Comment mesurer les web vitals ?

2. Comment mesurer les web vitals ?

1. Du vocabulaire

  • Core Web Vitals        
  • LCP, INP, CLS...                        

 

📝 Take Away

✔️

✔️

 

Comment on les améliore ?  

 

❓

2. Mesurer les web vitals

  • DevTools / lightouse-ci        
  • RUM (librairie web-vitals)                 

 

✔️

✔️

T = 0

T = beaucoup de temps après T0

html
css
js
png / jpg

temps (ms)

FCP

réseau

CPU

TTI

}

exécution

3. Améliorer les web-vitals

3. Améliorer les web vitals

Envoyer moins de contenu

Images

3. Améliorer les web vitals

WebP

(2010)

AVIF

(2019)

JPEG XL
(2020)

Images

3. Améliorer les web vitals

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <source srcset="image.jpeg" type="image/jpeg" />
  <img src="image.jpeg" alt="Image" />
</picture>

Tag picture

Javascript

3. Améliorer les web vitals

webpack-bundle-analyzer

vite-bundle-analyzer

bundlephobia

Javascript

3. Améliorer les web vitals

Minification

 

Tree shaking

Tree shaking

module.exports = {
  plugins: [
    purgecssPlugin({
      content: ["./src/**/*""],
    })
  ],
  build: {
    css: 'lightningcss'
  }
}

Minification

Plugin postcss-purgecss

Automatique ou configurable

vite.config.js

CSS

3. Améliorer les web vitals

Tailwind : automatique depuis la v4

1. Du vocabulaire

  • Les web vitals        
  • FCP, LCP, CLS...                         

 

📝 Take Away

✔️

✔️

2. Mesurer les web vitals

  • DevTools / lightouse-ci        
  • RUM (librairie web-vitals)                   

 

✔️

✔️

3. Améliorer les web vitals

  • Utiliser des formats modernes
  • Réfléchir à ses dépendances
  • Minification + tree shaking
  • S'applique aussi au CSS    

 

✔️

✔️

✔️

✔️

Résultat du build

3. Améliorer les web vitals

https://my-website.com

Compression

3. Améliorer les web vitals

Gzip 

 

Brotli 

--> 453.96 kB (- 73%)

 

--> 363.22 kB (- 78%)

Compression

3. Améliorer les web vitals

import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [
      viteCompression(),
      viteCompression({ algorithm: 'brotliCompress' }),
    ],
  };
};
vite.config.js

1. Du vocabulaire

  • Les web vitals        
  • FCP, LCP, CLS...                         

 

📝 Take Away

✔️

✔️

2. Mesurer les web vitals

  • DevTools / lightouse-ci        
  • RUM (librairie web-vitals)                   

 

✔️

✔️

3. Améliorer les web vitals

  • Utiliser des formats modernes
  • Minification + tree shaking
  • S'applique aussi au CSS
  • Compresser      

 

✔️

✔️

✔️

✔️

T = 0

html
css
js
png / jpg

temps (ms)

FCP

réseau

CPU

TTI

}

exécution

T = un peu moins de temps après

3. Améliorer les web vitals

3. Améliorer les web vitals

Zoom (SPA)

temps (ms)

index.html

main.js

Parsing + exécution

Un gros chunk

App.jsx
import React from 'react';

import Navbar from '../Navbar';
import Shelf from '../Shelf';
import Filter from '../Shelf/Filter';
import FloatCart from '../FloatCart';

const App = () => (
  <>
    <Navbar />
    <main>
      <Filter />
      <Shelf />
    </main>
    <FloatCart />
  <>
);

export default App;

3. Améliorer les web vitals

Code splitting / Lazy Loading

// ...

const App = () => (
  <>
    <Navbar />
    <Routes>
      <Profile path="/profile" />
      <Orders path="/orders" />
      <Products path="/products" />
    </Routes>
    <FloatCart />
  <>
);
App.jsx

3. Améliorer les web vitals

- Import dynamique

 

- React.lazy()

Code splitting / Lazy Loading

3. Améliorer les web vitals

temps (ms)

index.html

main.js

Parsing + exécution

Un gros chunk

3. Améliorer les web vitals

temps (ms)

index.html

main.js

Chunk 1

Chunk 2

Chunk 3

<link rel=”preload”>
<link rel=”prefetch”>

3. Améliorer les web vitals

Ressource hints

Téléchargement + parsing

Téléchargement

App.jsx
const OrdersPage = React.lazy(() => import(/* webpackChunkName: 'orders' */ '../Orders'));
const ProfilePage = React.lazy(() => import(/* webpackChunkName: 'profile' */ '../Profile'));
const ProductsPage = React.lazy(() => import(/* webpackChunkName: 'products' */ '../Products'));
const Cart = React.lazy(() => import(/* webpackChunkName: 'cart' */'../Cart'));

// ...
plugins: [
    // ...
    new PreloadPlugin({
        rel: 'preload',
    	include: ['cart']
    )},
    new PreloadPlugin({
        rel: 'prefetch',
    	include: ['profile', 'products', 'orders']
    )},
],
webpack.config.js

3. Améliorer les web vitals

Preload / prefetch

3. Améliorer les web vitals

Preload / prefetch

temps (ms)

index.html

main.js

Chunk 1

Chunk 2

Chunk 3

3. Améliorer les web vitals

Preconnect

{
  //...
  webpack: {
    plugins: {
      add: [
        new HtmlWebpackPreconnectPlugin(),
      ],
    },
    configure: (webpackConfig) => {
      const { isFound, match } = getPlugin(webpackConfig, pluginByName("HtmlWebpackPlugin"));
      if (isFound) {
        match.userOptions.preconnect = ["http://localhost:8081"];
      }
      return webpackConfig;
    },
  },
};

webpack.config.js

3. Améliorer les web vitals

Preconnect

3. Améliorer les web vitals

Inline JS et CSS

temps (ms)

index.html

main.js

Chunk 1

Chunk 2

Chunk 3

3. Améliorer les web vitals

1. Du vocabulaire

  • Les web vitals        
  • FCP, LCP, CLS...                         

 

📝 Take Away

✔️

✔️

2. Mesurer les web vitals

  • DevTools / lightouse-ci        
  • librairie web-vitals                   

 

✔️

✔️

3. Améliorer les web vitals

  • Utiliser des formats modernes
  • Minification + tree shaking
  • S'applique aussi au CSS
  • Compresser      

 

  • Code splitting + lazy loading    
  • Preload / prefetch
  • Preconnect
  • Inline le code critique

✔️

✔️

✔️

✔️

✔️

✔️

✔️

✔️

Et plein d'autres choses...

stratégie de mise en cache (assets, app shell...)

HTTP2 / CDN

SSR

optimisations propres aux frameworks

Merci !

✉️   jhervieux@takima.fr

jonathan-hervieux

[Epitech Summit] Performance web 101

By Jonathan HERVIEUX

Made with Slides.com

[Epitech Summit] Performance web 101

“Out of the box, webpack fait le café ! React c’est génial ; Uber, Airbnb, …, tout le monde l’utilise, avec ça le front de ton appli va être dingue !”. Ce sont plus ou moins les phrases que j’ai pu entendre auprès des équipes des quelques projets sur lesquels j’ai eu l’occasion de travailler, et c’est vrai, ça marche. Ça marche même très bien. Mais au fait, qu’est ce que ça signifie “ça marche” ? Pourquoi mon application affiche-t-elle systématiquement un loader à son démarrage ? Pourquoi la version web de reddit me transfère-t-elle 16Mo de data avec pas moins de 236 requêtes rien que sur la page d'accueil ? Est ce qu'un "web instantané" est possible ? Je vous propose plusieurs optimisations simples à mettre en place pour enfin maîtriser le contenu affiché sur vos applications web et ainsi bluffer vos futurs utilisateurs.

  • 14

More from Jonathan HERVIEUX