λΌμ΄νΈνμ°μ€μ μ½μ΄ μΉ λ°μ΄ν μ κ²μ ν΅ν κ΅¬κΈ SEO μ΅μ ν
κ΅¬κΈ SEO μμ λ ΈμΆμ μν ν΅μ¬ μ λ΅!λΌμ΄νΈνμ°μ€(Lighthouse)μ μ½μ΄ μΉ λ°μ΄ν(Core Web Vitals)μ μΈ‘μ νλͺ©κ³Ό λꡬ μ¬μ©λ²μ μμΈν λΆμν©λλ€. LCP, INP, CLS λ± μ¬μ©μ κ²½ν μ§νμ μλ―Έμ κ°μ λ°©μ, κ·Έλ¦¬κ³ κ³ νμ§ μ½ν μΈ κ° κ²μ μμμ λ―ΈμΉλ μν₯μ ν¬ν¨νμ¬ μΉμ¬μ΄νΈ μ±λ₯ μ΅μ νμ λͺ¨λ κ²μ λ€λ£Ήλλ€.
1. κ²μ μ΅μ ν μ κ² νμ! μ½μ΄ μΉ λ°μ΄νκ³Ό λΌμ΄νΈνμ°μ€ μ΄ν΄νκΈ°
λΌμ΄νΈνμ°μ€μ μ½μ΄ μΉ λ°μ΄νμ κ΅¬κΈ μ΅μ ν μ κ²μ νκΈ° μν΄ μΉ μ±λ₯μ μΈ‘μ νλ μΈ‘μ νλͺ©κ³Ό μΈ‘μ λꡬμ λλ€. κ²μ μμ λ ΈμΆμ νκΈ° μν΄ νμ νλͺ©μ λλ€. λΉμ νμλ©΄, μ·¨μ μ νκΈ° μν΄μλ μ΄λ ₯μλ₯Ό μ μΆν΄μ μλ₯ μ μ, λ©΄μ , λΆμ λ°°μΉλ°κ² λλ―μ΄ λ¨Όμ μλ₯ μ μ(μ½μ΄ μΉ λ°μ΄ν)μμ ν©κ²©ν΄μΌ ν©λλ€. κ·ΈλμΌ λ©΄μ (λΌμ΄νΈνμ°μ€)μ λ³΄κ³ μ’μ λΆμ(κ³ νμ§ μ½ν μΈ μμ λ ΈμΆ)μ λ°°μΉλ μ μμ΅λλ€.
μ½μ΄ μΉ λ°μ΄ν ν΅κ³Όλ μλ₯ μ μμμ ν©κ²©μ΄κ³ λΌμ΄νΈνμ°μ€λ λ©΄μ μν, κ·Έλ¦¬κ³ μ½ν μΈ λ μ’μ λΆμ λ°°μΉμ λλ€. μ΄ λ λꡬμ μν κ³Ό μ€μμ±μ ꡬ체μ μΌλ‘ μ΄ν΄λ³΄κ³ , μ΄λ₯Ό ν΅ν΄ μΉνμ΄μ§ νμ§μ μ΄λ»κ² κ°μ ν μ μλμ§ μμλ³΄κ² μ΅λλ€.
2. κ΅¬κΈ μ΅μ ν μ κ² ν΅μ¬: μ½μ΄ μΉ λ°μ΄ν (Core Web Vitals)μ μν
μ½μ΄ μΉ λ°μ΄ν(Core Web Vitals)μ μΉ νμ΄μ§μμ μ¬μ©μ κ²½νμ νκ°νλ μ£Όμ μ§νλ‘, ꡬκΈμ΄ μΉ νμ΄μ§ μ±λ₯κ³Ό νμ§μ μΈ‘μ νλ μ΅μ κΈ°μ€μ λλ€. μ΄ μ§νλ€μ μΉ νμ΄μ§μ λ‘λ© μλ, μνΈ μμ©, μκ°μ μμ μ±μ μΈ‘μ νλ©°, ꡬκΈμ΄ κ²μ μμλ₯Ό λ§€κΈ°λ λ° μ€μν κΈ°λ³Έ κΈ°μ€μ΄ λ©λλ€.
μ½μ΄ μΉ λ°μ΄νμ μΈ κ°μ§ μ£Όμ μ§ν
μ½μ΄ μΉ λ°μ΄νμ μ¬μ©μ κ²½νμ νκ°νλ μΈ κ°μ§ ν΅μ¬ μ§νλ‘ κ΅¬μ±λμ΄ μμ΅λλ€. μ΄ μ§νλ€μ μΉ μ±λ₯ μ΅μ νμ ν΅μ¬ λͺ©νκ° λ©λλ€.
- LCP (Largest Contentful Paint): κ°μ₯ ν° μ½ν μΈ (μ΄λ―Έμ§, ν μ€νΈ λΈλ‘ λ±)κ° νλ©΄μ λνλλ λ° κ±Έλ¦¬λ μκ°μ μΈ‘μ ν©λλ€. 2.5μ΄ μ΄λ΄μ¬μΌ 'Good' νκ°λ₯Ό λ°μ΅λλ€. μ΄λ λ‘λ© μλ μ΅μ νμ ν΅μ¬μ λλ€.
- INP (Interaction to Next Paint): (2024λ 3μ 12μΌλΆν° FIDλ₯Ό λ체) μ¬μ©μκ° νμ΄μ§μ μνΈ μμ©(ν΄λ¦, ν λ±)νμ λ, λΈλΌμ°μ κ° λ€μ νλ μμ νμνλ λ° κ±Έλ¦¬λ μλ΅ μκ°μ μΈ‘μ ν©λλ€. 200λ°λ¦¬μ΄(ms) μ΄λ΄μ¬μΌ 'Good' νκ°λ₯Ό λ°μ΅λλ€.
- CLS (Cumulative Layout Shift): νμ΄μ§ λ‘λ© μ€ μμμΉ λͺ»ν λ μ΄μμμ μ΄λ(νλ€λ¦Ό)μ΄ λ°μνλ μ λλ₯Ό μΈ‘μ ν©λλ€. 0.1 λ―Έλ§μ΄μ΄μΌ 'Good' νκ°λ₯Ό λ°μ΅λλ€. μ΄λ μκ°μ μμ μ±κ³Ό μ§κ²°λ©λλ€.
2024λ 3μ 12μΌλΆν° INPκ° FID(First Input Delay)λ₯Ό λ체νμ¬ Core Web Vital μν μ μννκ³ μμ΅λλ€. FIDλ νμ΄μ§μ 첫 λ²μ§Έ μνΈ μμ©λ§μ μΈ‘μ νμΌλ, INPλ μ 체 νμ΄μ§ λΌμ΄νμ¬μ΄ν΄ λμμ λͺ¨λ μνΈ μμ© μλ΅μ±μ μΈ‘μ νμ¬ μ¬μ©μ κ²½ν νκ°λ₯Ό λμ± μ κ΅ννμ΅λλ€.

3. μ¬μΈ΅μ μΈ νμ§ ν μ€νΈ λꡬ: λΌμ΄νΈνμ°μ€ (Lighthouse) λΆμ
Lighthouseλ ꡬκΈμμ μ μν μ€ν μμ€ νμ§ ν μ€νΈ λꡬλ‘, μΉνμ΄μ§μ μ±λ₯, μ κ·Όμ±, SEO λ± 5κ°μ§ μμμ κ±Έμ³ μ’ ν©μ μΈ λ³΄κ³ μλ₯Ό μ 곡ν©λλ€. μ½μ΄ μΉ λ°μ΄νμ΄ 'μ΅μ κΈ°μ€'μ΄λΌλ©΄, λΌμ΄νΈνμ°μ€λ μΉμ¬μ΄νΈμ 'μ’ ν© κ±΄κ° κ²μ§'κ³Ό κ°μ΅λλ€. μ΄ λꡬλ PageSpeed Insightsλ Chrome κ°λ°μ λꡬμμ μ½κ² μ€νν μ μμ΅λλ€.
λΌμ΄νΈνμ°μ€μ 5κ°μ§ ν΅μ¬ μΈ‘μ νλͺ©
λΌμ΄νΈνμ°μ€λ λ¨μν μλλΏλ§ μλλΌ μΉνμ΄μ§μ μ λ°μ μΈ νμ§μ νκ°νλ λ€μ°¨μμ μΈ λꡬμ λλ€.
- μ±λ₯ (Performance): νμ΄μ§ λ‘λ© μλ, μνΈ μμ© μκ°, μκ°μ μμ μ± λ± μΉμ¬μ΄νΈμ μλ κ΄λ ¨ μ§νλ₯Ό μΈ‘μ ν©λλ€. FCP, LCP, INP, CLS λ±μ Core Web Vitals μ§νλ€μ΄ μ΄ νλͺ©μ ν¬ν¨λ©λλ€.
- μ κ·Όμ± (Accessibility): μ¬μ©μκ° μΌλ§λ μ½κ³ νΈνκ² νμ΄μ§λ₯Ό μ΄μ©ν μ μλμ§λ₯Ό μΈ‘μ ν©λλ€. μκ° μ₯μ μΈμ μν λ체 ν μ€νΈ(Alt Text) μ¬μ© μ¬λΆ, ν€λ³΄λ μ κ·Όμ±, λͺ νν μμ λλΉ λ±μ μ κ²ν©λλ€.
- κΆμ₯ μ¬ν (Best Practices): μΉνμ΄μ§κ° μΉ νμ€ κ·μ κ³Ό λͺ¨λ² μ¬λ‘(HTTPS μ¬μ©, μ·¨μ½μ μ κ±°, μ½μ μ€λ₯ λ°©μ§ λ±)μ λ§κ² ꡬμΆλμλμ§ μΈ‘μ ν©λλ€.
- κ²μ μ΅μ ν (SEO): κ²μ μμ§μ΄ νμ΄μ§λ₯Ό μΌλ§λ μ ν¬λ‘€λ§νκ³ μμΈν μ μλμ§ μΈ‘μ νλ νλͺ©μ λλ€. λ©ν νκ·Έ μ‘΄μ¬ μ¬λΆ, μ ν¨ν H νκ·Έ μ¬μ©, λͺ¨λ°μΌ μΉνμ± λ±μ μ κ²ν©λλ€.
- PWA (Progressive Web App): μΉμ¬μ΄νΈκ° PWA μꡬ μ¬νμ μΆ©μ‘±νλμ§ μΈ‘μ ν©λλ€. (μ νμ νλͺ©)
μ κ·Όμ±, κΆμ₯ μ¬ν, κ²μ μ΅μ νλ λ°λμ κ³ λμ μ λ°μμΌ νλ μ€μν νλͺ©μ λλ€. νΉν κ²μ μ΅μ ν, CLS, INPλ κ²μ λ ΈμΆμ μν νμ μ¬νμ λλ€.
λΌμ΄νΈνμ°μ€ μ±λ₯ μΈ‘μ νλͺ© μ¬ν λΆμ
λΌμ΄νΈνμ°μ€μ μ±λ₯ μΉμ μ Core Web Vitals μΈμλ λ€μν μκ° κΈ°λ° μ§νλ₯Ό ν¬ν¨ν©λλ€.
- FCP (First Contentful Paint): μΉνμ΄μ§ μ μ μ νλ©΄μ μ²μ μμλλ μ½ν μΈ (ν μ€νΈ, μ΄λ―Έμ§ λ±)κ° νμλλ μκ°μ μΈ‘μ ν©λλ€. μ΄λ μ¬μ©μκ° νμ΄μ§κ° λ‘λ©λκ³ μλ€λ κ²μ μΈμ§νλ μ΅μ΄μ μμ μ λλ€.

- TBT (Total Blocking Time): μΉνμ΄μ§ λ‘λ© μ€ λ©μΈ μ€λ λκ° μ¬μ©μ μ λ ₯μ μλ΅νμ§ λͺ»νκ³ μ°¨λ¨λλ μ΄ μκ°μ μΈ‘μ ν©λλ€. μ΄λ INPμ λ°μ ν κ΄λ ¨μ΄ μμΌλ©°, μ£Όλ‘ κΈ΄ μλ°μ€ν¬λ¦½νΈ μ€ν μκ°μΌλ‘ μΈν΄ λ°μν©λλ€. μΈλΆ μ½λλ₯Ό μμ ν΄μΌ νλ―λ‘ μ 체μ μΈ μμ€ν μ μ΅μ νλ‘ μ§νν΄μΌ ν©λλ€.
- LCP (Largest Contentful Paint): νμ΄μ§ λ‘λ μ κ°μ₯ ν° μ½ν μΈ κ° νμλλ μκ°μ μΈ‘μ νλ©°, Core Web Vitalμ ν΅μ¬ μ§νμ λλ€. LCPλ ν°νΈ μ΅μ ν, μ΄λ―Έμ§ μμΆ λ° μ§μ° λ‘λ©(Lazy Loading) λ±μμ μμ ν μ μμ΅λλ€.
- CLS (Cumulative Layout Shift): νμ΄μ§ λ‘λ© μ€ λ μ΄μμ μμ μ±μ μΈ‘μ νλ©° Core Web Vitalμ ν΅μ¬ μ§νμ λλ€. μ΄λ―Έμ§μ ν¬κΈ° μμ±(width, height)μ λͺ μνκ±°λ, κ΄κ³ /iframe μμμ μ΅μ λμ΄λ₯Ό μ§μ νμ¬ λ μ΄μμ μ΄λμ λ°©μ§ν΄μΌ ν©λλ€.
- INP (Interaction to Next Paint): μ¬μ©μμ μ‘°μ(λ²νΌ ν΄λ¦, λ§ν¬ ν΄λ¦ λ±) μ μλ΅νλ μ±λ₯μ μΈ‘μ νλ©° Core Web Vitalμ ν΅μ¬ μ§νμ λλ€.

4. κΈ°μ μ μ΅μ ν μ΄ν: κ³ νμ§ μ½ν μΈ μ μ€μμ±
Core Web Vitals ν΅κ³Όμ Lighthouse κ³ λμ μ κ²μ μμ§μ 'μλ₯ μ¬μ¬'μ 'λ©΄μ 'μ ν©κ²©νλ κ²μ μλ―Έν©λλ€. κ·Έλ¬λ μ΅μ’ μ μΌλ‘ λμ κ²μ μμμ μ₯κΈ°μ μΈ νΈλν½μ κ²°μ νλ κ²μ κ³ νμ§ μ½ν μΈ μ λλ€.
κΈ°μ μ μ΅μ νκ° μΉνμ΄μ§λ₯Ό 'λΉ λ₯΄κ³ μμ νκ²' λ§λλ κ³Όμ μ΄λΌλ©΄, κ³ νμ§ μ½ν μΈ λ μΉνμ΄μ§λ₯Ό 'κ°μΉ μκ³ μ λ’°ν μ μλ μ 보μ'μΌλ‘ λ§λλ κ³Όμ μ λλ€. κ²μ μμ§μ κΈ°μ μ κΈ°μ€μ μΆ©μ‘±μν¨ μΉνμ΄μ§ μ€μμλ μ¬μ©μμκ² κ°μ₯ μ μ©νκ³ κΉμ΄ μλ μ 보λ₯Ό μ 곡νλ μ½ν μΈ μ μ΅μ’ μμ κ°μ€μΉλ₯Ό λΆμ¬ν©λλ€.

μ΅μ’ μμ κ²°μ μμμ μνΈ μμ©
μ΅μ’ μ½ν μΈ μ νμ§μ μ κ² ν μμλ₯Ό κ²°μ ν©λλ€. κΈ°μ μ μ±λ₯κ³Ό μ½ν μΈ νμ§μ λ€μκ³Ό κ°μ μνΈ μμ©μ ν©λλ€.
- κΈ°μ μ κΈ°μ€ (Core Web Vitals): μμ κ²°μ μ λ¬Έν±(Threshold) μν μ ν©λλ€. κΈ°μ€ λ―Έλ¬ μ μ무리 μ’μ μ½ν μΈ λΌλ μμ λ ΈμΆ κΈ°νκ° μ νλ©λλ€.
- μ½ν μΈ νμ§ (E-E-A-T): λ¬Έν±μ ν΅κ³Όν μΉνμ΄μ§λ€ μ¬μ΄μμ μ΅μ’ μμλ₯Ό κ²°μ νλ μμμ λλ€. μ λ¬Έμ±(Expertise), κΆμ(Authoritativeness), μ λ’°μ±(Trustworthiness)κ³Ό κ²½ν(Experience)μ μλ―Ένλ E-E-A-T μμΉμ΄ ν΅μ¬μ λλ€.
κΈ°μ μ μμλ₯Ό μμ ν μ μλ λΆλΆ: HTML, CSS, μ¬μ©μ μ€μ μ€ν¬λ¦½νΈ, μ΄λ―Έμ§ μ΅μ ν, κ΄κ³ μ€ν¬λ¦½νΈ, ν°νΈ λ‘λ© λ°©μ λ±μ΄ μμΌλ©°, μλ²μ μλ΅ μλμλ μ°κ΄μ΄ μμ΅λλ€. μ¦, μμ ν μ μλ λΆλΆκ³Ό μμ ν μ μλ λΆλΆμ΄ μ‘΄μ¬νλ©°, μλ² μλλ μΈλΆ μμλ‘ λΆλ₯λ©λλ€.
μ½μ΄ μΉ λ°μ΄ν νκ°λ μ΅μ ν μμ μ νλλΌλ μ΅μ 2λ¬μμ 3κ°μ μ λ λ°μ΄ν°κ° λμ λκ³ λμ λ³κ²½λ μΈ‘μ κ°μ΄ λ°μλ©λλ€. μ΄λ νλ λ°μ΄ν°(Field Data)μ λμ κΈ°κ° λλ¬Έμ λλ€. λν μ±λ₯ μΈ‘μ νλͺ©μ λμμ, GIF νμΌ, μ΄λ―Έμ§λ₯Ό μ΄λ»κ² μ¬μ©νλμ§ μ¬λΆμ λ°λΌμ μ½ν μΈ μμ± μ λ³λμ΄ λ°μν©λλ€.
κ·Έλ¬λ 2μ°¨ κΈ°μ€ μ€ CLS(λ μ΄μμ μμ μ±)μ κ²μ μμ§ μ΅μ ν(SEO) μ μλ μ½ν μΈ μμ± λ°©μμ λ°λΌ λ³λμ΄ μμ΄μΌ ν©λλ€. λ¨, 2μ°¨ λλ©μΈ μ΅μ νμ κ³ μ λλ©μΈ μ΅μ νλ μΈλΆ μμ μΈ‘μ κ°μ΄ λ°μλμ΄ λ€λ₯Έ μΈ‘μ κ°μ΄ λμ¬ μ μμ΅λλ€.
μ½μ΄ μΉ λ°μ΄νκ³Ό λΌμ΄νΈνμ°μ€λ μ΄λ€ μ°¨μ΄κ° μλμ?
μ½μ΄ μΉ λ°μ΄νμ LCP, INP, CLS μΈ κ°μ§ ν΅μ¬ μ§νλ₯Ό ν΅ν΄ 'μ¬μ©μ κ²½νμ μ΅μ κΈ°μ€'μ μΈ‘μ νλ ꡬκΈμ μμ μμμ λλ€. λ°λ©΄, λΌμ΄νΈνμ°μ€λ μ±λ₯, μ κ·Όμ±, SEO, κΆμ₯ μ¬ν λ± 5κ°μ§ μμμ μ’ ν©μ μΌλ‘ μΈ‘μ νμ¬ μΉμ¬μ΄νΈμ μ λ°μ μΈ νμ§μ νκ°νλ 'μ§λ¨ λꡬ'μ λλ€. λΌμ΄νΈνμ°μ€μ μ±λ₯ νλͺ©μ μ½μ΄ μΉ λ°μ΄ν μ§νκ° ν¬ν¨λμ΄ μμ΅λλ€.
μ½μ΄ μΉ λ°μ΄ν μ μλ₯Ό κ°μ ν΄λ κ²μ μμκ° λ°λ‘ μ€λ₯΄μ§ μλ μ΄μ λ 무μμΈκ°μ?
Core Web Vitals μ μλ μ€μ μ¬μ©μ λ°μ΄ν°(Field Data)λ₯Ό κΈ°λ°μΌλ‘ μΈ‘μ λλ©°, μ΄ λ°μ΄ν°λ μ΅μ 28μΌ μ΄μ λμ λ ν λ°μλ©λλ€. λ°λΌμ μ΅μ ν μμ μ νλλΌλ κ²μ μμ§μ λ°μλμ΄ μμ λ³νκ° λνλκΈ°κΉμ§λ μ΅μ 2~3κ°μμ μκ°μ΄ μμλ μ μμ΅λλ€. λν, κΈ°μ μ μ΅μ νλ 'νμ 쑰건'μΌ λΏμ΄λ©°, μ΅μ’ μμλ μ½ν μΈ μ νμ§(E-E-A-T)μ μν΄ κ²°μ λ©λλ€.
LCPλ₯Ό κ°μ νκΈ° μν κ°μ₯ ν¨κ³Όμ μΈ λ°©λ²μ 무μμΈκ°μ?
LCP(Largest Contentful Paint)λ κ°μ₯ ν° μ½ν μΈ μ λ‘λ© μλλ₯Ό μ€μ΄λ κ²μ΄ ν΅μ¬μ λλ€. κ°μ₯ ν¨κ³Όμ μΈ λ°©λ²μ 1) μλ² μλ΅ μκ°μ μ€μ΄κ³ , 2) LCP μμκ° λλ μ΄λ―Έμ§λ₯Ό μμΆνκ³ μ΅μ ν¬λ§·(WebP λ±)μΌλ‘ λ³ννλ©°, 3) LCP μμμ ν΄λΉνλ μ΄λ―Έμ§λ₯Ό μ§μ° λ‘λ©νμ§ μλλ‘ μ€μ νκ³ , 4) μ€μνμ§ μμ CSS λ° μλ°μ€ν¬λ¦½νΈμ λ‘λ©μ μ§μ°μν€λ κ²μ λλ€.