WPO

 

 

WPO(web performance optimization)

웹성능최적화

 

---

 

 

수행 조건

front-end resource html, css, javascript 파일들을 webpack 번들링후

추출한 결과물들을 github page로 만들어서 테스트진행 하였습니다.

루비페이퍼 웹 성능 최적화 기법 이라는 책을 참고하였고 성능 최적화 관련해서 

수정할 부분 있으면 연락 부탁드립니다.

 

 

추후 과제

가장 큰 시간, 크기 차지하는 이미지들 (구글에서 나온 JP , AVIF 확장자 등으로 무손실 압축 ) 최적화 방법들, 

의존성 리소스들 (jquery 낮은버전 관련 취약성 보안문제) 해결 방안,

js, css 등.

 

 

---

 

용어 정리

 

RTT (Round Trip Time) 왕복시간

패킷이 목적지에 도달하고 나서 해당 패킷에 대한 응답이 출발지로 다시 돌아오기까지의 시간

(RTT에 영향을 주는 요소로는 유선,무선통신인지, 서버의 성능, 트래픽 양등이 있다)

 

 

 

 

 

 

 

 

---

웹 성능 테스트 진단 도구

1. web page test
https://www.webpagetest.org/

 

2. google PageSpeed Insights ( chrome developer tool - light house )

https://developers.google.com/speed/pagespeed/insights/

 

 

 

 

 

분석결과를 바탕으로 반영 가능한 부분들 수정 및 보완

1. preload , preconnect , dns-prefetch
2. _blank 취약점 보완
3. cache 설정

 

 

 

 

 

 

 

1. preload

렌더링에 필요한 리소스들인 css를 preload 시켜 초기렌더링 시간 단축

css,js 파일같이 페이지에서 사용될 것이 확실한 리소스들을 preload속성을 사용하여 먼저 로드되게 하였다.

preload 속성은 브라우저에게 현재 페이지에 필요한 리소스를 빠르게 가져오게 한다.

    <link rel="preload" href="../../common/css/etoos_main2020.css" as="style"> 
    <link rel="preload" href="../../common/js/etoos_main2020.js" as="script">  
    <link rel="stylesheet" href="../../common/css/etoos_main2020.css">
    <script defer src="../../common/js/etoos_main2020.js"></script>

 

Critical Rendering Path의 CSS

css는 렌더링 차단 리소스 이다 (CSSOM이 생성될때까지 브라우저는 렌더링하지 않는다) 따라서 최초 렌더링에 걸리는 시간을 최적화 하려면 CSS를 가볍게 만들고 클라이언트에 빠르게 다운로드 되게 만들어야 한다. 초기 렌더링에 반드시 필요한 리소스를 preload를 사용해서 렌더링 속도를 높일 수 있다

 

 

사용시 주의사항

as 속성을 사용하여 리소스의 유형을 브라우저에게 알려주어야 한다

반드시 사용되는 리소스에만 사용해야 한다

 

preload를 적용하지 않음

 

preload 적용

완성된 화면은 아니지만 화면이 약 0.5s 먼저 로드된것을 확인 할 수 있다.

 

 

 

브라우저 지원 현황

 

 

 

dns-prefetch

    <link rel="dns-prefetch" href="https://www.etoos.com"/>    
    <link rel="preconnect" href="https://img.etoos.com"/>

 

dns-prefetch 서버 IP주소에 대한 DNS 요청을 미리 작성하도록 브라우저에 지시

리소스(CDN, google font)가 필요하다는것을 알지만 정확한 경로를 모르는 경우 사용한다

(서버의 IP 주소를 미리 확인하면 50ms~300ms 시간을 줄일수있다)

 

preconnect 브라우저에 미리 서버에 대한 연결을 수행하도록 지시

전체 연결을 미리 설정(dns 확인, TCP연결설정, TLS handshake 수행)하므로 dns-prefetch보다 시간을 절약할수 있다.

 

 

 

 

without preconnect

 

with preconnect

with preconnect 이미지의 www.etoos.com 가로 그래프를 보면 dnsLookup을 미리 연결해서, 위 이미지의 dnsLookup부터 시작하는 것과 다르게 Initial Conection이 진행되는것을 확인할 수 있다.

 

 

 

 

 

+

modulepreload

modulepreload 로 JS모듈 스크립트를 브라우저에게 가능한 빨리 다운로드 및 컴파일 하도록 지시한다.

<link rel="modulepreload" href="/static/example.js"/>

 

 

https://beomy.github.io/tech/browser/preload-preconnect-prefetch/

 

 

 

 

---

 

 

 

 

 

2. _blank 취약점 보완

google chrome lighthouse 에서 경고중 하나로 a tage _blank 새창열기일 경우 noopener , noreferrer 를 꼭 추가해야 한다.

 

 

 

Q. target="_blank" noopener noreferrer 적용해야하는 이유?

새탭을 열면 현재 탭의 참조를 반환하기 때문에 window.opener 로 접근해 location을 변경해여 기존 페이지를 피싱페이지로 변경해 개인정보 탈취가 가능해진다. 이 참조를 없애는 방법이 noopener, noreferrer 속성 추가해주는 것이다. noopener 가 지원이 되지 않는 브라우저가 있을 수 있어서 noreferrer 같이 사용해주는걸 권장한다.

 

<a href="https://go3.etoos.com/" target= "_blank" rel="noopener noreferrer" >이투스</a>

 

nofollow

SEO에서 중요하지 않은 링크의 경우 nofollow 속성 설정을 통해 검색엔진에 해당 링크를 인지 못하게 한다.

 

 

https://hogni.tistory.com/150

https://blog.coderifleman.com/2017/05/30/tabnabbing_attack_and_noopener/ 

 

 

 

 

---

 

 

 

 

 

3. cache 사용

 

 

 

페이지 새로고침때마다 리소스들을 다시 받아오는게 아니라 캐시에서 가져와서 사용하였을 경우와 그렇지 않은 경우 이다.

chrome 기준 memory cache는 브라우저를 닫을때까지만 콘텐츠를 사용, disk cache는 사용자 디스크에 저장되서 사용된다.

서버까지 왕복하는 시간을 줄여 성능을 향상시킨다

    <meta http-equiv="Cache-Control" content="max-age=31536000" />    
    <meta http-equiv="Cache-Control" content="public" />

 

 

 

캐시 사용시 주의할점으로는 캐시정책, 유지기간, 캐시할 리소스 선정 등이 필요하고, 캐시 세부 설정을 통해 변경이 있을시에만 다운로드해서 가져오는 방법등이 있다.

 

 

 

 

 

---

 

Chrome developer tool -  light house

 

 

 

 

 

 

 

 

noopener, preconnect, cache 등의 속성을 적용후 chrome light house의 performance 점수가 조금 향상된걸 확인 할 수 있다.

 

 

 

 

 

 

WPT(Web Page Test)

 

 

 

 

 

 

WPT(webpagetest) summary 에서도 css,js가 먼저 로드된걸 확인할 수 있으며,

미세하지만 LCP, CLS, TBT 속도가 향상된걸 확인 할 수 있다

 

 

 

 

 

---

 

기타

 

작성한 javascript코드의 소요시간 확인

https://web.dev/long-tasks-devtools/?utm_source=lighthouse&utm_medium=unknown 

Are long JavaScript tasks delaying your Time to Interactive?

오래걸리는 script 코드수정해서 보완하는 방법으로 속도 업

 

 

 

critical rendering path

https://bearjin90.tistory.com/19

 

 

 

이미지 최적화 관련

https://joyful-development.tistory.com/9

 

 

HTTP

 

 

Secure Coding