메가공무원(소방) 메인 페이지 최적화를 다루며

수만 명의 사용자가 동시에 방문하는 사이트, 메인 페이지의 무게가 점점 커질수록
속도, UX, 서버 트래픽이라는 세 가지 과제를 동시에 해결해야 합니다.

이 글에서는 제가 직접 참여한 메가공무원 메인 페이지의 퍼포먼스 개선 사례를 바탕으로
Lazy Loading과 AJAX 기반 비동기 통신, 그리고 Slick 슬라이더 최적화를 통해
렌더링 성능을 실제로 어떻게 개선했는지를 공유합니다.

✅ 개선의 핵심 목표

• 첫 진입 시 FCP, LCP 속도 단축
• 불필요한 초기 렌더링 제거 (위에 보이지 않는 영역 → Lazy load)
• 이미지 로딩은 anticipated 방식으로 처리
• 퍼블리셔 입장에서 유지보수 용이한 구조 구성

---

🔧 Lazy Loading 구조

Lazy loading은 화면에 아직 보이지 않은 영역의 코드를 뒤늦게 불러오는 방식입니다.
특히 스크롤을 내려 사용자의 뷰포트에 도달했을 때 해당 영역을 AJAX로 삽입합니다.

var isElemVisible = [];

function fncLazyLoadingData(dNm, fnc) {
  if (!$('#'+dNm).length) return;
  if (fncCheckVisible($('#'+dNm)) && !isElemVisible[dNm]) {
    new Function(fnc)();
    isElemVisible[dNm] = true;
  }
}
function fncCheckVisible(elm, eval) {
  eval = eval || "object visible";
  var viewportHeight = $(window).height(),
      scrolltop = $(window).scrollTop(),
      y = $(elm).offset().top,
      elementHeight = $(elm).height();
  if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
}

// 실제 로딩할 데이터 삽입
function fncLazyLoadingPage(id, path, params) {
  $.post(path, { now: "<%=lo_now_date%>", ...params }, function(data) {
    $("#" + id).append(data);
  }).always(function(){
    $("#" + id).removeClass("lazy_section");
  });
}

// 실행 예시
$(window).on('load scroll resize', function() {
  fncLazyLoadingData("lazy_loading_lineup", "fncLazyLoadingPage('lazy_loading_lineup', '/m/gong/bnr_zone/v24/all_lineup.asp')");
});

💡 주요 팁

• new Function(fnc)으로 전달된 문자열 함수를 실행함으로써 구성 유연성을 높였습니다.
• isElemVisible[dNm]로 중복 호출을 방지합니다.

.lazy_section {
  background: linear-gradient(to right, #eee 0%, rgba(0, 0, 0, 0.15) 20%, #eee 100%);
  background-position: 100% 0;
  background-size: 200% 100%;
  animation: skeleton-line 1.2s infinite;
}

🧠 Slick 슬라이더 최적화 적용

Slick 슬라이더에는 lazyLoad: 'anticipated'라는 옵션이 존재합니다. 이는 화면에 곧 보여질 이미지를 미리 불러오는 방식으로, 스크롤 인터랙션이 많은 UI에 효과적입니다.

<img data-lazy="<%=img_main%>/profphoto/.../pro_lec.png" alt="선생님" />

$('#teaColumn_list').not('.slick-initialized').slick({
  lazyLoad: 'anticipated',
  // 기타 옵션
})

📊 실제 성과

• FCP 평균 2초 → 1초로 개선
• LCP 수치도 2.9초 → 2.1초로 개선
• 30% 이상 초기 렌더링 시간 감소
• 사용자 스크롤 후 응답성 향상
• UX 향상으로 이탈률 감소, 신뢰도 상승

✨ 마무리

많은 트래픽과 복잡한 구조 속에서도 빠르고 안정적인 퍼포먼스를 만들기 위해서는 시점 제어와 지연 로딩, 그리고 미리보기 UI 처리까지 고려하는 것이 중요합니다.

이번 프로젝트를 통해 얻은 인사이트는 다음과 같습니다:

• “모든 걸 한 번에 그릴 필요는 없다.”
• “사용자가 보는 순간에만 보여줘도 늦지 않다.”

빠르게, 그러나 부담 없이. 이 글이 대형 웹사이트 성능 개선을 고민 중이신 여러분께 도움이 되었기를 바랍니다.