abi*_* er 4 html javascript css performance pagespeed
我正在努力减少网页加载时间。当我搜索时，我来到了预加载 css 和 javascript 的阶段。
所以我试图在我的 html 页面中实现这个，请在实现之前和之后查看我的 html 代码
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
实施后我像这样改变
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
但我没有注意到速度有任何增加。所以请帮助以正确的方式做到这一点
我读了下面的文章
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content 。
但我想不通。请帮忙 。
或者有没有更好的方法来提高页面速度？
预加载直接在 HTML 中加载的资源是没有用的。这是因为浏览器在读取实际资源引用的同时读取预加载。
预加载对于减少请求瀑布的长度很有用。想象一下以下情况：
样式.css
body {
background-image: url(myimage.png);
}
索引.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
加载上述页面的过程（大致）包括以下步骤：
index.htmlstyle.cssbackground-image，下载myimage.png这意味着您的请求瀑布是index.html -> style.css -> myimage.png。
通过为浏览器添加预加载myimage.png可以更早地下载图像，因此您的请求瀑布变为：
index.html +-> style.css
+-> myimage.png
现在只有 2 个请求长，而不是 3 个，这意味着加载时间更快。
一些常见的方式是：
但为了更好地全面了解您可以改进的地方，您可以使用Chrome 审核系统 (Lighthouse)。