著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

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

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

当时我们提到的原因是：

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

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

四、CSS

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

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

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

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

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

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

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

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

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

-color: ((new Date()).()%2 ? "#" : "#" );

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

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

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

（3）网站用代替@导入样式表

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

（4）网站避免使用滤镜

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

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

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

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

五、JS

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

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

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

一些特殊场景无法将脚本放到页面底部的，可以考虑

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

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

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

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

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

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

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

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

六、图片

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

（1）网站要优化图像

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

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

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

（2）网站优化CSS

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

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

手工地合并这些图片，并要去测量相应的像素位置，是比较繁琐的。不过，现在可以通过一些工具来帮助简化工作。

额外的维护工作。如果其中某个图片修改了，不光要生成新的图片，而且可能涉及到很多CSS的修改。CSS 一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

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

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

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

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

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

缩放的意思其实是说：

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

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

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

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

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

每个网站都应该有该文件，浏览器在访问任何页面的时候，总是会尝试去请求这个文件（如果本地没有的话）。该文件通常应该命名为.ico ，如果希望使用别的名称或者格式（例如PNG），则需要在页面的头部(Head)中定义引用（下面两句中的第一句是必须的）

该文件可以直接放在网站根目录，但也可以放在其他的主机，或者你想要的任何位置。如果不在默认的根目录下面，也是需要通过上面所提到的引用方式定义。

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

七、移动端

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

八、相关

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

（1）关闭日志修订记录

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

('', false);

（2）删除数据库缓存

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

解决方法：

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

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

// ('ts', ( $, "/css"));

// ('ts');

（4）禁止函数

在中的.php中添加如下：

('', 'n' );

( '', '' );

() {

('');

}

（5）去除中的非必须项

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

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

//洗

( '', '', 2 ); //去除文章feed

( '', '' ); //针对Blog的远程离线编辑器接口

( '', '' ); // Live 接口

( '', '', 10, 0 ); //移除后面文章的url

( '', '', 10, 0 ); //移除最开始文章的url

( '', '', 10, 0 );//自动生成的短链接

( '', '' ); // 移除版本号

('', '');//当前文章的索引

('', '', 3);// 额外的feed,例如, tag页

('', 'ink', 10, 0); // 上、下篇.

('', '', 10, 0 );//rel=pre

('l10n');

('', '');//禁用半角符号自动转换为全角

('', '', 2);//禁用类似rel='dns-' href='//'

('', '' );

('', '' );

( '', 'head', 10 );

( '', '', 10 );

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

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

/**

* 移除 加载的JS和CSS链接中的版本号

*/

_ver( $src ) {

if( ( $src, 'ver=' ) )

$src = ( 'ver', $src );

$src;

}

( '', '_ver', 999 );

( '', '_ver', 999 );

（7）移除非必要的插件

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

（8）关闭更新的提示

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

//关闭所有更新提示

('', ('$a', " null;")); // 关闭核心提示

('', ('$a', " null;")); // 关闭插件提示

('', ('$a', " null;")); // 关闭主题提示

('', ''); // 禁止 检查更新

('', 's'); // 禁止 更新插件

('', ''); // 禁止 更新主题

总结

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