Front-End/JavaScript

μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ„±λŠ₯을 μ΅œμ ν™”ν•  수 μžˆλŠ” 방법

Splin 2025. 1. 17. 09:57
  1. μ½”λ“œ μŠ€ν”Œλ¦¬νŒ…μ„ 톡해 μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ„ ν•„μš”ν•œ λΆ€λΆ„λ§Œ λ‚˜λˆ„μ–΄ λ‘œλ“œ : λͺ¨λ“  μ½”λ“œλ₯Ό ν•œκΊΌλ²ˆμ— λΆˆλŸ¬μ˜€λŠ” λŒ€μ‹ , μ‚¬μš©μžκ°€ μ¦‰μ‹œ ν•„μš”ν•œ λΆ€λΆ„λ§Œ λ¨Όμ € λ‘œλ“œν•˜μ—¬ νŽ˜μ΄μ§€ λ‘œλ”© 속도λ₯Ό κ°œμ„ 
  2. λ ˆμ΄μ§€ λ‘œλ”© 기법을 μ‚¬μš©ν•˜μ—¬, νŽ˜μ΄μ§€μ— μžˆλŠ” μ΄λ―Έμ§€λ‚˜ λΉ„λ””μ˜€ 같은 무거운 λ¦¬μ†ŒμŠ€λ₯Ό μ‚¬μš©μžκ°€ μ‹€μ œλ‘œ λ³Ό λ•Œλ§Œ λ‘œλ“œν•˜λŠ” 방식
  3. 이미지 νŒŒμΌμ˜ 물리적인 크기λ₯Ό μ•Œλ§žκ²Œ μ€„μ΄κ±°λ‚˜ WebP와 같은 κ°€λ²Όμš΄ 포맷으둜 λ³€ν™˜ν•˜λŠ” 방법
  4. 캐싱을 ν™œμš©ν•˜μ—¬ ν•œ 번 λ‘œλ”©λœ λ¦¬μ†ŒμŠ€λ₯Ό λ‹€μ‹œ λ‹€μš΄λ‘œλ“œν•˜μ§€ μ•Šκ³  λΈŒλΌμš°μ €κ°€ μΊμ‹œλœ 데이터λ₯Ό μž¬μ‚¬μš©ν•˜μ—¬ μ„±λŠ₯을 크게 ν–₯상
  5. 슀크립트 λ‘œλ”© μ‹œ λΉ„동기 λ‘œλ”©(async) μ΄λ‚˜ μ§€μ—° λ‘œλ”©(defer) μ„ μ μš©ν•˜μ—¬ μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ DOM을 μ°¨λ‹¨ν•˜μ§€ μ•Šλ„λ‘ ν•˜λŠ” 방법 : νŽ˜μ΄μ§€κ°€ λ‘œλ”©λ˜λŠ” λ™μ•ˆμ—λ„ μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ„ λ³‘λ ¬λ‘œ λΆˆλŸ¬μ˜€κ±°λ‚˜, μ μ ˆν•œ 타이밍에 λ‘œλ“œν•˜κ²Œ λ˜μ–΄ μ‚¬μš©μž κ²½ν—˜μ΄ 더 μΎŒμ ν•΄μ§ˆ 수 있음

 


참고 링크 : https://www.maeil-mail.kr/question/40