CSS 전달 최적화: 지연된 CSS 로딩 기술 이해

웹사이트 성능을 개선하기 위해 개발자는 CSS 전달을 최적화하는 경우가 많습니다. Google 개발자 문서에 언급된 전략 중 하나는 페이지가 로드될 때까지 원본 CSS 파일 로드를 연기하면서

그러나 이로 인해 페이지가 로드된 후 어떻게 큰 CSS 파일을 로드할 수 있는지에 대한 질문이 남습니다.

해결책: 큰 CSS 파일 로드 연기

큰 CSS 파일 로드를 연기하려면 간단한 jQuery 코드를 활용할 수 있습니다. snippet:

    function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='" src " />"));
    }
};

$(document).ready() 또는 window.onload 함수 내에서 이 함수를 호출하면 페이지 로드가 완료된 후 CSS 파일을 동적으로 로드할 수 있습니다.

방법 확인

이 방법이 작동하는지 확인하려면 브라우저에서 JavaScript를 비활성화한 다음 페이지를 다시 로드해 보십시오. 스타일시트가 적용된 상태에서 페이지가 여전히 올바르게 로드되면 CSS 로드가 성공적으로 지연된 것입니다.

대체 방법

CSS 로드를 연기하는 대체 방법이 있습니다.