6.1 主题中的CSS－－谷歌字体和前端性能 CSS in Drupal theme--Google font and frontend performance

在社区里说到Drupal性能，总是可以看到一幅群情激愤的画面。这本来是一个和主题没什么关系的话题，我也没打算讲，可是最近总是看到关于谷歌字体拖慢Drupal网页速度的讨论，于是我开始反省一些问题：

一：到底是什么人想要使用谷歌字体？设计师？前端？themer？还是 开发者？

二：说到性能和速度，我们是不是漏掉了一点儿啥？

先说第一个问题吧，如果我的理解没有错的话，谷歌字体可以为你提供几百种不同的字体选择，这样，如果你的网站使用了谷歌字体，就可以让网站上的英文字体与众不同，对吗？ok，如果是这样，那么应该是设计师在用谷歌字体，并被前端或者是Themer做到了网页代码中。可是你的网站真的会因为使用了谷歌字体而在视觉方面加分么？大部分的情况其实是否定的。因为，除非你的网站是基于外文的，不然，在基于中文的网页上，改变那一小撮英文的字体，在视觉上的意义我认为可以被忽略。当然，这里不排除某些特意为之的设计行为，如果处理得当，效果还是很好的。但是，大部分的情况是，你网站上的英文被包裹在中文之间，中文是英文的10倍甚至20倍，而且中文基本上就是黑体或者宋体。在这种情况下，应该对于使用谷歌字体非常慎重，因为黑体和宋体作为两种经典的汉字字体，分别有其各自的气质，并不一定能和个性十足的谷歌字体很好的搭配起来使用。我个人的情况而言，除非极少数的情况，比如在logo或者banner中使用比较有个性的字体之外，大部分的时候，无衬线字体我就用Arial、Helvetica、微软雅黑，衬线字体我就用Georgia、Times New Roman或者宋体。因为，这些字体都是web安全字体，而且作为一个非专职的设计师，我觉得用更多的精力去做版式设计、图像设计和界面设计能更直接的提高网站的视觉效果。如果不是设计师、前端或者themer，而是模块开发者在模块中加入了谷歌字体，除非是和文字、字体有关的模块，不然的话，这不是在不务正业么？也许作为开发者的你会觉得我在剥夺你追求审美的权利，好吧，其实我不想剥夺任何人的任何权利。这个问题等我哪天写一篇《论程序员的艺术修养》再讨论吧。^_^

关于第二个问题，我们总是在谈论cache、boost、CDN、Pressflow等等，这些和设计师、前端、themer们好像不太沾边，而且，好像总是开发者们在谈论性能问题。可是谷歌字体这个问题不就是一个很明显由设计和前端导致的性能问题么？各位还记得网站性能黄金定律么？“80-90% of the end-user response time is spent on the frontend. ” 翻译过来就是：80-90％的用户等待时间来自于前端（加载）。这个定律是史蒂夫.桑德斯提出来的。他负责提高Yahoo的网站性能，是Yslow的作者。他还写了一本书《高性能网站》，这个是他的网站：http://stevesouders.com。

按照史蒂夫的说法，网站通过网络最终在用户的设备上显示出来，只有不到10-20%的最终用户响应时间是花在了从服务器下载HTML源文件到用户浏览器上，而用户等待网页组件加载的时间要占80%。当然，史蒂夫这个级别的人物研究和统计的自然都是美国前十名的网站，这些网站在服务器硬件配置、代码水平、性能优化方面应该都是做了不少工作的，所以他会得出这样的结论。我不是说我们不应该讨论cache，但是我认为，只讨论网站后端功能和服务器层面的性能优化，似乎不够全面。设计师、前端、Themer们应该或多或少知道一些最基础的和优化性能有关的方法。

如果你做了一个响应式网站，却把一个本该用于在PC上展示的图片直接显示在手机上，这多少有一点坑爹吧？还记得那个著名的问题么？“如果我使用iphone4浏览网页，会不会比Galaxy III 要节省流量呢？”连用户都在考虑的问题，我们是否能从技术上交出一份令人满意的答卷？所以我觉得很多时候，我们不应该为了响应式而去做响应式，“移动优先”不应该只是一句口号。

首先推荐两个工具，Yslow和Page Speed：

http://developer.yahoo.com/yslow/

https://developers.google.com/speed/pagespeed/

他们都是浏览器插件，可以安装在Firefox或者谷歌Chrome上，可以帮助你分析页面组件加载的速度。

另外，下面还有一些前端性能优化方面的建议：

1. 合理使用图片格式。现在的趋势是用png代替以前被广泛使用的gif文件，但是对于简单的图形来说，gif依然是体积更小的格式，虽然png可以提供更高的图片质量。svg图片作为矢量文件，体积更小而且不会丢失图片精度。对于retina屏来说，如果你使用svg图片的话，就不需要为每个图片制作两个版本。当然，无论是png还是svg，他们都存在对于老式浏览器不兼容的问题。因此，jpg、png、gif、svg这几种格式，到底应该使用哪一个，应该至少从是否透明、体积、图片质量、兼容性这四个方面来考虑。如果是一张全屏幕不需要透明的图片，在Photoshop中将JPG压缩率设置在6-8之间是比较合适的，如果我没有记错的话，最高是12。
2. 大量使用CSS雪碧图。雪碧图是前端体系中不可缺少的一个环节，它能把网站上需要用到的图片集合到一张大图中，并用css坐标定位的方式显示每个图片。这种方式可以减少HTTP请求以及下载数据量。我一般用sass命令生成雪碧图，当然，你也可以用其他工具制作它。
3. 在后台开启JS和CSS聚合。使用这个功能，可以把JS和CSS文件合并起来。这样的好处同样也是减少HTTP请求。
4. 压缩你的JS和CSS文件。将空格、换行、注释去掉，可以有效的控制这些文件的体积。你可以使用在线压缩JS和CSS的工具来完成这个动作。如果你使用SASS编写CSS的话，也有相应的命令和选项让编译器输出压缩过的CSS。
5. 灵活的引入JS和CSS文件。如果不是大部分页面都会用到的JS和CSS文件，不要在.info文件中声明，因为在这里声明的文件，会被加载到全部的页面上。
6. 在文档头部引用CSS文件，最底部引用JS文件。——这个问题我在社区讨论中看到过好几次了。严格来说这么做并不能提高性能，但是会让你的网站看起来快一些。
7. 响应式网站要使用响应式图片模块，如adaptive image。
8. 如果你做了一个中文网站，不要使用谷歌CDN来引入你的谷歌字体或者JS程序，360的前端库是一个比较好的替代方案，http://libs.useso.com/。
9. 如果你觉得你的网站还是很慢，别忘记使用Yslow来分析一下，看看前端组件有没有可以优化的地方，当然，你更应该看看上上期的水滴之声：http://drupalnews.cn/news/30-1。