내 사이트에서 렌더링을 차단하는 2 개의 CSS 파일을 제거하려고합니다.이 파일은 Google Page Speed Insights에 표시됩니다. 나는 다른 방법을 따랐지만 어느 것도 성공하지 못했습니다. 하지만 최근에 Thinking Async 에 대한 게시물을 찾았고이 코드를 적용했을 때 <script async src="https://third-party.com/resource.js"></script>문제가 해결되었습니다.
그러나 게시 후 페이지의 스타일이 손실되었습니다. 코드가 작동하기 때문에 무슨 일이 일어나고 있는지 잘 모르겠지만 작동하지 않는 업로드 후 스타일링입니다. 도움을 주시면 감사하겠습니다. 감사
답변
비동기 스타일 시트 다운로드를 트리거하는 비결은 <link>요소 를 사용 하고 미디어 속성에 대해 잘못된 값을 설정하는 것입니다 (나는 media = “none”을 사용하고 있지만 모든 값이 사용됩니다). 미디어 쿼리가 false로 평가되면 브라우저는 여전히 스타일 시트를 다운로드하지만 페이지를 렌더링하기 전에 콘텐츠를 사용할 수있을 때까지 기다리지 않습니다.
<link rel="stylesheet" href="css.css" media="none">
스타일 시트 다운로드가 완료되면 미디어 속성을 유효한 값으로 설정해야 스타일 규칙이 문서에 적용됩니다. onload 이벤트는 미디어 속성을 모두로 전환하는 데 사용됩니다.
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
이 CSS로드 방법은 표준 접근 방식보다 훨씬 빠르게 방문자에게 유용한 콘텐츠를 제공합니다. 중요한 CSS는 여전히 일반적인 차단 방식으로 제공 될 수 있으며 (또는 궁극적 인 성능을 위해 인라인 할 수 있음) 중요하지 않은 스타일은 나중에 파싱 / 렌더링 프로세스에서 점진적으로 다운로드하여 적용 할 수 있습니다.
이 기술은 자바 스크립트를 사용하지만 <link>요소에 동등한 차단 요소를 래핑하여 자바 스크립트가 아닌 브라우저를 수용 할 수 있습니다 <noscript>.
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"><noscript><link rel="stylesheet" href="css.css"></noscript>
www.itcha.edu.sv 에서 작업을 볼 수 있습니다.
답변
2020 업데이트
간단한 대답 (전체 브라우저 지원) :
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
문서화 된 답변 (선택적 사전로드 및 스크립트 비활성화 대체 포함) :
<!-- Optional, if we want the stylesheet to get preloaded. Note that this line causes stylesheet to get downloaded, but not applied to the page. Use strategically — while preloading will push this resource up the priority list, it may cause more important resources to be pushed down the priority list. This may not be the desired effect for non-critical CSS, depending on other resources your app needs. -->
<link rel="preload" href="style.css" as="style">
<!-- Media type (print) doesn't match the current environment, so browser decides it's not that important and loads the stylesheet asynchronously (without delaying page rendering). On load, we change media type so that the stylesheet gets applied to screens. -->
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
<!-- Fallback that only gets inserted when JavaScript is disabled, in which case we can't load CSS asynchronously. -->
<noscript><link rel="stylesheet" href="style.css"></noscript>
사전로드 및 비동기 결합 :
미리로드 된 비동기 CSS가 필요한 경우이 솔루션은 위의 문서화 된 답변에서 두 줄을 결합하여 약간 더 깔끔하게 만듭니다. 그러나 이것은 preload 키워드 를 지원할 때까지 Firefox에서 작동하지 않습니다 . 그리고 위의 문서화 된 답변에서 자세히 설명했듯이 사전로드는 실제로 유익하지 않을 수 있습니다.
<link href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
추가 고려 사항 :
비동기로드 CSS로 이동하는 경우, 일반적으로, 그 주, 그것은 일반적으로 권장 당신 인라인 중요한 CSS , CSS는 렌더링 차단 자원이기 때문에 이유가가 .
많은 비동기 CSS 솔루션에 대한 필라멘트 그룹의 공로 .
답변
media="print"및 사용onload
필라멘트 그룹은 최근 (2019 년 7 월) CSS를 비동기식으로로드하는 방법에 대한 최신 권장 사항을 제공 하는 기사 를 게시했습니다 . 인기있는 Javascript 라이브러리 loadCSS 의 개발자이지만 실제로 Javascript 라이브러리가 필요하지 않은이 솔루션을 권장합니다.
<link
rel="stylesheet"
href="/path/to/my.css"
media="print"
onload="this.media='all'; this.onload = null"
>
을 사용 media="print"하면 화면에서이 스타일 시트를 사용하지 않고 인쇄 할 때 브라우저에 표시됩니다. 브라우저는 실제로 이러한 인쇄 스타일 시트를 다운로드하지만 비동기식으로 다운로드합니다. 또한 스타일 시트가 다운로드 된 후 사용되기를 원하며이를 위해 onload="this.media='all'; this.onload = null". (일부 브라우저는 onload두 번 호출 하므로이 문제를 해결하려면을 설정해야합니다 this.onload = null.) 원하는 경우 <noscript>Javascript를 활성화하지 않은 드문 사용자를 위해 대체를 추가 할 수 있습니다 .
원래 기사는 내가 여기보다 더 세부 사항으로 간다, 읽기 가치가있다. csswizardry.com의이 기사 도 읽을 가치가 있습니다.
답변
여러 가지 방법으로 얻을 수 있습니다.
1.Using media="bogus"과 <link>발에
<head>
<!-- unimportant nonsense -->
<link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
<!-- other unimportant nonsense, such as content -->
<link rel="stylesheet" href="style.css">
</body>
2. 기존 방식으로 DOM 삽입
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
당신이 플러그인을 시도 할 수 3.If는 당신이 시도 할 수
loadCSS을
<script>
// include loadCSS here...
function loadCSS( href, before, media ){ ... }
// load a file
loadCSS( "path/to/mystylesheet.css" );
</script>
답변
아래 함수는 비동기 적으로로드하려는 모든 스타일 시트를 작성하고 문서에 추가합니다. (그러나, 덕분에 Event Listener모든 창의 다른 리소스가로드 된 후에 만 그렇게 할 것입니다.)
다음을 참조하십시오.
function loadAsyncStyleSheets() {
var asyncStyleSheets = [
'/stylesheets/async-stylesheet-1.css',
'/stylesheets/async-stylesheet-2.css'
];
for (var i = 0; i < asyncStyleSheets.length; i++) {
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', asyncStyleSheets[i]);
document.head.appendChild(link);
}
}
window.addEventListener('load', loadAsyncStyleSheets, false);
답변
비동기 CSS 로딩 방식
브라우저가 CSS를 비동기 적으로로드하도록 만드는 방법에는 여러 가지가 있지만 예상만큼 간단한 방법은 없습니다.
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
답변
프로그래밍 방식 및 비동기식으로 CSS 링크를로드해야하는 경우 :
// https://www.filamentgroup.com/lab/load-css-simpler/
function loadCSS(href, position) {
const link = document.createElement('link');
link.media = 'print';
link.rel = 'stylesheet';
link.href = href;
link.onload = () => { link.media = 'all'; };
position.parentNode.insertBefore(link, position);
}
