优化页面加载和速度

Question

大家早上好..。所以我在我的网站上注意到了一些东西: www.summerlawnsinc.com

HTML5 CSS3，相当标准的响应式模板。我注意到的是，当页面第一次呈现时，主Logo被拉伸，并在加载时移到最左边，然后在大约一秒钟后正确显示。

我已经尝试了几种方法来缓解这个问题，使用了不同的大小，并试图优化图像等等。

然而，我有一种感觉，这可能是因为我在页面上加载了过多的脚本，来自我的聊天，谷歌分析，一些facebook像素跟踪等等。

我正在试着看看我能做些什么来帮助加快页面加载速度，而不是在页面上出现这种“卡顿”……

我已经使用了一些在线工具来获得一些指导，但它们似乎没有给我具体的帮助……

我只是在寻找一些提示和指导。

Answer 1

必须首先加载样式，而不是您的js，可能在加载您的样式：之前，js需要一些时间才能加载。

<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />

• 从你的html中删除所有的js。(不好的做法)
• 为你的html、js和css做索引。
• 最小化你的css和js，你可以使用grunt.

尝试所有这些，让我知道你是否存档了你想要的。好好看看！

更新后，您也会收到此错误：

无法加载资源:服务器响应状态为404 (找不到)(程序)：1 'webkitURL‘已弃用。请改用'URL‘。http://www.summerlawnsinc.com/fonts/fontawesome-webfont.woff?v=4.2.0无法加载资源:服务器响应状态为404 (未找到) http://www.summerlawnsinc.com/css/skell.css加载资源失败:服务器响应状态为404 (未找到)