웹과 웹 성능 최적화

웹의 대표적인 요소

URL

웹 자원이 인터넷상 어느 위치에 존재하고 있는지를 알려주는 방법

https://cdn.webfrontend.org/wp-content/uploads/2020/06/book2.png 

https://  프로토콜

cdn 서브도메인

webfrontend.org 톱레벨 도메인

wp-content/uploads/2020/06 디렉토리

book2.png 최종경로

네트워크 프로토콜

URL을 통해 알게 된 웹의 자원 위치에 접근하는 방식

HTTP는 정보를 주고받는 헤더 부분과 실제 데이터를 주고받는 페이로드(바디) 부분으로 나뉘어짐

HTTP 프로토콜은 웹에서 클라이언트와 서버 사이에 필요한 정보는 헤더로 주고받고, HTML이나 이미지 같은 실제 데이터는 페이로드 부분에 받음

HTML

해당하는 콘텐츠를 사용자에게 쉽게 나타내기 위한 문서

웹 페이지 콘텐츠 안 <>에 둘러싸인 태그로 이루어진 언어로 마크업 언어의 일종

HTML로 작성된 웹 페이지는 HTTP 기반 네트워크를 통해 웹 서버에서 웹 브라우저로 전달되고, 웹 브라우저는 HTML을 해석하여 웹 페이지 화면을 만들어 사용자에게 제공

JavaScript, CSS 등을 같이 사용

 

웹 성능 최적화 기법

백엔드

• Expires 헤더를 추가한다
• gzip으로 압축한다
• 페이지 재전송을 피한다
• ETag를 설정한다
• 캐시를 지원하는 AJAX를 만든다
• AJAX는 캐시가 가능하도록 만든다
• GET 메소드로 XHR을 사용한다
• 쿠키 크기를 줄인다
• 쿠키와 상관없는 정적 콘텐츠를 만든다
• DNS 응답이 빨라지도록 서버를 증설한다
• DNS 응답을 빠르게 할 수 있도록 DNS 정보를 최대한 캐싱한다
• 웹 서버가 있는 데이터 센터의 네트워크 출력/대역폭 증설한다
• 웹 서버, 웹 애플리케이션 서버의 CPU/RAM 증설한다
• 프록시 서버를 설정하여 웹 콘텐츠를 캐싱한다
• CDN을 사용해 인터넷상에 콘텐츠를 캐싱한다
• 데이터베이스 정규화로 디스크 I/O 최적화
• 데이터베이스 캐싱으로 응답을 빠르게한다
• 로드 밸런싱을 통해 가장 성능이 좋은 웹 서버로 요청을 연결한다
• 웹 애플리케이션 로직을 가볍고 빠르게 개발한다

프론트엔드

• HTTP 요청을 줄인다
• 스타일시트는 상단에 넣는다
• 스크립트는 하단에 넣는다
• CSS 표현식은 피한다
• 자바스크립트와 CSS는 외부 파일에 넣는다
• DOM 개체 수를 줄인다
• AlphaImageLoader를 사용하지 않는다
• HTML에 이미지 크기를 설정하지 않는다
• favicon은 작고 캐시할 수 있도록 만든다
• 스크립트를 병합하여 브라우저의 호출 개수를 줄인다
• 스크립트 크기를 최소화해 바이트 자체를 줄인다
• WebP 등으로 브라우저 이미지 형식을 최적화한다
• 이미지 손실, 무손실 압축한다
• Cache-Control 응당 헤더를 통해 브라우저 캐시를 충실히 사용한다
• 도메인 수를 줄여 DNS 조회를 최소화한다
• DNS 정보를 미리 읽어 온다
• 타사 스크립트가 웹 성능을 방해하지 않도록 조정한다

더 자세한 내용은 이곳에서

https://developer.yahoo.com/performance/rules.html