CSS 전달 최적화 : CSS 로딩을 연기하는 방법?
개발자를위한 Google 문서 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example에 따라 CSS 전달 을 최적화 하려고합니다.
작은 CSS 파일을 인라인하는 예제에서 볼 수 있듯이 중요한 CSS는 헤드에 인라인되고 원본 small.css는 페이지 온로드 후에로드됩니다 .
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
이 예에 대한 내 질문 :
페이지 온로드 후 대용량 CSS 파일을로드하는 방법은 무엇입니까?
jQuery를 사용해도 괜찮다면 여기에 도움이되는 간단한 코드 스 니펫이 있습니다. (그렇지 않으면 주석을 달고 pure-js 예제를 작성하겠습니다.
function loadStyleSheet(src) {
if (document.createStyleSheet){
document.createStyleSheet(src);
}
else {
$("head").append($("<link rel='stylesheet' href='"+src+" />"));
}
};
당신의 $(document).ready()또는 window.onload기능 에서 이것을 호출하면 당신은 갈 수 있습니다.
# 2를 위해 시도해 보지 않겠습니까? 브라우저에서 Javascript를 비활성화하고 확인하십시오!
그건 그렇고 , 간단한 Google 검색으로 얼마나 멀리 얻을 수 있는지 놀랍습니다. 쿼리의 "post load css"경우 이것은 네 번째 히트였습니다 ... http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
Fred가 제공하는 기능을 좀 더 효율적이고 jQuery를 사용하지 않도록 수정했습니다. 웹 사이트 프로덕션에서이 기능을 사용하고 있습니다.
// to defer the loading of stylesheets
// just add it right before the </body> tag
// and before any javaScript file inclusion (for performance)
function loadStyleSheet(src){
if (document.createStyleSheet) document.createStyleSheet(src);
else {
var stylesheet = document.createElement('link');
stylesheet.href = src;
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
}
}
Fred의 답변 외에도 :
jQuery 및 Noscript를 사용한 솔루션
<html>
<head>
<style>
.blue{color:blue;}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if($("body").size()>0){
if (document.createStyleSheet){
document.createStyleSheet('style.css');
}
else {
$("head").append($("<link rel='stylesheet'
href='style.css'
type='text/css' media='screen' />"));
}
}
});
</script>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
에서 http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
순수 자바 스크립트 및 Noscript 사용
<html>
<head>
<style>
.blue{color:blue;}
</style>
<script type="text/javascript">
var stylesheet = document.createElement('link');
stylesheet.href = 'style.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
</script>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
이 스 니펫 시도
저자 는 구글의 페이지 속도 팀에 의해 출판되었다 주장
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'yourCSSfile.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); };
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
WARNING: body{background-image: url("http://example.com/image.jpg");} in css files will make your css files still render-blocking.
If you tried all the solutions above and you still get the render-blocking warning from PageSpeed insights then you probably have this style rule in your css files. After hours of tests it turns out that this rule is what making ALL of my css to be flagged as render-blocking resources at PageSpeed insights. I found the same issue has been discussed before.
I don't know why body{background-image: url(...) do this for all the css files!, although I have different images resources in the file for the buttons, icons, ...etc .
I fixed this by moving this rule from the .css file and put it in the inline styles. Unfortunately, you will have to break your css plan and put the rule in all of your layouts HTML files instead of being in 1 css file that is imported in all of your HTML layouts, but the 90s and green color in PageSpeed insights deserve it.
참고URL : https://stackoverflow.com/questions/19374843/css-delivery-optimization-how-to-defer-css-loading
'programing tip' 카테고리의 다른 글
| SCRIPT438 : 개체가 속성 또는 메서드 IE를 지원하지 않습니다. (0) | 2020.12.12 |
|---|---|
| Cygwin 32 비트에서 Cygwin 64 비트로 전환하는 것이 좋습니까? (0) | 2020.12.12 |
| persistence.xml에서 JPA 2.1을 지정하는 방법은 무엇입니까? (0) | 2020.12.12 |
| CSS 이미지 최대 너비를 원본 이미지 크기로 설정 하시겠습니까? (0) | 2020.12.12 |
| Kotlin에서 Mockito를 사용할 수 있습니까? (0) | 2020.12.12 |