Tools

๐Ÿ“ ์›น์‚ฌ์ดํŠธ ์„ฑ๋Šฅ ์ธก์ • ๋„๊ตฌ Lighthouse

Lighthouse๋ž€? 
Google์—์„œ ์ œ๊ณตํ•˜๋Š” ์›น ์„ฑ๋Šฅ ์ง„๋‹จ ๋„๊ตฌ๋กœ ์„ฑ๋Šฅ(Performance), ์ ‘๊ทผ์„ฑ(Accessibility), ๊ถŒ์žฅ์‚ฌํ•ญ(Best Practices), ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”(SEO) ๋“ฑ 4๊ฐ€์ง€ ํ•ญ๋ชฉ์— ๋Œ€ํ•ด ์ ์ˆ˜๋ฅผ ํ‰๊ฐ€ํ•œ๋‹ค. 

์›น์‚ฌ์ดํŠธ์˜ ์ „๋ฐ˜์ ์ธ ํ’ˆ์งˆ์„ ํ‰๊ฐ€ํ•˜๋Š” ๋ฐ ์žˆ์–ด Lighthouse ์ ์ˆ˜๋Š” ์‹ค์งˆ์ ์ธ ๊ธฐ์ค€์ด ๋œ๋‹ค. ์„ฑ๋Šฅ, UX, SEO ๋“ฑ ๋‹ค์–‘ํ•œ ์š”์†Œ์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ๋งŒํผ ์ ์ˆ˜ ๊ฐœ์„ ์„ ์œ„ํ•œ ์ง€์†์ ์ธ ๊ด€๋ฆฌ์™€ ์ตœ์ ํ™”๊ฐ€ ์ค‘์š”ํ•˜๋‹ค. 
 

lighthouse ์ด๋ฏธ์ง€


ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ €์˜ DevTools(F12) ์•ˆ์˜ Lighthouse ํƒญ์„ ํ†ตํ•ด ๋ถ„์„์„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ชจ๋ฐ”์ผ๊ณผ ๋ฐ์Šคํฌํ†ฑ ํ™˜๊ฒฝ ๋ชจ๋‘์—์„œ ํ…Œ์ŠคํŠธ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค. 
 



* ํ•ญ๋ชฉ๋ณ„ ๊ฐœ์„  ํฌ์ธํŠธ 
 

1. ์„ฑ๋Šฅ (Performance)
 

  • ์ด๋ฏธ์ง€ ํฌ๊ธฐ ์ตœ์ ํ™” 
    ์›๋ณธ ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ(ํ•ด์ƒ๋„, ์šฉ๋Ÿ‰)๊ฐ€ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ํฌ๋‹ค๋ฉด ์ค„์ด๊ณ  ์ด๋ฏธ์ง€ ํฌ๋งท์„ WebP๋‚˜ AVIF ๊ฐ™์€ ์ตœ์‹  ํฌ๋งท์œผ๋กœ ๋ณ€ํ™˜ํ•ด ์ตœ์ ํ™”ํ•œ๋‹ค. (์ฐธ๊ณ )
     
  • ๋ Œ๋”๋ง ์ฐจ๋‹จ ๋ฆฌ์†Œ์Šค
    ์™ธ๋ถ€ ์Šคํฌ๋ฆฝํŠธ์—๋Š” strategy ์†์„ฑ์„ ์„ค์ •ํ•˜๊ณ  ํ•„์š”ํ•œ ์‹œ์ ์—๋งŒ JavaScript๋ฅผ ๋กœ๋“œํ•˜๋„๋ก ์ง€์—ฐ ๋กœ๋”ฉ ๋ฐฉ์‹์„ ์ ์šฉํ•œ๋‹ค.
     
  • ๋ถˆํ•„์š”ํ•œ JavaScript ๋กœ๋”ฉ
    ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” JS chunk๋Š” ๋นŒ๋“œ ์‹œ ํฌํ•จํ•˜์ง€ ์•Š๋„๋ก ํ•˜๊ณ  ๋ฌด๊ฑฐ์šด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ์—๋Š” ๊ธฐ๋Šฅ ๋Œ€๋น„ ์„ฑ๋Šฅ ๋น„์šฉ์„ ์ถฉ๋ถ„ํžˆ ๊ณ ๋ คํ•œ๋‹ค.
     

2. ์ ‘๊ทผ์„ฑ (Accessibility)
 

  • form ์š”์†Œ์— label์ด ์—†์Œ
    label ํƒœ๊ทธ๋ฅผ ๋ช…์‹œ์ ์œผ๋กœ ์—ฐ๊ฒฐํ•˜๊ฑฐ๋‚˜ aria-label์„ ํ™œ์šฉํ•œ๋‹ค.
     
  • ์ด๋ฏธ์ง€์— alt ์†์„ฑ์ด ์—†์Œ
    ๋ชจ๋“  ์ด๋ฏธ์ง€ ํƒœ๊ทธ์— ์˜๋ฏธ์— ๋งž๋Š” alt ํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
     
  • ์ƒ‰์ƒ ๋Œ€๋น„๊ฐ€ ๋‚ฎ์Œ
    ์ตœ์†Œ 4:5:1 ์ด์ƒ์˜ ๋ช…๋„ ๋Œ€๋น„๋ฅผ ํ™•๋ณดํ•˜๋„๋ก ์ƒ‰์ƒ ์กฐํ•ฉ์„ ์ •ํ•œ๋‹ค.
     
  • ํ‚ค๋ณด๋“œ๋กœ ์ ‘๊ทผ์ด ๋ถˆ๊ฐ€๋Šฅํ•œ UI
    <button>, <a>, <input> ๋“ฑ์˜ HTML ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  tabindex, role, aria-* ์†์„ฑ๋“ฑ์„ ํ†ตํ•ด ํ‚ค๋ณด๋“œ ํฌ์ปค์Šค๋ฅผ ๊ด€๋ฆฌํ•œ๋‹ค.
     

3. ๊ถŒ์žฅ์‚ฌํ•ญ (Best Practice)
 

  • HTTPS๊ฐ€ ์•„๋‹Œ ํŽ˜์ด์ง€
    SSL ์ธ์ฆ์„œ๋ฅผ ์ ์šฉํ•˜์—ฌ HTTPS๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  HTTP ์š”์ฒญ์€ HTTPS๋กœ ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ ์ฒ˜๋ฆฌํ•œ๋‹ค.
     
  • ์ทจ์•ฝํ•œ JS API ์‚ฌ์šฉ
    ๋ณด์•ˆ์— ์ทจ์•ฝํ•˜๊ฑฐ๋‚˜ ๋น„ํšจ์œจ์ ์ธ JavaScript API๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค. [document.write(), eval() ๋“ฑ]
     

4. ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™” (SEO)
 

  • meta description ๋ˆ„๋ฝ
    ํŽ˜์ด์ง€๋ณ„๋กœ ๋‚ด์šฉ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์š”์•ฝํ•œ 150์ž~160์ž ๋‚ด์™ธ์˜ ๋ฌธ์žฅ์„ metaํƒœ๊ทธ๋กœ ์ถ”๊ฐ€ํ•œ๋‹ค.
     
  • ๋งํฌ์— anchor ํ…์ŠคํŠธ๊ฐ€ ๋ถ€์กฑํ•œ ๊ฒฝ์šฐ
    ๋งํฌ์—๋Š” ๋ช…ํ™•ํ•œ ๋ชฉ์ ์ด ๋“œ๋Ÿฌ๋‚˜๋Š” ํ…์ŠคํŠธ๋ฅผ ํฌํ•จํ•œ๋‹ค. ๋ฒ„ํŠผ์ด๋‚˜ ์ด๋ฏธ์ง€ ๋งํฌ์˜ ๊ฒฝ์šฐ aria-label ๋˜๋Š” alt ์†์„ฑ์„ ํ™œ์šฉํ•œ๋‹ค.
     
  • robots.txt, sitemap์ด ๋ˆ„๋ฝ
    ๋ฃจํŠธ ๊ฒฝ๋กœ์— robots.txt์™€ sitemap.xmlํŒŒ์ผ์„ ์ƒ์„ฑํ•˜์—ฌ ๊ฒ€์ƒ‰ ์—”์ง„์ด ์‚ฌ์ดํŠธ ๊ตฌ์กฐ๋ฅผ ์ •ํ™•ํžˆ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.
     
  • ๋ชจ๋ฐ”์ผ ์นœํ™”์„ฑ ๋ถ€์กฑ
    ๋ฐ˜์‘ํ˜• ๋””์ž์ธ์„ ์ ์šฉํ•˜๊ณ  meta viewport๋ฅผ ์„ค์ •ํ•˜์—ฌ ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์—์„œ ์ฝ˜ํ…์ธ ๊ฐ€ ์ž˜ ๋ณด์ด๋„๋ก ํ•œ๋‹ค.
     


     

    lighthouse ๊ฒฐ๊ณผ ์ด๋ฏธ์ง€

      100์ ์„ ๋ชฉํ‘œ๋กœ!

์žฅ์‹์šฉ ๋กœ๊ณ 
๐Ÿ“ ์›น์‚ฌ์ดํŠธ ์„ฑ๋Šฅ ์ธก์ • ๋„๊ตฌ Lighthouse | BlueCool