??? ???? ??? ????? ?? ??? ??????.

1. ??? ??
2. ?? ??
3. ???? ??? ??.

---

?????

?? ?? ?? Vite? pnpm? ??????. ?? ? ?? ??? ?? ?????? ????? ? ??? ???? ??????. ??? pnpm run build? ??? ?? pnpm dlx? dist? ??? ? ????. ?? ?? Chrome DevTools? Lighthouse? ???? ???? ??? ? ?? ??? ?????.

??? ?? ???

FCP ? LCP? ??? ????.

Lighthouse? ?? ?? ???? ?? br ?? gzip? ?? ????? ???? ???? ???? ????.

???? ??? ? ??? ? ??? Accept-Encoding: gzip? ???? ????. ?? ??? ?? ?? ???? ??? ???? ??? vite-plugin-compress? ???? ??? ??????.

1??: vite-plugin-compress ??
2??: vite.config.js ??? ???? ????? ?? ????? ?????. Google ???? ??? ?? gzip?? ??? br(brotliCompress)? ???? ???.

?? ??

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

3??: pnpm run build? ???? ??

.js ? .css ??? ????? ??????.

??:

? [vite-plugin-compression]:algorithm=brotliCompress - ??? ????? ???????.

Vite? ????? .gzip? ???? ??? ????? brotliCompress? ?? ???? ?? ???? ?? ? ????.

gzip?? Vite

vite v5.4.10 ??? ??...
? 654? ??? ???????.

index-B9QUW17e.css 8.60kB │ gzip: 2.33kB
PauseMenu-DjZ95K-6.js 1.77kB │ gzip: 0.62kB
index-ohAKp9W9.js 1,688.05kB │ gzip: 454.20kB

br? ??? Vite-???? ??

? [vite-plugin-compression]:algorithm=brotliCompress - ??? ????? ???????:
PauseMenu-DjZ95K-6.js.br 1.73kb / brotli??: 0.51kb
index-B9QUW17e.css.br 8.40kb / brotli??: 1.97kb
index-ohAKp9W9.js.br 1648.49kb / brotli??: 345.30kb

---

???? ?? JavaScript ???

FCP ? LCP? ??? ????.

Google DevTools? Coverage ?? ???? 20kbs? ?? ???? ?? ???? ?? ????? ?????.

React? ?? Vite? ???? ?? ??? ???? ?? JavaScript? ??? ???? ?? ??? ?? ?? ?????.

React??? ? lazy()? ??? ? ? ????.

1. ? ???? ?? ?? ????
   Loading
   ? ?? ?? UI? ?????. ?? ?? ??? ? ?? UI? ?????.
2. lazy()? ???? ?? ????? ???? ?? ?? ??? ?????. ?? ?? ??? ?? ???? Esc ?? ??? ???? ? ?? ??? ?????.

---

?? ???? ??? ??

Chrome ???? AVIF ?? WebP ???? ???? ??? ?? ?????. WebP? ?? ?????? ? ?? ??? ???? ??? ??????.

?? ??? Chrome, Firefox, Safari, Edge, Opera? WebP? ????? AVIF ??? ? ??????.

WebP ??? ?? ?? ??? Can I use?? ???? ? ????.

WebP? cwebp ?????? ???? cwebp -q 50 Images/flower1.jpg -o Images/flower1.webp ??? ???? .png? .webp? ??? ? ????. .

? ??? Images/flower1.jpg ??? ?? 50(0? ?? ??, 100? ?? ??)?? ???? Images/flower1.webp? ?????.

?? ??? ??? ??????. ?? ? ??? ??? 3.5MB?? 178kb? ?????. ?? ??? ?? ???? 4? ?????.

??? .bat ????? ???? ?? ?? ??? ?? .png ???? .webp ???? ?? ??? ?? ????.

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

---

??

• ???? ?? JavaScript ??
• ???? ??? ??? CSS? ???? ?? CSS? ?????.
• ???? ???? ???? ?????.
• ???? ???? WebP ??? ??
• ?? ???? ????
• WebP ??? ?? - ??? ? ???
• ?? ??? ?? ???(LCP)
• ??? ?? ???(FCP)

? ??? ??? ?? ? ?? ?? ? ?? ??? ?? - ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!