我正在尝试减少我的网页加载时间。当我搜索时，我来到了这一点预加载 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.html - 解析 HTML 文件
- 由于链接标签，请下载
style.css - 解析 CSS 文件
- 由于
background-image，下载myimage.png - 解析图像并将其显示在屏幕上
这意味着您的请求瀑布是index.html -> style.css -> myimage.png。
通过为myimage.png添加预加载，浏览器可以更早地下载图像，因此您的请求瀑布变为：
index.html +-> style.css
+-> myimage.png
它现在只有 2 个请求长，而不是 3 个，这意味着更快的加载时间。
您还能做些什么来改善(感知(页面加载时间？
一些常见的方法是：
- 缩小您的资产(JavaScript，样式表(
- 确保您的服务器为静态资产启用了压缩
- 仅先加载页面加载时实际需要的资源，然后再加载其他脚本(如用于用户交互的脚本(。
但是，为了更好地了解您可以改进的内容，您可以使用Chrome审核系统(灯塔(。
https://developers.google.com/web/updates/2016/03/link-rel-preload
请参阅上面的文章链接。我看到了上面分享的链接。预加载永远不会使页面加载速度快。它只为声明为 rel="preload" 的文件提供优先级，以便在页面加载时尽早加载。您可以再次阅读该文章以及我分享的文章。它会说同样的话。
您将需要其他方法来快速加载页面。此方法将无济于事。下面列出了几种方法来加快页面加载速度。
-
您可以缩小css和js文件，这些文件的加载速度比普通文件非常快。 您可以在此处缩小(https://www.minifier.org/(中的脚本和css文件。
-
避免 css 和 js 文件的外部链接
-
避免在代码中使用空格和换行符。
-
使用压缩图像，这也将加载得更快。
-
启用缓存。