51工具盒子作为我担任Speckyboy首席技术官的新职位的一部分，我决定撰写一系列文章，以帮助您了解制作一个真正快速的网站所需要的内容。您可能已经注意到，Speckyboy最近刚出手，并且运行速度快得多。
这是因为我将在"网站速度"系列中列出所有提示，其中重点是100％的加载时间。
为什么要关心CSS？为什么当Adobe和其他公司的产品以HTML和CSS输出整个网站时，这些网站都是预制的并准备交付给客户？
原因很简单，所有这些"弹出式"构建器应用程序都会以惰性方式添加许多不必要的CSS和HTML。慢速网站遭受跳出率高和搜索引擎排名低的困扰。
用冲浪术语来说，"弹出"是在生产线上创建的，供冲浪一天的初学者使用，而定制板则由专业人士手工制作和使用。人们会使用弹出式窗口，因为它们比较重，走得更慢，并为初学者提供了一个更稳定的工作平台。而定制板更轻巧，并且完全为骑手量身定制，因此他们可以发挥出自己的能力。开发网页时也是如此。
当然，您可以使用弹出式网站创建者来制作您的网站，但是您将向其余的Web制作世界展示您真正的菜鸟数量，因为您的网站加载速度很慢，而且kb很大并有很多额外的HTML和CSS使其起作用。
＃1：编写自己的自定义CSS和HTML
自定义CSS和HTML始终可以使您的网站快速运行。始终尝试减少您使用的DOM元素的数量，换句话说，如果您不需要HTML标记，请尽量减少它。
这是一个很好的示例，该示例在网站的页脚中使用了不需要使用列表的位置
<div class =“ example-footer-1”>
<ul>
<li>＆copy; <a href="#">我的网站2011 </a> </ li>
<li> <a href="#">隐私声明</a> </ li>
<li> <a href="#">站点地图</a> </ li>
<li>由<a href="#">我的出色公司</a> </ li>创建的网站
</ ul>
</ div>
HTML的235个字符
.example-footer-1 {
内边距：20px;
border-top：实心1px #cccccc;
border-bottom：solid 1px #cccccc
}
.example-footer-1 ul {
list-style-type：无；
填充：0;
margin：0}
.example-footer-1 ul li {margin-right：3px; display：inline}
215个CSS字符
在哪里
<div class =“ example-footer-2”>
<p>
＆复制; <a href="#">我的网站2011 </a>
<a href="#">隐私声明</a>
<a href="#">站点地图</a>
<a href="#">我令人赞叹的公司</a>创建的网站
</ p>
</ div>
HTML的197个字符
.example-footer-2 {
内边距：20px;
边框：实心1px #ccc;
border-width：1px 0
}
.example-footer-2 p {padding：0; margin：0}
.example-footer-2 a {margin：0 3px 0 0}
153个CSS字符
单击此处在单个演示文件中查看两个不同的示例。
示例2中的不同之处在于
**1）**设置所有边框的边框宽度，然后取消设置侧面的边框宽度，而不是专门设置顶部和底部的边框。
**2）**使用#ccc而不是#cccccc的较短形式将边框宽度颜色减少了3个字符。
**3）**没有使用列表，因为这实际上不是列表。仅在HTML中使用了A标签。对于许多设计师和弹出窗口制造商来说，在此处使用列表是很常见的做法。
**4）**更改了段落标记的列表，以保持HTML验证正确，这将每个列表元素的链接减少了9个字符。不再需要'<li>'和'</ li>'，更改'<ul>'和'<p>'可以保存字符的顶部和底部。
**5）**将margin语句从margin-right：3px更改为margin：0 3px 0 0，尽管如果一次使用多个margin语句不会节省任何空间。
＃2：摆脱不必要的空格，制表符和回车符
如果您使用W3C，WordPress或其他工具进行检查，则建议您以自上而下的方式编写CSS，例如，编写CSS的官方方法需要回车，制表符和空格以提高可靠性。
.example {
内边距：20px;
边框：1px实心#ccc;
border-width：1px 0px;
}
字符数90、4个回车符和3个制表符
如果您想要一个更快的站点，则在编码时应尽量减少它：
.example {padding：20px; border：solid 1px #ccc; border-width：1px 0;}
字符数64，没有回车，没有多余的空格，没有多余的字符，也没有制表符。
这里发生的事情很简单，多余的绒毛被去除了。它仍然会很愉快地验证，但不会占用太多空间。
为了节省大量时间，您可以使用文本编辑器或IDE来完成大部分工作。这里有很多可以运行的查找和替换语句。
- 用。。。来代替 "{"
- 将"}"替换为"}" ^[1]^
- 用"："替换"：" ^[1]^
- 用。。。来代替 "："
- 取代"；"和";" ^[1]^
- 替换为";" 与";" ^[1]^
- 用。。。来代替 "，"
- 将" 0px"替换为" 0"
- 用" 0"替换" 0em"
^[1]^值得连续运行2或3次这些命令以消除所有那些不需要的空间。
切记： CSS缩小工具将永远无法像手工获得的那样高效。以W3 Total Cache的缩小为例，它不会删除冒号之前/之后，大括号前或逗号之后的空格。W3总体缓存的优点是删除回车符，这有助于使文件完全可读。
＃3：在每个CSS语句的末尾删除不需要的分号
以有效的无空格，制表符或回车符返回CSS语句，我们可以通过删除语句末尾的最后一个分号来使其短1个字符
.example {padding：20px; border：solid 1px #ccc; border-width：1px 0;}
......变成......
.example {padding：20px; border：solid 1px #ccc; border-width：1px 0}
因此，我们的64个字符长的语句变为63个字符长。
如果您认为一个CSS文件中通常有200个以上的CSS语句，则每个语句可节省1个字符，因此例如对于200个语句文件，将删除200bytes。如果您寻找";}"并替换为"}"，则轻松删除
＃4：正确学习CSS
您可能会认为我正在教您用这一说法吸鸡蛋，但是请继续关注我。我经常从其他人的设计和代码中看到，他们不了解CSS如何正常工作。他们很可能通过在各处阅读网站来解决问题，而不必了解情况的真相。毕竟，互联网上有很多盲人领导盲人。因此，请切掉胡扯，让自己对CSS有一定的了解。例如，在我见过的公司重新编码的几乎每个网站上，我都看到过：
li {list-style-type：none}
不应将其应用于列表元素，而应应用于整个列表，像这样
ul {list-style-type：none}
或以浪费空间或愚蠢代码为例
#header {width：auto; 保证金：0自动；}
#footer {margin：0 0px 0 0px; 填充：0 0 0px 0}
#sidebar {
背景图片：url（images / image.png）;
背景位置：中心顶部；
背景颜色：透明；
背景重复：不重复
}
在#header必须为自动边距应用特定宽度以使其居中的情况下，因此浪费了2位代码，仅使边距底部和0的顶部处于活动状态。
#footer可能只是 margin:0;padding:0;
#sidebar本来可以 background:transparent url(images/image.png) no-repeat center top;
对于大型公司或小型设计公司，通常我在每个站点上都做得很快。这通常来自两个地方，一个是不真正编码的设计师，另一个是不真正了解CSS的后端编码器。
帮自己一个忙，并获得有关该主题的一些书，不要依赖网站在这里为您提供答案。就个人而言，我发现Sitepoint书籍最易读。哦，请尽力理解浏览器及其CSS级别之间的区别，以便在仍需要为企业支持IE6时优雅地降级代码。
＃5：提防浪费的CSS重置
许多人在其CSS代码的开头使用CSS重置来尝试在所有浏览器上获得一个公平的竞争环境。虽然我觉得这是个好主意，但执行过程经常会被误导。
根据Richard Clarke定义的mashable.com使用此CSS重置
html，body，div，span，object，iframe，
h1，h2，h3，h4，h5，h6，p，blockquote，pre，
缩写，地址，引用，代码，
del，dfn，em，img，ins，kbd，q，样本，
小，强，子，sup，var，
b，i，dl，dt，dd，ol，ul，li，
字段集，表单，标签，图例，
表格，标题，tbody，tfoot，thead，tr，th，td，
文章，放在一边，画布，细节，figcaption，图，
页脚，页眉，hgroup，菜单，导航，部分，摘要，
时间，标记，音频，视频{
边距：0;
填充：0;
边界：0;
轮廓：0
字体大小：100％；
垂直对齐：基线；
背景：透明；}
在许多地方，这再浪费不过了。让我们分开一秒钟。
footer, nav, section, label, dfn, cite, kbrd, code, samp, b, i, strong, em, canvas, tr, thead, tfoot, tbody, span, var＆div根本不需要出现在此列表中，因为所有浏览器都已经预先定义了它们，因为没有填充，没有边距，没有背景，没有边框，没有轮廓，没有应用的字体大小。浪费的空间。
sup, small＆sub不应将字体大小设为100％，因为它们的大小应与文本其余部分的大小不同，使其设为100％会扼杀它的意义。再次浪费了空间。
sup并且sub不应使基线垂直对齐，sup使其变小并高于线，sub使其变小并低于线。
我会争辩说，th并且td应该这样，vertical-align:top因为这几乎总是它们的使用方式，实际上它们需要text-align:left使它们保持一致，例如在某些浏览器中位于中间，而在某些浏览器中则位于左侧。
在处理整个页面之前，浏览器必须考虑很多浪费的空间以及许多额外的应用项。由于这些规则首先出现在页面中，因此它们将应用于页面上的所有项目，然后CSS将覆盖它。基本上，这会减慢所有操作的速度，并使您的CSS文件大于所需的大小。到处都是浪费时间，不要误以为"网络奶油"知道他们在做什么，他们也只是剪切和粘贴。
＃6：用gzip压缩CSS
Gzip与您几乎每天都会使用的普通zip非常相似。它是一种用于将文件压缩到最小大小的工具，这样，当文件发送到浏览器时，它们将使用较少的网络带宽。
如果您的服务器允许，无论是apache，tomcat，lighttp还是IIS，请始终gzip CSS。请注意，许多托管公司将关闭其服务器的gzip，因为这样做需要更多的处理能力，并且他们不希望其服务器有任何滞后。另请注意，如果您是一个非常受欢迎的网站，则对内容进行gzip压缩的额外处理可能会损害服务器性能，因此您可能必须投资增加处理能力。
gzip'ing有不同的级别，总体上，大多数人使用'-9'或'level 9'gzip'ing，因为gzip'ing使文件最小，但也需要最大的处理能力。
有关更多详细信息和完整说明，将很快在本系列的"为速度配置服务器"部分中。
***切记：***并非所有的浏览器都可以处理gzip'ing，并且某些浏览器安全工具会阻止gzip'ing的使用，因此首先要重点放在一个小的CSS文件上。
＃7：将样式表放在顶部
始终，始终将样式表始终放在HTML的HEAD部分的顶部，正好在标题下方。这是因为它希望尽快下载，以便可以将其应用于页面。出于任何原因，请勿将STYLE标记放入html正文中，除非该标记对于该特定任务是100％必需的，请将其添加到外部样式表中。
＃8：始终使用外部样式表
外部样式表很不错，因为它们可以gzip压缩并缓存在浏览器中，如果将样式放在行内，则每次加载页面时都会重新加载样式表，从而缩短了响应时间。
＃9：不要使用CSS表达式
CSS表达式的支持较差，并且需要更多处理能力。例如，如果要根据一天中的时间设置不同的背景色，请在服务器端通过动态生成CSS来实现，或者编写一些时髦的Javascript来完成所有文件的加载后再执行相同的任务这一页。
＃10：请勿使用@import使用链接
有些人使用@import将CSS包含到HTML中，这是一个非常糟糕的主意，因为它会减慢速度，使用标准链接语法，并且一定要记住在其中设置正确的媒体类型：
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" >
＃11：在CSS文件上设置浏览器缓存
在浏览器上进行缓存是您告诉浏览器CSS文件在一段时间内不会更改的地方。这可以是1小时，1天，1个月，1年，100年或任何您选择的时间。只要浏览器没有清空缓存，它就会从本地存储中重新加载CSS文件，并且不会向您的服务器询问。这有两个明显的好处，首先，它从服务器加载的文件更少，这意味着服务器可以一次具有更多的连接，其次，CSS文件是从本地内存加载的，而不是服务器加载的100毫秒。
有关更多详细信息和完整说明，请参阅本系列的"为速度配置服务器"部分。
***切记：***浏览器一次只能与服务器建立如此多的连接，它必须等待每个连接可用才能使用，除了服务器允许浏览器执行其他任务（例如下载图像）之前，浏览器还必须移至其他位置或HTML。
＃12：使用内容分发网络（CDN）
内容交付网络是仅提供内容的服务器的全球基础结构。这样的想法是，如果您的服务器位于加利福尼亚州，并且您有来自德国的访问者，那么如果没有CDN，他们将不得不从加利福尼亚州获取所有文件，从而在往返该网络上花费了很多额外的网络时间。但是，使用CDN时，用户不必一直回到加利福尼亚获取该信息，而是可以转到德国的本地服务器。实际上，取决于您的CDN托管公司，它们可能比仅去德国的地方要好，例如，如果它们来自慕尼黑，则可能会去巴伐利亚的服务器。
对于那些站点非常繁忙的站点而言，内容交付网络实际上只是一个可行的选择，而这一切都取决于成本。例如，我上次检查时从亚马逊网络服务获得的S3 CDN，每月最低需要花费$ 150，然后根据选择的选项迅速提高到非常大的数字。这确实将CDN置于大多数网站的范围之外。但是，作为Web设计师/创建者，您可以投资CDN，然后将其转售给托管包中的所有客户。
以下是CDN顶级托管公司的列表...
Akami --所有内容交付公司中的老爹（或者我应该说是大浪），第一家也是最好的，但是要花上大笔钱。明确的企业选择，非常好的工作伙伴，非常有帮助。
Max-CDN --由SpeckyBoy使用，并且由WordPress的W3 Total缓存插件支持，价格合理。
Highwinds --我自己用于WordPress的Share and Follow插件，因为它提供了与其他许多插件不同的安全性，并且价格很高。
Amazon S3 --来自Amazon Web Services。昂贵但很好，但是定价选项的确增加了混乱，并且花费了大量时间来获得正确的交易。
Limelight --没有使用此CDN的个人经验，但是我没有听到任何不良报告。
***请记住：***使用与您的服务器DNS名称不同的DNS名称作为CDN网络的名称，否则它将发送无意义的Cookie信息。也不要使用子域，它仍然会发送该Cookie信息。
＃13：尝试减少后代选择器的使用
设计师经常使用后代选择器来明确定义页面元素的外观。返回页面顶部的示例：
.example-footer-1 {
内边距：20px;
border-top：实心1px #cccccc;
border-bottom：solid 1px #cccccc
}
.example-footer-1 ul {list-style-type：none; padding：0; margin：0}
.example-footer-1 ul li {margin-right：3px; display：inline}
（为了便于阅读，添加了回车符）
实际上，如果设置为：
ul {list-style-type：none; padding：0; margin：0}
li {margin-right：3px; display：inline}
.example-footer-1 {
内边距：20px;
border-top：实心1px #cccccc;
border-bottom：solid 1px #cccccc
}
（增加了回车以提高可读性）
这是更快的方法，因为浏览器不必一直寻找.example-footer-1，并且当知道ul和li已设置时，它便会下降。这是您必须尝试使用的"设置并忘记"方法。
这可以应用于您所有网站的设计，以最大程度地发挥网站的速度，但这当然是速度与美观之间的平衡。
＃14：一起添加东西以节省空间
通常，在创建网站时，大多数CSS代码在整个页面中都会重复很多次。因此，例如在某些情况下，可能会使用相同的边距，边框和内边距，但对每个边框进行了明显不同的调整。
.list1 {margin：0; 填充：0; 边框：纯色1px红色}
.list2 {margin：0; 填充：0; 边框：纯色1px绿色}
.list3 {margin：0 5px; 填充：0; 边框：纯色1px黑色}
可以更有效地写成
.list1，.list2，.list3 {margin：0; 填充：0; 边框：纯色1px红色}
.list2 {border-color：green}
.list3 {border-color：black; margin：0 5px}
在个人层面上，我倾向于做些不同的是圆角。与其将它们依次应用于每个CSS元素，我倾向于创建已经具有圆角设置的1或2类，并将它们应用于HTML。例如
。舍入
{-moz-border-radius：3px; border-radius：3px; -webkit-border-radius：3px}
.rounded-big
{-moz-border-radius：15px; border-radius：15px; -webkit-border-radius：15px}
.rounded-top {
-moz-border-radius-topleft：3px; border-top-left-radius：3px;
-webkit-border-top-left-radius：3px; -moz-border-radius-topright：3px;
border-top-right-radius：3px; -webkit-border-top-right-radius：3px;
}
＃15：将所有CSS合并为1个文件
当每个页面的连接数减少时，所有Web服务器和页面的工作速度都会更快。因此，考虑到这一点，只有一个CSS文件被调用（gzip，缓存和放在CDN上）要快得多，而不是很多。每个对新文件的请求都将花费额外的时间，通常需要进行DNS查找，交换cookie信息并必须等待与服务器的连接。只需将所有CSS添加到一个文件中，即可消除所有这些废话。
＃16：尽最大努力使CSS文件低于25k
如果您的文件可以保存到25k以下，则iPhone和其他移动设备将对其进行缓存。如果他们是您的目标受众，这非常重要。如果文件被缓存，将不会再次下载。
＃17：如果您不使用它，请不要发送它
假设您正在为花店创建一个站点，并正在为其修改WordPress的二十一主题。您能想到在任何情况下都使用CODE标签的情况吗？我也不能。所以不要将CSS发送给客户端。如果您不使用abbr，sub，sub blockquote等，也可以将这种方法应用于可能也要使用的CSS重置，请将其从CSS编码中删除。同样，如果您正在制作的网站没有评论，请不要包括所有处理评论的CSS。
这是一条简单的规则，但经常被遗忘，尤其是在适应他人的工作作为起点时。
＃18：缩小CSS
在花了一些时间来节省所有空间后，您要做的最后一件事就是缩小CSS以使其尽可能地小。这是在正式拥有有价值的CSS之前应该做的事情。
进行压缩的方法有几种，您可以在使用此在线CSS压缩器，在PC上的本地应用程序（例如YUI Compressor）或服务器上作为服务器任务的服务器上的本地应用程序上载CSS之前完成此任务为浏览器加载CSS文件的时间。与以往一样，最好先缩小然后再上传，因为提供缩小的文件所需的服务器资源更少。
请记住，如果在将其放到服务器上之前将其最小化，则或多或少将无法再读取该文件。
围捕
好了，这就是"网站速度"系列第一部分的结尾。我将在以后的版本中介绍更多内容，以便为您提供一套完善的工具，以帮助他们尽快完成任务。
请记住，这些项目中的每一项都来自多年的经验，因此在这18个项目中都没有浪费任何精力。每个人都会帮助您加快网站速度。
当然，如果您不能等那么长时间，并且需要有人用神奇的魔杖在您的站点上挥舞，给我发邮件，我自己和我的团队将很乐意在所有速度方面对您进行分类。
