인스턴트 모바일 웹 앱
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
주요 렌더링 경로란 브라우저에서 페이지 그리기를 시작하기 전에 필요한 모든 요소 (자바스크립트, HTML, CSS, 이미지)를 말합니다. 특히 셀룰러 네트워크의 스마트폰과 같이 네트워크에 제약이 있는 기기의 사용자에게는 중요한 렌더링 경로에서 애셋을 제공하는 데 우선순위를 두어야 합니다. 브라이언은 Google팀에서 PageSpeed Insights 웹사이트의 애셋을 식별하고 우선순위를 지정하는 과정을 거쳐 로드 시간이 20초에서 1초 이상으로 단축되는 과정을 살펴보았습니다.
Slides
- 렌더링 차단 자바스크립트 및 CSS를 제거합니다.
- 표시되는 콘텐츠에 우선순위를 둡니다.
- 스크립트를 비동기식으로 로드합니다.
- 초기 뷰를 서버 측에서 HTML로 렌더링하고 자바스크립트로 보강합니다.
- 렌더링 차단 CSS를 최소화하세요. 초기 표시 영역을 표시하는 데 필요한 스타일만 전송한 다음 나머지를 제공하세요.
- 렌더링 차단 CSS에 인라인으로 삽입된 대규모 데이터 URI는 렌더링 성능에 유해하며, 이미지 URL이 차단되지 않는 리소스를 차단합니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-25(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-07-25(UTC)"],[],["The core content discusses optimizing the Critical Rendering Path (CRP) for faster page load times. Key actions include eliminating render-blocking JavaScript and CSS, prioritizing visible content, loading scripts asynchronously, and rendering the initial view server-side as HTML. Minimizing render-blocking CSS by delivering only initial viewport styles is crucial. Large data URIs inlined within blocking CSS negatively impacts performance, unlike image URLs. These steps were used to significantly improve the PageSpeed Insights website's load time.\n"]]
