如何使用rel ="preload"? as =“样式"；或as ="script"或更好的页面速度方法 [英] How to use rel="preload" as="style" or as="script" or Better method for page speed
问题描述
我正在尝试减少我的网页加载时间.当我搜索时，我到了预加载CSS和javascript 的位置.
i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .
所以我正在尝试在我的html页面中实现此功能，请在实现前后查看我的html代码 之前
So i am trying to implement this in my html page please see my html code before and after implementation before
<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>
但是我没注意到速度有任何增加.因此，请帮助以正确的方式做到这一点
But i can't notice any increase in speed . So please help to make this in correct way
我阅读了以下文章
https://developer.mozilla.org/zh-CN /docs/Web/HTML/Preloading_content .
但是我不知道.请帮忙.
But i can't figure out . Please help .
或者有没有更好的页面速度方法?
Or is there is any better method for page speed ?
推荐答案
为什么这不起作用
直接加载直接在HTML中加载的资源是没有用的.这是因为浏览器会在读取实际资源参考的同时读取预加载.
Why this doesn't work
Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.
预加载对于减少请求瀑布的长度很有用. 想象一下以下情况:
Preloading is useful to reduce the length of your request waterfall. Imagine the following situation:
style.css
body {
background-image: url(myimage.png);
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
加载以上页面的过程(大致)包括以下步骤:
The process of loading the above page consists (roughly) of the following steps:
- 下载
index.html - 解析HTML文件
- 由于链接标记，请下载
style.css - 解析CSS文件
- 由于
background-image，请下载myimage.png - 解析图像并将其显示在屏幕上
- Download
index.html - Parse the HTML file
- Because of the link tag, download
style.css - Parse the CSS file
- Because of the
background-image, downloadmyimage.png - Parse the image and display it on the screen
这意味着您的请求瀑布为index.html -> style.css -> myimage.png.
通过为myimage.png添加预加载，浏览器可以更早下载图像，因此您的请求瀑布变为:
This means your request waterfall is index.html -> style.css -> myimage.png.
By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:
index.html +-> style.css
+-> myimage.png
现在只有2个请求，而不是3个，这意味着加载时间更快.
Instead of 3, it is now only 2 requests long, which means faster load times.
一些常见的方法是:
- 缩小资产(JavaScript，样式表)
- 确保您的服务器已为静态资产启用压缩
- 仅先加载页面上实际需要的资源，然后再加载其他脚本(例如用于用户交互的脚本).
但是要更好地全面了解您可以改进的地方，可以使用 Chrome审核系统(灯塔).
But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).
这篇关于如何使用rel ="preload"? as =“样式"；或as ="script"或更好的页面速度方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
