网站Web性能和速度优化指南大全_知乎_

网站的优化不仅关系到搜索引擎的收录速度与排名，严重影响SEO，还非常影响用户的体验，本文的内容主要考虑网站的全方位优化，参考雅虎给出的35条优化建议，结合当前互联网和云端的架构，对网站的优化进行了分析和探讨。文章内容比较长，可以到原文章的地址：网站 Web 性能和速度优化指南大全 - Break易站，打开右下角的文章目录，方便浏览与查看。

网站的速度是用户体验的第一指标，好的网站速度对于用户打开网站的体验是非常重要的，特别是在网站这样的项目中，如果一个用户需要超过5s才能看见页面，他会毫不犹豫地关闭它。之前有几篇文章提到了wordpress网站的优化，这里，对网站所有的优化技巧进行了全方位的总结，使得wordpress网站在速度和各个性能上能得到更大的提升，为了更好地分析网站的性能，总共从八个方面来着手，网页内容，服务器，Cookies, CSS, JS， 图片，移动端和WordPress相关。总共优化方法汇总如下：

网页内容：网站尽量减少http的请求次数网站尽量减少DNS的查询次数网站尽量避免页面跳转、重定向网站尽量缓存AJax网站尽量减少DOM元素的数量网站尽量根据域名划分页面的内容网站尽量减少iframe的使用网站尽量避免404错误网站的延迟加载网站的提前加载服务器网站使用CDN加速优化网站添加Expires或者Cache-Control报文头优化网站采用Gzip压缩优化网站配置Etags优化网站尽早flush刷新输出缓冲网站使用GET来完成AJAX请求网站避免空的图像来源，配置图片src属性Cookies网站减少Cookies的大小网站内容页面选择无Cookies域名CSS网站把样式表置于顶部网站避免使用CSS表达式（Expression）网站用<link>代替@import网站避免使用滤镜filterJS网站把JS脚本置于页面底部网站使用外部JavaScript和CSS网站削减JavaScript和CSS网站剔除重复的JS脚本网站减少DOM访问网站开发智能事件处理程序图片网站要优化图像网站优化CSS Spirite网站不要在HTML中缩放图像网站中的favicon.ico要小而且可缓存移动端wordpress相关WordPress关闭日志修订记录WordPress删除数据库缓存WordPress禁用谷歌字体WordPress禁止wptexturize函数WordPress去除header中的非必须项WordPress移除JS和CSS中的版本号WordPress移除非必要的插件WordPress屏蔽评论的头像WordPress关闭更新的提示

前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。

来自Google的数据表明，一个有10条数据0.4秒能加载完的页面，变成30条数据0.9秒加载完之后，流量和广告收入下降90%。Google Map 首页文件大小从100KB减小到70-80KB后，流量在第一周涨了10%，接下来的三周涨了25%。亚马逊的数据表明：加载时间增加100毫秒，销量就下降1%。

以上数据更说明「加载时间就是金钱」，前端优化主要围绕提高加载速度进行。而如果是你的网站是Wordpress网站的话，安装WP Fastest Cache和WP-Optimize这两个插件会让你更加容易实现上面的功能。

一、 网页内容：

网站的页面内容是服务器传给浏览器的内容，也是影响前端性能非常关键的元素，它主要是指传给浏览器的HTML的内容，那么这网页内容优化的关键因素，主要是怎么做的呢？

（1）网站尽量减少http的请求次数

网站Web 前端 80% 的响应时间都花在图片、样式、脚本等资源下载上。在打开一个网站的时候，你可以打开谷歌开发者工具，去用谷歌开发者工具评估网站资源加载的http数量和性能。最直接的方式是减少页面所需资源，但并不现实。所以，减少HTTP请求数主要的途径是：

合并外部资源文件(如javascript,css,图片文件）图片的合并,是将多个图片合并为一个图片,然后采用css的一些设置（background-image,background-position) 来使用它们。这个很简单实用(但是效果也是显著的）。主要是使用CSS Sprite将背景图片合并成一个文件，通过background-image 和 background-position 控制显示。javascript和css文件的合并，这个可能大家不太经常注意到。要是使用Wordpress的话，可以使用WP Fastest Cache插件来合并。使用Inline images 这种方式. 这个方式可能依赖于浏览器的实现，目前并不是所有的浏览器都支持。可以使用Data URI scheme将图片嵌入HTML或者CSS中；或者将CSS、JS、图片直接嵌入HTML中，会增加文件大小，也可能产生浏览器兼容及其他性能问题。

对于合并JS和CSS的文件，有下面这些缺点：

破坏了原有文件的结构不同页面需要的文件组合可能是不一样的，这种情况下会需要产生多个不同的文件，而且需要比较小心地维护它们如果文件的内容发生变化，就需要重新再来一次

所以，如果网站的结构稳定的话，不要经常修改JS和CSS文件是最好的选择。在用wordpress插件WP Fastest Cache的时候，如果修改了JS和CSS，要用插件把合并的JS和CSS缓存删除，重新生成即可。

（2）网站尽量减少DNS的查询次数

DNS的查询是指：用户输入URL以后，浏览器首先要查询域名（hostname）对应服务器的IP地址，一般需要耗费20-120毫秒时间。DNS查询完成之前，浏览器无法从服务器下载任何数据。

操作系统（例如Windows)也会对DNS查询的结果做缓存，只是由于浏览器使用太过频繁，目前的主流浏览器都使用自己独有的缓存，而不使用操作系统的缓存。

IE 中默认情况下对DNS的缓存时间为 30分钟。关于如何配置，可以通过阅读这篇文章了解更多信息。早期的版本设置为1天，与Windows的设置一致。Windows的DNS缓存，可以通过ipconfig /displaydns 这个命令来查看。Firefox默认的DNS缓存时间据说为1分钟，如果不满意这个选项，直接修改 network.dnsCacheExpiration 即可。Google Chrome默认的DNS缓存时间，据我观察也是1分钟，可以通过chrome://net-internals/#dns 这个地址查看。

我们可以看到即便同样为浏览器，它们在缓存DNS的问题上也不尽相同（主要体现在时间上面），这个差异到底有什么考虑呢？

缓存时间较长，有利于重复利用DNS缓存，提高速度。缓存时间较短，有利于及时地检测到目标站点的IP地址更新，以进行正确的访问。

所以，两者都有其优点和考虑。

而对于网站使用CDN的好处，在这里也是可以体现出来的，使用了CDN的网站，在解析域名的时候，会分配到比较近的IP地址进行DNS的解析，从而提高了网站的速度和加载。

（3）网站尽量避免页面跳转、重定向

HTTP重定向通过301/302状态码实现。下面是一个有301状态码的HTTP头

HTTP/1.1 301 Moved Permanently Location: : text/html

目前，我们一直只要区分301和302即可。它们本质上的区别到底是什么呢？其实也不难：301表示永久重定向，302表示临时重定向。对于一般的用户而言，可能你还无法体会出来他们的区别，因为横竖都是要重定向的。但对于搜索引擎而言意义就非凡。我们都知道，搜索引擎是需要不定期对网站资源进行爬网，以便完善对应的索引结构的。当某个资源被永久重定向（301），搜索引擎会聪明地知道，在索引中应该记录就是永久重定向之后的新地址，而不是老地址，这样就可以避免用户通过搜索引擎来查询的时候，每次还需要先到老地址，再重定向到新地址。而对于临时重定向（302），则不会这么做。

但是，很多时候都无法避免重定向，比如，网站在浏览器中输入之后，还是会301重定向到这个网站，而且就算输入了也会重定向到。既然有时候没办法避免，但是我们还是在在网站的内链，或者外链尽量避免重定向，如下做法：

最浪费的重定向经常发生、而且很容易被忽略：URL 末尾应该添加/但未添加。比如，访问将被301重定向到 /（注意末尾的 /）。如果使用 Apache，可以通过Alias或mod_rewrite或DirectorySlash解决这个问题。网站域名变更：CNAME结合Alias或mod_rewrite或者其他服务器类似功能实现跳转。网站是https的，就尽量用https，而不是http。（4）网站尽量缓存AJax

Ajax 经常被提及的一个好处就是由于其从后台服务器传输信息 的异步性而为用户带来的反馈的即时性。主要利用在网站服务器配置Cache-control的报文头来实现的。其典型的应用场景包括：

异步加载，使得页面的内容可以分批加载。局部更新，使得页面的局部更新不会导致页面的刷新。

由于AJAX其实也是需要发起请求，然后服务器执行，并将结果（通常是JSON格式的）发送给浏览器进行最后的呈现或者处理，所以对于网站设计优化的角度而言，我们同样需要考虑对这些请求，是否可以尽可能地利用到缓存的功能来提高性能。

那么，什么样的请求才能做缓存呢？

POST的请求，是不可以在客户端缓存的，每次请求都需要发送给服务器进行处理，每次都会返回状态码200。（这里可以优化的是，服务器端对数据进行缓存，以便提高处理速度）GET的请求，是可以（而且默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。

在web的优化中，很多优化都可以用AJAX来优化，比如：一个 Web2.0的 Email客户端会使用 Ajax来自动完成对用户地址薄的下载。如果用户在上次使用过 Email web应用程序后没有对地址薄作任何的修改，而且 Ajax响应通过 Expire或者 Cacke-Control头来实现缓存，那么就可以直接从上一次的缓存中读取地址薄 了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的 Ajax URL增加一个含有上次编辑时间的时间戳来实现，例如， &t=等。如果地址薄在上次下载后没有被编辑过，时间 戳就不变，则从浏览器的缓存中加载从而减少了一次 HTTP请求过程。如果用户修改过地址薄，时间戳就会用来确定新的 URL和缓存响应并不匹配，浏览器就会重要请求更新地址薄。

在网站的优化中，很多都是需要实时性的，那么，这部分内容就不能用AJAX来优化。HTML 5中提供了一个新的特性：local storage，可以很好地解决这个不必要的AJAX的调用。可以移步： HTML 5中提供了一个新的特性：local storage查看。

（5）网站尽量减少DOM元素的数量

DOM的全称为：Document Object Model ，中文翻译过来叫文档对象模型。我们这里所探讨的DOM，其实有一个隐含的意思是指HTML DOM。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档。

现在可以随便一个网站，比如： git/32.html，然后打开谷歌浏览器Chrome Console控制台，然后输入下面的命令：

document.getElementsByTagName(*).length;

我们就可以看到，浏览git/32.html这个页面的时候，DOM的数量是500多个，如下图：

我们可以从下面两个方面来减少DOM的数量：

避免不正确地使用服务器控件。减少不必要的内容（并不是所有内容都必须放在页面上面的）如果数据量大，可以考虑分页，或者按需加载（6）网站尽量根据域名划分页面的内容

这里先要知道，浏览器一般会限制每个域的并行线程（一般为6个，甚至更少），使用不同的域名可以最大化下载线程，但注意保持在2-4个域名内，以避免DNS查询损耗。在这里，不同域名的实现可以用子域名来实现。比如：和就不是同一个域名，他们可以解析到不同的IP地址，甚至于实现两个网站的浏览。

比如，动态内容放在www.breakyizhan.com上，静态资源放在static.breakyizhan.com上。这样还可以禁用静态资源域下的Cookie，减少数据传输，详见Cookie 优化。而且动静分离的话，还有利于CDN的缓存。

（7）网站尽量减少iframe的使用

iframe以及与之相关的frameset,frame 都是早期HTML版本的产物。现在在网站里面，很少使用iframe，目前新浪微博提供的“微博秀”还是用iframe来实现的。，这样其实结构上好看，但是不利于网站性能的优化，更不利于网站SEO的优化。iframe在HTML的后续版本（例如HTML 5）中还是支持的，但frameset和frame 已经明确地要告别历史舞台了。

<iframe>的优点：

可以用来加载速度较慢的第三方资源，如广告、徽章；可用作安全沙箱；可以并行下载脚本。

<iframe>的缺点：

加载代价昂贵，即使是空的页面；阻塞页面 load 事件触发；Iframe 完全加载以后，父页面才会触发 load 事件。 Safari、Chrome 中通过 JavaScript 动态设置 iframe src 可以避免这个问题。缺乏语义。（8）网站尽量避免404错误

HTTP请求很昂贵，返回无效的响应（如404未找到）完全没必要，降低用户体验而且毫无益处。 404 意味着Not Found，意思是说未找到资源。既然如此，那么至少会有两种原因导致404错误：

该资源按理说是要有，但我们没有提供。用户按照正常的方式来请求，所以资源找不到。该资源本来就不存在，用户按照不正常的方式来请求，当然还是找不到。

那么，404会有什么样的影响呢？可以分为看得见的和看不见的影响：

看不到的影响：有时候，404错误发生了，用户可能根本没有感觉到。例如请求favicon.ico文件，或者请求了某个不存在的脚本文件、样式表、图片文件，页面还是会按照正常的方式进行呈现。丢失的脚本文件、样式表、图片文件，会导致页面的某些行为、界面效果出现异常（也可能不是很明显）最大的问题可能是性能方面的影响。尤其是如果请求一个不存在的脚本文件，因为浏览器在请求脚本文件的时候，即便是返回404，它也会尝试去按照Javascript的方式解析响应中的内容。这无疑会增加很多处理的时间，而因为该文件不存在，所以这些都是无用功。看得到的影响：如果用户请求的某个页面不存在，那么他将收到明确的回应默认情况下，他将收到一个标准的错误页面（请注意：不少用户会被这个页面吓到）如果网站比较注重用户体验，会对404错误页面进行自定义

那么，如何尽量避免网站的404错误呢？下面是几条小建议：

为网站提供favicon.ico。在发布网站前的测试工作中，运行Link checker工具，确保所有链接都是能够访问到的。这个工具是W3C发布的，完全免费，你值得拥有。第三条措施,同样可以尽可能地减少用户手工输入地址出错的机会。可以给网站收集404的网址，并且提交给搜索引擎，避免搜索引擎收录404网址；

如果网站是用PHP写的，可以在404页面添加如下代码来记录404的链接，并提交给搜索引擎：

<?php//实现自动记录死链地址（防重复）if(is_404 && strpos($_SERVER[HTTP_USER_AGENT],Baiduspider) !== false){$file = @file("badlink.txt");//badlink.txt$check = true;if(is_array($file) && !empty($file))foreach($file as &$f){if($f == home_url($_SERVER[REQUEST_URI])."\n")$check = false;}if($check){$fp = fopen("badlink.txt","a");//badlink.txt 就是在网站根目录的记录死链的文件flock($fp, LOCK_EX) ;fwrite($fp, home_url($_SERVER[REQUEST_URI])."\n");flock($fp, LOCK_UN);fclose($fp);}}?>

（9）网站的延迟加载

网站在首次加载的时候，页面初始加载时哪些内容是绝对必需的？不在答案之列的资源都可以延迟加载。比如：

非首屏使用的数据、样式、JS脚本、图片等；用户交互时才会显示的内容。google adsense也可以延迟加载

对于博客类的网站，读者首先要看到的是文章的内容，而不是用JS加载出来的效果等，所以延迟加载有利于留住网站的访客。

图片的按需加载可以使用懒加载，如果是wordpress网站的话，可以使用插件lazy load来实现。懒加载的好处是，如果网站的访客没有看到图片的位置，图片是不会加载出来的，这样子不但节省了流量，还提高了网站的加载速度，不用立刻，马上去加载比较大的图片。

（10）网站的提前加载、预加载

网站的提前加载、预加载可能会比较陌生，预先加载是利用浏览器空闲时间请求将来要使用的资源，以便用户访问下一页面时更快地响应。下面几个例子来了解几种预加载

无条件预先加载：页面加载完成（load）后，马上获取其他资源。以 google.com 为例，首页加载完成后会立即下载一个 Sprite 图片，此图首页不需要，但是搜索结果页要用到。有条件预先加载：根据用户行为预判用户去向，预载相关资源。比如开始输入时会有额外的资源加载。Chrome 等浏览器的地址栏也有类似的机制。有「阴谋」的预先加载：页面即将上线新版前预先加载新版内容。网站改版后由于缓存、使用习惯等原因，会有旧版的网站更快更流畅的反馈。为缓解这一问题，在新版上线之前，旧版可以利用空闲提前加载一些新版的资源缓存到客户端，以便新版正式上线后更快的载入。

当我们的网站部署了CDN之后，还有一项CDN的命中率，提高命中率可以提高网站的访问速度，而提高命中率的一个方法就是对访问量比较大的资源进行“预热”，这样子就会减少服务器的负担，加快网站的访问。

二、 服务器:

服务器的优化对网站来说是最基本，也是最重要的，毕竟基础设施绝对上层建筑嘛。我们的网站是建立在服务器上面的，所以一个好的服务器，一个负载高的服务器，是能够承受更多的并发量的。但是服务器越好，也是越贵。在服务器可选择的情况下，怎么样进行网站的优化呢？在已有的服务器前提下，怎么样才能网站进行优化呢？

（1）网站使用CDN加速优化

CDN的全称是Content Delivery Network，也就是内容分发网络（CDN），它是一组分散在不同地理位置的web服务器，用来给用户更高效地发送内容。而现在，我们可以使用阿里云的CDN进行我们网站的优化（这里有阿里云的优惠券）阿里云的云部署现在是世界级别的了，所以我们可以放心使用，只是，在部署好了之后，阿里云CDN的命中率是非常重要的。命中率越低，回源流量越大，对本机服务器负载越高，网站也就越慢了。附：CDN命中率低的原因以及解决方法

（2）网站添加Expires或者Cache-Control报文头优化

网站添加这两个字段是为了使用浏览器缓存，关于HTTP缓存可以参考：HTTP缓存。了解完http缓存之后，我们知道了缓存的重要性。那么，我们可以直接在.htaccess用FilesMatch来修改Cache-Control设置http缓存。

Cache-Control头在HTTP/1.1规范中定义，取代了之前用来定义响应缓存策略的头（例如 Expires、Pragma）。当前的所有浏览器都支持Cache-Control，因此，使用它就够了。所以，我们只要使用cache-control就行了，因为所有的浏览器都支持。

（3）网站采用Gzip压缩优化

网站的加载就是对一个个资源进行下载，所以对下载的资源进行压缩能大大加快网站的速度，那么，我们要知道哪些资源可以压缩，哪些不可以。

哪些资源适合做压缩：

静态网页（HTML,HTM）文本文件（TEXT,XML等）脚本文件（JAVASCRIPT)样式文件（CSS)

哪些资源不适合做压缩：

图片（JPG,GIF,PNG)特殊组件（FLASH, XAP）

从HTTP/1.1开始，web客户端就有了支持压缩的Accept-Encoding HTTP请求头。

Accept-Encoding: gzip, deflate

如果web服务器看到这个请求头，它就会用客户端列出的一种方式来压缩响应。web服务器通过Content-Encoding响应头来通知客户端。

Content-Encoding: gzip

压缩和格式化可以参考下面的在线压缩工具：

HTML在线压缩和格式化工具CSS在线压缩和格式化工具JavaScript在线压缩和格式化工具（4）网站配置Etags

ETag，全称为：Entity Tag，意思是实体标签，从名字上看，是对于某种实体的一个标识。它属于HTTP协议的一部分，也就是所有的Web服务器都应该（也确实能）支持这个特性。它的作用是用一个特殊的字符串来标识某个资源的“版本”，客户端（浏览器）来请求的时候，可以比较，如果ETag一致，则表示该资源并没有修改过，客户端（浏览器）可以使用自己缓存的版本。

在Apache中，可以通过修改配置文件来实现。而在IIS 中，如果你所使用的是7.0以及后续的版本，实际上应该可以不禁用，因为现在不会存在他们所提到的那个问题了。

（5）网站尽早flush刷新输出缓冲

用户请求页面时，服务器通常需要花费200 ~ 500毫秒来组合 HTML 页面。在此期间，浏览器处于空闲、等待数据状态。使用PHP中的flush()函数，可以发送部分已经准备好的 HTML到浏览器，以便服务器还在忙于处理剩余页面时，浏览器可以提前开始获取资源。

可以考虑在</head>之后输出一次缓冲，HTML head一般比较容易生成，先发送以便浏览器开始获取<head>里引用的CSS等资源。

<!-- css, js --></head><?php flush(); ?><body><!-- content -->

（6）网站使用GET来完成AJAX请求

GET和POST请求是浏览器执行XMLHttpRequest 的时候发送的请求，两者的不同点是：

POST请求，不能使用客户端缓存GET请求，可以使用客户端缓存（而且只要地址一样，它总是会使用客户端缓存）

从这个意义上说，使用GET会比POST而言，有更好的一个性能表现。（因为减少了请求数和数据的重复传输）。

其实，除了get和post之外，http还定义了其他的协议，可以参考：

（7）网站避免空的图像来源，配置图片src属性

雅虎的团队指出，如果你将img的src留空，可能你的本意是暂时不要显示任何图片，但在不同的浏览器其实还是会有一些额外的请求发生。例如

Internet Explorer makes a request to the directory in which the page is located.Safari and Chrome make a request to the actual page itself.Firefox 3 and earlier versions behave the same as Safari and Chrome, but version 3.5 addressed this issue[bug ] and no longer sends a request.Opera does not do anything when an empty image src is encountered.

据我的观察，现在的这些浏览器都不再发送额外的请求了。

图片src属性值为空字符串可能以下面两种形式出现：

HTML:

<img src="" />

JavaScript：

var img = new Image(); img.src = "";

虽然src属性为空字符串，但浏览器仍然会向服务器发起一个HTTP请求。空src产生请求的后果不容小觑：

给服务器造成意外的流量负担，尤其时日 PV 较大时；浪费服务器计算资源；可能产生报错。

所以，我们尽量不给图片的src属性留空，这样也是为了更好的网站优化和SEO优化。

三、Cookies

Cookie说到底它只是一种状态保存的技术。网站为了能够为用户提供个性化的服务（例如自动登录，个性选项的保存等），会考虑将一些数据放在客户端机器上。Cookie实际上是一个文本文件，所以它在客户端机器上确实有一定的安全风险。但罪不在Cookie，更完全没有必要妖魔化它。

（1）网站减少Cookies的大小

Cookie被用于身份认证、个性化设置等诸多用途。Cookie通过HTTP头在服务器和浏览器间来回传送，减少Cookie大小可以降低其对响应速度的影响。

去除不必要的 Cookie；尽量压缩 Cookie 大小；注意设置 Cookie 的 domain 级别，如无必要，不要影响到 sub-domain；设置合适的过期时间。

作者：MissGuo链接：来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

（2）网站内容页面选择无Cookies域名

静态资源一般无需使用Cookie，可以把它们放在使用二级域名或者专门域名的无Cookie服务器上，降低Cookie传送的造成的流量浪费，提高响应速度。例如

使用 专门处理图片请求使用 专门处理脚本请求使用 专门处理网页请求

当时我们提到的原因是：

提高了下载的并行度由于可以使用多个服务器，所以可以提高服务器的响应能力

其实这种做法还有一个附加的奖励，以上的三个主机中，应该只有www主机才可能需要保存cookie（它对于图片和脚本来说是没有意义的），我们知道cookie会自动地发送给当前域的所有请求，我们通过将图片和脚本单独放在一个主机, 所有与www主机关联的cookie不会发送到images主机或者scripts主机，这样就可以大大地节省网络流量。

四、CSS

CSS的样式表在网站中是给与页面渲染，呈现视觉反馈的作用。在很多时候，网站的美化过后，过度地修改样式表也会给网站造成很大的负担。比如：重复性的样式过多，垃圾无用的CSS样式没有清除，引入过多的CSS文件，都会给网站造成负担。更好地优化样式表，才能更好地优化网站。

（1）网站把样式表置于顶部<head>

把样式表放在<head>中可以让页面渐进渲染，尽早呈现视觉反馈，给用户加载速度很快的感觉。这对内容比较多的页面尤为重要，用户可以先查看已经下载渲染的内容，而不是盯着白屏等待。

这一点毫无争议。HTML规范中都明确地规定，样式定义（包括直接定义在文档中的，或者外部引用的样式表），应该放在HEAD里面，而不应该放在BODY里面（不管是BODY的顶部，中部，甚至是底部）。

这一条原则进一步对此做了解释，这对于我来说也是一个很有意思的收获。

之所以放在顶部，是为了提供渐进式呈现（render progressively）页面的可能性。也就是说，可以一点一点地，由上而下地呈现内容。这个对于用户来说，能提供一种较好的用户体验。如果放在了底部，很多浏览器（尤其是IE浏览器）会阻止呈现任何内容，直到加载了这些样式表。这是为什么呢？如果它在没有加载样式表之前呈现了那些内容，当然是可以的。但大家可以试想一下，等到它加载了样式表，它很可能需要重新呈现这些内容。所以，它们为了避免重复地呈现，就干脆什么都不做。取而代之的是，用户将看到空白如也的一个页面，然后等到全部加载完成了，再突然出现一大堆内容在他面前。

如果把样式表放在页面底部，一些浏览器为减少重绘，会在 CSS 加载完成以后才渲染页面，用户只能对着白屏干瞪眼，用户体验极差。把样式表放到文档的HEAD部分能让页面看起来加载地更快。

（2）网站避免使用CSS表达式（Expression）

在设计我们的CSS的时候，很可能会有遇到下面这个情况：

background-color: expression((new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

上面的代码设计的初衷是为了希望我们拥有定义动态的CSS样式的能力。

这里可以使用一个特殊的expression函数，其实这是一个javascript的函数。它可以进行根据一个表达式进行计算，动态地决定background-color的值。

看起来是一个相当不错的功能，但我们可能不会想到这个表达式会运算很多次（这个具体的次数可能远远超过你的想象）所以，我们在设计网站的时候，应该尽量避免这种情况，这样会造成浏览器极大的损耗。

（3）网站用<link>代替@import导入样式表

这一条规则其实很简单，因为浏览器兼容的问题，IE中，link和import导入样式表是一样的，但是现在已经不是IE独霸天下的时代了，所以，为了更好地兼容各个浏览器，网站应该使用link而不是@import导入样式表。

（4）网站避免使用滤镜filter

和上一条规则：网站应该使用link而不是@import导入样式表，一样同理。

这一条原则也是关于标准化设计的问题。滤镜这个功能也是IE当年为了提供更加丰富的一些页面效果而设计的（相应的也会有代价）。

其实不仅仅是别的浏览器可能不支持，IE 从9.0版本开始也放弃了这方面的支持。

我们可以期待的是，CSS 3.0作为后续的一个版本，会为网页的特殊效果提供一个标准的支持，也就是CSS3 的filter。（注意：CSS3的filter是可以用的）

五、JS

JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。就是因为JavaScript开发者多，而且功能强大，所以功能上精进的同时，我们也要保证网站的高效。

（1）网站把JS脚本置于页面底部

浏览器下载脚本时，会阻塞其他资源并行下载，即使是来自不同域名的资源。因此，最好将脚本放在底部，以提高页面加载速度。

一些特殊场景无法将脚本放到页面底部的，可以考虑<script>的以下属性：

defer 属性；HTML5 新增的async属性。（2）网站使用外部JavaScript和CSS

这是一个有点争议的话题。这里的争议点并不在于要不要将脚本文件和样式表作为外部文件引用（因为通常情况下，大家都同意这样做是有好处的），而是在于如何把握一个度。因为在某些情况下，确实将脚本或者样式定义在页面中可能更好一些。

我这里就整理一下大家对于这个做法的优缺点分析

好处：提高了脚本文件和样式表的复用性。（无需在每个页面中都定义一次）减小了页面体积，可以提高页面加载速度。（脚本文件和样式表可以被浏览器单独缓存）提高了脚本和样式的可维护性。（这个虽然与性能无关，但其实也是很重要的）缺点：因为有单独的文件，所以可能会增加额外的请求。这违背了 Make Fewer HTTP Requests 这个原则。但由于这些文件可以被单独缓存，所以实际上这个的影响不见得那么大。

很显然，采纳这条原则的好处通常是多于坏处的。

（3）网站削减JavaScript和CSS

"最小化JAVASCRIPT和CSS“ 这条原则主要讲的是，我们应该尽可能地减少这两种文件的体积，以便加快下载速度。

去除不必要的格式符、空白符、注释符。这个操作，其实可以理解为是一种格式化，虽然它操作的结果其实是去除掉原始文件的那些格式。模糊（Obfuscation）处理JAVASCRIP脚本源代码。

要理解这个行为，我们可以来看两个文件:

对比一下这两个文件。原始文件，我们通常称为“格式良好”的脚本文件。压缩文件，很显然这样的代码不适合人类阅读，但对于计算机，具体来说是浏览器的JAVASCRIPT执行引擎来说是没有问题的。而且压缩文件比原始文件的体积小很多。

（4） 网站剔除重复的JS脚本

不要在一个页面中，重复引用同一个脚本文件。当然，你最好没有这么做，而且希望你没有这么做并不完全是出于一个好的习惯，而是因为你真的了解了重复引用同一个脚本文件所带来的问题。下面的代码就是重复引入页面的脚本：

<script src=wp-content/cache/wpfc-minified/2pqhcodj/9uboh.js type="text/javascript"></script><script src=wp-content/cache/wpfc-minified/2pqhcodj/9uboh.js type="text/javascript"></script>

重复的脚本不仅产生不必要的HTTP请求，而且重复解析执行浪费时间和计算资源。

（5）网站减少JS对DOM访问

JavaScript 操作 DOM 很慢，尤其是 DOM 节点很多时。由于现在有了很多强大的javascript框架和库，网页开发人员拥有了前所未有的能力和热情——通过javascript为网页添加各种各样的效果，甚至完全可以从零开始构造一个文档。这在以往是不能想象的。话说，javascript 这个有点“古老”语言这几年重新焕发了青春，甚至有一发不可收拾的趋势，原先的Javascript只是编写客户端的脚本，现在也可以编写服务器脚本，甚至还可以编写桌面程序，Office程序。

为了帮助大家更加清晰地了解，并且避免常见的一些问题，这里整理列举一些通用的技巧（部分翻译来自上述提到的几个文档）

永远使用最新的JQuery版本。合并并最小化脚本。尽量使用for，而不是each。尽量使用ID去访问，而不是class。如果有可能，通过提供上下文，缩小查找范围。例如 $(expression, context)。对一个元素的多次访问（尤其在循环里面），可以考虑先用一个变量将其缓存起来，而不是每次都重新查找它。应该尽可能使用到jQuery的链式选择方法。在可能的情况下，尽量减少动态插入、添加、删除元素。（我知道你很多时候做不到这一条）对于要拼接大量字符串的情况，可以考虑使用join方法，而不是concat函数，或者+= 这样的运算符。为所有事件的处理函数都返回false。

最后，不要满足于一些较高层的技巧，要以用户体验为主。

（6）网站开发智能事件处理程序

其实这也算不上智能，我们需要了解DOM元素的事件工作机制，就能正常地写出更好的事件处理程序。

减少绑定事件监听的节点，如通过事件委托；尽早处理事件，在DOMContentLoaded即可进行，不用等到load以后。六、图片

网站的图片是网站必要资源之一，每一个网站的图片都要用一个http去获取。网站的图片优化是网站必要项目之一。

（1）网站要优化图像

你可以使用ImageMagick这个工具对gif图片进行检查，以确认它们是否还有优化的空间。而且图片的大小关系都下载的速度，图片大小的优化是非常重要的。

如果图片大小太大的话，建议压缩优化大小之后上传，不然会影响网站的下载速度。

如果是wordpress网站，推荐使用compress Jpeg & PNG images这个插件来压缩，每个月有500张图片的压缩额度，对一般的网站来说是够用了。

（2）网站优化CSS Spirite

CSS Sprite(由于很难做中文翻译，所以保留英文）是这样一种技术：如果我们的多个页面元素需要使用不同的图片（例如作为背景）,常规的做法可以为每个元素定制一个CSS，每个CSS中通过background-image属性来设置不同的图片。这样做是可以实现功能的，但会带来的一个问题就是可能需要下载多个图片。为了改善这一点，CSS的设计者考虑了一种新的做法：可以将这些图片合并为一个大图片，然后在CSS中不仅仅设置background-image属性，同时还设置background-position属性来决定要显示的图片区域。这样一来，既实现同样的效果，又减少了图片下载的数量。

这种技术可能会带来一些额外的工作或者麻烦：

手工地合并这些图片，并要去测量相应的像素位置，是比较繁琐的。不过，现在可以通过一些工具来帮助简化工作。额外的维护工作。如果其中某个图片修改了，不光要生成新的图片，而且可能涉及到很多CSS的修改。CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

几个优化建议，主要如下：

尽可能地使用横向组合图片，这比纵向组合图片通常体积更小一些。尽量使图片具有接近的色系，这样最终组合出来的图片也会小一些。尽量使用小一些的图片，并且图片之间的间隙尽量也小一些，目的还是为了最终组合出来的图片体积更小。（3）网站不要在HTML中缩放图像、图片

这个错误的设计其实在早些年做网页设计的时候，也经常会犯（原因在于很多时候，我们都有懒散的心理，图一时的方便）。

有时候，能得到的图片尺寸并不那么合乎要求（我说过了，我通常不太会自己做图片），但为了在网页中显示出我希望的尺寸，我会很自然地想到通过如下的方式来图片进行缩放：

<img width="100" height="100" src="mycat.jpg" alt="My Cat" />

缩放的意思其实是说：

不管mycat.jpg这个图片原始尺寸是多少，通过明确地设置图片宽度和高度，要求它最终显示出来的尺寸是100px * 100px.

很显然，浏览器下载到原始图片之后，如果原始尺寸与目标尺寸不符，就会需要对图片进行缩放（拉伸或者缩小），以便实现刚才所提到的目的。

所以，请记住并遵守这条原则：你需要在网页中显示什么尺寸的图片，就请图片设计人员提供什么尺寸的图片，而不是在网页中进行缩放。

（4）网站中的favicon.ico要小而且可缓存

这个文件的详细信息，有兴趣的朋友可以参考，整理总结如下：

每个网站都应该有该文件，浏览器在访问任何页面的时候，总是会尝试去请求这个文件（如果本地没有的话）。该文件通常应该命名为favicon.ico ，如果希望使用别的名称或者格式（例如PNG），则需要在页面的头部(Head)中定义引用（下面两句中的第一句是必须的）<link rel="shortcut icon" href="" type="image/vnd.microsoft.icon"><link rel="icon" href="" type="image/vnd.microsoft.icon">该文件可以直接放在网站根目录，但也可以放在其他的主机，或者你想要的任何位置。如果不在默认的根目录下面，也是需要通过上面所提到的引用方式定义。

由于该文件的这些特性，所以我们有三条优化的建议

存在（避免 404）；尽量小，最好小于 1K；设置较长的过期时间。七、移动端

网站的移动端在近几年发展得很快，这里的优化也是非常重要的，百度和谷歌分别推出了针对移动端的优化，MIP页面和AMP页面。如果对移动端需求量非常大的话，可以针对市场进行相应的优化。

国内市场：建议使用百度的MIP页面国际市场：建议使用谷歌的AMP页面八、wordpress相关

这里是针对wordpress网站来进行相关的优化，因为wordpress网站发展了这么多年，虽然它强大的系统也是被人们广泛使用的原因之一，但是，经过这么多年的发展，很多功能也会对网站造成了多余的负担，更好地定制和优化wordpress网站是我们必须要做的。

（1）Wordpress关闭日志修订记录

wordpress有个功能叫做日志修订，是为了能够回退到以前日志修改的位置。觉得在制作发布信息平台时用处不大，可能在做重要信息存储时有用，这个根据个人情况取舍吧！有了这个日志修订功能，每个修订都会在 posts 表中插入一条记录，写了一篇文章，多修改了几次，都会插入多个修订版本。这样子每篇日志都有10多条记录在 posts 表中，那么到时候文章一多，就有可能把表撑爆，数据一多，查询肯定慢，WordPress 的效率就会很低了。解决方法：在 wp-config.php 添加的代码如下：

define(WP_POST_REVISIONS, false);?

（2）Wordpress删除数据库缓存

在后台写文章会时隔一段时间Wordpress自动给我们保存成修订版本，这样的修订版本会自动保存到数据中心，在前台是看不到的，这样更新一篇文章需要花费几十分钟甚至1个小时的时候会产生很多的修订版本，这就是ID不连续的主要原因，这样在我们有500篇文章时候可能会有2000个记录文章，时间之后会产生几千几万的记录（这就是为什么很多人说开始速度还可以，以后速度越来越不好）。我们需要删除修订版本，不让修订版本添加到数据中心。

解决方法：

在wp-config.php文件中添加"define(WP_POST_REVISIONS, false);"代码。插件wp-optimize可以删除（3）Wordpress禁用谷歌字体

谷歌字体在国内很多时候加载非常慢，所以禁用谷歌的字体是非常有必要的。我们可以在functions.php中查找，并注释掉，如下：

//wp_register_style(sniuk_amp_google_fonts, add_query_arg( $query_args, ""));//wp_enqueue_style(sniuk_amp_google_fonts);

（4）Wordpress禁止wptexturize函数

在wordpress中的functions.php中添加如下：

remove_action(pre_post_update, wp_save_post_revision );add_action( wp_print_scripts, disable_autosave );function disable_autosave() {wp_deregister_script(autosave);}

（5）Wordpress去除header中的非必须项

我们知道，wp_head();会引入很多我们不想要的资源来到header里面，增加网站的负载，而对于wordpress程序，虽然功能很多，但是还是要尽量给网站减负，这里对删除wordpress里面header很多没用的标记和元素。这些东西包括profile, pingback, alternate, EditURI, wlwmainfest, prev, next, generator meta, shortlink, index, start等。这些标记不仅会对增加页面的体积，而且可能导致安全问题。比如“generator” 元标记就会泄露Wordpress的版本号，如果你没用及时更新一个已经曝出有安全漏洞的版本。

在functions.php加入下面的代码即可，代码后面的注释，可根据自己的需要加入：

//洗headerremove_action( wp_head, feed_links, 2 ); //去除文章feedremove_action( wp_head, rsd_link ); //针对Blog的远程离线编辑器接口remove_action( wp_head, wlwmanifest_link ); //Windows Live Writer接口remove_action( wp_head, parent_post_rel_link, 10, 0 ); //移除后面文章的urlremove_action( wp_head, start_post_rel_link, 10, 0 ); //移除最开始文章的urlremove_action( wp_head, wp_shortlink_wp_head, 10, 0 );//自动生成的短链接remove_action( wp_head, wp_generator ); // 移除版本号remove_action(wp_head, index_rel_link);//当前文章的索引remove_action(wp_head, feed_links_extra, 3);// 额外的feed,例如category, tag页remove_action(wp_head, adjacent_posts_rel_link, 10, 0); // 上、下篇.remove_action(wp_head, adjacent_posts_rel_link_wp_head, 10, 0 );//rel=prewp_deregister_script(l10n);remove_filter(the_content, wptexturize);//禁用半角符号自动转换为全角remove_action(wp_head, wp_resource_hints, 2);//禁用类似rel=dns-prefetch href=//fonts.geekzu.org add_filter(json_enabled, __return_false );add_filter(json_jsonp_enabled, __return_false ); remove_action( wp_head, rest_output_link_wp_head, 10 );remove_action( wp_head, wp_oembed_add_discovery_links, 10 );

（6）Wordpress移除JS和CSS中的版本号

在functions.php加入下面的代码即可移除版本号，反正黑客知道wordpress的版本进行黑客攻击：

/** * 移除 WordPress 加载的JS和CSS链接中的版本号 */function wpdaxue_remove_cssjs_ver( $src ) {if( strpos( $src, ver= ) )$src = remove_query_arg( ver, $src );return $src;}add_filter( style_loader_src, wpdaxue_remove_cssjs_ver, 999 );add_filter( script_loader_src, wpdaxue_remove_cssjs_ver, 999 );

（7）Wordpress移除非必要的插件

wordpress网站是用插件来实现很多功能，但是插件太多的话，会造成网站负载太高，所以有时候，网站的CPU会很高。删除不必要的插件对网站来说是非常必要的。

（8）Wordpress关闭更新的提示

关闭后台的更新提示可以解决后台比较慢的问题，在functions.php加入下面的代码：

//关闭所有更新提示add_filter(pre_site_transient_update_core, create_function($a, "return null;")); // 关闭核心提示add_filter(pre_site_transient_update_plugins, create_function($a, "return null;")); // 关闭插件提示add_filter(pre_site_transient_update_themes,create_function($a, "return null;")); // 关闭主题提示remove_action(admin_init, _maybe_update_core);// 禁止 WordPress 检查更新remove_action(admin_init, _maybe_update_plugins); // 禁止 WordPress 更新插件remove_action(admin_init, _maybe_update_themes);// 禁止 WordPress 更新主题

总结

网站的优化是一个长期的过程，只有长期优化网站，才能让网站更好地运行。最后，推荐大家一个谷歌插件来给自己网站的页面评分，PageSpeed Insights，可以给自己的页面评分，而且对于一些可优化项，也会列出明细，评分后页面如下：