gpt4 book ai didi

css - 为桌面减少 “Eliminate render-blocking CSS in above-the-fold content"

转载 作者:行者123 更新时间:2023-11-28 04:31:16 25 4
gpt4 key购买 nike

我正在为我的网站开发 googlepagespeed。早些时候我的网站速度是IN MOBILE-86IN DESKTOP-93。我看过"Eliminate render-blocking CSS in above-the-fold content"关联。我已经实现了 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery .所以现在我正在使用 noscript 加载我的 css。所以我的网站在 IN MOBILE-96DESKTOP-93

中得分提高了
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
<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 = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
</body>
</html>

但桌面分数是不变的。我的网站链接是https://www.winni.in/cake-delivery-in-bangalore .

对于移动设备: enter image description here

对于桌面: enter image description here

我想知道“在首屏内容警告中消除阻止呈现的 JavaScript 和 CSS”仅在桌面而非移动屏幕中显示。但是网址是一样的。在实现此概念之前 noscript( https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) “消除首屏内容警告中的渲染阻塞 JavaScript 和 CSS”显示在两个屏幕中。那么为什么它没有反射(reflect)在桌面屏幕上

最佳答案


.woff 字体文件被视为 CSS。所有 CSS 必须在 JavaScript 之前加载。

Waterfall

关于css - 为桌面减少 “Eliminate render-blocking CSS in above-the-fold content",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41719750/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com