作为我担任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个项目中都没有浪费任何精力。每个人都会帮助您加快网站速度。
当然,如果您不能等那么长时间,并且需要有人用神奇的魔杖在您的站点上挥舞,给我发邮件,我自己和我的团队将很乐意在所有速度方面对您进行分类。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.yuankufang.com",如遇到无法解压的请联系管理员!
源库坊 » 网站加速第1部分: 如何编写更高效的CSS来加速您的网站
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 源库坊