顶部右侧 | 自行修改 西安网站推广
当前位置:网站首页 > SEO技术 > 正文

Facebook团队关于网页缓存的再实践

seo秀 2019-05-25 32 浏览 0 评论

译者前言:,在8年之前,Yahoo团队曾经对网页中的缓存做了比较详尽的研究,但是随着互联网的高速发展,研究数据发生了一些变化。这篇文章主要是Facebook的web团队对现在缓存情况一些数据收集和研究。包括PC和移动端资源被缓存的时间以及资源在存在的时间。网页缓存是性能优化很重要的因素,值得一读。,

译者前言:

在8年之前,Yahoo团队曾经对网页中的缓存做了比较详尽的研究,但是随着互联网的高速发展,研究数据发生了一些变化。这篇文章主要是Facebook的web团队对现在缓存情况一些数据收集和研究。包括PC和移动端资源被缓存的时间以及资源在存在的时间。网页缓存是性能优化很重要的因素,值得一读。

正文:

网页加载速度是每个网站都应该重视的因素。但是往往被大家忽略。缓存是一个提升网站访问速度非常重要的因素(因为用户在下次访问的时候不需要重新计算或者下载已经缓存的资源)

我们团队(facebook web团队)最近针对目前facebook.com没有缓存的现状进行了一番讨论,主要问题是:在facebook,.我们每天都会发布两个版本,怎么样才能令缓存更有效率?怎么样的缓存策略才适合我们?

在找解决方案的时候, 我们发现雅虎性能优化研究博客上已经有了一篇关于性能研究的文章。

但是令我们非常吃惊的是:20%的页面访问是在空缓存的情况下进行的。但是这个研究结果距离现在有8年了,那个时代刚发布IE7,jquery也刚发布第一个版本,所以我们决定重新研究一下,看现在是不是有所改善。

重新研究:

在之前的研究当中,Yahoo在服务器创建了HTTP头设置了图片的过期时间和上次修改时间,如果图片没有发生改变,就用GET请求发送给服务器一个最后修改时间的信息,如果图片没有修改,就返回304(没有修改)来替换200(请求成功)。因为服务器可以记录浏览器请求的请求状态,所以Yahoo用服务器日志来统计缓存的用户数。

像那样的研究方法一样,我们创建了一个既能发送图片请求也能在数据库当中记录日志的PHP终点。这张图片用http头信息来控制浏览器的缓存和其他通过代理产生的缓存。之后在用户请求图片的时候记录这些信息。

这个图片HTTP头信息的设置是这样的:

但是因为一些已知的BUG,我们在IE7和IE8中把两个属性替换成了下面这样:

Facebook团队关于网页缓存的再实践 SEO技术

当浏览器发送请求给图片时候,将会发生两件事情:

1。因为浏览器从来没有打开过这张图片,所以没有额外的头信息,服务器将返回一个状态码:200 Success 接着返回图片数据给浏览器,之后浏览器会缓存文件的HTTP头信息当中的Last-Modified(文件最后修改时间)和ETag(被请求变量的实体值)

2。浏览器检查if-none-match或者if-modified-since头信息,如果之前有打开过。将会不加载图片数据直接返回Status:304 Not Modified(没有更新)。同时我们把Last-Moidified头信息用$header['if-modified-since']替换掉$now(),所以每次返回的内容都将是一样的。

现在剩下问题是我们在哪里应用这张图片,最后我们决定在Facebook的搜索条下面包含一个img标签,这样每次facebook加载的时候都会渲染这张图片。在整个页面重新加载的时候,资源将会根据缓存的头信息进行加载。这将是最好的方式来测试我们的想法。

在确保endpoint可以正常记录请求、图片标签可以正常访问了之后,我们正式开始了这次研究!

研究结果:

在数周的数据收集之后,我们决定来研究一下7天最后比较有价值的数据。数据的统计结果依旧让我们感到吃惊:依旧有25.5%的请求是空缓存的。为了让数据看起来更清晰,我们分隔了PC和手机的统计数据,但是数据依旧差不多:PC有24.8%而手机端有26.9%是空缓存的。这个结果不太符合我们预期,所以我们更加深入的研究了这个数据。

把PC端的浏览器分开来统计可能更加清楚:

根据上面一周的数据来看:用户用chrome和opera缓存的几率更大。你可能注意到你这个图表中并没有firefox浏览器的数据,那是因为firefox 31版本以及更早期的版本在我们的统计中有80%的缓存概率,但是在32版本和更高的版本当中有很明显的下降。那是因为firefox的缓存策略和我们的统计方法有点冲突(http://www.janbambas.cz/new-firefox-http-cache-enabled/),

所以我们就干脆去掉了firefox浏览器的数据统计。

好了,现在让我们来看看移动端的数据:

可以看到,大部分浏览器的缓存比例是在68%和84%之间。移动平台的数据差别还是挺大的,我们想可能都是比较低端的移动设备(https://code.facebook.com/posts/307478339448736/year-class-a-classification-system-for-android/)。除此以外数据跟桌面端还是比较相似的。

下面这个图分别是移动端和手机端空缓存用户所占的比例:

平均来看,有44.6%的用户是空缓存的,这个也很符合Yahoo团队在2007年做的研究。

更进一步:

到这里,文章还没有完结。在Facebook,我们迭代速度非常快,每天几乎都会发布两个版本。这个驱动我们去思考,多长时间的缓存设置适合我们呢?我们将if-modified-since这个文件头返回的时间减去当前时间来寻找答案。

所以我们根据上面的方法,我们统计了从第一次正常请求到发生304请求的时间(这说明了用户从没有缓存到有缓存经历了多长时间),下面是数据生成的图标:

横轴是以小时为单位的时间值,垂直竖线P50和P75表示在某一时间内缓存请求所占的比例,例如P50告诉我们在47小时的时候有50%的请求是有缓存的,同样,p75意味着75%的请求将是有缓存的。

移动端的测试数据告诉我们大概在12小时的时候有50%的请求是有缓存的。

实际应用:

总体来看我们的统计跟2007年是比较相似的,如果我们firefox浏览器(32和更高版本)不计入统计的话:这次有缓存的比例最高点是84.1%,高于2007年的80%。

另一方面,缓存的存在时间并不是太长。基于我们的研究,虽然在一个新版本发布的47小时之后有42%的请求将会带有缓存,但是这个缓存资源在电脑上存在时间也大概是这个时间。这个新的发现,对其他网站很有参考意义。

为什么缓存存在的时间不是太长?其实非常容易理解,从互联网的发展来说,网站的体积从2007到现在发生了不小的变化。拿2007年年来说,那时候我们家里的网速大概是2.5M,Yahoo的首页有168.1KB。现在我的手机都有了8G下行,Yahoo首页已经变到768KB。现在市面上网页的平均大小已经超过1MB了,这将给我们的浏览器的良好运作带来很大的压力(译者注:因为需要缓存的资源太多,超过浏览器设置的默认资源缓存大小会自动删掉早期的一些缓存文件,例如ie默认的是50MB,而chrome的是320MB)。

因此合理利用浏览器缓存比8年之前更加有意义。

最佳实践告诉我们:尽量用外链样式表和JS、让headers设置Cache-Control and ETag,并尽可能的压缩我们的数据、用不同的网址管理缓存、分割需要频繁更新的资源。这些优化方法不仅适用于像facebook这样规模的项目,其他网站也可以应用它们。虽然我们的更新频率会对缓存的优化带来负面的影响,但是这个不是本次文章所研究的重点。事实上,我们已经开始运用这次的研究成果来让所有访问facebook的用户收益。

如有翻译错误的地方,欢迎留言交流

延伸阅读:

  • 网站性能优化之CSS无图片技术
  • 网站性能优化实践 减少加载时间提高用户体验

相关推荐

seo诊断费用有哪些方面?
seo诊断费用有哪些方面?

大家好,欢迎来到西安蓝蜻蜓网络讲坛,今天我们所讲述的是SEO诊断,什么是SEO诊断?SEO诊断是从哪几个方面诊断的?SEO诊断需要多少费用?一、什么是SEO诊断...

12小时前 小杨seo

企业官网首页优化seo技术 优化知识有哪些!
企业官网首页优化seo技术 优化知识有哪些!

seo是搜索引擎优化的意思,那么大家seo技术有哪些吗?优化知识有哪些呢?新型黑帽技术包括有哪些呢?下面宝丞网给大家介绍一下关于seo技术的相关内容,有需要的朋...

1天前 seo秀

SEO技术,快速让你变成seo高手,干货需要收藏
SEO技术,快速让你变成seo高手,干货需要收藏

前言:本篇培训直击SEO精髓,为什么只打算用一节课讲SEO?因为SEO本身没有那么高深的东西。互联网知识泛滥成灾的原因主要是培训机构惹的祸。为什么学SEO?排名...

1天前 seo秀

SEO技术大全:SEO技术之经典30个白帽技术
SEO技术大全:SEO技术之经典30个白帽技术

SEO技术之经典30个白帽技术SEO技术之经典30个白帽技术,对于网络推广的人来说,如何让搜索引擎搜索到你的网站及让你的网站能在主流的搜索引擎上有良好的排名一直...

1天前 seo秀

网站优化SEO技术
网站优化SEO技术

大家日日都在用网站优化,SEO技术,日日不停的在做网站内容更新,外链制作等等,但是网站优化真的就仅仅是如此吗?为的是网站排名?网站流量还是网上营销额?也想问问我...

1天前 seo秀

什么是SEO高级技术?SEO教程教你如何运用
什么是SEO高级技术?SEO教程教你如何运用

今天SEO教程要介绍的是SEO站内优化的五大核心。主要包括:网站标题的写法,原创文章以及如何写原创文章,网站更新设置,网站全站链接,四处一词等相关内容。  第一...

1天前 seo秀

SEO是什么?SEO技术都包含哪些方面?

SEO是什么?百度百科上的解释如下:图一:什么是SEO简单的来说,就是通过优化手段来提升网站的排名。我们来举个例子说明一下,例如在百度搜索框中搜索SEO,如下图所示。图二:SEO的搜素结果我们看到,百...

做seo需要懂什么技术?
做seo需要懂什么技术?

有人说SEO就是个打杂的,哪里缺人就要去哪里。从这句话我们可以隐约的看出可能要懂很多技术。html基础做SEO需要让我们的网站被搜索引擎所喜欢(五点告诉你什么样...

1天前 seo秀

SEO技术揭秘:月入10万的SEO黑帽站群技术(详细讲解)
SEO技术揭秘:月入10万的SEO黑帽站群技术(详细讲解)

最近有许多刚接触黑帽seo的盆友问我一个问题,黑帽站群是什么?黑帽站群主要是做什么的?效果怎么样?所以今天优化狂人给大家简单介绍一下黑帽seo站群技术!一、什么...

1天前 seo秀

西安网站备案费用
西安网站备案费用

大家好,欢迎来到西安蓝蜻蜓网络讲坛,今天我们所讲的是有关网络备案费用的问题,对于很多想做长期网站的朋友,网站备案是必不可少的环节,因为网站备案可以提高自己的网站...

4天前 小杨seo

欢迎 发表评论: