[웹 성능 최적화] 웹 최적화 실습

1. WebPageTest

 

(1)  WebPageTest란? : 웹 페이지의 성능을 진단하는 방법을 알려주는 페이지이다.

 

 

(2) 모바일 사이트 성능 측정하기 : 

-

[Test Location] 드롭박스 메뉴에서 선택 가능하다.

 

- 네트워크 환경 : 

설정 가능하다.

 

(3) 모바일 사이트 성능 측정하기 : 

 

- First Byte Time : First Byte Time은 HTTP 요청을 했을 때 처음 byte가 브라우저에 도달하여 프로세싱이 시작되는 시간을 뜻합니다. 구체적으로 브라우저의 요청 준비 시간, 서버 처리시간, 네트워크 혼잡에 따른 지연시간을 포함한다. First Byte Time이 느린 경우 대부분 서버의 처리 시간이 오래 걸렸다고 의심해 봐야 한다. 일반적으로 500ms 이하의 속도가 나오도록 최적화할 것을 권장한다. SEO 측면에서도 중요하다.

 

- Keep-alive Enabled : Keep-alive를 활성화 하면 일정 시간 동안 접속을 끊지 않고 다음 접속을 기다린다. 정적 파일로만 구성된 서버는 Keep-alive가 활성화되어 있으면 최대 50%의 성능 향상을 보인다.  HTTP/2는 멀티플렉싱 기능을 위해 별도의 연결 관리 기능을 제공하므로 별도의 Keep-alive 설정이 필요하지 않다.

 

- Compress Transfer : 압축 전송의 뜻으로 정적 파일을 전송하는 기법이다. 콘텐츠를 압축하면 트래픽 자원을 아끼고 사이트 속도도 향상시킬 수 있다. 일반적인 텍스트 파일은 모두 압축할 수 있다.

SVG 파일, 폰트 파일 은 누락되기 쉽다.

 

- Compress Images : 이미지는 많은 트래픽을 유발하며 로딩 지연을 발생시킨다. 상세 정보는 Comporess Image 점수 부분을 클릭하면 된다.

 

- Cache static content : 이 항목에 대한 점수를 클릭하면 브라우저 캐시가 적용되지 않은 리소스들의 목록을 볼 수 있다.

 

- Effective use of CDN : CDN을 이용하면 전 세계 사용자들에게 빠르게 웹 페이지를 전달할 수 있다.

 

 

 

 

 

2. 구글의 웹 최적화 기술 적용하기(Lighthouse)

 

(1)  Lighthouse란? : 웹 페이지의 성능 지표를 비롯한 항목들을 검사하고 개선할 수 있도록 도움을 주는 자동화 도구이다. 웹 성능, 접근성, PWA, 검색 엔진 최적화 등 여러 항목에 분석하고 그에 대한 메트릭스 점수를 알려준다.

 

(2) : 

1

1. Performance(성능) : 웹 페이지가 얼마나 빠르게 로딩되는지에 대한 지표

2. Accessiblity(접근성) : 사용자가 얼마나 수비게 웹 페이지의 기능들을 사용할 수 있는지에 대한 지표 

3. Best Practice : 웹 페이지 제작시 일반적인 기능들이 얼마나 적용되었는지에 대한 지표

4. SEO : 검색 엔진에 의해 검색될 수 있도록 웹 페이지 구조를 만들었는지에 대한 지표

5. Progressive Web App : PWA 관점에서 확인한 지표

 

 

 

 

 

3. 웹 사이트에 프로토콜 최적화 적용하기

 

(1)  프로토콜 최적화를 위한 조건 :

 

- 1 : 웹 서버를 설치할 운영 체제의 sudo 권하이 있어야 한다.

 

- 2 : 자신의 도멘인 있어야 한다.

 

- 3 : 소유한 도메인의 A 레코드가 서버 주소로 등록되어 있어야 한다.

 

(2)  HTTP/2 적용 확인하기 :

http2.pro/

HTTP2.Pro - Check server & client HTTP/2, ALPN, and NPN support online.

 

3)  HTTP/3 적용 확인하기 :

http3check.net/

HTTP/3 Check