[웹 성능 최적화 기법]웹 최적화

프런트엔드 최적화 방법

• 스크립트 병합하여 브라우저의 호출 개수를 줄임
• 스크립트 크기 최소화해 바이트 수를 줄임
• 스크립트 gzip으로 압축하여 전달
• WebP등으로 브라우저 이미지 형식을 최적화
• 이미지 손실, 무손실 압축
• cache-control응답 헤더를 통해 브라우저 캐시를 충실히 사용
• 도메인 수를 줄여 DNS조회를 최소화
• DNS정보 미리 읽어오기
• CSS 를 HTML상단에 자바스크립트를 HTML의 하단에 위치 시킴
• 페이지 미리 읽어오기
• 타사 스크립트가 웹 성능을 방해하지 않도록 조절

프로토콜 최적화

HTTP/HTTPS프로토콜 자체의 효과를 극대화 하면 웹 서버가 클라이언트에게 콘텐츠를 최대 속도와 최저 지연시간으로 전달 할 수 있다.

TCP/IP 프로토콜

TCP/IP프로토콜의 일종인 HTTP를 사용해 콘텐츠를 전달한다. 네트워크 계층 구조를 표준화한 7개 계층 모델에서 TCP는 4번째인 전송계층에 속하고, HTTP는 7번째인 응용계층에 속한다.

“전송계층”은 네트워크 상에서 송신자와 수신자 사이에 데이터 전송을 보장하는 역할을 한다.

“응용계층”은 사용자가 메일을 보내고 FTP로 파일을 업로드 하고 인터넷으로 웹 서핑을 하는 것 처럼 실제 네트워크 상에서 소프트웨어와 사용자의 상호 연동을 담당한다.

네트워크의 대표적인 성능 지표는? 대역폭 과 지연시간이다.

”대역폭”은 특정시간동안 얾라나 많은 네트워크 트래픽을 보낼 수 있는지 시간당 전송량을 의미한다.

”지연시간”은 클라이언트와 서버간 콘텐츠를 전달하는 물리적인 시간을 의미한다.

서버와 클라이언트 두 호스트를 모두 왕복하는데 걸리는 지연시간은 Round Trip Time(RTT)라고 한다.

HTTP지속적인 연결

이미지, 멀티미디어 콘텐츠가 늘어가면서 TCP연결 재사용이 필요하게 되어 등장하게 된 것이 지속적 연결 기술이다. (keep-alive)

클라이언트와 서버가 TCP상에서 한번 연결되면 둘사이의 연결이 완전하게 끊어지기 전까지 연결을 지속적으로 재사용하는 기술이다. HTTP/1.0 기반에서 지속적 연결 사용을 원하는 클라이언트가 해당기능을 지우너하는 웹서버에 HTTP요청 헤더를 이용해 Connection헤더 및 keep-alive속성으로 지속적인 연결을 요청하기 시작했다.

HTTP/1.1 버전에서는 Connection 헤더를 사용하지 않아도 모든 요청과응답이 지속적 연결을 기본으로 지원한다. 그러므로 HTTP응답이 완료되거나 TCP연결을 끊어야할때만 Connection 헤더를 사용했음.

복수개의 HTTP요청과 응답을 병렬로 동시에 처리하기 위한 HTTP파이프라이닝 기술을 사용하려면 HTTP 지속적 연결기능이 꼭 지원되어야한다. HTTP/2 버전은 단일 TCP연결을 통해 클라이언트와 서버 사이 응답 지연 없이 스트림 형태로 다수의 HTTP요청과 응답을 주고받을 수 있는 멀티플랙싱 기술의 토대로 만들었다. 따라서 HTTP/2를 사용한다면 더 이상 지속적 연결을 고민할 필요가 없다.

HTTP파이프라이닝

먼저 보낸 요청이 응답이 없어도 다음 요청을 병렬적으로 수신자 측에 전송하는 기술이다.

DNS

인터넷 호스트명을 클라이언트와 서버가 이해할 수 있는 IP주소로 변환해주는 시스템.

DNS질의와 응답 성능이 나쁘면 웹 사이트 로딩에 영향을 줄 수 있다. 따라서 관리자는 자신이 운영하는 웹 사이트 호스트명이 DNS질의속도를 파악하고 개선해야 한다.

웹성능 최적화하는 도메인 운용

내부 서비스에 도메인을 분할하고 싶다면 상위 도메인을 동일하게 해 DNS질의를 최대한 적게 만드는 것

공통된 상위 도메인을 사용하는 서비스들은 도메인 질의를 담당하는 네임서버에 캐싱된 정보를 재사용 할 수 있어 DNS질의 시간을 단축시킨다.

HTML의 DNS프리페치(하나의 웹페이지에 다수의 도메인 호스트명이 섞여있을때 웹 문서 페이지를 여는 시점에 멀티스레드 방식으로 미리 DNS를 조회해 빠르게 IP주소를 불러오는 기술) 지능을 사용하면 조회시간이 더 빨라진다. <link>태그에 지시가 부누에 dns-prefetch명령어를 사용해 페이지 상단에서 미리 DNS를 조회한다.

브라우저

웹성능 최종 테스트 할때 브라우저에서 수행한다. 브라우저에서 웹사이트 성능을 확인하는 방법!

네비게이션 타이밍 API

웹 사이트의 성능을 측정하는데 사용할 수 있는 데이터를 제공한다. end to end간 대기시간(latency)정보를 제공한다.

navigation 객체로 확인할 수 있음