节省页面加载时间的提示


Tips to save up our page load time

我的问题:减少那些不必要的kbs并加快页面加载的最佳方法是什么?如果执行所有优化实践+编码实践(在js、php中),可以使页面更轻。

我为什么问这个:我读了这篇关于jquery.js与jquery.min.js用法的文章。我以为很多人在不知道它的含义的情况下使用它。我基本上习惯于在android和ios手机上制作广告单元。因此,在我的领域,保存每一个kb变得非常关键。我最近开始使用jquery.min,而不是简单的javascript。但这再次增加了整体kbs大小。大老爹谷歌在他们的页面排名哲学中一直关注这一方面。因此,这个问题在大多数搜索中变得更加重要。我确实在谷歌上搜索过,但没有一个链接能找到一些可靠的答案。

我想知道除了使用任何js库的缩小版之外,人们应该怎么做才能让他们的网页在手机、平板电脑和pc浏览器上更轻。在某个时刻,每个javascript程序员都必须思考这个问题。

您可能希望研究WPO(Web性能优化)和/或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

要利用并行下载和更频繁的缓存,请使用CDN作为google:

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

如果你关心的只是文件的大小,那么构建你自己的jquery版本,删除你目前不使用的内容:{你仍然可以将这个文件放在外部服务器上进行pararell下载}

jQuery Builder(例如)(仅使用ajax和css模块缩小了28.35 Kb)

超出主题

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

请参阅速度测试页面以在库之间进行比较:http://www.greensock.com/js/speed.html

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

减少jQuery的加载时间

使用第三方CDN托管的jQuery

由于第三方CDN托管的jQuery库的广泛使用,大多数用户已经缓存了jQuery,这意味着您也可以通过使用相同的资源从中受益。到目前为止,最受欢迎的是谷歌托管库,另一个是jQuery自己的CDN。

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

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

注意:想知道url中省略的协议/方案吗?参见Paul irish的协议相关URL

使用第三方CDN的唯一缺点是,服务的任何中断都会影响您的网站/广告。然而,您的托管服务比上述任何CDN都更有可能中断。

jQuery的自定义构建

如果您出于某种原因不想要或不能使用第三方CDN托管,您也可以自定义jQuery构建,使其仅包含您在项目中使用/需要的部分。为了简化构建过程,您可以使用一个名为jQueryBuilder的伟大工具。

jQuery的替代方案

jQuery是一个相当重的库,有些人认为它不适合移动设备。有一些替代品的目标是更小、更轻,比如Zepto.js、Snack.js和$dom。

需要注意的是,并非所有功能和浏览器支持都会出现在替代库中,因此您需要确保获得所需内容。

我的其余代码呢

当从生产环境中提供时,您应该始终确保所有源代码都经过了缩小和压缩(即gzip)。您还应该尽量减少请求,因此将多个文件连接到一个文件中是降低请求量和更好地从缓存中获益的好方法。这可以用于JavaScript和CSS文件。

降低带宽同样重要的是缓存头。

ETAG,如果修改

当您从数据库中提取一篇文章并将其显示在simpel页面上时,您可以使用last_edit(示例)列作为last Modified标头,这样当客户端重新访问该文章时,就可以从缓存中加载它。

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

它在带有注释的页面上不起作用,但当它们通过按下按钮加载ajax时,这是可能的。

不利的一面是,在需要显示不止一篇文章的页面上,它可能会变得非常复杂。