mirror of
https://github.com/suitenumerique/meet.git
synced 2026-07-27 04:09:26 +00:00
lebaudantoine
09b7a23f51
Material icons (and Symbols, the most recent ones from Google Material) were initially adopted to align with the UI kit. Before that, we relied on Remixicon, which loads only the icons used and totals 40ko for the whole library. To benefit from Material icons, the implementation matched the UI kit, which uses two fonts: 150ko and 750ko. Unlike the UI kit, the fonts were preloaded to prevent icon render blinks. On products using UI kit, the fonts are loaded the first time an icon renders, and because they are heavy, the icon swap is visible to the user. Icons are replaced by their text label in the meantime, which also caused screen-reader vocalization or i18n issues that had to be mitigated. Preloading the fonts was a quick win that worked fine on high-speed connections where fonts get loaded fast then cached. However, while optimizing LCP for users on poor connections (a separate concern that already affects videoconference joining), preloading proved harmful: it stole network bandwidth at the most critical moment, when the main JS chunk was loading. Switch to a frugal approach: import only the SVG icons actually needed from Material, treated as components so they are tree-shaken and customizable (color, etc.). Icons do not change often, so the DX remains good. The UI kit also supports custom icons not available in the font, so this approach lets us define them and works like a charm. Removal of Remixicon is planned in a follow-up PR. It save user loading almost 1Mo of assets for few icons.
17 lines
619 B
HTML
17 lines
619 B
HTML
<!doctype html>
|
|
<html lang="en" data-lk-theme="visio-light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>%VITE_APP_TITLE%</title>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|