제품 페이지가 느리다면 서버 교체나 사이트 재구축을 검토하기 전에, 그 페이지가 불러오는 파일 목록을 크기순으로 정렬해 가장 무거운 것부터 확인하세요. 기업 사이트의 속도 문제는 대개 원본 그대로 올린 대형 이미지, 자동 재생 동영상, 여러 개 겹쳐 설치된 외부 스크립트처럼 몇 개의 파일에서 시작됩니다. 원인을 특정한 뒤에 고치면 작업 범위가 작아지고, 수정 효과도 같은 조건으로 확인할 수 있습니다.
측정은 어떤 조건으로 시작해야 하나요?
먼저 측정 조건을 고정합니다. 같은 페이지를 사무실 컴퓨터로 한 번, 휴대전화로 한 번 열어 보고 느낌을 비교하는 방식으로는 개선 여부를 판단할 수 없습니다. 측정 도구, 기기 유형, 네트워크 조건, 측정 시각을 정해 기록하고, 이후에도 같은 조건으로 다시 재세요. 브라우저 개발자 도구의 네트워크 화면이나 공개된 페이지 속도 측정 도구를 쓸 수 있으며, 어떤 도구를 쓰든 매번 같은 도구를 쓰는 것이 중요합니다.
대상 페이지도 정해 둡니다. 사이트 전체를 한꺼번에 보기보다 방문이 많은 제품 목록, 대표 제품 상세페이지, 자료 다운로드 페이지처럼 고객이 실제로 오래 머무는 페이지 몇 개를 고르세요. 첫 방문과 재방문은 저장된 파일 여부에 따라 결과가 크게 다르므로, 저장된 파일을 지운 상태로 측정했는지도 함께 적어야 합니다.
측정 결과에는 페이지가 처음 내용을 보여 준 시점, 주요 이미지가 표시된 시점, 전체 전송량, 요청한 파일 수를 남깁니다. 이 네 가지만 있어도 수정 전후를 비교할 수 있습니다. 측정 화면은 이미지로 저장해 두고, 결과를 적은 문서에 측정한 사람과 날짜를 함께 남기세요. 나중에 다른 담당자가 같은 조건으로 다시 측정할 때 이 기록이 기준이 됩니다.
어떤 파일부터 확인해야 하나요?
네트워크 화면에서 파일을 크기순으로 정렬하면 가장 무거운 파일이 맨 위에 올라옵니다. 상위 몇 개의 파일이 전체 전송량의 대부분을 차지하는 경우가 많으므로, 목록 위쪽부터 하나씩 이름과 용도를 확인하세요. 파일 이름만으로 용도를 알 수 없다면 해당 파일을 새 창에서 열어 실제로 어떤 이미지나 스크립트인지 확인합니다.
확인한 파일은 이미지, 동영상, 스크립트, 스타일, 글꼴로 분류하고 각 파일이 화면의 어느 부분을 담당하는지 적습니다. 화면에 보이지 않는데도 불러오는 파일이 있다면 과거 디자인에 쓰였다가 남은 파일일 수 있습니다. 이런 파일은 담당자 확인을 거쳐 제거 후보로 표시하세요.
같은 파일을 여러 번 불러오는지도 봅니다. 같은 이미지를 크기만 달리해 여러 장 받거나, 같은 기능의 스크립트를 두 경로에서 불러오는 경우가 있습니다. 중복은 한 곳만 정리해도 전송량이 바로 줄어드는 항목입니다.
큰 이미지는 어떻게 정리하나요?
제품 사진은 촬영 원본을 그대로 올린 경우가 많습니다. 화면에 표시되는 크기보다 몇 배 큰 원본을 받으면 보이는 품질은 같고 전송량만 늘어납니다. 페이지 디자인에서 이미지가 실제로 차지하는 최대 폭을 확인하고, 그 폭에 맞춰 크기를 줄인 파일을 따로 만들어 올리세요. 확대 보기 기능이 필요한 제품 사진이라면 확대 화면에서만 큰 파일을 불러오도록 나눕니다.
파일 형식도 함께 검토합니다. 사진은 압축 효율이 좋은 형식으로 바꾸고, 선과 글자가 많은 도면이나 아이콘은 그에 맞는 형식을 고릅니다. 화면 아래쪽에 있어 처음에는 보이지 않는 이미지는 스크롤해 가까워질 때 불러오도록 설정하면 첫 화면이 빨리 열립니다. 다만 첫 화면의 대표 이미지까지 늦게 불러오도록 설정하면 오히려 주요 내용이 늦게 보이므로 구분해서 적용하세요.
이미지를 바꿀 때는 대체 텍스트와 파일 이름도 함께 확인합니다. 용량을 줄이는 작업과 이미지 설명을 정리하는 작업을 한 번에 처리하면 같은 페이지를 두 번 손대지 않아도 됩니다.
동영상과 외부 스크립트는 무엇을 봐야 하나요?
첫 화면에서 자동 재생되는 동영상은 페이지가 열리자마자 큰 파일을 받기 시작합니다. 동영상이 꼭 첫 화면에 있어야 하는지 검토하고, 필요하다면 대표 장면 이미지를 먼저 보여 준 뒤 방문자가 재생을 누를 때 영상을 불러오는 방식을 고려하세요.
외부 스크립트는 방문 분석, 채팅 상담, 광고 측정, 지도처럼 다른 회사의 서비스가 제공하는 기능입니다. 시간이 지나며 담당자가 바뀌면 이미 쓰지 않는 서비스의 스크립트가 그대로 남는 경우가 많습니다. 설치된 스크립트마다 어떤 서비스인지, 지금도 계약과 사용이 유지되는지, 사내 담당자가 누구인지 목록으로 정리하고, 쓰지 않는 스크립트는 담당자 확인 후 제거하세요. 같은 목적의 측정 도구가 두 개 이상 설치돼 있다면 하나로 정리할 수 있는지도 검토합니다.
글꼴과 스타일 파일은 어떻게 점검하나요?
웹 글꼴은 굵기마다 별도 파일을 받는 경우가 많습니다. 디자인에서 실제로 쓰는 굵기만 남기고, 쓰지 않는 굵기와 언어 범위의 파일은 불러오지 않도록 정리하세요. 한글 글꼴은 파일이 큰 편이라 필요한 굵기만 남겨도 전송량 차이가 큽니다.
스타일 파일과 스크립트 파일이 여러 개로 나뉘어 있다면, 첫 화면을 그리는 데 꼭 필요한 파일과 나중에 불러와도 되는 파일을 구분합니다. 이 작업은 사이트 구조와 관련된 경우가 많아 개발 담당자의 확인이 필요합니다. 구축 단계에서 어떤 최적화를 기본으로 포함하는지는 구축 표준 범위에서 확인할 수 있습니다.
서버나 호스팅 문제는 언제 의심하나요?
파일을 정리했는데도 첫 응답 자체가 늦다면 그때 서버 쪽을 확인합니다. 네트워크 화면에서 페이지 문서 자체를 받기까지 기다린 시간이 길게 나타난다면, 파일 크기보다 서버 처리나 호스팅 환경이 원인일 가능성이 있습니다. 같은 조건에서 시간대를 바꿔 몇 차례 측정해 특정 시간에만 느려지는지, 항상 느린지를 구분해 두세요.
해외 바이어가 주로 접속하는 사이트라면 접속 지역에 따른 차이도 봅니다. 서버가 국내에만 있으면 먼 지역에서 파일을 받는 시간이 길어질 수 있습니다. 이 경우 파일을 여러 지역에 나눠 두는 전송 서비스 사용 여부를 호스팅 담당자와 검토합니다. 서버 설정은 사이트 운영 전체에 영향을 주므로, 변경은 담당자가 정한 절차와 복구 방법을 확인한 뒤 진행하세요.
수정한 뒤에는 무엇을 비교하나요?
수정 전 측정과 같은 도구, 같은 기기 유형, 같은 네트워크 조건으로 다시 측정하고 네 가지 값을 나란히 비교하세요. 한 번의 측정값은 그때그때 흔들릴 수 있으므로 같은 조건으로 몇 차례 측정해 흐름을 봅니다. 값이 좋아졌더라도 화면이 깨지거나 이미지가 흐려지지 않았는지 실제 화면으로 함께 확인해야 합니다.
수정 내역은 파일 이름, 바꾼 내용, 작업자, 작업 날짜를 기록합니다. 나중에 같은 페이지가 다시 느려졌을 때 이 기록이 있으면 새로 추가된 파일이 무엇인지 빠르게 찾을 수 있습니다. 새 콘텐츠나 기능을 올릴 때마다 파일 크기 기준을 확인하는 절차를 운영 규칙에 넣어 두면 같은 문제가 반복되는 것을 줄일 수 있습니다.
사이트 전체의 페이지 속도와 구조, 색인 상태를 함께 확인하고 싶다면 대상 사이트 주소를 준비해 무상 사전 진단 신청을 진행하세요.
출처
업무 과정을 설명하기 위한 참고 사진입니다.
사진: evertonpestana / Pixabay · 이용 조건
사진: JKimsey / Pixabay · 이용 조건