📸 2022-10-27

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• TypeScript 컴파일러
• 빠른 웹 사이트를 만들기 위해 알면 좋은 ‘세 가지 원리’

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

• 서버 응답을 최적화하기 위한 방법 중 하나인 CDN이 무엇인지?

  • CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화한다. 먼저 캐시 서버를 설치한 다음, 원본 서버와 멀리 있는 사용자가 웹사이트에 접속할 때 캐시 서버가 콘텐츠를 전달한다.
  • CDN 자체가 알아서 사용자와 가장 가까운 캐시 서버에서 정보를 찾아 보내는 것이다.

  🐝 참고

  나무위키 CDN

  가비아 라이브러리 - [클라우드 이해] CDN이란?

  [HTTP 기초] CDN 이란?

🌟 내일은 어떻게 해보고 싶으세요?

---

빠른 웹 사이트를 만들기 위해 알면 좋은 ‘세 가지 원리’

원글 : 빠른 웹 사이트를 만들기 위해 알면 좋은 ‘세 가지 원리’

1️⃣ 웹 리소스의 크기 줄이기

스크립트를 최소화하자. 개발 시에는 가독성을 위해 클린 코드, 컨벤션을 이용하지만 브라우저가 실행할 때에는 문법만 틀리지 않으면 문제가 없으므로 불필요한 주석, 개행 문자 등을 삭제하여 크기를 최소화하는 것이 좋다.

알맞은 크기의 이미지를 사용하자. 썸네일 이미지를 원본으로 그대로 사용하는 경우가 있는데 이는 다운로드 바이트의 낭비다. 필요에 따라 동일한 이미지를 해상도에 맞게 변환하여 사용하자.

2️⃣ 서버 측 응답을 최적화하기

느린 서버는 결국 모든 웹 성능 안티 패턴의 원인이다. 특히 쿼리 튜닝을 수행하는 것이 중요하다.

Preload를 사용하자.

3️⃣ 사용자 환경에 맞는 콘텐츠로 최적화하기

브라우저에 최적화된 이미지 형식을 사용하면 웹 리소스를 줄일 수 있다. 크롬 브라우저에 최적화된 이미지 형식은 WebP이다. 이 외 AVIF도 있다.