Javascript 如何使用rel="；预载；as="；“风格”；或as="；脚本“；或更好的页面速度方法_Javascript_Html_Css_Performance_Pagespeed

Javascript 如何使用rel="；预载；as="；“风格”；或as="；脚本“；或更好的页面速度方法

javascript html css performance

Javascript 如何使用rel="；预载；as="；“风格”；或as="；脚本“；或更好的页面速度方法,javascript,html,css,performance,pagespeed,Javascript,Html,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"

我试图减少我的网页加载时间。当我搜索时，我已经到了这一点预加载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内容

实施后我会这样改变

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


html内容

但我没注意到速度有任何提高。因此，请帮助以正确的方式进行此操作

我读了下面的文章

但我不明白。请帮忙

或者有更好的页面速度方法吗？

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

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

style.css

index.html

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

您还可以做些什么来改进（感知）页面加载时间？一些常见的方法是：

缩小资产（JavaScript、样式表）
确保服务器已为静态资产启用压缩
只加载页面加载时实际需要的资源，然后再加载其他脚本（如用于用户交互的脚本）

但是，为了更好地全面了解您可以改进的内容，您可以使用。

请参阅上面的文章链接。我看到了上面共享的链接。预加载不会使页面快速加载页面。它只为声明为rel=“preload”的文件提供优先级，以便在页面加载时尽早加载。你可以再读一遍这篇文章，也可以读一下我分享的文章。它也会这样说

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

您可以缩小css和js文件，这将比普通文件加载速度非常快。您可以从这里（）缩小脚本和css文件

避免css和js文件的外部链接

避免在代码中使用空格和换行符

使用压缩图像，这也将更快地加载

启用缓存

那么你能建议更好的方法吗？事实上我不知道understand@abilasher我已经扩展了答案，希望这能更好地解释它。我还添加了一节，介绍了其他可以提高页面加载时间的方法。

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

<html>
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

</body>
</html>

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