사이트 접속 지연 시 크롬 개발자 도구를 통해 문제점을 확인할 수 있어요.
자세히 알아보기
광고, 통계 등 목적에 따라 카페24 기능이 아닌 다른 프로그램으로 수행하고자 하는 사이트 내 스크립트를 입력할 수 있어요.
따라서 카페24 디자인 편집 창의 메인 화면, 상품 목록, 주문 작성 페이지 등 모든 페이지에 스크립트를 입력할 수 있어요.
하지만 해당 스크립트로 인해 사이트 접속 지연이 발생할 수 있으니 문제되는 스크립트를 확인해 주세요.
Info
크롬 개발자 도구 디버깅
크롬에서 제공하는 툴이고 사이트 디자인을 분석하기 위해 제작되었어요.
따라서 HTML 구조, CSS 스타일, JavaScript 디버깅, 프로파일링, 성능 진단 등을 진행할 수 있어요.
이중 사이트 접속 지연 시 문제되는 스크립트와 이미지, 페이지의 총용량을 확인할 수 있는 가이드를 활용해 주세요.
- 크롬에서 사이트 접속 후 F12 > Network > 빨간 동그라미를 확인 후 새로 고침을 해 주세요.
Network는 웹 페이지와 관련된 네트워크 요청들을 확인할 수 있는 패널이에요.
해당 메뉴에서 접속 지연되는 스크립트, 이미지를 확인할 수 있어요. - 사이트 내 오픈되는 이미지 , 스크립트, 텍스트 등이 집계되어요.
"Time" 항목을 눌러 내림차순으로 확인해 주세요.
Time은 각 파일이 로딩되는 시간이고 지연되는 파일을 확인할 수 있어요.- Time이 지연되는 외부 요소가 확인될 경우 해당 요소의 Name 항목을 마우스 우클릭해 주세요.
block request url , block request domain으로 네트워크 요청을 차단하여 차단 전과 차단 후의 접속 상태를 비교해 볼 수 있어요.
※ block request url은 url로 차단하기 때문에 해당 요소 하나만을 차단하지만, block request domain은 같은 도메인의 모든 요소들을 차단해요.
- Time이 지연되는 외부 요소가 확인될 경우 해당 요소의 Name 항목을 마우스 우클릭해 주세요.
- Status는 구성 요소를 가져온 결과를 확인할 수 있고 Type 구성의 요소예요.
Status 값은 200 정상, 404는 연결된 페이지 확인 불가 등 상태 값을 확인할 수 있어요.
Type은 jpg, gif 등 이미지 확장자와 js, script 등 스크립트를 확인할 수 있어요.
따라서 접속 지연 시에 Status의 상태 코드(404 or 500)를 확인하고 어떤 파일인지 Type 항목을 통해 체크해 주세요.
Note
그 외 Status 값은 아래 링크를 참고해 주세요.
- 아래에 표시된 영역에서 해당 페이지의 용량 및 Load 값을 통해 해당 페이지의 모든 구성 요소를 가져오기까지의 시간을 확인해 주세요.
- Load: 구성 요소를 가져오기까지 시간
-
resources: 구성 요소의 용량 (이미지, 텍스트 등)
각 이미지의 용량이 크고 노출되는 상품의 수가 많을 경우 resources와 Load 값이 높아져요.
각 쇼핑몰별로 사용된 디자인 구성 요소(노출 콘텐츠 수, js, css 등) 및 사용자의 네트워크 환경에 따라서도 차이가 발생되어 메인 페이지의 용량에 대한 명확한 기준을 잡기는 어려워요.
하지만 일반적으로 메인 페이지 전체 용량을 20MB 이하, 이미지별 약 100KB를 권장하고 있으니,
아래 메인/상품 분류 상품 진열 개수를 줄이거나 확인된 외부 스크립트를 주석 또는 삭제하여 최적화를 진행해 주세요.