빠른 웹사이트들의 비밀 10개

이 영상에서는 웹페이지 로딩 속도를 최적화하기 위한 다양한 전략들을 소개합니다. 유저 수의 변화에 대비하여 압축, HTTP/2 및 3 버전 활용, CDN 서비스 이용 등 여러 방법을 통해 성능을 극대화하는 법에 대해 논의합니다. 이를 통해 웹 개발자들이 웹 성능을 개선하고 사용자 경험을 높이는 데 필요한 중요한 기술을 배울 수 있습니다.

 

핵심주제

웹페이지의 로딩 속도 최적화는 사용자 경험을 향상시킨다.

• 웹페이지 로딩 속도가 느리면 사용자는 이탈할 가능성이 높아진다.
• 종합적인 최적화 방법을 통해 서버 성능과 파일 전송 속도를 개선하여 이러한 문제를 해결할 수 있다.
• 압축 및 캐싱 기술을 활용하면 훨씬 빠른 웹페이지 접근을 제공할 수 있다.

HTTP 업그레이드가 웹 성능 향상에 기여한다.

• HTTP 2 또는 3로 업그레이드하면 여러 파일을 동시에 전송할 수 있다.
• 이는 사용자의 웹 페이지 로딩 시간을 실패시키고 성능을 높여준다.
• CDN 서비스를 활용하면 더욱 효율적인 데이터 전송을 지원한다.

캐싱을 통해 서버와 데이터베이스의 성능을 극대화할 수 있다.

• DB 데이터 출력 횟수를 줄이고 병목 현상을 예방하는 방법으로 효과적이다.
• 메모리에 데이터 결과를 저장해 필요할 때 재사용함으로써 대기 시간을 줄일 수 있다.
• 정확도가 낮은 데이터는 한 번에 저장하여 효율성을 높이는 것이 좋다.

번들링과 코드 다이어트는 로딩 속도를 개선하는 기술이다.

• 필요한 코드를 선택적으로 삽입하여 페이지 용량을 줄일 수 있다.
• 브라우저 캐시를 활용하면 이전 방문 시 서버 요청 없이 빠른 로딩이 가능하다.
• 사용하지 않는 CSS를 제거함으로써 페이지 로딩 속도를 더욱 향상시킬 수 있다.

서버와 브라우저 간의 파일 관리가 효율성을 높인다.

• 서버는 파일 변동 사항을 확인하고 필요할 때만 새로운 파일을 전송한다.
• 응답 코드 '304'를 통해 브라우저는 이미 저장된 파일을 사용하게 된다.
• 페이지 크기를 줄이거나 프리패치 기능을 통해 다운로드 속도를 높일 수 있다.

 

완벽노트(GPT-4o) 적용됨1. 🚀 웹페이지 로딩 속도 최적화 방법

• 웹페이지 로딩 속도를 높이기 위해 최적화가 중요하다.
• 예기치 않게 유저 수가 폭증할 수 있으므로 대비해야 한다.
• HTML, CSS, 자바스크립트 파일은 압축하여 전송할 수 있다. 그래서 gzip이나 브로틀리 압축 알고리즘이 사용된다.
• 이미지 파일은 JPG, PNG로 압축하거나 GIF 이미지를 웹이나 MP4로 변환하는 것이 좋다.
• 새로운 영상 압축 알고리즘을 검토하는 것도 유용할 것으로 추정된다.

 

2. 웹 성능 최적화를 위한 HTTP 업그레이드

• HTTP 2 또는 3 버전으로 업그레이드하면 웹 페이지의 로딩 속도가 개선됩니다.
• 사용자가 주소에 접속하면 HTML 페이지를 우선 가져오고, 이 페이지에는 CSS, 자바스크립트, 이미지 파일 경로가 포함되어 있습니다.
• HTTP 1.0에서는 서버가 한 번에 1~6개의 파일만 가져올 수 있지만, HTTP 2부터는 하나의 TCP 연결로 동시에 여러 파일을 가져올 수 있습니다.
• 최근의 HTTP 3는 UDP 방식으로 데이터를 전송하여 TCP의 블로킹 문제를 해결하고, 모바일 환경에서도 빠른 연결을 지원합니다.
• 웹 페이지를 각국 서버에 분산시키면 지연 시간을 줄일 수 있으며, CDN 서비스를 활용하면 이러한 최적화가 자동으로 이루어집니다.

 

3. 서버와 데이터베이스 성능 최적화

• 유저가 많아지면 병목 현상 발생 가능성이 있지만, 서버를 추가하고 로드 밸런싱하는 것이 전부가 아니다.
• 종종 DB가 문제의 원인으로, 데이터 입출력 횟수가 많거나 테이블 락이 걸릴 때 지연이 발생한다.
• 이런 문제를 해결하기 위해 DB 서버 사양을 높이거나 여러 대 운영하는 방법이 있지만, 가장 좋은 방법은 캐싱이다.
• DB 출력 결과를 메모리에 저장해 두고 필요할 때 재사용함으로써 DB 출력 횟수를 줄일 수 있다.
• 특히 정확도가 중요하지 않은 데이터는 모아서 한 번에 입력하는 것이 좋고, 프론트엔드 개발 시 번들링 툴 사용도 효과적이다.

 

4. 웹페이지 성능 향상을 위한 번들링 및 캐싱 기술

• 리액트와 같은 라이브러리를 사용하지 않고도 번들링을 쉽게 할 수 있으며, 필요한 코드만 삽입할 수 있다.
• 또한, 사용하지 않는 CSS를 제거하는 코드 다이어트가 가능하다.
• 웹페이지에 방문하면 브라우저가 자동으로 캐싱을 수행하여, 한번 방문한 파일을 하드에 저장해 놓고 다음 방문 시 서버 요청 없이 하드에서 불러온다.
• 이로 인해 웹페이지 로딩 속도가 많이 향상되며, 서버 쪽에서는 캐싱 기간을 조정할 수 있다.
• 서버가 유저에게 파일을 보낼 때, Last-Modified라는 정보로 파일이 수정된 시점을 도장해 주면, 사용자 다음 방문 시 해당 정보를 함께 요청할 수 있다.

 

5. 서버와 브라우저 간의 파일 관리

• 서버는 날짜를 확인하여, 해당 날짜 이후로 파일에 변동 사항이 있으면 새로운 파일을 보내고, 그렇지 않으면 '304'라는 응답을 한다.
• 이 '304'는 파일이 변경되지 않았음을 의미하며, 브라우저는 하드에 있던 파일을 사용한다.
• 따라서 서버에서 파일을 보낼 때마다 'Last-Modified' 도장을 확인하는 것이 좋다.
• 웹페이지를 14KB 이하로 만들면 다운로드 속도가 점진적으로 빨라지므로 페이지 크기를 줄이는 것이 유리하다.
• 또는 방문한 페이지를 미리 로드하는 간단한 프리패치 기능을 사용할 수 있다.