웹사이트 성능

brand-guide를 로드하여 속도 수정이 브랜드 외관을 변경하지 않도록 하고, website-change-safety 절차를 따릅니다.

방법

PageSpeed Insights 모바일 기준 측정: 페이지당 2~3회 실행, 필드 데이터 포함. LCP 요소를 기록합니다.
보고서에서 원인 찾기: 긴 작업, 부팅 시간/서드파티 요약, 렌더링 차단 요청, LCP 분석(로드 지연 vs 렌더링 지연), DOM 크기, 강제 리플로우.
한 번에 하나의 원인을 수정하고 다시 측정하여 도움이 되는 것만 유지합니다.
가능하면 게시 전에 로컬에서 A/B 테스트: 요청 가로채기를 통해 라이브 페이지에 새로운 JS/HTML/CSS를 제공하고, 두 버전을 동일한 방식으로 제공합니다(압축되지 않은 로컬 파일과 gzip 압축된 라이브 파일을 비교하면 시뮬레이션된 타이밍이 왜곡됨). 메인 스레드 시간, DOM 크기, 스타일/레이아웃 시간을 비교합니다.

계속 로드되는 제거된 앱. 남아 있는 페이지 빌더 위젯과 스크립트 항목을 제거합니다. 일부 플랫폼은 앱이 제거된 후에도 통합 스크립트(예: 50개 이상의 파일로 구성된 비주얼 에디터 런타임)를 계속 삽입합니다. 채널/스토어프론트 수준의 "비활성화" 스위치를 찾거나 플랫폼 지원팀에 문의하세요.
모든 페이지가 아닌 필요할 때만 로드: 동영상 플레이어(포스터 이미지 + 재생 버튼을 표시하고 클릭 시 iframe 생성), 캡차(양식이 열릴 때 로드), 채팅 위젯, 로열티/리워드 위젯(필요한 페이지만), 접힌 부분 아래의 리뷰 위젯.
페이지 빌더를 통해 추가된 임베디드 동영상 블록은 테마에서 지연시킬 수 없습니다. 해당 동영상을 클릭하여 로드하는 퍼사드를 사용하는 테마 자체 동영상 영역으로 이동하세요.
중복: 두 개의 분석 라이브러리, 동일한 태그가 두 번, 이전 픽셀과 새 픽셀.
소유자의 승인 없이 광고/분석 태그를 상호작용할 때까지 지연시키지 마세요. 데이터가 변경됩니다.

캐러셀/슬라이더: 데스크톱 우선 슬라이더 설정은 종종 데스크톱 레이아웃을 구축한 다음 휴대폰용으로 다시 빌드합니다. 모바일 우선 설정으로 전환하세요. "무한/루프" 모드는 모든 슬라이드를 2~3배 복제하여 수백 개의 추가 요소를 생성합니다. 필요하지 않은 곳에서는 루핑을 끄세요. 첫 화면 아래에서 시작하는 슬라이더는 뷰포트 근처에 올 때만 초기화하고(IntersectionObserver 사용), 초기화되지 않은 행이 동일한 높이로 표시되도록 CSS를 적용하여 점프가 발생하지 않도록 합니다.
페이지 빌더 및 플러그인 (특히 WordPress/Wix/Squarespace): 각 플러그인은 모든 페이지에 자체 CSS/JS를 추가할 수 있습니다. 사용하지 않는 것은 비활성화하고 나머지는 필요한 곳에서만 로드하세요.
숨겨진 중복 마크업: 예: 그리드와 모든 제품의 숨겨진 목록 보기를 모두 렌더링하는 목록 페이지. 하나만 렌더링하세요.
남아 있는 디버그 로깅 및 여전히 실행되는 데드 코드 경로를 제거하세요.

실제 LCP 요소를 식별하세요. CSS 배경 이미지인 경우 브라우저가 늦게 찾습니다. 해당 페이지에만 <link rel="preload" as="image" fetchpriority="high">를 추가하고, URL이 CSS가 확인하는 URL과 바이트 단위로 동일한지 확인하세요(그렇지 않으면 두 번 다운로드됨).
보이는 첫 번째 이미지 행에만 fetchpriority="high"를 설정하세요(예: 2열 휴대폰 그리드에서 2개). 더 많은 높은 우선순위 이미지는 실제 LCP 이미지와 대역폭을 나누게 됩니다.
LCP 이미지를 절대 지연 로드하지 마세요. 접힌 부분 아래의 모든 것은 지연 로드하세요.
플랫폼이 이미 제공하는 형식을 확인하세요(많은 CDN이 자동으로 WebP/AVIF로 변환). 이미지를 다시 저장해도 얻는 것이 없을 수 있습니다. 큰 개선은 과도하게 큰 원본 이미지와 잘못된 sizes에서 비롯됩니다.

테마의 기본 스타일시트가 일반적으로 병목 현상입니다. 페이지별 CSS를 분리하거나 중요한 CSS를 인라인할 수 있지만, 이는 더 크고 위험한 프로젝트입니다. 제안은 하되, 몰래 포함시키지 마세요.
<head>에 있는 모든 추가 렌더링 차단 스타일시트 또는 동기 스크립트(종종 앱에 의해 삽입됨)는 지연을 추가합니다.
폰트: font-display 선택을 의도적으로 유지하세요(아이콘 폰트는 block이 필요하고, 텍스트 폰트는 대체 메트릭이 레이아웃 변경을 피할 만큼 충분히 가까운 경우에만 swap할 수 있음).

페이지별 전/후 수치(범위), 필드 데이터 상태, 변경된 사항 및 소유자의 결정이 필요한 사항(서드파티 트레이드오프)입니다. 실험실 점수는 변동될 수 있으며, 트렌드와 필드 데이터가 단일 실행보다 더 중요하다는 점을 상기시킵니다.