인터넷 속도가 느린 환경에서 속도개선 작업

현재 회사의 특성상 병원이라는 특수한 장소에서 인터넷 속도가 느려지는 문제가 발생하고 있었다.

 

현 회사에 특수한 상황은 아래와 같았다.

1. 장비PC에서는 딥넷, AI 백엔드와 같이 CPU를 같이 사용

2. 웹에서 리소스사용량보다 현저히 높은 사용량

3. 느린 네트워크 속도

4. 로컬 환경에서 웹소켓 양방향으로 송수신으로 통한 실시간 데이터 새로고침

 

첫 해결책으로 image lazy loading 도입으로 리소스 자원 낭비를 줄이는 방법을 실행 하기로 했다.

WBC Images 이미지를 CDN 으로 200개이상 불러오는 화면

 

장비의 CPU와 메모리가 한정적이며, 온프레미스로 구축하여 사용하다 보니 큰 이슈가 발생했다. 속도가 너무 느려서 사용이 불가능할 정도였고, 확인해본 결과 서버 응답 시간이 약 5초 정도 걸리는 부분이 있었다.

이에 따라 이미지 지연 로딩(image lazy loading)을 도입하거나 불필요한 리소스를 줄여 자원 낭비를 최소화하도록 코드를 수정하기로 결정했다.

 

페이지에서 실제로 필요할 때까지 리소스 로딩을 미루는 방식으로 웹 최적화를 고려했다. 기획적인 측면에서 중요하지 않다고 판단되는 부분이 있어서 임상병리사 직원분에게 조언을 구했다. 그 결과, 해당 부분에 이미지를 페이징 처리하거나 Intersection Observer API를 도입해서 스크롤 내릴 때 로딩되는 방식에 대한 의견을 들었다. 이후 페이징 처리로 협의해서 문제를 해결해 나갔다. 

페이징 처리로 수정 후

페이징 처리

0.915 초로 단축 완료 기존 5001ms 가 걸리던 부분을 인터넷 속도에 대한 이슈부분을 해결 했다.

프론트엔드 개발은 가장 핵심적이고 기본적인 부분은 속도부분에 최적화를 하는 부분이라고 생각한다.

초심을 잃지 않고 꼼꼼하게 체크하는 습관을 들여야겠다..