๐Ÿ’ป ๋น„๋“œ๋งˆ์ผ“ ๋ฆฌํŒฉํ† ๋ง next/Image ์ ์šฉ๊ธฐ

waterglassesยท2022๋…„ 9์›” 28์ผ
0

๋ฆฌํŒฉํ† ๋ง

๋ชฉ๋ก ๋ณด๊ธฐ
3/6
post-thumbnail

โš ๏ธ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์€ ์˜คํƒ€๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋“ค์–ด๊ฐ€๊ธฐ ์ „์— next/image ์ ์šฉํ•˜๊ธฐ ์ „์˜ ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด๋„๋ก ํ•˜์ž.

๋ฉ”์ธ ํŽ˜์ด์ง€์˜ ์ƒํ’ˆ ์‚ฌ์ง„๋“ค์— ์ ์šฉ๋œ ์ฝ”๋“œ์ด๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด chakra-ui ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ Image ํƒœ๊ทธ๋ฅผ ์ ์šฉํ•œ ๋ชจ์Šต์ด๋‹ค.

import { Image } from '@chakra-ui/react';

const CardProductImage = ({ alt, src }: CardProductImageProps) => {
  return (
    <Image alt={alt} src={src} />
  );
};

๋‹ค๋งŒ, ์ด๋ ‡๊ฒŒ ์ ์šฉํ•˜์˜€์„ ๋•Œ ๋ฉ”์ธํŽ˜์ด์ง€์˜ ์‚ฌ์ง„๋“ค์ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•˜๋‚˜์”ฉ ๋Š๋ฆฌ๊ฒŒ ๋กœ๋”ฉ๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

๋น„๋“œ๋งˆ์ผ“ ๋ฉ”์ธํŽ˜์ด์ง€ gif

๋˜ํ•œ, lighthouse์˜ ํผํฌ๋จผ์Šค ์ง€์ˆ˜๊ฐ€ ๋‚ฎ์€ ์ด์œ ๋„ ์‚ดํŽด๋ณด๋‹ˆ ํŒŒ์ผ ์šฉ๋Ÿ‰์ด ํฌ๊ณ  ํ•ด์ƒ๋„๊ฐ€ ๋งค์šฐ ๋†’์€ ์ด๋ฏธ์ง€๋“ค์„ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์ด์—ˆ๋‹ค.

์ƒํ’ˆ ์นด๋“œ ์ด๋ฏธ์ง€๋งŒ ํ•ด๋„ ๋ฉ”์ธ ํŽ˜์ด์ง€, ๊ฒ€์ƒ‰, ๋‚ด๊ฐ€ ํŒ๋งคํ•œ ์ƒํ’ˆ, ์ฐœํ•œ ์ƒํ’ˆ, ๋‚™์ฐฐ๋œ ์ƒํ’ˆ ํŽ˜์ด์ง€ ๋“ฑ ๋งŽ์€ ๊ณณ์— ์ ์šฉ๋˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ์„ ์ด ํ•„์š”ํ•˜์˜€๋‹ค.

lighthouse ์ ์ˆ˜

next/Image๋กœ ์ ์šฉ

1. loading ์†์„ฑ

๊ธฐ๋ณธ์ ์œผ๋กœ next/image์˜ loading ์†์„ฑ์˜ ๊ธฐ๋ณธ๊ฐ’์€ lazy์ด๋‹ค.

lazy loading์ด๋ž€?

์‚ฌ์šฉ์ž๊ฐ€ ์—ก ํŽ˜์ด์ง€๋ฅผ ์—ด๋ฉด ์ „์ฒด ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ์ด ๋‹ค์šด๋กœ๋“œ ๋˜์–ด ๋‹จ์ผ ์ด๋™์œผ๋กœ ๋ Œ๋”๋ง์ด ๋œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฌดํ•œ ์Šคํฌ๋กค์„ ๊ตฌํ˜„ํ•˜์˜€์„ ๋•Œ ๋ชจ๋“  ์Šคํฌ๋กค์˜ ๋‚ด์šฉ์„ ํ•œ ์Šคํฌ๋ฆฐ ์•ˆ์— ๋ณผ ์ˆ˜ ์—†๋‹ค. ๋”ฐ๋ผ์„œ ํŽ˜์ด์ง€์— ์ ‘๊ทผํ•  ๋•Œ ์‚ฌ์šฉ์ž๊ฐ€ ํ•„์š”ํ•œ ํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋งŒ ์ฝ˜ํ…์ธ ๋ฅผ ๋กœ๋“œํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

-> ์ฒ˜์Œ ์•Œ์•˜๋Š”๋ฐ lazy loading๋„ ๊ฒ€์ƒ‰ ์—”์ง„ ์ˆœ์œ„์— ์˜ํ–ฅ์„ ๋ฏธ์นœ๋‹ค๊ณ  ํ•œ๋‹ค. ์›น ํŽ˜์ด์ง€์˜ ์ „์ฒด ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋Š๋ฆฌ๊ฒŒ ๋กœ๋“œํ•˜๋ฉด ๊ฒ€์ƒ‰ ์—”์ง„์ด ํ•ด๋‹น ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์šฐํšŒํ•˜์—ฌ ์ฝ˜ํ…์ธ ๊ฐ€ ์ธ๋ฑ์‹ฑ ๋˜์ง€ ์•Š์•„ ์—”์ง„ ๊ฒฐ๊ณผ๊ฐ€ ์ค„์–ด๋“ค ์ˆ˜ ์žˆ๋‹ค.

์ด๋Ÿฌํ•œ lazy loading์„ ๋‹จ์ˆœํžˆ Next/Image๋ฅผ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค.

2. layout ์†์„ฑ

  1. layout="intrinsic"
    ์ด๋ฏธ์ง€๋Š” ๋” ์ž‘์€ ๋ทฐํฌํŠธ์˜ ๊ฒฝ์šฐ ํฌ๊ธฐ๋ฅผ ์ถ•์†Œํ•˜์ง€๋งŒ ๋” ํฐ ๋ทฐํฌํŠธ์˜ ๊ฒฝ์šฐ ์›๋ž˜ ํฌ๊ธฐ๋ฅผ ์œ ์ง€ํ•œ๋‹ค.

  2. layout="fixed"
    ๋ทฐํฌํŠธ์™€ ์ƒ๊ด€ ์—†์ด ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ๋ฅผ width, height ์†์„ฑ์œผ๋กœ ๊ณ ์ •ํ•œ๋‹ค.

  3. layout="responsive"
    ์ด๋ฏธ์ง€๋Š” ๋” ์ž‘์€ ๋ทฐํฌํŠธ์˜ ๊ฒฝ์šฐ ํฌ๊ธฐ๋ฅผ ์ถ•์†Œํ•˜์ง€๋งŒ ๋” ํฐ ๋ทฐํฌํŠธ์˜ ๊ฒฝ์šฐ ํฌ๊ธฐ๊ฐ€ ๋Š˜์–ด๋‚œ๋‹ค. ์ฆ‰, ์ด๋ฏธ์ง€ ๋น„์œจ์ด ์œ ์ง€๋œ๋‹ค.

  4. layout="fill"
    relative position์„ ๊ฐ€์ง„ ์กฐ์ƒ์˜ width, height์™€ ๋™์ผํ•˜๊ฒŒ์กฐ์ •๋œ๋‹ค.

์ด ์†์„ฑ๋“ค์„ ์ ์šฉํ•˜๊ฒŒ ๋˜๋ฉด width์™€ height๋„ layout ์†์„ฑ์— ๋งž๊ฒŒ ์˜๋ฏธ๊ฐ€ ๋‹ฌ๋ผ์ง€๊ฒŒ ๋œ๋‹ค.

  • intrinsic, fixed ์ผ ๋•Œ: ๋ Œ๋”๋ง ์‚ฌ์ด์ฆˆ
  • responsive, fill ์ผ ๋•Œ: ์›๋ณธ ์ด๋ฏธ์ง€์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์˜๋ฏธ, ์ด๋ฏธ์ง€์˜ ๋น„์œจ์„ ์ถ”์ •ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ

๋น„๋“œ๋งˆ์ผ“์— ์ ์šฉ

์œ„์˜ ๋‘ ์†์„ฑ์„ ์‚ฌ์šฉํ•ด์„œ ์•„๋ž˜์ฒ˜๋Ÿผ ์ ์šฉํ•˜์˜€๋‹ค.

import Image from 'next/image';


const CardProductImage = ({ alt, src }: CardProductImageProps) => {
  return <Image
    layout="fixed"
    objectFit="cover"
    width={114}
    height={114}
    alt={alt}
    src={src}
    />
};

ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ € ํผํฌ๋จผ์Šค ํƒญ์œผ๋กœ ๋นจ๋ผ์ง„ ์†๋„ ํ™•์ธ

๋ฉ”์ธ ํŽ˜์ด์ง€์—์„œ ์นด๋“œ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ ์˜ฌ ๋•Œ(๋กœ๋“œํ•  ๋•Œ) ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„

๊ธฐ๋ณธ Image ํƒœ๊ทธ

๊ธฐ๋ณธ chakra-ui์˜ Imageํƒœ๊ทธ ์ฆ‰, ๊ธฐ๋ณธ img ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ์—๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด 722ms ~1000ms ๊นŒ์ง€ ์•ฝ 300ms ์ •๋„ ๊ฑธ๋ฆฌ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

image

next/image ์ ์šฉ

40ms์ •๋„๋กœ ๋ฌด๋ ค 260ms์ •๋„๋‚˜ ์ค„์–ด๋“  ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

image

์ƒํ’ˆ card ์ด๋ฏธ์ง€ ํ•˜๋‚˜๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋„คํŠธ์›Œํฌ ์š”์ฒญ ์ •๋ณด

๊ธฐ๋ณธ Image ํƒœ๊ทธ

image

next/image ์ ์šฉ

๋‹ค์Œ๊ณผ ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ์™€ ์š”์ฒญ ์‹œ๊ฐ„์ด ์ค„์–ด๋“  ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค! ๋˜ํ•œ webpํฌ๋งท์„ ์‚ฌ์šฉ๋œ ๊ฒƒ๋„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

image

๋ฐ˜์˜ ์™„๋ฃŒ ๋œ ๋ฉ”์ธ ํŽ˜์ด์ง€

๋ฉ”์ธํŽ˜์ด์ง€์˜ ์‚ฌ์ง„๋“ค์ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•˜๋‚˜์”ฉ ๋Š๋ฆฌ๊ฒŒ ๋กœ๋”ฉ๋˜์—ˆ๋˜ ๋ถ€๋ถ„์ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋นจ๋ผ์ง„ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

next/image ๋ฐ˜์˜ ํ›„ ์ด๋ฏธ์ง€

๋งค์šฐ ๋†’์•„์ง„ lighthouse ์ ์ˆ˜

web vitals ์ •๋ฆฌ, next/Image ์ ์šฉ ์ „ ํ›„ ๋น„๊ต

๐Ÿ”ฅ ๋Š๋‚€์ 

๋‹จ์ง€ image๋ฅผ next/imageํƒœ๊ทธ๋กœ ๋ณ€๊ฒฝํ•ด์„œ ์ ์šฉํ–ˆ์„ ๋ฟ์ธ๋ฐ ์ด๋ฏธ์ง€๊ฐ€ ์–ผ๋งˆ ์—†์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  300ms๋‚˜ ๊ฐœ์„ ํ•œ ๊ฒฐ๊ณผ๋ฅผ ์–ป์—ˆ๊ณ  ์„ฑ๋Šฅ์ด ๋งค์šฐ ํ–ฅ์ƒ๋œ ๊ฒƒ์„ ์ง์ ‘ ํ™•์ธํ•  ์ˆ˜ ์žˆ์–ด์„œ ๋„ˆ๋ฌด ์ข‹์•˜๋‹ค. ๋‚ด ์†์œผ๋กœ ํผํฌ๋จผ์Šค ์ˆ˜์น˜๋ฅผ ์ด๋ ‡๊ฒŒ ์˜ฌ๋ ค๋ณธ ์ ์ด ์ฒ˜์Œ์ด๋ผ ๋งค์šฐ ์งœ๋ฆฟํ–ˆ๋‹ค.

Refer

profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€