Logs

Notes

  • ์›น
    • HTML img ํƒœ๊ทธ์˜ fetchPriority ์†์„ฑ์˜ ๊ธฐ๋Šฅ์€? (์ฐธ๊ณ )
      • ์ด๋ฏธ์ง€ ๊ฐ€์ ธ์˜ค๊ธฐ์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
        • high: ๋‹ค๋ฅธ ์ด๋ฏธ์ง€์— ๋น„ํ•ด ๋†’์€ ์šฐ์„ ์ˆœ์œ„๋กœ ์ด๋ฏธ์ง€๋ฅผ ๊ฐ€์ ธ์˜ด.
        • low: ๋‹ค๋ฅธ ์ด๋ฏธ์ง€์— ๋น„ํ•ด ๋‚ฎ์€ ์šฐ์„ ์ˆœ์œ„๋กœ ์ด๋ฏธ์ง€๋ฅผ ๊ฐ€์ ธ์˜ด.
        • auto: ๊ธฐ๋ณธ ๋ชจ๋“œ. ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•Œ์•„์„œ ๊ฒฐ์ •ํ•จ.
      • https://web.dev/articles/optimize-lcp#optimize-when-the-resource-is-discovered ๋ฌธ์„œ์— ๋”ฐ๋ฅด๋ฉด,
        • LCP ์š”์†Œ์ผ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’๋‹ค๊ณ  ์ƒ๊ฐ๋˜๋ฉดย fetchpriority="high"๋ฅผย ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.ย ๊ทธ๋Ÿฌ๋‚˜ ํ•˜๋‚˜ ๋˜๋Š” ๋‘ ๊ฐœ ์ด์ƒ์˜ ์ด๋ฏธ์ง€์— ๋†’์€ ์šฐ์„ ์ˆœ์œ„๋ฅผ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์€ LCP๋ฅผ ์ค„์ด๋Š” ๋ฐ ๋„์›€์ด ๋˜์ง€ ์•Š๋Š”๋‹ค.
        • LCP ๋ฆฌ์†Œ์Šค๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฏธ๋ฆฌ ๋กœ๋“œํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•จ.
          • <link rel="preload" fetchpriority="high" as="image" href="/path/to/hero-image.webp" type="image/webp">
        • ๊ทธ๋ฆฌ๊ณ  loading="lazy" ์„ค์ •ํ•˜๋ฉด HTML์„ ์‚ฌ์šฉํ•˜์—ฌ LCP ์ด๋ฏธ์ง€๋ฅผ ์ง€์—ฐํ•˜๋Š” ๊ฒƒ์€ ๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ.
          • ์ง€์—ฐ ๋กœ๋“œ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋ ˆ์ด์•„์›ƒ์—์„œ ์ด๋ฏธ์ง€๊ฐ€ ๋ทฐํฌํŠธ์— ์žˆ์Œ์„ ํ™•์ธํ•œ ํ›„์—์•ผ ๋ฆฌ์†Œ์Šค๊ฐ€ ๋กœ๋“œ๋œ๋‹ค๋Š” ์˜๋ฏธ. ์ด๋กœ ์ธํ•ด ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ๋ณด๋‹ค ๋Šฆ๊ฒŒ ๋กœ๋“œ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Œ.
          • ์ง€์—ฐ ๋กœ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ถˆํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค ๋กœ๋“œ ์ง€์—ฐ์ด ๋ฐœ์ƒํ•˜์—ฌ LCP๊ฐ€ ์ฆ๊ฐ€ํ•จ.
        • ์ž˜ ๋ชจ๋ฅด๊ฒ ๋‹ค๋ฉด fetchPriority=auto๋ฅผ ์‚ฌ์šฉํ•˜์ž.
    • ์„ธ์ปจ๋“œ๋ธŒ๋ ˆ์ธ
      • ๋…ธ์…˜ vs ์˜ต์‹œ๋””์–ธ: ๋…ธ์…˜์€ ๋…์„œ ๋ชฉ๋ก์ด๋‚˜ ์ž‘์—… ํ”„๋กœ์ ํŠธ์ฒ˜๋Ÿผ ๊ณ„ํšํ•˜๊ณ  ์ง„ํ–‰ ์ƒํ™ฉ์„ ์ถ”์ ํ•˜๋Š” ๋ฐ ์ข‹๋‹ค. ์˜ต์‹œ๋””์–ธ์€ ์›น๊ณผ ๊ฐ™์€ ๊ตฌ์กฐ๋กœ ์—ฐ๊ฒฐ๋œ ํ…์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ธ€์“ฐ๊ธฐ์— ์ข‹๋‹ค. (์ถœ์ฒ˜)

Resources