代码之家 › 专栏 › 技术社区 › Abilash Erikson

如何使用rel=“preload”as=“style”或as=“script”或更好的方法来提高页面速度

pagespeed performance css html javascript

0

Abilash Erikson · 技术社区 · 8 年前

预加载css和javascript .

之前

<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 .

但我想不通。请帮忙。

2 回复 | 直到 8 年前

1

3

Wazner 8 年前

为什么这不起作用

预加载直接加载到HTML中的资源是无用的。这是因为浏览器在读取实际资源引用的同时读取预加载。

预加载有助于缩短请求瀑布的长度。想象一下以下情况:

样式表

body {
    background-image: url(myimage.png);
}

index.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 .
通过为 我的图片.png

index.html  +-> style.css
            +-> myimage.png

现在它只有2个请求,而不是3个,这意味着更快的加载时间。

您还可以做些什么来改进(感知的)页面加载时间?

一些常见的方法是:

缩小你的资产(JavaScript,样式表)
只需先加载页面上实际需要的资源,然后再加载其他脚本(如用于用户交互的脚本)。

但是为了更好地全面了解你可以改进的地方,你可以使用 Chrome Audit system (Lighthouse) .

2

1

Heretic Monkey 8 年前

https://developers.google.com/web/updates/2016/03/link-rel-preload

您需要其他方法来快速加载页面。这种方法不会有帮助。下面列出的几种方法可用于加快页面加载速度。

你可以缩小css和js文件,它们的加载速度比普通文件要快。 https://www.minifier.org/ )给你。
避免css和js文件的外部链接
使用压缩图像,这也将加载更快。
启用缓存。