分类归档: Web

关于页面字体

关于 Web 页面字体这方面,我是门外汉,弄不出来长篇大论 — 这样也没必要,从观察统计上简单分析一下看看就够了。

几个页面字体适配度比较好的,HTML body 字体的定义:

  • Google: font-family: arial,sans-serif;
  • Twitter:font: 13px/1.5 Helvetica Neue,Arial,Helvetica,’Liberation Sans’,FreeSans,sans-serif
  • 豆瓣:font: 12px/162% Arial,Helvetica,sans-serif;
  • 新浪微博:font-family: Arial,Helvetica,sans-serif;
  • Apple中国:font: 12px/18px “Lucida Grande”,”Lucida Sans Unicode”,Helvetica,Arial,Verdana,sans-serif;
  • 知乎: font: 13px/22px ‘Helvetica Neue’,Helvetica,Arial,Sans-serif;
  • Facebook: font-family: “lucida grande”,tahoma,verdana,arial,sans-serif;
  • Google+: font: 13px arial,sans-serif;

结论:Arial,Helvetica,San-serif 这个组合适配性是最好的,也是最保险的. 可选:Helvetica Neue . 知乎的定义几乎可以直接照用.

其它:

  • 微软中国: font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif;
  • 淘宝:font: 12px/1.5 tahoma,arial,宋体; //看过淘宝同学写过的很棒的字体文章,估计页面不是统一定义的.
  • 百度:font: 12px arial;
  • QQ: font-family: “宋体”,”Arial Narrow”;
  • 新浪:font-family: “SimSun”,”Arial Narrow”; //最烂

结论:用了宋体的,都比较烂 … 中文网站要想页面视觉稍微好一点,直接去掉 CSS 中的宋体.

EOF

Updated: 对于个人站点,字体可以尽情发挥。

Updated 2: 新浪的同学解释说,之所以用宋体,是因为”宋体的半角字符是等宽字体(1/2个全角),长度的标题不会因出现英文或数字而折行”。估计是历史原因吧,相信这个问题总是有解的,看怎么解决罢了。

此文作者:, 位于 Web 分类 标签: on .
转载须以超链接形式标明文章原始出处和作者信息及版权声明.

新的技术产业:Web Performance Optimization

O’Reilly Velocity China 2010 大会上,业界最有影响里的 Web 性能技术专家 Steve Souders 宣告 Web Performance Optimization (WPO) 时代已经到来。这是个颇为重要的主题演讲,要知道,Google 已经开网站载入时间纳入到搜索排名因素之中(refer),或许 Web 性能优化,商业网站要考虑作为一项战略来对待了。

我们看一组数据(信息来源):

  • Amazon: 增加 100ms 延迟将导致收入下降 1%;
  • Google: 400 ms 延迟将导致每用户搜索请求下降 0.59%;
  • Yahoo!: 400ms 延迟会导致流量下降 5-9%;
  • Bing: 2 秒的延迟将导致收入降低 4.3%/用户(请问,首页用个那么大的背景图干啥?);
  • Mozilla 将下载页时间缩短 2.2 秒之后下载量增加 15.4%;
  • Google Maps 将文件大小减少 30% 后请求增加了 30%;
  • Netflix 在服务器端启用 gzip ,页面快了 13-25%,节省了 50% 的网络流量;
  • Shopzilla 将页面载入时间从 7秒缩减到 2秒,转化率提升了 7-12%,页面请求增加 25%,只用一半服务器就够了

要注意,这些只是数据,实际上,我们没有办法验证这些数据的真实性。但是可以肯定的是,网站访问速度过慢,一定对用户有负面影响。严重一些的,国外有 Friendster 因为网站访问过慢而导致的用户流失可以作为前车之鉴;网站访问速度快也可以增加竞争优势,比如Tumblr 一骑绝尘而将竞争对手 Posterous 甩在后面。国内这方面的例子比如优酷,斥重金改进用户访问速度,很大程度上保持了竞争优势。

相比投资在硬件上,我个人认为技术团队在 WPO 上的投入是可以用来评估团队技术能力的。有一次在和一位投资人聊起国内的分类网站哪个技术团队更具优势,我毫不犹豫的说看好百姓网,为何?访问一下同类网站,比较一下最终页面访问速度就知道了。这是体现一个技术团队意识和能力的地方。

当前最需要 WPO (甚至有些落后的) 的可能要数电子商务网站以及那些依托于大型 C2C 站点上的网店了。很多电子商务网站负责人非常重视 SEO,但在 SEO 已经快成为一种伪技术的今天,被忽视许久的 WPO 更应该引起重视。举例来说,可能绝大多数淘宝上的大卖家都不懂 Web 相关技术,当然也就无所谓什么 Web 性能优化了。我曾经见过有的卖家首页上一个页面放置几百个图片,一个页面动辄 7-8 Mb,用户访问速度可想而知,如果用户正常浏览都无法做到的话,要想购买产品恐怕也就无从谈起了。如果能对这一部分用户进行有针对性的处理,投入产出的价值还是显而易见的。说起图片来,可能这是最影响电子商务网站访问速度的一个因素,没有针对 Web 优化的图片、过大的尺寸或是失真的压缩图片比比皆是,无疑会严重影响用户体验与购买欲望(这里推荐做电子商务的朋友不妨关注一下 Yupoo.com 专门针对用户的这个需求而推出的图片管家服务)。

WPO 的好处?增加网站营收,降低运营开销,提升访问量,进而提升竞争力

WPO 做起来其实并没有那么难,通过一些特定的准则(比如 YSlow 14条, refer)即可取得一些卓有成效的改进。期待 WPO 能早日成为 Web 工程师必备的常识。也建议每一个技术团队的负责人应该将 WPO 作为一项战略来抓,而不是只是一两个技术人员的事情。从现在就开始吧。

EOF

补充:”快比慢好”,Google 把这句话作为十大价值观之一(refer)。而 Facebook 从创立至今,也一直将提升页面访问速度作为一项重要的策略。

补充一篇必读文章:WPO – Web Performance Optimization

此文作者:, 位于 Web 分类 标签: , on .
转载须以超链接形式标明文章原始出处和作者信息及版权声明.

《实战 Nginx》 读后

拿到这本 《实战 Nginx》 有几天了,休假期间将感兴趣的几章阅读完毕。作者张宴是国内 Nginx 最早的技术传播者之一,产生的影响也最大,他的一系列 Nginx 实战的文章相信让很多 Nginx 用户受益良多。

尽管之前已经在他的网络文章或者 PPT 里看到过这本书里包含的一些内容,我还是要说一下第六章中的架构图是这本书中非常有参考价值的内容(至少对我如此),作为网站维护者,即使不用 Nginx,这几张图也非常值得分析一下。对于从 Apache 迁移到 Nginx 的用户,第七章关于 Rewrite 规则的讲解则不可错过。

这本书的最大缺点或者说不够严谨的地方,我觉得主要是体现在某些章节上关于设置项的说明缺少足够的阐释,比如”优化 Linux 内核参数”、”MySQL 5.1 配置优化”等内容如果添加足以让读者查找更多信息的注释就更好了。另外,从章节的安排上,如果多一节专门讲述 Nginx 优化的内容或许也会不错。

对于没有 Nginx 经验或者是想进一步了解 Nginx 的系统工程师,这本书是值得一读的。这本书的定价不过是一张电影票的价钱,如果可以解答你在工作中的几个技术问题,你说是否值得购买呢?

EOF

此文作者:, 位于 Web 分类 标签: on .
转载须以超链接形式标明文章原始出处和作者信息及版权声明.

1e100.net,来自 Google

在 Alexa 上观测最近的一些数据的变化,发现了一个奇怪的域名: 1e100.net ,全球排名 45 。乍看上去,这个域名非常山寨,不过查询一下,发现这居然是 Google 的域名。Google 的名字是 Googol 这个单词拼错得来的,而 Googol 就是 10100 这个大数。1e100 = 1×10^100 = Googol (refer)。Twitter 上也有网友对此进行了提示。

1e100.net.png

这么看来,1e100 这样的域名风格倒是很 Google 化。从网上的反馈看,Google 有不少服务都在使用 1e100.net 这个域名,最多的应该是 Google Chrome 浏览器的 Safe Browsing 特性对地址的使用(对 Firefox 也有影响),而且会启用较多的并发连接,所以会有网站对此带来的压力无法承受而屏蔽 Google 的这个服务(refer),此外也让我想起以前 Google Chrome 早期的版本解析 DNS 多少有点慢,不知道是否有相关因果关系。Google 的其它产品包括 Google Toolbar、Google Analytics、YouTube 、FeedBurner 等服务也用这个域名。也有人发现 Google IPV6 地址也是通过这域名在进行测试。不过直接访问 1e100.net 是访问不到的,Google 通过子域名的形式进行使用。

按理说,这种不对外提供服务的地址,Alexa 没必要统计流量的,或许是他们的小失误倒是让我们了解到 Google 的一点有趣的信息。

EOF

更多参考:

更新:最新的消息说是 Google 不同数据中心间用来” identify servers, hinting that reverse DNS plays a role” ,关键词”Spanner”。

Google 现在有官方解释了:What is 1e100.net?
用于标记Google网络中的服务。主要有两个目的:1) 保持简单性; 2) 加强安全。

此文作者:, 位于 Web 分类 标签: on .
转载须以超链接形式标明文章原始出处和作者信息及版权声明.