λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
openipc.kr
SEO

[ 검색엔진 μ΅œμ ν™” ] μ›ΉνŽ˜μ΄μ§€ λ‘œλ”©μ˜ 단계별 κ³Όμ •κ³Ό μŠ€νƒ€μΌ 적용 단계 μ„€λͺ…


λ°˜μ‘ν˜•

효과적인 SEO κ°œμ„ μ„ μœ„ν•œ μ›ΉνŽ˜μ΄μ§€ λ‘œλ”© 속도 μ΅œμ ν™” 방법

μ›Ή νŽ˜μ΄μ§€ λ‘œλ”© 과정은 검색 μ΅œμ ν™”μ— μ€‘μš”ν•œ μš”μ†Œμ€‘ ν•˜λ‚˜ μž…λ‹ˆλ‹€. μ›Ή νŽ˜μ΄μ§€ λ‘œλ”©μ€ DNS 쑰회둜 IP μ£Όμ†Œλ₯Ό μ–»κ³ , TCPλ₯Ό 톡해 μ„œλ²„μ™€ 연결을 ν•˜κ²Œλ©λ‹ˆλ‹€. HTTP μš”μ²­μ„ 톡해 μ„œλ²„μ—μ„œ HTMLκ³Ό CSSλ₯Ό λ°›μ•„ DOM 및 λ Œλ”λ§ 트리λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. μƒμ„±λœ νŠΈλ¦¬μ— CSS둜 μŠ€νƒ€μΌμ„ μ μš©ν•˜κ³  JavaScriptλ₯Ό μ‹€ν–‰ν•˜μ—¬ 동적 μ½˜ν…μΈ λ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.이후 λ ˆμ΄μ•„μ›ƒμ„ κ³„μ‚°ν•˜κ³ , νŽ˜μΈνŒ… 및 μ»΄ν¬μ§€νŒ…μ„ 톡해 μ΅œμ’…μ μœΌλ‘œ 화면에 νŽ˜μ΄μ§€λ₯Ό ν‘œμ‹œν•˜κ²Œ λ©λ‹ˆλ‹€.

검색 μ΅œμ ν™” ν–₯상을 μœ„ν•œ μ›Ή νŽ˜μ΄μ§€ λ‘œλ”© 단계 뢄석

검색엔진 μ΅œμ ν™” μž‘μ—…μ„ μœ„ν•΄μ„œλŠ” 웹피이지가 μ–΄λ–€ λ°©μ‹μœΌλ‘œ λ‘œλ”©μ΄ λ˜λŠ”μ§€ μ›ΉνŽ˜μ΄μ§€ λ‘œλ”©λ‹¨κ³„μ˜ 기본적인 이해가 있으면 μž‘μ—…ν•˜κΈ°κ°€ μˆ˜μ›”ν•΄μ§‘λ‹ˆλ‹€. 각 λ‹¨κ³„λ³„λ‘œ μš΄μ˜μžκ°€ μ΅œμ ν™” μž‘μ—…μ—μ„œ μ§„ν–‰ν• μˆ˜ μžˆλŠ” λΆ€λΆ„κ³Ό ν• μˆ˜ μ—†λŠ” 뢀뢄을 μ•Œκ³  ν• μˆ˜ μžˆλŠ” 뢀뢄에 λŒ€ν•œ μž‘μ—…μ„ 진행해야 ν•˜λ©° μ›ΉνŽ˜μ΄μ§€ λ‘œλ”©μ‹œ κ·Έ μž‘μ—…μ€ κ°λ‹¨κ³„μ˜ 일뢀뢄에 ν•œμ •λ μˆ˜ μžˆμŠ΅λ‹ˆλ‹€.

검색엔진 μ΅œμ ν™”ν›„ λ‹€λ₯Έ μš”μ†Œλ‘œ 인해 λ°œμƒν•˜λŠ” λ¬Έμ œλ„ μ°¨ν›„ 점검후 νŒŒμ•…ν•΄μ•Ό ν•˜λ©° 그뢀뢄이 μ›ΉνŽ˜μ΄μ§€μ˜ μ–΄λ–€ κ³Όμ •μ—μ„œ λ°œμƒν•˜λŠ”μ§€λŠ” λŒ€λž΅μ μœΌλ‘œ νŒŒμ•…ν•  ν•„μš”μ„±μ΄ μžˆμ–΄ μ•„λž˜λŠ” μ›ΉνŽ˜μ΄μ§€ λ‘œλ”©μ˜ 단계별 μ„€λͺ…을 κ°„λ‹¨ν•˜κ²Œ μš”μ•½ μ •λ¦¬ν–ˆμŠ΅λ‹ˆλ‹€.

μ›ΉνŽ˜μ΄μ§€ λ‘œλ”©μˆœμ„œ

1. DNS 쑰회 (DNS Lookup)

DNS μ‘°νšŒλŠ” μ‚¬μš©μžκ°€ μ›Ήμ‚¬μ΄νŠΈ μ£Όμ†Œλ₯Ό μž…λ ₯ν•˜λ©΄ λΈŒλΌμš°μ €λŠ” 도메인 이름을 IP μ£Όμ†Œλ‘œ λ³€ν™˜ν•˜λŠ” κ³Όμ •μž…λ‹ˆλ‹€. 일반적으둜 μ‚¬λžŒλ“€μ΄ μ‚¬μš©ν•˜κΈ° νŽΈλ¦¬ν•œ μ‚¬μ΄νŠΈ 이름을 컴퓨터가 이해할 수 μžˆλŠ” 숫자둜 λ³€κ²½ν•΄μ£ΌλŠ” μž‘μ—…μž…λ‹ˆλ‹€.

DNS(Domain Name System)둜 μ„œλ²„μ— μš”μ²­μ„ 보내면 DNS μ„œλ²„λŠ” 도메인 이름에 ν•΄λ‹Ήν•˜λŠ” IP μ£Όμ†Œλ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€. μ΄λ•Œ μΊμ‹œλ₯Ό μ΄μš©ν•΄μ„œ μΊμ‹œ 정보가 λΈŒλΌμš°μ €μ— μ‘΄μž¬ν•˜λ©΄ DNS 쑰회 과정을 μƒλž΅ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

νŽ˜μ΄μ§€μ—μ„œ μ™ΈλΆ€μ˜ μ—¬λŸ¬ 개의 λ‹€λ₯Έ μ‚¬μ΄νŠΈ 정보λ₯Ό κ°€μ Έμ˜¬ λ•Œ 이 κ³Όμ •μ—μ„œ λ‘œλ”© μ‹œ λΆ€ν•˜κ°€ 걸릴 수 있기 λ•Œλ¬Έμ— νŽ˜μ΄μ§€μ— 많이 μ‚¬μš©ν•˜λŠ” 정보λ₯Ό κ°€μ Έμ˜€λŠ” μ‚¬μ΄νŠΈμ— λŒ€ν•΄μ„œ 미리 μ—°κ²°ν•  μ€€λΉ„λ₯Ό ν•΄μ£Όλ©΄ μ’€ 더 λΉ λ₯΄κ²Œ μ™ΈλΆ€ λ¦¬μ†ŒμŠ€λ₯Ό λ‘œλ”©μ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€.

dns-prefetchλŠ” λΈŒλΌμš°μ €κ°€ 도메인 이름을 미리 DNS μ‘°νšŒν•˜μ—¬ IP μ£Όμ†Œλ₯Ό μΊμ‹œν•˜λ„λ‘ μ„€μ •ν•©λ‹ˆλ‹€.
preconnectλŠ” λΈŒλΌμš°μ €κ°€ μ™ΈλΆ€ 도메인에 λŒ€ν•œ 연결을 미리 μ„€μ •ν•˜λ„λ‘ μ§€μ‹œν•©λ‹ˆλ‹€

βœ” 예

<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">

2. μ„œλ²„μ™€ μ—°κ²° (TCP)

λΈŒλΌμš°μ €λŠ” DNS 쑰회λ₯Ό 톡해 얻은 IP μ£Όμ†Œλ₯Ό μ‚¬μš©ν•˜μ—¬ μ›Ή μ„œλ²„μ™€ 연결을 ν•˜λŠ” κ³Όμ •μ—μ„œ 초기 데이터λ₯Ό μ „μ†‘ν•˜λŠ” 과정을 μ„€μ •ν•˜κ³  μ΄ˆκΈ°ν™”ν•΄μ£ΌλŠ” μž‘μ—…μ„ μ§„ν–‰ν•˜κ²Œ λ©λ‹ˆλ‹€.

TCP(Transmission Control Protocol) 연결을 μ„€μ •ν•˜κΈ° μœ„ν•΄ μ•„λž˜ 방법을 μˆ˜ν–‰ν•©λ‹ˆλ‹€. μ΄λ•Œ λ°μ΄ν„°μ˜ 전솑 속도, νŒ¨ν‚·μ˜ μ†μ‹€μ΄λ‚˜ 였λ₯˜ λ°œμ†‘ λ“±μ˜ μ œμ–΄λ₯Ό ν•˜κ²Œ λ©λ‹ˆλ‹€.

SYN: λΈŒλΌμš°μ €κ°€ μ„œλ²„μ— μ—°κ²° μš”μ²­μ„ λ³΄λƒ…λ‹ˆλ‹€.
SYN-ACK: μ„œλ²„κ°€ μš”μ²­μ„ μˆ˜λ½ν•˜κ³  μ‘λ‹΅ν•©λ‹ˆλ‹€.
ACK: λΈŒλΌμš°μ €κ°€ μ„œλ²„μ˜ 응닡을 ν™•μΈν•˜μ—¬ 연결을 μ™„λ£Œν•©λ‹ˆλ‹€.

3. HTTP μš”μ²­

λΈŒλΌμš°μ €λŠ” μ„œλ²„μ— μ €μž₯된 데이터λ₯Ό μš”μ²­ν•˜κ²Œ 되며 μ΄λ•Œ ν΄λΌμ΄μ–ΈνŠΈμ™€ μ„œλ²„κ°„μ˜ 톡신을 μœ„ν•΄ HTTP μš”μ²­μ„ λ³΄λƒ…λ‹ˆλ‹€. 이 μš”μ²­μ—λŠ” λΈŒλΌμš°μ € 정보, μš”μ²­ν•œ λ¦¬μ†ŒμŠ€μ˜ URL 등이 ν¬ν•¨λ©λ‹ˆλ‹€.

4. μ„œλ²„ 응닡

μ„œλ²„λŠ” λΈŒλΌμš°μ €μ˜ μš”μ²­μ„ μ²˜λ¦¬ν•˜κ³  HTTP 응닡을 λ³΄λƒ…λ‹ˆλ‹€. μ‘λ‹΅μ—λŠ” μš”μ²­ν•œ μ›Ή νŽ˜μ΄μ§€μ˜ HTML μ½”λ“œ, μƒνƒœ μ½”λ“œ, 헀더 정보 등이 ν¬ν•¨λ©λ‹ˆλ‹€.

5. HTML νŒŒμ‹± 및 λ Œλ”λ§ (HTML Parsing , Rendering)

μ›ΉνŽ˜μ΄μ§€λ₯Ό λΈŒλΌμš°μ €μ— ν‘œμ‹œν•˜λŠ” κ³Όμ •μœΌλ‘œ HTML의 μ½”λ“œλ₯Ό 읽고 λΆ„μ„ν•΄μ„œ μ‚¬λžŒμ΄ μ΄ν•΄ν• μˆ˜ μžˆλŠ” ν˜•νƒœλ‘œ λ³€ν™˜ν•˜λŠ” κ³Όμ •μž…λ‹ˆλ‹€.

λΈŒλΌμš°μ €λŠ” HTML λ¬Έμ„œλ₯Ό νŒŒμ‹±ν•˜μ—¬ DOM(Document Object Model) 트리 HTML λ¬Έμ„œμ˜ ꡬ쑰λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. DOM νŠΈλ¦¬λŠ” HTML λ¬Έμ„œμ˜ ꡬ쑰λ₯Ό ν‘œν˜„ν•˜λŠ” μ½”λ“œλ₯Ό 각각의 μž‘μ€ ν˜•νƒœ(토큰)으둜 λ³€ν™˜ν•˜κ³  ꡬ문을 λΆ„μ„ν•΄μ„œ ν˜•μ„±ν•©λ‹ˆλ‹€.

6. CSS 처리

ꡬ쑰가 ν˜•μ„±λ˜λ©΄ CSSνŒŒμΌμ„ 읽어 λ“€μ—¬μ„œ HTMLλ¬Έμ„œμ˜ μŠ€νƒ€μΌμ„ μ •μ˜ν•˜κ²Œ λ©λ‹ˆλ‹€. 즉 λΈŒλΌμš°μ €λŠ” HTML λ¬Έμ„œμ—μ„œ CSS νŒŒμΌμ„ μš”μ²­ν•˜κ³ , CSSλ₯Ό νŒŒμ‹±ν•˜μ—¬ μŠ€νƒ€μΌ κ·œμΉ™μ„ μ μš©ν•©λ‹ˆλ‹€.

μ΄λ•Œ 주둜 νŽ˜μ΄μ§€μ˜ λ””μžμΈκ³Ό 섀정에 κ΄€λ ¨λœ μž‘μ—…μ„ μ§„ν–‰ν•˜κ²Œ λ©λ‹ˆλ‹€. CSS μ½”λ“œλŠ” DOM μš”μ†Œμ˜ μŠ€νƒ€μΌμ„ μ •μ˜ν•˜λ©°, 이 κ³Όμ •μ—μ„œ μŠ€νƒ€μΌ 트리(λ˜λŠ” λ Œλ” 트리)κ°€ μƒμ„±λ©λ‹ˆλ‹€.

7. JavaScript μ‹€ν–‰

μ›ΉνŽ˜μ΄μ§€λ₯Ό λ™μ μœΌλ‘œ κΈ°λŠ₯을 μΆ”κ°€ν•˜λŠ” κ³Όμ •μœΌλ‘œ HTMLλ¬Έμ„œμ— κΈ°λŠ₯μ„±κ³Ό 동적 μ½˜ν…μΈ λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.λΈŒλΌμš°μ €λŠ” HTML λ¬Έμ„œμ— ν¬ν•¨λœ JavaScriptλ₯Ό νŒŒμ‹±ν•˜κ³  μ‹€ν–‰ν•©λ‹ˆλ‹€.

JavaScriptλŠ” DOMκ³Ό CSS을 μˆ˜μ •ν•  수 있으며, 이둜 인해 νŽ˜μ΄μ§€μ˜ λ‚΄μš©μ΄λ‚˜ μŠ€νƒ€μΌμ΄ λ™μ μœΌλ‘œ 변경될 수 μžˆμŠ΅λ‹ˆλ‹€.

8. λ Œλ”λ§ 트리 ꡬ성 (Render Tree )

λΈŒλΌμš°μ €λŠ” DOMκ³Ό CSSOM을 κ²°ν•©ν•˜μ—¬ λ Œλ”λ§ 트리λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. λ Œλ”λ§ νŠΈλ¦¬λŠ” 화면에 μ‹€μ œλ‘œ 그렀질 μš”μ†Œμ˜ 정보λ₯Ό ν¬ν•¨ν•©λ‹ˆλ‹€.

9. λ ˆμ΄μ•„μ›ƒ 계산

λΈŒλΌμš°μ €λŠ” λ Œλ”λ§ 트리λ₯Ό 기반으둜 각 μš”μ†Œμ˜ μ •ν™•ν•œ μœ„μΉ˜μ™€ 크기λ₯Ό κ³„μ‚°ν•©λ‹ˆλ‹€. 이 과정을 λ ˆμ΄μ•„μ›ƒ λ˜λŠ” λ¦¬ν”Œλ‘œμš°λΌκ³  ν•©λ‹ˆλ‹€.

이 κ³Όμ •μ—μ„œ HTML의 λ³΄μ—¬μ£Όκ²Œ 될 각 μš”μ†Œκ°€ κ³„μ‚°λ˜λŠ” κ³Όμ •μœΌλ‘œ, 이 과정이 λ³΅μž‘ν•˜κ²Œ 되면 λ ˆμ΄μ•„μ›ƒμ΄ ν”λ“€λ¦¬λŠ” λ¬Έμ œκ°€ λ°œμƒν•˜κ²Œ λ©λ‹ˆλ‹€.

검색 μ΅œμ ν™”μ—μ„œ κ°€μž₯ μ€‘μš”ν•œ CLS 츑정값이 이 λΆ€λΆ„μ—μ„œ κ°€μž₯ λ§Žμ€ 문제λ₯Ό μΌμœΌν‚€κ²Œ λ©λ‹ˆλ‹€. HTML λ¬Έμ„œμ˜ κΈ°λ³Έ λ ˆμ΄μ•„μ›ƒ 방식 쀑 ν”Œλ‘œμš° λ ˆμ΄μ•„μ›ƒμ—μ„œ HTML μš”μ†Œλ“€μ΄ λ°°μΉ˜λ˜λŠ” κ³Όμ •μ—μ„œ μ„€μ • νƒœκ·Έμ˜ μš”μ†Œλ‘œ 인해 μ€„λ°”κΏˆμ΄ λ°œμƒν•˜λŠ” κ²½μš°μ™€ λ°œμƒμ‹œν‚€μ§€ μ•ŠλŠ” κ²½μš°κ°€ μžˆμŠ΅λ‹ˆλ‹€.

블둝 μš”μ†Œ: 기본적으둜 전체 λ„ˆλΉ„λ₯Ό μ°¨μ§€ν•˜λ©°, μ€„λ°”κΏˆμ„ λ°œμƒμ‹œν‚΅λ‹ˆλ‹€.
인라인 μš”μ†Œ: 기본적으둜 μ½˜ν…μΈ μ˜ λ„ˆλΉ„μ— λ§žμΆ”μ–΄ 배치되며, μ€„λ°”κΏˆμ„ λ°œμƒμ‹œν‚€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€

10. νŽ˜μΈνŒ… (Painting)

λΈŒλΌμš°μ €λŠ” 각 μš”μ†Œλ₯Ό 화면에 κ·Έλ¦½λ‹ˆλ‹€. 이 κ³Όμ •μ—μ„œλŠ” 색상, ν…μŠ€νŠΈ, 이미지 등이 μ‹€μ œλ‘œ λ Œλ”λ§λ©λ‹ˆλ‹€.

11. μ»΄ν¬μ§€νŒ… (Compositing)

μ»΄ν¬μ§€νŒ…μ€ 각각의 λ Œλ”λ§λœ μš”μ†Œλ₯Ό κ²°ν•©ν•˜μ—¬ μ΅œμ’…μ μœΌλ‘œ 화면에 ν‘œμ‹œν•˜λŠ” κ³Όμ •μž…λ‹ˆλ‹€.λ³΅μž‘ν•œ λ ˆμ΄μ•„μ›ƒμ˜ 경우, λΈŒλΌμš°μ €λŠ” μ—¬λŸ¬ λ ˆμ΄μ–΄λ‘œ κ΅¬μ„±λœ νŽ˜μ΄μ§€λ₯Ό μ΄λ•Œ μ²˜λ¦¬ν•˜λ©°. 각 λ ˆμ΄μ–΄λŠ” λ…λ¦½μ μœΌλ‘œ λ Œλ”λ§λ˜λ©°, μ΅œμ’…μ μœΌλ‘œ 화면에 ν‘œμ‹œλ˜κΈ° 전에 ν•©μ³μ§‘λ‹ˆλ‹€.

12. νŽ˜μ΄μ§€ λ‘œλ”©

λͺ¨λ“  λ¦¬μ†ŒμŠ€κ°€ λ‘œλ“œλ˜κ³ , JavaScriptκ°€ μ‹€ν–‰λ˜κ³ , νŽ˜μ΄μ§€κ°€ λ Œλ”λ§λ˜λ©΄μ„œ λΈŒλΌμš°μ €μ— νŽ˜μ΄μ§€μ˜ λ‘œλ”©μ΄ μ™„λ£Œλ˜λŠ” μ‹œμ μž…λ‹ˆλ‹€.

검색 μ΅œμ ν™” κ³Όμ • μ›ΉνŽ˜μ΄μ§€ λ‘œλ”©κ³Όμ •
검색 μ΅œμ ν™” κ³Όμ • μ›ΉνŽ˜μ΄μ§€ λ‘œλ”©κ³Όμ •

λ°˜μ‘ν˜•