利用GTmetrix分析百度推广——网站速度分析

标签: 网站速度 网页分析优化 | 发表时间:2011-10-10 03:14 | 作者:宋 天龙 尘世客
出处:http://semwatch.org

Google Analytics是目前应用最广泛的免费网站统计分析工具,但在网站速度分析方面功能薄弱。有些网站速度测试工具如baidu仅提供页面元素加载时间;有些工具如pingdom提供的Start Time、Connect Time、First Byte和Last Byte细分仍无法满足要求;这里使用功能更强大的GTmetrix来分析网站速度,本篇是网站内容分析第三部分——网站速度分析。 这里以首页为例说明基本用法。

首先打开GTmetrix,在Analyze Performance of 下面的输入框中输入要分析的网址,点击Go!

GTmetrix分析完成之后的报告包括Summary和Breakdown两部分。Summary是概要信息,显示了Page Speed Grade、YSlow Grade、Page load time、Total page size、Total number of requests等;Breakdown用来显示Page Speed、YSlow、Timeline和History等分类功能。网站速度分析的主要部分在Time Line标签中,里面记录了Request、HTTP Code、Host、Byte和Timeline信息。

一、网站速度分析

1. Request分析

Request分析旨在了解页面加载过程中发出的所有请求,再结合页面元素分析出必要的请求,通过减少Request数量提高网站速度。请求的对象包括以下几个方面:

  • HTML objecta是网页主体代码。
  • Scripts objects包括站内Scripts和站外Scripts。站内Scripts是为满足网站不同功能而设计的,站外Scripts主要是谷歌转换跟踪、百度商桥、量子统计和雅虎统计应用。
  • CSS objects包括站内CSS和站外CSS。站内CSS是为网站布局设计的,包括digital.css、lx.css和common.css;站外CSS是使用百度商桥时调用的bw.css。
  • Images objects包含站内图片请求和站外图片。站内图片请求是为了满足网站设计,站外图片请求是Google Analytics和Google doubleclick为了满足统计跟踪功能而发出的。

通过分析发现,很多Request可以合并或利用其他技术间接合并,利用少量Request满足多个需求。

2. HTTP Code分析

HTTP Code分析的目的是找出页面中错误的HTTP请求。通常网页在没有特殊需求时,HTTP状态码应该是200,错误的状态码会直接影响用户体验。比如301、302会造成跳转和页面加载速度变慢,404会直接显示错误信息,503会显示服务器错误等。以下是可能存在问题的HTTP Code:

GET icon.swf 206 Partial Content qiao.baidu.com 24.6 KB
GET 1016627227?random=131… 302 Found googleadservices.com 42 B
GET cookie.js 404 /js/cookie.js beijingshouji.com 1.6 KB
GET icon_help_item.gif 404 /visit/images/icon_help_item.gif beijingshouji.com 1.6 KB
GET right_bg_tab.gif 404 /visit/images/right_bg_tab.gif beijingshouji.com 1.6 KB
  • 206状态码,服务器已经成功处理了部分 GET 请求。
  • 302状态码,临时重定向。
  • 404状态码,请求信息未找到。
这些状态码需要与工程师沟通,确定到底发生了什么、为什么会发生这些以及该如何处理这些问题。

3. Host分析

通过Host分析,找出页面加载过程中需要请求的所有主机信息。以下是统计数据:

123.125.148.82
beijingshouji.com
dt.tongji.linezing.com
googleads.g.doubleclick.net
googleadservices.com
google-analytics.com
hm.baidu.com
hzs10.cnzz.com
icon.cnzz.com
js.tongji.linezing.com
qiao.baidu.com
rqiao.baidu.com
s9.cnzz.com
tw.js.webmaster.yahoo.com
tw.rc.webmaster.yahoo.com

数据显示页面加载过程中除了网站本身主机以外,还需要请求14个站外主机。过多的主机请求明显会减慢网站速度。

4. Byte分析

Byte分析的目的是找出那些未经压缩的请求元素。通常页面元素都会经过压缩以提高传输和加载速度速度。将鼠标移到Byte数据上会显示对象压缩前后的对比信息(未经压缩的只显示压缩前的信息)。如图:

数据显示,该页面的全部图片都未压缩、部分JS代码未压缩。过多未经压缩的页面对象也降低了网站速度。

5. Timeline分析

通过Timeline分析,了解每个GET从发出请求到加载完成各个阶段的时间分布。

以页面第二个请求举例:在第一个请求发出873ms后,Google Analytics网站跟踪代码开始发出请求,请求从发出到接收完成一共经历了DNS Lookup、Connecting、Blocking、Sending、Waiting和Receiving六个阶段,时间共计38ms。请求完成之后是DOM加载和页面加载。下面简单解释下这六个阶段:

1)         DNS Lookup,DNS解析时间。如果页面存在多个请求主机,频繁DNS解析将消耗更多的时间。

2)         Connecting,建立一个TCP连接所需要的时间,不同的浏览器使用不同的端口下载资源,因此更多的端口等于更多的并行性,并且更多的TCP连接时间开销。

3)         Blocking,网页请求被阻塞,花费在浏览器中的等待网络连接的时间;

4)         Sending,向服务器发送请求所需要的时间;

5)         Waiting,等待服务器响应的时间(直到第一个字节是从服务器收到的),优化服务或连接;

6)         Receiving,接收服务器响应对象需要的时间;

二、网站速度建议

了解了影响网站速度的影响因素,我们可以从服务器端、传输端和页面端分别进行网站速度优化。

1. 服务器优化

服务器优化就是从动态语言执行、数据库查询、数据存储等方面进行优化,这些工作复杂而且关系到网站全局整站运行,因此需要谨慎,当然服务器端优化具体难度和效率取决于网站管理员的水平。由于没有操作过公司服务器,因此就不做详细介绍,仅以我自己的博客服务器端优化为例说明:

1)         用HTML语言代替PHP语言直接输出信息,比如语言、名称、固定URL地址等;

2)         定期进行数据库修复和优化;

3)         利用Expires为网页静态元素设置过期时间;

4)         设置服务器和页面缓存;

5)         启用Gzip压缩;

6)         其他有效但未实施的方法:利用CDN技术为网站提速;缩小Cookie,针对WEB组件使用与域名无关的Cookie;

2. 传输优化

传输优化是为了提高数据传输速度,减少传输过程中的等待。

1)         字节优化。将页面加载过程中传输的所有数据压缩,HTML代码压缩、JS压缩、CSS压缩、图片压缩等。

2)         缓存优化。设置有效的服务器和页面缓存时间。

3)         HTTP优化。A.合并CSS和JS,减少站内CSS和JS的HTTP请求;B.利用CSS  Sprites减少图片HTTP请求;C.减少站外主机DNS查询;D.避免不必要的HTTP和JS跳转;E.减少404错误。

3. 页面优化

页面优化主要围绕网站页面元素进行,常见的页面元素有图片、CSS代码、JS代码、HTML代码等。

1)         图片优化。选择合适的图片类型并压缩,图片颜色丰富采用JEG格式;颜色数少或有透明通道适合用PNG格式;LOGO图片用PNG-8格式或GIF比较适合。

2)         CSS代码优化。去除不使用的CSS代码;使用简写精简CSS代码;将CSS代码通过外部文件加载;CSS链接位置在页面顶部优先加载。

3)         JS代码优化。将JS代码通过外部文件加载;优化JS顺序,优先加载重要JS;将JS放置在页面底部。

4)         HTML代码优化。减少注释信息;去除无用代码;减少页面空行。

5)         DOM优化:减少DOM个数,降低浏览器解析压力;设置合理的DOM顺序,把重要的DOM放前面。

做网站前端优化的朋友一般都知道两个工具:谷歌的Page Speed和雅虎的Yslow,大家可以参考这两个工具的优化建议,在GTmetrix的Breakdown标签中有具体信息,经过优化之后的网站速度都会有不同程度提高,以下是我博客的在谷歌Page Speed和雅虎Yslow的得分,评分是次要的,主要的目的是为用户提供良好的用户体验。

以上只是个人在做博客和公司网站优化过程中的一些理解,其中的不详之处甚至错误的地方,欢迎大家批评指正。

相关 [利用 gtmetrix 分析] 推荐:

利用GTmetrix分析百度推广——网站速度分析

- 尘世客 - SEM WATCH
Google Analytics是目前应用最广泛的免费网站统计分析工具,但在网站速度分析方面功能薄弱. 有些网站速度测试工具如baidu仅提供页面元素加载时间;有些工具如pingdom提供的Start Time、Connect Time、First Byte和Last Byte细分仍无法满足要求;这里使用功能更强大的GTmetrix来分析网站速度,本篇是网站内容分析第三部分——网站速度分析.

如何更好地利用Pmd、Findbugs和CheckStyle分析结果

- - Java - 编程语言 - ITeye博客
这里列出了很多Java静态分析工具,每一种工具关注一个特定的能发挥自己特长的领域,我们可以列举一下:. Pmd 它是一个基于静态规则集的Java源码分析器,它可以识别出潜在的如下问题:. – 可能的bug——空的try/catch/finally/switch块. – 无用代码(Dead code):无用的本地变量,方法参数和私有方法.

LinkedIn是如何利用数据分析驱动产品的?

- - PingWest中文网
让我们看看这家全球最大的职业社交网站、第三大社交网络的运营数据. 目前,LinkedIn有着2.7亿注册用户,大约400万家公司入驻,已经成为了职场人士最重要的在线交流和招聘求职平台. 更引人注意的是它对高端企业用户的吸引力:大约90%左右的TOP100企业在使用Linkedin的服务. 从它的营收数据中也可以看出这些业务的增长潜力.

利用面部识别API分析网站照片中的人物情绪

- Jin Huang - 互联网的那点事
据国外媒体报道,一个名为The Emotional Breakdown的新网站可以每天扫视《卫报》网站上图片的人物面部表情,并将其归类为“高兴、难过、愤怒、惊讶或木然”. 比如,在《卫报》星期一的图片集中,有25%的表情是“高兴”,这比星期天强一点. 星期天有40%的表情是“愤怒”. 你也可以在The Emotional Breakdown上输入其他网站的网址.

利用Redis的有序集合做购物车商品相关性分析

- - zzm
本文所指的“商品的相关性”,就是依据与某个商品同时出现在购物车中次数最多的商品. 在某一商品的detail页面,推荐给用户与该商品相关的N个商品;. 在添加购物车成功页面,当用户把一个商品添加到购物车,推荐给用户N个与之相关的商品;. 在货架上将相关性比较高的几个商品摆放在一起;. 利用Redis的有序集合做法如下:.

Word2vec之情感语义分析实战(part3)--利用分布式词向量完成监督学习任务

- - CSDN博客推荐文章
这篇博客将基于前面一篇博客 Part2做进一步的探索与实战. demo代码与数据: 传送门. 前面我们训练了单词的语义理解模型. 如果我们深入研究就会发现,Part2中训练好的模型是由词汇表中单词的特征向量所组成的. 这些特征向量存储在叫做syn0的numpy数组中:. 很明显这个numpy数组大小为(16490,300)分别代表词汇表单词数目及每个单词对应的特征数.

利用WireShark对听音乐的过程中传送的数据包进行分析

- - FreeBuf.COM | 关注黑客与极客
相信现在的每一个人都在网络上听过音乐,那么,在我们听音乐的过程中,究竟发生了什么呢. 下面我就利用 WireShark 给大家分析一下. 打开wireshark,选择本地连接进行监听. 之后,打开一个音乐软件,随便点击一首歌曲,然后播放这首歌曲. 等待音乐播放了十几秒之后,停止wireshark的监听,现在wireshark已经监听到许多的数据包了,如下图.

竞品分析

- 章明 - 互联网的那点事
关于竞品分析,之前天行(@天行Aeros)有篇文章《设计公式:简单有效的竞品分析》已经进行了介绍,本文在该文章的基础之上再进行一些分享,希望对大家有用. 竞品分析(Competitive Analysis)一词最早源于经济学领域. 市场营销和战略管理方面的竞品分析是指对现有的或潜在的竞争产品的优势和劣势进行评价.