节省我们的页面加载时间的提示

Question

我的问题：什么是最好的方法来削减那些不必要的kbs并使页面加载更快。所有优化实践+编码实践（在js，php中） ）如果执行可以使你的页面更轻。

为什么我问这个：我读了这篇关于jquery.js vs jquery.min.js用法的文章。我以为很多人在不知道它的含义的情况下使用它。我基本上是在在Android和ios手机上制作广告单元。所以在我的领域节省每一个kb变得非常关键。 我最近开始使用jquery.min而不是简单的javascript.But再次增加了整体kbs大小。大爸爸google在他们的页面排名哲学中跟踪这个方面。所以这个问题变得更加重要，在最顶层的搜索我确实在谷歌搜索，但没有找到一些可靠的答案链接。

我想知道除了使用任何js库的缩小版之外，人们应该如何使他们的网页在移动设备以及平板电脑和PC浏览器上更轻松。 在某些时候，每个javascript编码器都必须考虑这个问题。

Answer 1

您希望研究WPO（网络效果优化）和/或FEO（前端优化）。

它已经过时但今天仍然适用：http://stevesouders.com/hpws/rules.php

Rule 1 - Make Fewer HTTP Requests
Rule 2 - Use a Content Delivery Network
Rule 3 - Add an Expires Header
Rule 4 - Gzip Components
Rule 5 - Put Stylesheets at the Top
Rule 6 - Put Scripts at the Bottom
Rule 7 - Avoid CSS Expressions
Rule 8 - Make JavaScript and CSS External
Rule 9 - Reduce DNS Lookups
Rule 10 - Minify JavaScript
Rule 11 - Avoid Redirects
Rule 12 - Remove Duplicate Scripts
Rule 13 - Configure ETags
Rule 14 - Make AJAX Cacheable

然后是雅虎的规则：http://developer.yahoo.com/performance/rules.html

当然谷歌的推荐：https://developers.google.com/speed/docs/best-practices/rules_intro

最后使用http://webpagetest.org

测试您的网站

Answer 2

要利用并行下载和更常用的缓存，请使用CDN作为google：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

如果您只关心文件的大小，请构建您自己的jquery版本，删除您当前未使用的内容：{您仍然可以将此文件放在外部服务器上进行并行下载}

jQuery Builder (e.g)（仅使用ajax和css模块缩小28.35 Kb）

OUT OF TOPIC

现在，关于动画的性能，如果你为此目的使用jquery，你应该看看GSAP jquery插件，它可以将性能提高到20倍：jQuery GSAP

请参阅速度测试页面以比较各个库：http://www.greensock.com/js/speed.html

Answer 3

我猜您正在考虑减少首次访问或未缓存请求的页面加载，这意味着客户端必须下载所有资源。

减少jQuery的加载时间

使用第三方CDN - 托管的jQuery

由于第三方CDN托管的jQuery库的广泛使用，大多数用户已经缓存了jQuery，这意味着您也可以通过使用相同的资源从中受益。目前最受欢迎的是Google Hosted Libraries，另一个是jQuery's own CDN。

使用第三方CDN托管的jQuery就像添加脚本标记一样简单：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

注意：想知道url中省略的协议/方案？请参阅Paul irish的Protocol-relative urls。

使用第三方CDN的唯一缺点是，任何服务中断都会影响您的网站/广告。但是，您的托管服务更可能被破坏，然后上述任何CDN：s。

jQuery的自定义构建

如果您出于某种原因不想或不能使用第三方CDN托管，您还可以自定义您的jQuery版本，以仅包含您为项目使用/需要的部分。为简化构建过程，您可以使用名为jQuery Builder的强大工具。

jQuery的替代

jQuery是一个非常繁重的库，有些人认为它非常适合移动设备。那里的替代品旨在更小，更轻，例如Zepto.js，Snack.js和$dom。

重要的是要注意，并非所有功能和浏览器支持都会出现在备用库中，因此您需要确保获得所需的功能。

我的其余代码怎么样？

从生产环境提供服务时，您应始终确保所有源代码均为minified并进行压缩（即gzip）。您还应尽量减少请求，因此将多个文件连接成一个文件既可以降低请求数量，又可以从缓存中获益更多。这可以用于JavaScript和CSS文件。

Answer 4

降低带宽对于缓存标题也很重要。

ETAG，If-Modified

当您从数据库中提取文章并将其显示在简化页面上时，您可以使用Last_edit（示例）列作为Last-Modified标头，以便当客户端重新访问该文章时，可以从缓存中加载该文章。

您应该映射那些可以针对缓存进行优化的页面。

它不会在带有注释的页面上工作，但是当按下按钮加载ajax时就可以了。

缺点是，在需要显示的内容不仅仅是那篇文章的页面上，它会变得相当复杂。