gpt4 book ai didi

css - 提高我的网站性能

转载 作者:行者123 更新时间:2023-11-28 05:13:27 25 4
gpt4 key购买 nike

我有一个托管在 Google App Engine 上的纯静态网站。前面是 Cloudflare CDN。

我运行了 Google 的页面洞察力,让我了解我的网站的表现如何,根据谷歌的说法,它表现不佳。我希望 Google 看到它在 SEO 方面表现良好。

这是我从 Google 获得的报告:

enter image description here

有两种类型的推荐:

1) 消除首屏内容中的渲染阻塞 JavaScript 和 CSS显示如何修复

2) 利用浏览器缓存

对于问题 1,我尝试了很多我在 Google 上阅读过的东西。我尝试将“aync defer”添加到链接属性。我试图让 media = print 以便浏览器首先呈现 html,然后再应用 css。我尝试将样式表的链接移动到 html 文档周围的不同位置。基本上我试图遵循这个:https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery .

截至目前,我的 html 页面(我的网站只是在静态 html 页面上)结构如下所示:

<html>
<head>
<!-- all links/references to css files and javascript files -->
</head>
<body>
</body>
</html>

我的第二个问题是浏览器缓存,我不明白为什么会出现此错误。 Google App 引擎缓存文件,然后在该 Cloudflare CDN 之上在文档上设置缓存 header (以及 gzip),以便浏览器缓存它(下面是打开的 Cloudflare 缓存组件)。

enter image description here

当我运行页面时,我可以看到浏览器正在缓存静态文件并在 chrome 工具中使用这些缓存文件: enter image description here

这真的是我第一次创建生产静态网站,所以我可能误解了很多东西,但我正在研究如何消除这 2 个问题。

干杯

最佳答案

我不知道谷歌是否正在衡量这一点,但通常建议从以下地址加载 Bootstrap 和 Jquery,因为它们被很多网站使用,因此即使他们从未访问过您的网站,它们也已经在浏览器缓存中. (同样可以找到 font-awesome)。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/YOUR_JQUERY_VERSION/jquery.min.js"></script>

关于css - 提高我的网站性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39429411/

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