[英]render-blocking css - defer loading css files
i'm trying to solve render bloking for my site but have problem with them. 我正在尝试为我的网站解决渲染过大的问题,但是它们有问题。 i load css files with the following code:
我用以下代码加载css文件:
<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 = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
<noscript id="deferred-styles">
<link href="/template/styles/main.min.css" rel="stylesheet">
<link href="/template/styles/style.min.css" rel="stylesheet">
<link href="/template/styles/bootstrap.min.css" rel="stylesheet">
<link href="/template/styles/bootstrap-flipped.css" rel="stylesheet">
<link href="/template/styles/swiper.min.css" rel="stylesheet" >
<link href="/template/styles/fontiran.min.css" rel="stylesheet">
<link href="/template/styles/font-awesome.min.css" rel="stylesheet">
<link href="/template/styles/animate.min.css" rel="stylesheet">
<link href="/template/styles/owl.carousel.css" rel="stylesheet">
<link href="/template/styles/owl.transitions.css" rel="stylesheet">
<link href="/template/styles/responsive.css" rel="stylesheet">
<link href="/template/styles/theme-default.css" rel="stylesheet" type="text/css" />
</noscript>
but in "google page speed tools > insights" is render blocking css files. 但在“ Google页面速度工具>洞察”中,渲染阻止了CSS文件。 help me to resolve it ^_^
帮我解决它^ _ ^
You can have different stylesheets for different media, 您可以针对不同的媒体使用不同的样式表,
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
<link rel="stylesheet" media="screen and (max-height:700px)" href="style-max-700-height.css">
in media you can write like max-width, max-height,min-width,min-resolution see more at https://www.w3schools.com/cssref/css3_pr_mediaquery.asp and also https://www.w3schools.com/tags/att_link_media.asp 在媒体中,您可以编写最大宽度,最大高度,最小宽度,最小分辨率等内容,请参见https://www.w3schools.com/cssref/css3_pr_mediaquery.asp和https://www.w3schools.com /tags/att_link_media.asp
I think you need to add your CSS first and then run the JavaScript. 我认为您需要先添加CSS,然后再运行JavaScript。 You might be getting JavaScript errors on the console for this code.
您可能会在控制台上收到此代码的JavaScript错误。
<noscript id="deferred-styles">
<link href="/template/styles/main.min.css" rel="stylesheet">
<link href="/template/styles/style.min.css" rel="stylesheet">
<link href="/template/styles/bootstrap.min.css" rel="stylesheet">
<link href="/template/styles/bootstrap-flipped.css" rel="stylesheet">
<link href="/template/styles/swiper.min.css" rel="stylesheet" >
<link href="/template/styles/fontiran.min.css" rel="stylesheet">
<link href="/template/styles/font-awesome.min.css" rel="stylesheet">
<link href="/template/styles/animate.min.css" rel="stylesheet">
<link href="/template/styles/owl.carousel.css" rel="stylesheet">
<link href="/template/styles/owl.transitions.css" rel="stylesheet">
<link href="/template/styles/responsive.css" rel="stylesheet">
<link href="/template/styles/theme-default.css" rel="stylesheet" type="text/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 = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.