본문으로 건너뛰기

메디세이사이트 개발서버 코드 수정 및 점수 개선 기록

개요​

첨부된 작업 화면을 기준으로, 홈페이지 내 프로모션 영역과 스크립트 선언부, head 메타 영역에서 수정된 부분을 Team Library용으로 정리했습니다.

수정된 부분 요약​

1. 병원 로고 롤링 영역 정리​

  • /images/promote/ci_01.png부터 /images/promote/ci_15.png까지 병원 로고 리스트를 확인했습니다.
  • 일부 로고에는 개별 높이값이 직접 지정되어 있습니다.
    • ci_02.png: height: 40px;
    • ci_07.png: height: 45px;
    • ci_14.png: height: 32px;
    • ci_15.png: height: 40px;
  • ci_03.png 항목은 주석 처리된 상태로 보입니다.

병원 로고 롤링 영역

2. 스크립트 선언부 수정 전후 정리​

  • 기존 화면에서 type="text/javascript"를 직접 명시한 스크립트 태그 구성이 확인되었습니다.
  • 이후 수정본에서는 불필요한 type="text/javascript" 선언 대신 defer 적용 방향으로 정리된 화면이 확인되었습니다.
  • 확인된 대상 파일은 아래와 같습니다.
    • /libs/swiper.min.js
    • /js/promote/common.js
    • /js/promote/rolling.js
    • /js/promote/typing.js

수정 전​

  • type="text/javascript" 명시 방식

스크립트 수정 전 1

스크립트 수정 전 2

수정 후​

  • defer 적용 방식

스크립트 수정 후 1

스크립트 수정 후 2

3. head 메타 및 viewport 수정​

  • viewport 메타 태그는 아래 형태로 수정 기준을 정리했습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • head 내부에는 Facebook domain verification 관련 메타 태그가 포함되어 있습니다.
  • 같은 구간에 title 태그가 주석 처리된 흔적도 함께 보입니다.

head 메타 영역

추가 성능 최적화 제안​

1. 공통 JS를 페이지별로 분리​

현재 head_promote.html에는 여러 스크립트가 한 번에 로드되고 있습니다.

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.js" defer></script>
<script src="/js/libs/jquery.mCustomScrollbar.concat.min.js" defer></script>
<script src="/js/ui.js" defer></script>
<script src="/js/pgpopup_2.0.js" defer></script>
<script src="/js/clipboard.js" defer></script>
<script src="/js/function.js?dt=201119" defer></script>
<script src="/js/promote.js" defer></script>
<script src="/js/libs/jquery.blockUI.js" defer></script>
<script src="/libs/ScrollTrigger.min.js" defer></script>

추천 구조는 아래와 같습니다.

<script src="/js/jquery.min.js"></script>
<script src="/js/ui.js" defer></script>
<script src="/js/promote.js" defer></script>
  • jquery-ui, blockUI, clipboard, mCustomScrollbar, ScrollTrigger는 실제 필요한 페이지에서만 따로 넣는 방향이 적절합니다.
  • 예를 들어 cost.html에서만 필요하다면 해당 페이지에만 아래처럼 분리합니다.
<script src="/js/jquery-ui.js" defer></script>
  • 이번 최적화 제안 중 성능 점수에 가장 직접적으로 영향을 줄 수 있는 항목입니다.

2. 영상 lazy load 처리​

현재 구조:

<video class="hidden animated" poster="/images/promote/video-thumb.png" controls width="500">
    <source src="/images/promote/video.mp4" type="video/mp4">
</video>

수정 제안:

<video
    class="hidden animated"
    poster="/images/promote/video-thumb.webp"
    controls
    preload="none"
    width="500">
    <source src="/images/promote/video.mp4" type="video/mp4">
</video>
  • 핵심은 preload="none" 적용입니다.
  • 사용자가 재생하기 전까지 대용량 영상 파일을 즉시 받지 않도록 해서 초기 로딩 부담을 줄일 수 있습니다.

3. 첫 화면에 필요한 CSS 우선 로드​

현재 intro에서는 CSS를 여러 개 로드합니다.

<link rel="stylesheet" href="/libs/swiper.min.css">
<link rel="stylesheet" href="/css/commom.css">
<link rel="stylesheet" href="/css/promote/common.css">
<link rel="stylesheet" href="/css/promote/intro.css">
  • 우선은 현재 구조를 유지하되, Swiper가 첫 화면 바로 아래에서만 필요하다면 Swiper CSS, JS를 뒤로 미루는 방식도 가능합니다.
  • 다만 이 부분은 레이아웃 깨짐 가능성이 있어 2차 최적화로 접근하는 편이 안전합니다.

4. third-party 스크립트 지연​

intro.html 하단에 네이버 로그 스크립트가 있습니다.

<script src="//wcs.naver.net/wcslog.js"></script>

가능하면 아래처럼 defer 또는 사용자 상호작용 이후 로드로 미루는 방법을 검토할 수 있습니다.

<script src="https://wcs.naver.net/wcslog.js" defer></script>
  • GTM 역시 성능에 영향을 줄 수 있으므로, 실제 운영에 필요한 태그만 남기고 불필요한 태그는 GTM 내부에서 정리하는 것이 좋습니다.

점수 개선 기록​

1. 수정 전 점수​

  • 성능: 65
  • 접근성: 90
  • 권장사항: 100
  • 검색엔진 최적화: 66
  • 주요 지표
    • First Contentful Paint: 2.8초
    • Largest Contentful Paint: 3.2초
    • Total Blocking Time: 0밀리초
    • Speed Index: 2.8초
    • Cumulative Layout Shift: 0.061
  • 초기 측정 기준으로 성능 점수가 가장 낮았고, 렌더링 관련 최적화 여지가 있는 상태였습니다.

수정 전 점수

2. 수정 중간 점수​

  • 성능: 88
  • 접근성: 90
  • 권장사항: 100
  • 검색엔진 최적화: 66
  • 주요 지표
    • First Contentful Paint: 1.0초
    • Largest Contentful Paint: 1.3초
    • Total Blocking Time: 70밀리초
    • Speed Index: 2.4초
    • Cumulative Layout Shift: 0.061
  • 수정 작업 중간 단계에서 성능 점수가 65점에서 88점으로 개선되었습니다.
  • 특히 FCP, LCP가 크게 줄어 초기 렌더링 속도가 좋아진 것으로 확인됩니다.

수정 중간 점수

3. 수정 후 현재 점수​

  • 성능: 88
  • 접근성: 90
  • 권장사항: 100
  • 검색엔진 최적화: 66
  • 주요 지표
    • First Contentful Paint: 1.0초
    • Largest Contentful Paint: 1.3초
    • Total Blocking Time: 70밀리초
    • Speed Index: 2.4초
    • Cumulative Layout Shift: 0.061
  • 최근 측정 기준 현재 점수도 88점으로 유지되고 있습니다.
  • 초기 대비 성능 점수는 +23점 개선된 상태입니다.
  • 배포 전 단계 기준으로는 성능 개선 효과가 확인되었고, 이후 실제 반영 후 재측정으로 최종 검증하면 됩니다.

수정 후 현재 점수

작업 메모​

  • 이번 기록은 첨부 이미지 기준으로 식별 가능한 수정 포인트와 점수 개선 흐름을 Team Library에 남기는 목적의 정리본입니다.
  • 현재 문서는 배포 전 단계까지 확인한 기록 기준으로 작성했습니다.
  • 실제 반영 파일 경로와 최종 배포본은 원본 소스와 함께 한 번 더 대조하는 것이 좋습니다.