gpt4 book ai didi

javascript - 用于改进页面加载时间的非阻塞样式表

转载 作者:塔克拉玛干 更新时间:2023-11-03 02:31:00 25 4
gpt4 key购买 nike

我正在尝试优化网站的页面加载时间。现在我已经实现了 Google PageSpeed Insights 给我的几乎所有建议。但是,它一直建议使用非阻塞样式表,以便可以在加载样式表(使用内联 CSS)之前呈现首屏内容:

Eliminate render-blocking JavaScript and CSS in above-the-fold content.

Your page has X blocking CSS resources. This causes a delay in rendering your page.

Approximately Y% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

指的是the following information关于应该如何做。基本上:

<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<link rel="stylesheet" href="small.css">

虽然我从未在 HTML 标签之外看到过指向样式表标签的链接,但我还是使用这种策略更改了我的网站。

但是,Google PageSpeed insights 的在线版本仍然提示样式表。更奇怪的是,类似的浏览器插件(PageSpeed Insights for Chrome)说 the exact opposite thing :

When you remove inline style blocks and elements from the main text of the document and put it in the header, the display performance will be improved.

现在我的问题是:

  • 哪个是正确的? (从 SEO 的 Angular ,当然是从 UX 的 Angular )
  • 还有其他方法可以让他们都满意吗? (如果 HTML5 和 JavaScript 解决方案是跨浏览器的并且确实改善了页面加载时间,则它们会被接受)

最佳答案

我建议您优先考虑获得在线 PageSpeed Insights 的最高分,如果可能的话,请达到 100/100,如下所示。它将使您的页面参与 Google 搜索排名,因为页面速度得分是 SEO 因素之一,如前所述 here .

没有其他解决方案,除非找出您的 CSS 的哪一部分用于 above-the-fold initial view你的页面。一旦你知道这一点,你应该 inline在您的 HTML header 中添加此 CSS 并延迟加载其余 CSS。

然后你可以找到任何解决方案来最小化影响,只要分数以及每个重要方面的验证,例如html5css得到维护。

PageSpeed Score 100/100 ]

关于javascript - 用于改进页面加载时间的非阻塞样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24536012/

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