Google 发布了一个新工具,可以用来测试网站的各个方面,包括 SEO。
目前该工具已经开放 BETA 测试,可以访问 web.dev。
我用本站的首页做了一个测试看看结果如何。
从其测试的五个大类来看,同 Chrome 开发者工具中的 Audits 一样。
也就是同 Lighthouse 也是相似的。
比较有用的是对做的不够好的各个项目类除了审计意见和改善建议。
看看五个大类:
- Performance:性能相关的各项指标。
- PWA: 基于 Progressive Web App 来评估的结果。
- Best Practices:杂项,比如 HTTPS,图片比例等等。
- SEO:主要就是看网站的搜索引擎友好程度了。
- Accessibility: 网站内容是否容易阅读之类的。
Twitter 是全球领先的社交网站,得益于它简洁的界面,快速的载入速度,APP的广泛使用,成为人们首选的社交工具。
今天,DavidYin就来介绍一下,优化你的Twitter账号的七个步骤。
1) Header Photo
算是头部的背景图片,这是最佳推广你的网站和服务的地方。可以参看我的 Twitter 账号页面,可以看到顶部的口号,网站,以及同我的 Blog 配色相近的图片。
https://twitter.com/binghuiyin
2) Profile photo
这就是我们常说的头像了,就是我的一个自拍,网站如果有logo的话,通常是放在上面的背景图片中的,这里还是用人像更好,更让来访者觉得是一个活生生的人在背后,当然专业的就是用专业的头像,二次元的就用二次元的头像了。
3) 显示的名字
可以看到我用的显示的名字就是我的名字,David Yin,这个显示名字是可以同别人重名的,也就是说别人也可以用同你一样的名字,这没有办法,同名同姓。记得要用你的名字或者公司名字,这样可以确保被搜索到。名字的长度限制为最多20个字符。
4)用户名,账号
这是你的帐号名称,就是常用的 @ 之后的那个部分,就是用户名,有时也被称为 twitter handle,最好你的用户名是你的名字或者是公司名称,但是很多时候是已经被注册了,这个用户名是不可重名的,而且被限制为15个字符,有时不得不用缩写。这个用户名就是其它用户用来 DM,回复你的时候用的。
5)简介
在名字下面,简介就是用来描述你的简单情况的,在这里我会建议介绍一下你的背景,以及放上相关的链接,让其它用户来点击访问你的网站。在简介里放上网址,会自动转换成链接,这是除了下面专门放网址的地方之外,可以介绍网站的好地方。
从去年初就开始有越来越多的网站开始使用SSL加密了,但仍然有很多网站的站长因为担心SSL的性能问题而没有动手,他们倒不是担心成本问题,毕竟一个证书也没有多少费用,何况现在已经有了免费的证书可以使用。
那么这个对于SSL性能低下的担心是否是存在的呢?
他们担心的是因为采用SSL而造成网站的载入速度过慢。那么这里DavidYin就来探讨一下,就现有的网站优化技术来说,这个影响有多大,就算是对于那种大公司,比如Google,SSL的对于网站性能也只有非常有限的影响,比如对于网络所传输的数据来说只有不超过2%的增加,而对于CPU的负载更是小于1%。相对于SSL加密传输所带来的益处,这完全是不可比拟的。
当然要做到这么小的影响,而不是某些网站因为采用SSL,且没有做好优化措施,而带来超过几倍的性能影响,就要仔细的看看下面 SEO 网站优化给你的SSL性能优化建议了。
1) Session Resumption 会话重用
这是一种缓存技术,有两种做法,一种是在服务器端,把 session ID 缓存在服务器,客户同服务器比对 session ID,就不用来回多次验证了;还有一种做法是 Session ticket,相对而言,这比session ID 更好,开销小,并且服务器压力夜宵。
2) 采用 Elliptic Curve Cryptography 椭圆曲线加密算法
椭圆曲线加密(ECC)是一种加密技术,实现了以较小的密钥得到比较高的加密密级。ECC已被大多数的浏览器和服务器所广泛支持,但是必须要使用ECC的证书。
3) 启用 HTTP/2
之前可以用SPDY,现在就是要启用HTTP/2了。关于HTTP/2的益处这里就不赘述了,就是一定要用,就算现在不能在服务器上实施,也要时刻记得,只要服务器可以用,就马上配置上。它算是只有好处而没有坏处的技术了。
4) 证书启用 OCSP Stapling
这是用来向证书签发者验证SSL证书的有效性的技术,一般是浏览器需要额外向证书签发者请求验证,而 OCSP Stapling就可以省去该步骤,把有效性验证结果储存在服务器,直接返回给用户了。
一本好书,值得多看几遍,也值得在时隔3,4年后,再看一遍,看看这些年的变化。
《高性能网站建设指南》这本书在2009年,我就看过,也介绍过,这些日子,我又翻出来再看了一遍,在现在的网络现状下,还是有很多值得回味的地方。
2013年同2009年相比,网站的条件不同了,网站所用的技术也有所改变,更大的改变是用户的连线速度提高了很多。
就加拿大而言,现在的平均下载速度是7839Kbps,美国是8618Kbps,中国大陆是1777Kbps。
四年前,加拿大是4Mbps,美国是4.5Mbps,中国大陆是800Kbps。 vi akamai
速度几乎都是翻倍了,当然当时要等20秒才下载完开始展示的页面,现在只要10秒就可以了。但是现在的页面也更重了,同2009年的500K每个页面,到现在的1M多,那么这个速度提高几乎被页面增大都消耗掉了。
这也意味着,网站性能提高还是非常重要,也可能更重要了。因为用户联机速度的提高,页面的优化与否,对于页面响应时间,载入时间,最后展示在用户面前的时间,就会出现更大的差异。
网站优化的一个部分就是网站性能优化。所谓的WPO,Web Performance Optimiztion。
一般而言,网站性能优化包括三个重要组成部分。
一、前端优化,目前可用的一个工具就是Google开发的mod pagespeed,可安装在apache服务器上,这部分网站上的内容可以更快的提供给用户。
二、CDN的使用。
DavidYin已经介绍过很多次CDN了,本站也一直在用,目前正在使用的是MaxCDN的服务。


免费网站优化建议第九个,是QQ皮肤网站,网址是 http://www.qqpifu.org
这也是一个非常常见的网站类型,站长提到百度排名不太好。
这样,就基于页面的优化,提下面几条建议:
1)压缩
网站静态内容的压缩,要尽量使用,对于js,css的压缩可以压缩掉70%
2)图片优化
图片不要缩放;
图片可以尽量的压缩
最近一段时间,我都会专注在提供免费网站优化建议这个主题上,我相信有很多网站都需要这样的诊断和建议。而DavidYin的诊断和建议,是在基于能够获得的资料的情况下,而提供的部分建议,毕竟要做一个全面而完整的诊断需要更多的网站情况。在这里我所给的建议通常是我认为比较有特点的,或者是重要的。好吧,下面说正事了。
今天要诊断的就是7天网上超市,网址是 http://www.7buy.com.cn
站长提到因为域名换了,收录有影响,这个DavidYin认为,的确是存在这个现象的,就算用了301跳转,还是会有一定的影响。建议把原来的域名按对应的页面,做好301重定向。如果没法对应页面,那么就都301重定向到首页好了。
就首页来看,有大量的失效图片,就是在天天低价,买就赠这里的图片,缩略图,有好多都是图片找不到。这个图片链接要修复好。到分类产品页,也有很多图片不显示。
这个部分对于用户的感觉是不够专业,会以为是不是一个才开门的,还没弄好的网站。
关键词方面,主要还是要按照页面的不同,来分别设置。在利用内部的链接,把关键词连起来。
今天是第七个免费网站优化建议,诊断的网站是品购网,网址是 http://www.360pick.com
开门见山,先说说域名
域名不错,但需要对url做一个规范,目前网站可以通过 360pick.com 和 www.360pick.com 两种网址访问,请用301跳转,使之都跳转到唯一的网站url上。
网站的速度也不错,因为图片的大量使用,建议直接使用缩略图,而不是把大图用限制高宽来缩小图,结果浪费了不少的带宽。比如某些图是750x583然后被设成150x117,看起来是小图了。首页的图片如果按此来优化,那么就可以至少减少80%的带宽消耗。
首页的什麽值得买部分的图片有title属性,不过其alt属性却都是demo image,请把alt属性也设成title一样。
html标签部分,如果看看源代码,可以看到很多错误,看看如何修复模板还是怎样让错误减少的最少。
第六个免费网站优化建议的网站是瑞臣健康网站,是一家做健康管理的公司。网址是 http://www.raychn.com/
这个网站是比较有可议的地方。
首先还是服务器端的优化:
有三个部分,简单说就是要改进网站网页的载入速度:
1)HTTP压缩,用Gzip来减小js,css,html的文件大小。
2)Expiry头的使用,以缓存静态内容到客户端。
3)图片的压缩,很多图片都可以压缩减少70%以上。
下面提一个比较重要的问题,就是权重的传递由于没有规范首页,而造成的后果就是首页权重累计不够,而浪费了资源。
当输入域名 www.raychn.com 之后,经过三次302跳转后到达的页面是 http://www.raychn.com/passport/welcome.jasmine
而当在任何页面点击顶部首页链接,到达的页面是 http://www.raychn.com/passport/index.jsp
这是要解决的,首页网址确定后要在全站保持一致,尽量减少不必要的跳转,要知道,3次302跳转浪费的时间是0.6秒。
现在的网站大量的使用图片,那么这些图片如何优化才好呢?这里DavidYin列出了15个优化原则,与大家分享。
1)在网站设计之初,就先要做好规划,比如背景图片如何使用等等,做到心中有数。
2)编辑图片的时候,要做好裁剪,之展示必要的,重要的,同内容相关的部分。
3)在输出图片的时候,图片大小要设置妥当,长宽像素就设成你所需要的大小,而不要输出大图片,然后使用的时候,在指定较小的长宽,缩放图片。
4)尽量组合装饰性的图片,以节省http请求数,在具体使用时,采用CSS sprite的方式。
5)页面上的边框,背景,尽可能的使用CSS的方式来展示,而不要用图片。
6)图片使用上,能用png格式的尽量用,以替代过去常用的gif和jpeg格式。在保证质量的情况下,用最小的文件。
7)在html中明确指定图片的大小。
过去几个星期,我都在介绍如何让网站提速,让页面能更快的载入,用户也就会有更好的体验。这随之带来的就是搜索排名的提高。因为页面的载入速度是排名因素之一。
那么其它的提高网站排名的方法有哪些呢?今天就来告诉你如何只用十步就能提高你的网站排名。
1) 选择你的关键词
选择适当的关键词是非常重要的一步,可以说是决定方向的一步,如果这里选错了,那么后面的九步做的再好,也只能是南辕北辙,错的更远而已。
2)关键词排序
选择好关键词之后,需要按照每个关键词的流行度来排序,要知道那些关键词搜索量的多少。这就是潜在的用户群。
3)细分关键词
关键词要细分,并再次排序,舍弃关联度不大的词。
网页上的Javascript,可以用Minify来简化,去掉文件中的空格,注释之类的不必要的字符,这样文件的大小就被缩小了,随之而来的下载时间就缩短了。
Minify使用Yahoo工具,YUI compressor。
还有,除了用Minify之外,再用Gzip来压缩,会让文件进一步缩小。
当然,除了Javascript文件可以用这个方式,CSS文件,都可以以同样的方式来缩小文件,来改善页面载入速度。
CSS是现在网站网页布局必不可少的手段之一,而要用好CSS,不让CSS成为网页载入速度的瓶颈,需要掌握下面的原则。
1)避免CSS表达式;
2)把CSS放在页面的head里面,最靠前的地方;
3)CSS中,要指出图像的高宽;
4)尽量不要使用@import,来导入css文件。用link的方式为好;
今天要谈的是Expires数据头。现在的网页不再是十年前只有html文本,或者加上少量的图片的网页了。大量的装饰性图片,css文件,以及js的广泛应用,使每次打开一个页面,下载的文件都在几十个以上。
而其中有大量的文件是重复使用的,这时利用缓存就可以起到一个重要的提速作用。
首先出场的就是Expires数据头。
通常的写法是:
Expires: Thu,16 May 2013 12:00:00 GMT
记得最长不要超过1年。
这个用法指明了页面组件内容的过期日期,只要还在日期范围内,就直接使用缓存中的文件。这依赖于时钟同步以及不断的比较时间。
另一种替换做法是Max-Age
通常的写法是:
Cache-Control:max-age=31536000
同样也是一年的有效期。
当两种数据头都存在时,Max-Age有较大的优先权。
具体的实现方法,一般都是利用Apache的mod-expires模块,在.htaccess里面定义的。
这是最常见的优化手段之一,页面优化(前端优化)同后台优化,数据库优化相比,改动少,效果大。而减少页面的http请求数,可以改善反应时间,快速显示页面。
一般改善的方向是,图像,图标的优化,以及js的优化。
图像,图标,按钮之类的装饰性,功能性的图像文件,可以使用下面这几种方法:
1)Image Maps
使用不方便,只适用于连续的图标。
2)CSS Sprites
这是现在最为常见的做法,把全站的图标都放在一个图像文件中,然后用css定位来显示其中的一小部分。这个灵活性大,容易设置。
3)Inline Images
这个是把单个图标文件,以base64编码方式直接嵌入到css文件中,或者直接在html里。现在很少网站使用了。
js文件和css文件,原则上,一个页面各只有一个。当然很多时候,有用到外站资源的时候,也不得不使用多个js文件,或者css文件。但尽量减少,合并,是对网站的速度是有益的。
使用Google Analytics都知道,它有一个Site Speed可以查看网站的速度。
现在Site Speed又添加许多新的技术指标。
在Site Speed报告中,增加了一个Technical选项,这个选项在Site Speed的三个标签(Explorer, Performance, Map Overlay)中都可以看到.
这些指标很有用,可以观察用户端对于你的网站的相应,因网络,浏览器等等不同而实际上该用户的页面下载情况。
包括:
Avg. Redirection Time - 在下载页面前花在重定向的时间,如果没有重定向,那么就是0
Avg. Domain Lookup Time - 用于DNS查询的时间
Avg. Server Connection Time - 连接你的网站服务器的时间
Avg. Server Response Time - 用户发出要求到服务器响应的时间
Avg. Page Download Time - 下载页面的时间
知道了这些情况,就可以有针对性的优化,以改善用户体验。
介绍了这么多提高网站性能,改善用户体验的通用方法,那么是否有一个简单易用的工具可以使用在WordPress上呢?答案是有的,而且是一个非常强壮的工具,你使用了它,其它的性能优化工具都可以不用了。这就是W3 Total Cache。
这里详述一下W3 Total Cache有哪些益处,对网站的哪些方面做了优化。
获益的8个方面。
1)当配置完全后,可以获得十倍以上的总体性能改善,比如在Yslow评分中得A。
2)在Google站长工具后台可以看到平均载入时间的大幅变化。
3)提高转换率。
4)打开第二个页面的速度大为提高,因为浏览器缓存开始工作了。
5)页面渲染的速度得到优化,网页几乎是即刻展开的。
6)页面载入时间减少,增加了用户浏览时间,或者是用户浏览更多的页面。
7)提高web服务器的性能,特别是在流量高峰的时候会有很明显的改善。
8)超过80%的带宽节省,主要是通过对html,CSS, JS文件的minify,压缩来实现。
Google发布PageSpeed有半年多了,DavidYin一直在使用,是个非常好的工具。
这个工具顾名思义就是分析页面速度的,也就是说载入时间,当然这个是越快越好。
在Google Webmasters里的Lab里也有这个建议,当然那里的数字还是不是最为准确的,请安装Page Speed到你的Firefox浏览器中来使用最为准确。
今天就想简单的说一说本站在系统升级后,重建了模板之后做的针对页面速度的优化。
首先用Page Speed测了一下,记过是84分,有几个需要改进的点它都给列出来了。
大概的看了一下,个人可以做得到有下面几点。
1)尽量合并CSS文件,最好只用一个;
2)图片的缩减,压缩;
3)CSS,JS文件的minify压缩
4)图片等使用不需要cookie的域名
闲扯一下,这是Blog优化的原则,也可以说是写Blog的人努力的方向。
1)写你熟悉的内容,这点是没有什么疑问的,超一些文章,或者对自己不熟悉的东西发表评论,都是不负责任的。甚至会带来不必要的麻烦。
2)开放评论,没有评论就没有反馈,如同一个单向的播放器,就无法知道读者的想法。
一个没有评论的Blog,说到底也就不能算是Blog。
3)文章排版的更有规律和特色,比如可能吧的绿条。
整洁的排版,规范的文字,让读者看的舒服。在这一点上,DavidYin就做的比较差,因为文章也较短。
4)用好Tag,特别是Technorati。如何添加Technorati Tag标签到你的MovableType
5)文章内部的链接要做的自然,对读者有益,可以作为所阅读文章的一个延伸,才是好的内部链接。
6)定期变化Blog上所投放的广告颜色,位置和大小。经常来的读者都有审美疲劳了,定时换换也是不错的选择,甚至你可以换一个广告商。
这里有我所常用的广告平台。
这两天看完了《高性能网站建设指南》一书。
此书由Oreilly出版的《High Performance Web Sites》翻译而来,电子工业出版社出版。

原作者是Steve Souders,他之前在Yahoo工作,也是Yslow的作者,目前工作于Google。他最大的贡献就是在提高网站的性能。
最近他又写了一本有关改进网站性能的书《Even Faster Web Sites: Performance Best Practices for Web Developers》,有机会也要找来看看。
继续回到《高性能网站建设指南》这本书,这本书的绝大多数概念都是在Yslow的评分标准中。其中提到了14条规则,内容就不重复了,只列出这14条规则做记录。