๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๊ด‘๊ณ  ๋ฐฐ๋„ˆ
SEO/seo-tips

[ ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™” ] ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ ๋กœ๋”ฉ ์†๋„ ๊ฐœ์„  ๋ฐฉ๋ฒ•

๊ฒ€์ƒ‰ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ ๋กœ๋”ฉ ์†๋„ ๊ฐœ์„  ๋ฐฉ๋ฒ•

๊ฒ€์ƒ‰ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„์˜ ์ค‘์š”์„ฑ๊ณผ ๊ฐœ์„  ๋ฐฉ๋ฒ•

1. ๋กœ๋”ฉ ์†๋„๊ฐ€ ์ค‘์š”ํ•œ ์ด์œ 

๊ฒ€์ƒ‰์—”์ง„์€ ์›นํŽ˜์ด์ง€์˜ ๋กœ๋”ฉ ์†๋„๋ฅผ ํ‰๊ฐ€ ์š”์†Œ๋กœ ์‚ผ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ด์œ ๋กœ ๋กœ๋”ฉ ์†๋„๋Š” ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”(SEO)์—์„œ ์ค‘์š”ํ•œ ์œ„์น˜๋ฅผ ์ฐจ์ง€ํ•ฉ๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ๊ฐœ์„ : ๋น ๋ฅด๊ฒŒ ๋กœ๋”ฉ๋˜๋Š” ํŽ˜์ด์ง€๋Š” ์‚ฌ์šฉ์ž ์ดํƒˆ๋ฅ ์„ ์ค„์ด๊ณ  ํŽ˜์ด์ง€ ์ฒด๋ฅ˜ ์‹œ๊ฐ„์„ ๋Š˜๋ฆฝ๋‹ˆ๋‹ค.
  • ๊ฒ€์ƒ‰ ๋žญํ‚น ํ–ฅ์ƒ: ๊ตฌ๊ธ€์„ ๋น„๋กฏํ•œ ์ฃผ์š” ๊ฒ€์ƒ‰์—”์ง„์€ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋น ๋ฅธ ํŽ˜์ด์ง€๋ฅผ ์šฐ์„ ์ ์œผ๋กœ ๋…ธ์ถœํ•ฉ๋‹ˆ๋‹ค.
  • ๊ด‘๊ณ  ๋ฐ ์ˆ˜์ต ์ตœ์ ํ™”: ๋А๋ฆฐ ๋กœ๋”ฉ์€ ๊ด‘๊ณ  ํด๋ฆญ๋ฅ ์—๋„ ์˜ํ–ฅ์„ ๋ฏธ์นฉ๋‹ˆ๋‹ค.

2. DevTools๋ฅผ ํ™œ์šฉํ•œ ๋กœ๋”ฉ ์†๋„ ๋ถ„์„

Chrome DevTools๋Š” ๋กœ๋”ฉ ์†๋„๋ฅผ ๋ถ„์„ํ•˜๋Š” ๋ฐ ์œ ์šฉํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ์€ DevTools๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋‹จ๊ณ„๋ณ„ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

  1. DevTools ์—ด๊ธฐ: ๋ธŒ๋ผ์šฐ์ €์—์„œ F12 ๋˜๋Š” Ctrl+Shift+I๋ฅผ ๋ˆŒ๋Ÿฌ DevTools๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  2. ์„ฑ๋Šฅ ํƒญ ์‚ฌ์šฉ: "Performance" ํƒญ์„ ์„ ํƒํ•œ ํ›„ ๋…นํ™” ๋ฒ„ํŠผ(โบ๏ธ)์„ ๋ˆŒ๋Ÿฌ ๋กœ๋”ฉ ๊ณผ์ •์„ ๊ธฐ๋กํ•ฉ๋‹ˆ๋‹ค.
  3. ๋กœ๋”ฉ ์š”์†Œ ํ™•์ธ: ๋…นํ™”๋œ ๋ฐ์ดํ„ฐ๋ฅผ ํ†ตํ•ด ์–ด๋–ค ์š”์†Œ๊ฐ€ ๋А๋ฆฌ๊ฒŒ ๋กœ๋”ฉ๋˜๋Š”์ง€ ์‹œ๊ฐ์ ์œผ๋กœ ํŒŒ์•…ํ•ฉ๋‹ˆ๋‹ค. ๊ด‘๊ณ , ๋™์˜์ƒ, ์ด๋ฏธ์ง€ ๋“ฑ ํŠน์ • ์š”์†Œ๊ฐ€ ๋А๋ฆฌ๊ฒŒ ๋กœ๋”ฉ๋˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

3. ๋А๋ฆฌ๊ฒŒ ๋กœ๋”ฉ๋˜๋Š” ์š”์†Œ ์ˆ˜์ • ๋ฐฉ๋ฒ•

์ˆœ์ฐจ ๋กœ๋”ฉ์€ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๋ฅผ ๋†’์ด๋Š” ์ตœ๊ณ ์˜ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

3.1 ๊ด‘๊ณ  ์ตœ์ ํ™”

  • Lazy Loading ์ ์šฉ: ๊ด‘๊ณ ๊ฐ€ ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๊ธฐ ์ „๊นŒ์ง€ ๋กœ๋”ฉ์„ ์ง€์—ฐ์‹œํ‚ต๋‹ˆ๋‹ค.
  • ๊ด‘๊ณ  ์œ„์น˜ ์กฐ์ •: ์‚ฌ์šฉ์ž์—๊ฒŒ ๋œ ์ค‘์š”ํ•œ ์œ„์น˜๋กœ ์ด๋™ํ•ด ํŽ˜์ด์ง€์˜ ํ•ต์‹ฌ ์ฝ˜ํ…์ธ  ๋กœ๋”ฉ์„ ์šฐ์„ ์‹œํ•ฉ๋‹ˆ๋‹ค.

๊ด‘๊ณ ์— ์ ์šฉ๋œ ์ˆœ์ฐจ๋กœ๋”ฉ
๋‹ค๋ฅธ ์š”์†Œ๋ณด๋‹ค ๋Šฆ๊ฒŒ ๋กœ๋”ฉ๋˜๋Š” ๊ด‘๊ณ ์˜ ์ˆœ์ฐจ ๋กœ๋”ฉ

3.2 ์ด๋ฏธ์ง€ ์ตœ์ ํ™”

  • ํฌ๋งท ๋ณ€๊ฒฝ: JPEG ๋Œ€์‹  WebP์™€ ๊ฐ™์€ ๊ฒฝ๋Ÿ‰ ํฌ๋งท ์‚ฌ์šฉ.
  • ํฌ๊ธฐ ์กฐ์ •: ์‚ฌ์šฉ์ž ํ™”๋ฉด์— ์ ํ•ฉํ•œ ํฌ๊ธฐ๋กœ ์ด๋ฏธ์ง€๋ฅผ ๋ฏธ๋ฆฌ ์กฐ์ •.
  • Lazy Loading ์ ์šฉ: ํ™”๋ฉด์— ๋ณด์ด๋Š” ์ˆœ๊ฐ„์—๋งŒ ์ด๋ฏธ์ง€๋ฅผ ๋กœ๋”ฉ.

์ด๋ฏธ์ง€๋ฅผ ์ˆœ์ฐจ ๋กœ๋”ฉ์„ ํ™œ์šฉํ•ด์„œ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๋ฅผ ๊ฐœ์„ ํ•ฉ๋‹ˆ๋‹ค.

<img data-src="example.jpg" alt="Lazy Load Example" class="lazy-load" />
<script>
    const lazyImages = document.querySelectorAll('.lazy-load');

    const lazyLoadObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src; // ์‹ค์ œ ์ด๋ฏธ์ง€ ๋กœ๋“œ
                img.classList.remove('lazy-load');
                observer.unobserve(img); // ๋กœ๋“œ ์™„๋ฃŒ ํ›„ ๊ด€์ฐฐ ์ค‘๋‹จ
            }
        });
    });

    lazyImages.forEach(img => lazyLoadObserver.observe(img));
</script>

3.3 ๋™์˜์ƒ ์ตœ์ ํ™”

  • ์ž„๋ฒ ๋“œ ๋Œ€์‹  ์ธ๋„ค์ผ ์‚ฌ์šฉ: ๋™์˜์ƒ ๋Œ€์‹  ์ •์  ์ด๋ฏธ์ง€(์ธ๋„ค์ผ)๋ฅผ ๋จผ์ € ํ‘œ์‹œ.
  • ๋น„๋””์˜ค ํฌ๋งท ์ตœ์ ํ™”: ๊ฐ€๋ณ๊ณ  ๋น ๋ฅด๊ฒŒ ๋กœ๋”ฉ๋˜๋Š” ํฌ๋งท(H.265, WebM) ์‚ฌ์šฉ.

4. ํ•ต์‹ฌ ์ฝ˜ํ…์ธ ๋ฅผ ๊ฐ€์žฅ ๋จผ์ € ๋กœ๋”ฉ

ํŽ˜์ด์ง€ ์ ‘์† ์‹œ ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐ€์žฅ ๋จผ์ € ๋ณด๋Š” ์š”์†Œ๊ฐ€ ํ•ต์‹ฌ์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ์„ ๊ณ ๋ คํ•ด ์šฐ์„ ์ˆœ์œ„๋ฅผ ์„ค์ •ํ•˜์„ธ์š”.

  • ๊ฐ€์žฅ ๋ˆˆ์— ๋„๋Š” ์ฝ˜ํ…์ธ  ํ™•์ธ: ์ดˆ๊ธฐ ๋กœ๋”ฉ ํ™”๋ฉด์—์„œ ์‚ฌ์šฉ์ž ๋ˆˆ์— ๊ฐ€์žฅ ์ž˜ ๋“ค์–ด์˜ค๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ํŒŒ์•…ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฌธ์ œ ์š”์†Œ ์‹๋ณ„: ๊ด‘๊ณ , ์ด๋ฏธ์ง€, ๋™์˜์ƒ ๋“ฑ ์ถ”๊ฐ€๋œ ์š”์†Œ๊ฐ€ ๋กœ๋”ฉ ์†๋„๋ฅผ ์ €ํ•˜์‹œํ‚จ๋‹ค๋ฉด ์œ„์น˜๋ฅผ ์žฌ์กฐ์ •ํ•˜๊ฑฐ๋‚˜ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.
  • ์„ฑ๋Šฅ ํ…Œ์ŠคํŠธ ๋ฐ˜๋ณต: ๋ณ€๊ฒฝ ํ›„์—๋„ DevTools๋ฅผ ์‚ฌ์šฉํ•ด ์„ฑ๋Šฅ์„ ๋‹ค์‹œ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

5. SEO์™€ ์ˆ˜์ต์˜ ๊ท ํ˜• ์œ ์ง€

๊ด‘๊ณ ์™€ ์ฝ˜ํ…์ธ ๊ฐ€ ๋กœ๋”ฉ ์†๋„์— ๋ฏธ์น˜๋Š” ์˜ํ–ฅ์„ ์™„์ „ํžˆ ๋ฐฐ์ œํ•  ์ˆ˜๋Š” ์—†์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‹ค์Œ ์›์น™์„ ์œ ์ง€ํ•˜๋ฉด ์ตœ์ ํ™”์™€ ์ˆ˜์ต ์‚ฌ์ด์˜ ๊ท ํ˜•์„ ๋งž์ถœ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๊ด‘๊ณ ๊ฐ€ ์ฝ˜ํ…์ธ ๋ฅผ ๋ฐฉํ•ดํ•˜์ง€ ์•Š๋„๋ก ๋ฐฐ์น˜.
  • ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ตœ์šฐ์„ ์œผ๋กœ ๊ณ ๋ ค.
  • ์ง€์†์ ์ธ ์„ฑ๋Šฅ ํ…Œ์ŠคํŠธ๋กœ ๋ฌธ์ œ ์š”์†Œ ์ตœ์†Œํ™”.
๊ฐœ์ธ ์„œ๋ฒ„์™€ ๊ฐœ์ธ ์‚ฌ์ดํŠธ๋ฅผ ์šด์˜์ค‘์ด ์•„๋‹ˆ๊ณ  ์ž„๋Œ€ ์„œ๋น„์Šค(๋ธ”๋กœ๊ทธ)๋ฅผ ์šด์˜์ค‘์ด๋ผ๋ฉด ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„ ๊ฐœ์„ ์€ ํ•œ๊ณ„๊ฐ€ ์žˆ์œผ๋ฉฐ ์šด์˜์ž๊ฐ€ ํ• ์ˆ˜ ์žˆ๋Š”๊ฒƒ์€ ์ดˆ๊ธฐ ๋กœ๋”ฉ๋˜๋Š” ์ฝ˜ํ…์ธ ์˜ ์ค‘์š”๋„์— ๋”ฐ๋ผ ์ˆœ์ฐจ ๋กœ๋”ฉ์„ ์ ์šฉํ•˜๋ฏ€๋กœ์จ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๋ฅผ ๊ฐœ์„ ํ• ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋ฐ˜์‘ํ˜•

'SEO > seo-tips' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ๋””์ž์ธ ์ตœ์ ํ™”! ์ฝ˜ํ…์ธ  ์š”์†Œ ๋ฐฐ์น˜ ์ „๋žต  (0) 2024.11.29
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ๋น™ ๊ฒ€์ƒ‰์—”์ง„์— ์‚ฌ์ดํŠธ๋งต ์˜ค๋ฅ˜ ๋ฌธ์ œ 429 ์˜ค๋ฅ˜  (2) 2024.11.28
[ ์• ๋“œ์„ผ์Šค ์ตœ์ ํ™”] ๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค ํฌ๋กค๋Ÿฌ ๋ฌธ์ œ ์˜ค๋ฅ˜ ํ•ด๊ฒฐ ๊ฐ€์ด๋“œ  (0) 2024.11.27
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ 2์ฐจ ๋„๋ฉ”์ธ ์‚ฌ์šฉ์‹œ ๋Œ“๊ธ€ ์˜ค๋ฅ˜ ๋ฌธ์ œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•  (0) 2024.11.20
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ๊พธ๋ฏธ๊ธฐ ๋ธ”๋กœ๊ทธ ์ˆ˜์ •์— ์œ ์šฉํ•œ ์ฝ”๋“œ์™€ ํŒ ์ž๋ฃŒ ๋ชจ์Œ  (7) 2024.11.19
[ Bing ์ƒ‰์ธํ™” ์ตœ์ ํ™” ๋ฐฉ๋ฒ• ] ์‚ฌํŠธ๋งต ์ œ์ถœ๋ถ€ํ„ฐ ์ฝ˜ํ…์ธ  ์ตœ์ ํ™”๊นŒ์ง€  (1) 2024.11.18
HTML์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ์˜ ์ดํ•ด์™€ ๋ธ”๋กœ๊ทธ ์Šคํ‚จ ์ˆ˜์ • ๋ฐฉ๋ฒ• [ ๊ธฐ์ดˆ 1 ]  (0) 2024.11.16