[CI4] 브라우저 모바일/PC 페이지 속도 최적화.

회사 소개 사이트가 완성된지는 꽤 오래되었는데, 해당 사이트 최적화 이슈가 터졌다.

모바일은 너무 느리다고...

원인을 찾아보니 

 

첫번째. 영상의 크기가 너무 컸다.

두번째. 영상의 로딩시 임시로 띄울 화면이 없었다.(poster 속성 미기재)

세번째. 이미지들이 너무 컸기에 문제가 있었다.

네번째. js와 css 호출하는 데 있어 blocking때문에 그러했다.

 

1번의 경우 영상이 50mb 이상의 파일을 2개이상이나 호출하고 있었다.

2. poster 속성의 이미지를 미기재 할 경우

   load단계에서 동영상 다운로드 문제로 대역폭이 좁아져 자연스럽게 blocking이 된다.

 ㄴ poster를 기재하면, 일단 load단계에서 poster이미지를 호출하고,

    브라우저 load작업이 끝나면, 그때부터 동영상을 호출하기 시작해 전체적인 로드가 느려지는 문제가 없어진다.

3. 사이트 내 동영상뿐만 아니라 이미지 용량이 이상하게 18mb 이상인 게 하나 있었다.

  ㄴ 알고보니 디자이너가 준 이미지를 압축했다고 보고 그냥 넣은 것과 이미지 크기가 8000*4000이었다.

       그리하여 장축을 2000*1000까지 줄여 해당 이미지 용량을 대거 감소시켰다.

4. JS에서 호출 안되는 것 제거하는 것과 CSS의 경우 async를 넣어 해당 css호출 할때 blocking을 제거해주었다.

 

여기서 대부분의 사이트 문제는 1,2,3번의 경우이고 4번의 경우는 인터넷이 3g급 아니면 문제는 없다.

대부분 용량의 문제다보니 해당 용량을 최대로 낮춰 없애는 게 제일 좋다.
 

최적화 끝.

성능은 보통 65~75 사이로 나옴.

가끔 왜 그런지 모르겠지만, 테스트 페이지에서 해당 작업시 캐싱이 되는 것인지 75급으로 나오기도 하더라.
그런데, 평균적으로 65~66정도 나오니 75는 허수라고 보면 될듯 싶다.

이렇게 최적화 작업하니 pc가 74였는데 87~90으로 나와 매우 빨라졌다.

그런데, 성능 최적화 하는데 있어 4시간이나 걸렸다는 것은 좀 문제가 있기도하고

나도 성능최적화 하는데 처음이라 사수없이 작업하다보니 이런 것을 몰라 그런 것으로 생각한다.