CSS를 비동기 적으로로드하는 방법
내 사이트에서 렌더링을 차단하는 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 에서 작업을 볼 수 있습니다.
예압
이제 요소에 preload키워드 를 사용할 수 있습니다 link.
동기화 버전 :
<link href="style.css" rel="stylesheet">
비동기 버전 :
<link href="style.css" rel="preload" as="style">
노트
이 기능은 최근 최신 브라우저에서 널리 지원 되었습니다 . 이전 브라우저에 대한 대체가 필요한 경우 loadCSS를 사용 하십시오 .
업데이트 (07/18)
이 기능은 Firefox에서 기본적으로 비활성화되어 있습니다. Firefox가 솔루션을 구현할 때까지 loadCSS (위에서 언급)가 최선의 방법 일 것입니다. 이 토론 에서 가져온 아래 의견 :
rel = preload에 대해 다른 접근 방식을 사용하기로 결정했습니다. 언제 구현 될지 모르겠습니다.
여러 가지 방법으로 얻을 수 있습니다.
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>
The function below will create and add to the document all the stylesheets that you wish to load asynchronously. (But, thanks to the Event Listener, it will only do so after all the window's other resources have loaded.)
See the following:
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);
Async CSS Loading Approaches
there are several ways to make a browser load CSS asynchronously, though none are quite as simple as you might expect.
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
If you have a strict content security policy that doesn't allow @vladimir-salguero's answer, you can use this (please make note of the script nonce):
<script nonce="(your nonce)" async>
$(document).ready(function() {
$('link[media="none"]').each(function(a, t) {
var n = $(this).attr("data-async"),
i = $(this);
void 0 !== n && !1 !== n && ("true" == n || n) && i.attr("media", "all")
})
});
</script>
Just add the following to your stylesheet reference: media="none" data-async="true". Here's an example:
<link rel="stylesheet" href="../path/script.js" media="none" data-async="true" />
Example for jQuery:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" media="none" data-async="true" crossorigin="anonymous" /><noscript><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" /></noscript>
Please care to update the answer as all of the above fails to impress google pagespeed insights now.
According to Google this is how you should implement async loading of Css
< noscript id="deferred-styles" >
< link rel="stylesheet" type="text/css" href="small.css"/ >
< /noscript >
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
Using media="print" and onload="this.media='all'":
The filament group recently (July 2019) published an article giving their latest recommendation for how to load CSS asynchronously. Even though they are the developers of the popular Javascript library loadCSS, they actually recommend this solution that does not require a Javascript library:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
을 사용 media="print"하면 화면에서이 스타일 시트를 사용하지 않고 인쇄 할 때 브라우저에 표시됩니다. 브라우저는 실제로 이러한 인쇄 스타일 시트를 다운로드하지만 비동기식으로 다운로드합니다. 또한 스타일 시트가 다운로드 된 후 사용되기를 원하며이를 위해 onload="this.media='all'". 원하는 경우 <noscript>Javascript를 활성화하지 않은 드문 사용자를 위해 대체를 추가 할 수 있습니다 .
원래 기사는 내가 여기보다 더 세부 사항으로 간다, 읽기 가치가있다. csswizardry.com의이 기사 도 읽을 가치가 있습니다.
참고 URL : https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously
'IT TIP' 카테고리의 다른 글
| Laravel은 모든 요청을 HTTPS로 리디렉션 (0) | 2020.12.02 |
|---|---|
| TempData keep () 대 peek () (0) | 2020.12.02 |
| mysqld : dir을 데이터로 변경할 수 없습니다. (0) | 2020.12.02 |
| Eloquent ORM laravel 5 ID 배열 가져 오기 (0) | 2020.12.02 |
| Laravel 5.2-Eloquent 테이블에 대한 사용자 지정 기본 키로 문자열 사용이 0이 됨 (0) | 2020.12.02 |