프론트엔드에서 페이지 로딩 속도 문제 해결하기

안녕하세요, 프론트엔드 개발자 Sean입니다. 

 

만약 개발중인 애플리케이션의 규모가 크거나 빅데이터를 다루는 서비스라면, 다들 페이지 로딩 속도 문제 고민을 해보셨을 것이라 생각합니다. 이는 유저의 경험에 아주 안 좋은 영향을 미치기 때문에 꼭 해결을 해야 하는 문제이기도 하지요.

 

하지만 위와 같은 상황에서 사실 프론트엔드가 근본적인 해결책을 낼 수는 없습니다. 대부분의 경우 서버의 응답이 곧 페이지 로딩 속도이기 때문이죠.

 

오늘 포스팅에서는 위와 같은 상황에서 저는 어떤 생각을 했고 어떻게 유저의 경험에 미치는 영향을 최소화했는지 경험을 공유하고자 합니다. 사실 초보 개발자가 짧은 머리로 고민해 만든 일종의 트릭이기 때문에 추천드리지는 않습니다. 그리고 혹시 더 좋은 방법을 아시는 분들은 댓글로 노하우를 알려주시면 정말 감사하겠습니다 ㅠㅠ

 

문제: MY FOLLOWING 탭의 페이지 로딩 속도가 너무 느린 문제가 있었습니다. 

 

아래는 제작중인 플랫폼의 대시보드 페이지입니다. 

 

사진에서 보시는 것과같이 대시보드 페이지는 세 가지의 탭으로 나뉘어 있습니다. 

My following, Most searched, Most controversia

 

이 중 My following 탭에서의 서버 응답이 너무 느려, 유저가 상당한 시간을 기다려야 하는 문제가 발생했습니다. 

유저가 대시보드에 진입하면 클라이언트는 서버에게 팔로잉하는 회사 리스트를 요청하는 request를 보내게 되는데 응답까지 11초에서 21초의 시간이 걸리고 있었습니다. 단순히 리스트를 보내는데 이렇게 시간이 걸린단 말이야?라고 의아해하실 수 있겠지만,

팔로잉하는 회사의 여러 index를 같이 보내기 위해 복잡한 table join이 요구되어 서버단에서 쿼리에 시간이 상단히 걸린다고 합니다. 

그래서 저는 두 가지의 해경방안을 생각해 보았는데요.

Option 1: 쿼리 캐싱하기

첫 번째 방안은 쿼리를 DB에 캐싱시키는 방법입니다. 

 

현재 DB를 Redshift를 사용하고 있는데요, Redshift에서는 쿼리를 캐싱해 같은 형식의 쿼리가 요청되면 미리 저장해놓은 응답을 바로 보내준다고 합니다(from 백엔드 개발자). 그래서 이 부분을 이용하는 방안을 생각해 보았습니다. 

 

유저가 로그인을 하자마자 클라이언트에서는 팔로잉하는 회사 리스트를 서버에 요청하고 서버가 응답을 주 든 말든 신경 쓰지 않는 것입니다. 

아마 서버에서는 요청을 받았으니 쿼리를 통해 응답을 보내겠지만 클라이언트는 신경쓰지 않을 겁니다. 저희가 원하는 건 응답 과정에서 데이터베이스에 해당 정보가 캐싱되는 것이니까요. 

 

따라서 유저가 대시보드에 진입하면 똑같은 요청을 데이터베이스에 보내게 될 것이고 이번에는 캐싱된 정보를 바로 보내게 될 것입니다. 

 

이 방법은 코드가 간단하고 기능을 만들기 쉽다는 장점이 있지만 서버에 부담을 준다는 단점이 있습니다. 

 

Option 1: 로컬스토리지 혹은 리덕스 스토어 이용하기

두 번째 방안은 로컬스토리지나 리덕스 스토어를 이용하는 방법입니다. 

 

유저가 대시보드에 진입하면 My following 탭을 우선 보여주는 게 아닌  Most searched, Most controversia 탭을 먼저 보여줍니다. 유저가 해당 탭을 보고 있을 때 클라이언트에서는 미리 팔로잉 회사 데이터를 서버에다 요청해 놓는 겁니다. 만약 서버에서 응답이 도착하면 이를 글로벌 스토어나 로컬 스토리지에 저장을 하고 My following 탭에서는 응답 데이터를 이용하는 게 아닌 스토어나 로컬 스토리지에서 데이터를 찾아서 렌더링을 하도록 하는 거죠.

 

이 방법은 상대적으로 코드가 복잡해지고 여러가지 변수가 나타날 수 있다는 단점이 있습니다. 하지만 서버의 부담을 줄이고 저장된 My following 데이터를 다른 페이지에서도 활용할 수 있다는 장점이 있습니다.

 

저는 위 두가지 방안중 두 번째 방안을 채택하여 문제를 해결했습니다.

사실문제를 해결했다기보다는 안 보이게 덮어놓았다는 표현이 적절할 것 같습니다. 

 

다른 팀에서는 어떻게 해결하는지 궁금하네요.