홈페이지 최적화 작업 (진행중)


홈페이지 최적화

admin 제작 중, 홈페이지 최적화를 요청받았습니다. 증상으로는 첫 로딩속도가 매우 느리다보니 이탈률이 매우 높았고, 그로 인해 매출에 영향을 받고 있다고 판단되었습니다. 또한 Fooding.io에서는 swiper가 5개 돌아가고 있고, 그 사이에 인기상품을 보여주는 main 부분이 있다보니 이미지를 많이 받아와야 했습니다.

1. 초기 상태

우선 어느정도 느린지 알아야 해서 평가를 해보기로 했습니다. 지난달에 있었던, GDG Festival 행사에서 알게 된 크롬 Audit을 이용해서 측정을 해 보았습니다.

2018-11-21

Perfomance, Accessibility, Best Practice 점수가 낮은 것을 확인할 수 있었습니다.

문제점을 파악하기 위해, Audit에서 경고하는 문제점을 읽고 해결책을 세우기 시작했습니다.

  • 서버 문제점
    • img의 용량이 크다 -> 디자인팀에 요청해서 용량을 최대한 줄여달라 요청했습니다.
    • 또한 이미지 파일관리를 기존 AWS EC2에서 CDN로 바꾸었습니다.
  • 프론트
    • bundle.js의 무게가 매우 높다.. -> 중복되는 함수 제거를 통해 코드 줄이기 또는, 고차 함수 사용으로 극복
    • 모든 component와 module을 최상단인 AppModule에서 관리하고 있다. -> 기능별로 Module 분리를 통해 Lazy loading 작업
    • 결제 스크립트 등 처음 페이지에서 필요없는 기능을 loading시 불러온다. Ex) I’mport(결제), daumpost(주소검색) -> 필요한 부분에서 스크립트 생성 및 호출

이렇게 정리를 한 뒤 최적화 작업을 시작했습니다.

2. 1차 개선 - 프론트 최적화 적용 전

2018-12-03

확실히 서버에서 내려주는 속도가 빠르다보니 Perfomance 점수가 올라갔습니다.

3.2차 개선 - 프론트 중복함수 제거

2018-12-03-2

Perfomance 점수는 큰 차이가 없지만, 하단의 평가점수를 보면 많은 부분이 올라갔습니다.

4. 3차 개선 - Module 분리 및 Script 동적 생성

전보다 훨씬 모든 평가면에서 높은 점수를 받게 되었습니다. (audit 평가시 마다 어느정도 차이는 있습니다.)

2018-12-07

  • 첫 페이지에서 들어가는 부분을 제외한, 다른 부분들 Ex) 결제, 마이페이지 부분을 모듈화 했습니다.
    • Routing module 또한 따로 만들어서 관리를 하게 함으로써 처음 불러오는 용량을 줄였습니다.
  • 결제용 스크립트인 I’mport 및 다음지도 스크립트 또한, index.html에서 삭제했습니다.
    • 해당 기능이 필요한 것은 결제 페이지 부분이여서 해당 페이지에서 스크립트를 동적으로 생성 및 로드하도록 만들었습니다.
    • 이전에 소셜로그인 기능을 구현할 때도 같은 방법으로 만들어서 생각보다 어렵지는 않더군요.
  • Best Practice가 올라간 것은, 초기 index.html에 Jquery 1.12버전이 있었는데, 이를 3.3.1로 업데이트 한 것입니다.

5. 앞으로의 개선 방향

  • 우선 swiper 부분을 개선하고자 생각하고 있습니다. swiper처음 로딩시 정적 이미지를 표출 뒤, page loading이 끝날 때 swiper 이미지 호출 함수를 불러와서 자연스럽게 교체하는 방향으로 하려 합니다. 사용자 입장에서는 swiper가 정상적으로 느껴지게 하면서, page loading 시간을 줄이려고 합니다.

  • 첫 페이지를 들어오게 되면, 하단 swiper는 보이지 않는데, 이부분 또한 page loading후 불러오는 방법을 적용한다면, 처음 loading속도를 더 빠르게 할 수 있을 것이라 생각합니다.

  • lazy loading에 대해서 아직 완벽하게 아는것이 아니여서 좀 더 공부가 필요하다 생각합니다.

기타

  • admin page audit 검사 결과입니다. 나름 뿌듯^^

admin_audit

참고 : Chrome Audit https://slides.com/jbee/devfest_seoul_2018_performance_optimization_with_chrome_devtools




© 2017. by isme2n

Powered by aiden