`
树形设计者
  • 浏览: 17548 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

UI笔记——网站优化

    博客分类:
  • UI
 
阅读更多

响应慢甚至停止响应的网站非常恼人。

将会用到的工具

  • 文本编辑器的选择
  • 配置好的LAMP服务器(Linux、Apache或Lighttpd、Mysql、PHP5)
  • FTP帐号。FTP是向服务器中上传文件的通用方法。
  • SSH帐号。为了修改远程Linux服务器的配置文件,你需要能通过访问的SSH帐号,可选的客户端有Putty或者Jellyfish。
  • MySQL初级调试工具(如果没有访问MySQL配置文件的权限、你的服务器不是Linux、你的数据库不是MySQL——请跳过)否则,请登录http://launchpad.net/mysql-tuning-primer/下载最新的MySQL调试脚本。使用FTP或者SSH将脚本上传到服务器中,但是先不要运行。
  • 安装Smush:这是一个Firefox插件,提供了大量图片优化的快捷方式,它是一个顺手的工具。登录http://sumsh.it/下载。Firefox的NoScript插件会和冲突,请禁用。(Smush被包含在YSlow中,已经不需要独立下载安装了)
  • 安装Firebuy和YSlow插件:Yahoo提供了一个Firebug插件YSlow,提供了快速分析网站的功能,并且提供了非常实用优化网站想要速度的建议。
  • 下载安装Firefox
  • 运行Firefox并按照Firebug
  • 安装YSlow
  • 开始分析。(步骤重启Firefox打开网站,选择工具>Firebug>OpenFirebug,然后打开YSlow标签点击Performance)

在IMG标签中表明正确的图片尺寸

大图片缩放成小像素图片,不要让浏览器对图片进行缩放,这样很耗时,请自己手动修改。

好处:处理过的图片更易于传输,速度更快,提供了更好的用户体验。

减小图像的尺寸

应当注意网站中每个图片的尺寸,检查是否可以将图片的调色板设置为256色或更少。

好处:网站中的图片越小,加载时间越快,用户体验越好。

图片聚合

即使用CSS精灵

好处:减少HTTP的请求数目降低了网站的加载时间,提升了用户体验。

服务器和内容分发网络

YSlow建议将静态内容,如图片放在世界各地的服务器上,这样图片的储存就更接近用户。

如果可以的话,租用一台专门的服务器,作为一台廉价的今天内容专用服务器。

好处:合理使用缓存能够降低带宽费用,提供用户体验。

 整合CSS和JavaScript

通过将所有样式文件放入一个大的样式文件,将所有JavaScript文件放入一个JavaScript文件,可以减少传送用户访问网页时的HTTP请求数量。当然,开发过程中可以继续使用多样式和多JavaScript文件的方法。但是每个开发周期中都需要进行一次文件的整合

可以通过文本编辑器进行手工整合。或者,如果你使用Linux,在CSS文件夹中,可以用Cat(concatenate的缩写)命令整合文件.

因为文件中存在覆盖的问题(CSS中的属性重写或这JavaScript中的代码依赖),在整合过程中需要特别的注意JavaScript文件和CSS文件的加载顺序。如果你决定进行整合,确保在不同文件之间使用注释进行分割。

好处:减少HTTP请求数量可以提高网站的响应时间,同时带来用户体验的提高。

 CSS放在顶部,而JavaScript放在底部

将CSS文件放在HTML文件的<head></head>标签之间。这样,浏览器在得到THML元素之前就知道如何进行显示,而不必在加载的过程中对元素进行重新调整。

将JavaScript文件放在<body>结束标签之前。这样可以避免JavaScript正在加载中的页面进行渲染。

好处:尽可能加快页面的加载速度,提升用户体验度。

压缩CSS和JavaScript

很多基于正则的JavaScript压缩器在遇到有问题的代码时非常不紊地。为了节省时间,最好先使用JSLint检测一遍代码,将找出的问题分类。即使代码通过了JSLint的检测,也应当尽力保证代码接近完美。因为在很多情况下,一个分号都会导致压缩器的失败。

在文本编辑器中复制你的CSS或JavaScript代码,然后粘帖到Minify(http://www.reneschmidt.de/tools/minify/)相应的输入框中。单击“Hit Me”,并将结果应用在你的网站上。压缩代码越多,网站的表现就会越好。对于JavaScript来说,效果比较明显,而CSS则小不了太多。(整合工具Packer 3.1和Minify在代码压缩方面有着非常好的表现,当然其他工具不错也可以尝试如YUICompressor)

好处:减小了文件尺寸,降低了带宽消耗,JavaScript的表现得到了显著地提升,改善了用户体验。

使用外部CSS和JavaScript文件

不要使用内嵌的CSS或JavaScript,把它们都放在外部单独的文件中。这样不仅易于理解,而且也减少的了需要缓存的HTML文件的尺寸,提高了缓存的利用率(复用),同样也降低了HTTP的请求数。

好处:改善了缓存利用,页面重新加载时间变得更短,提升了用户体验。

选择一个文档类型

选择文档类型虽然对于改善速度没什么直接影响,但是通过为浏览器指定清晰、明确的HTML和CSS解析规则,可以充分发挥它们的潜力。

不要在任何地方漏掉文档类型的声明,这样会导致浏览器去猜测应该使用什么标准。

好处:告诉浏览器处理网站的方式,是非常重要的步骤,确保了在不同浏览器间网站外观的一致性。

验证页面

特别是你提供基于网络的服务时,潜在用户会仔细分析你的站点,来判断你对于质量的关注究竟到何种程度。通过W3C(http://validator.w3.org)的验证服务的页面表明你对于质量非常关注,而且致力于设计在普通网络浏览器上表现一致的页面。(潜在用户的信任感)

不要使用CSS表达式

支持CSS表达式不被网页标准所接受,而且要比普通的CSS花费更多的步骤,处理速度明显地降低了,这是一种资源的浪费。(即使它的“创造者”微软,也在IE8中抛弃了它)

服务器部分

(拥有服务器的root权限)配置Web服务器需要一些服务器的底层进入权限,通常是通过SSH的方式。每种服务器软件都不一样,所以提出要点,请自行寻找操作方式。

Apache:如何设置过期时间(决定了文件多长时间应当进行刷新,稳定HTTP请求次数)

YSlow中可以查看缺少过期头(expires header)的报警

Lighttpd:如何设置过期头

Apache:如何配置ETags(实体标签—entity tag,是HTTP响应头(response header)中用来判断文件内容是否被修改的标志)

Lighttpd:如何修改ETags

为PHP安装eAccelerator

MySQL Tuning Primer(调试MySQL也需要SSH权限,还需要一个能获得MySQL运行信息的账户和一个运行的MySQL服务器)

启用透明压缩(如果网站访问量不大,只是提供一些小的HTML、CSS和JavaScript文件,压缩文件并不十分必要,因为即便负载高到严峻的程度,即时的压缩会给服务器带来额外的压力。但是如果有大量的资源和大尺寸文本文件,应当激活压缩功能,这样可以节省带宽、减少传输时间)

启用Apache的压缩功能

激活Lighttpd的压缩

打开PHP的压缩选项

检测压缩效果

尽可能避免重定向

网站在使用一段时间后会产生很多重定向。有些文件因为过期或者突然消失而被移走了,这时重定向是个好办法,可以帮助用户找到他搜索的,但是应该尽量压缩。

好处:如果能够仔细的优化重定向链,服务器就能够处理更多的并发访问。

如何探测长时间跳转链?

完整的链接

避免死链接

如何检查内部的死链接?

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics