网站前端,web前端,前端脚本,前端优化|时代前端 » 优化 http://www.52shidai.com 网站前端研究中心 Thu, 02 Feb 2012 03:36:54 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 RSS对网站SEO优化的好处 http://www.52shidai.com/seo/883.html http://www.52shidai.com/seo/883.html#comments Tue, 10 Jan 2012 05:08:04 +0000 admin http://www.52shidai.com/?p=883 做了很长时间网站优化，发现大多数人都是使用发博客，论坛签名等这些常用推广手法，却很少有人知道RSS推广，虽然RSS它是对网站优化没有直接帮助，但是可以间接得从很多个方面帮助网站提升排名，下面给大家介绍一下如何做RSS推广，时代前端在RSS优化主要是有这几个方面的效果。
一. 什么是RSS
RSS是网站共享的一种方式，一般会用在新闻和博客上。这种按顺序排列的网站如果提供RSS输出，那么用户就可以直接在客户端看到其最新更新和动态。即在不打开网站内容页面的情况下阅读支持RSS输出的网站内容。它是一种可利用的营销手段，现在很多主流博客都支持RSS订阅。
二.RSS可以间接影响排名
RSS阅读方便了其它网站引用你的网站数据，虽然不能直接提高排名，但是可以提高网站的流量，现在很多搜索引擎都支持RSS，以后这个也有可能是计算排名的因素，RSS使文章内容更容易被搜索引擎引用。
三.编写RSS
在编写RSS之前我们来熟悉以下它的几个基本元素，强制属性version，用于指定当前版本;唯一子元素 channel，它主要包含网站或栏目的信息内容;还有title，网页的标题;link，网站或栏目的URL;还有description：网站或栏目的简要描述。还有其它的一些，这里就不一一介绍。在我们了解RSS的简单结构和用法后，就可以在最常用的记事本中手工编辑RSS了，这里介绍静态的添加方法，在添加过程中每行都需要一一对应，重点是文字部分，特别是URL，不可出现错误，否则就会出现错误。在这样添加完毕后，就可以保持，文件的后缀为.xml格式，我们在网站上要加上给文件的链接，放在明显的头部位置。这样网站就拥有了自己的RSS输出。对于动态的程序而言，则需要通过程序来转换内容。大家可以在网上下载转换模板，但一般需要修改数据库链接部分的参数数据。包括数据库字段都需要根据自身网站的情况简单做修改，成功后，我们的RSS输出地址就会自动生产。但需要注意的是，大部分RSS生成需要Framework框架的支持，大家可以百度搜索一下，有很多下载的。

RSS是网站共享的一种方式，一般会用在新闻和博客上。这种按顺序排列的网站如果提供RSS输出，那么用户就可以直接在客户端看到其最新更新和动态。即在不打开网站内容页面的情况下阅读支持RSS输出的网站内容。它是一种可利用的营销手段，现在很多主流博客都支持RSS订阅。

您可能感兴趣的文章

]]> http://www.52shidai.com/seo/883.html/feed 1 如何优化网站内链建设 http://www.52shidai.com/seo/877.html http://www.52shidai.com/seo/877.html#comments Thu, 05 Jan 2012 05:08:36 +0000 admin http://www.52shidai.com/?p=877 做好网站的内部优化，无论是从用户体验角度来看，还是从搜索引擎对于网站索引的便捷性来说，其目的都是为其带来最大的便捷性。如此一来，还怕搜索引擎不眷顾你的站吗?至少完善的内部优化，是正视网站优化的表现。

搜索引擎排名如何跨入决胜之列?不少人认为，只要持续的做好外链、内容的更新，便可将权重累计上去。事实上，这的确是一个卓有成效的办法，但却是“没办法的办法”，其用意完全与SEO优化的初衷悖逆。二进制在这里要说的是，网站优化想要高效提升排名，做好基础优化，必不可少，且高效的优化方式更易使努力效果事半功倍。那么如何让网站内链建设的精益求精呢?

首先，我们要了解，网站内链优化到底需要优化哪些东西。有些链接的优化可以一概而过，而有些链接的优化则需要细心呵护的走好每一步。如何更快捷高效的提高内链优化呢?如下我们进一步了解：

一：内链描文本优化

如何让网站内链建设精益求精

内容中的描文本优化是建设出庞大内链的重要组成，那么其中有何技巧呢?在内链描文本中，大部分站长都犯着一个通病：描文本描首页URL。如此一来，只是单一的提升了网站首页链接的特定关键字在搜索引擎中的排名，但就网站整体权重的提升却大打折扣。通过观察“百度”自身我们可以发现，合理的关键字描文本更该遍布出全站的内页链接。以网站诸多的长尾关键字普及起来，来整体提升网站的权重。但我们不是百度，况且自身权重如果偏低的话，内链描文本越多，那么每个文本所分到的权重也将越少。因此二进制网络/贺贵江，建议站长：每篇文章中，描文本不要超过5个，最好定义为三个，头部一个重要描文本，可描首页链接，其它几个描文本则用来建设内链长尾词。

二：相关阅读优化

相关文章有什么用?其意义不仅仅是供用户参考到更多相关的东西，更重要的是可以使同类文章得到一个归类，加强文档相关性。同文章的归类，会形成一个专题，在搜索引擎规则中，相关性越强文章的链接，更易提升优化关键字的权重。另外一方面便是减少用户跳出网站的时间，搜索引擎在这方面也有权重划分。良好的归类，不仅会让网站留得住更多用户，更提升了搜索引擎从用户体验角度而赋予网站的权重，我们何乐而不为呢?同时TAG标签也大同小异，都是属于文章归档后提升长尾词与页面的优化。

三：导航权重划分

不要小看导航的作用，结构设计的若不合理，完全有可能使网站埋下降权的隐患，如：SITE首页不在第一，绝大部分因素都是因导航权重分配不合理酿造。同时还有一些网站，本身导航在搜索引擎看来根本不可见，却茫然不知。所以，二进制在这里建议广大站长：网站导航尽量少做各式各样的特效优化，更避免使用flash导航，以免影造成严重的全局优化危机。正确的导航优化更因严谨的遵守树形规则，依次分层进行优化，切记频道栏目主次链接交错试导航。

四：精优内部链接

内链不是越错综复杂越好吗?答案是否定的，所谓的“错综复杂”也必须建立在“杂而不乱”的基础之上进行优化。否则网站链接越多，网站则越向“链接工场”类型网站靠拢，试问那样的网站，搜索引擎还会青睐吗?而完善的内链优化，更要对网站的内部链接做出精简，如：利用“nofollow”去屏蔽无关紧要的超文本链接，“联系我们、评论”等等。同时再利用RObots.txt文件对一些重复性很强的链接进行屏蔽，加强最后的完善优化。

您可能感兴趣的文章

]]> http://www.52shidai.com/seo/877.html/feed 2 wordpress博客seo优化指南 http://www.52shidai.com/seo/844.html http://www.52shidai.com/seo/844.html#comments Tue, 20 Dec 2011 13:59:53 +0000 admin http://www.52shidai.com/?p=844 wordpress博客seo优化指南——评论的处理：

以前考虑过通过JS、iframe之类的方式尽量让搜索引擎无法读取到WP评论上面的内容，没能实现，如果有人知道的话希望能告知下。

个人认为WP评论的两个比较大的问题是：

1、留言太多时它比正文内容都多，页面的主题往往不知道飘哪去了。

2、spammer太多，来个人用SB，Xrumer之类的工具群发留言倒算了，你也是为了你的利益，虽然不爽还是能理解那么点。但有些人把关键词作为自己的名字，辛苦手工spam，我很不解的是，真的有效果么。。

当绝大多数博客使用了nofollow时，这么的效果已经很小了。而且就算说nofollow链接对于百度还会传递锚文本效果，那比起spam耗费的时间精力来，这也是丝毫划不来的。

稍微再提下Comments Link Redirect插件，它的原理大致是把B留在A博客上面的链接，改成：http://a.com/redirect.php?r=http://b.com，然后在robots文件里面再把redirect.php屏蔽掉。的确可谓是终极防spam插件，可以考虑去使用。

wordpress博客seo优化指南

然后这张图是WP的设置->讨论里面的选项，建议勾选最下面的：评论者必须成功发表过评论。也就是说当一个读者第一次评论的时候，他的留言是必然会进入待审核名单的，要显示出评论的话，需要博主手工通过。以后那个读者再评论的时候，就可以直接通过了。对于人气不高的小博客而言，读者一般是比较固定的，那么这样的设置是比较不错的。

还有一个可以注意的是分页显示评论，我不清楚它具体怎么运作的，博客人气低。但看字面意思，应该能减少页面上显示出来的留言数量，可能对SEO有好处，不过也可能给读者带来不便，可以考虑使用。

另外一个防spam手段就是Akismet了，专门的反spam插件，因为spam的泛滥，所以这个插件是每个WP博客默认就带着的。但是要启用的话要申请一个API Key。不要被这个API Key的申请吓倒了，忘了怎么申请的，总之很容易很容易。

我以前的一个博客，301到现在的博客上面，但是有些url没跳转，包括后台地址，上次就没事去看了下后台，结果发现没开Akismet的情况下，几个月多出来几千条来自“国外友人”的留言。所以你应该知道Akismet的必要性了吧。

wordpress博客seo优化指南——栏目的排序：

有时候会想让栏目按照某个特定顺序来排列吧，那么就可以用Category Order插件来实现。安装插件后使用方式很方便，在设置页面里面把栏目按照一定顺序拖放就可以了。

或许会考虑把更多用户会点击的分类目录放前面吧，前段时间不是出来了百度热力图嘛，可以用那个看看那边点击比较多，那就把它放到更容易点击的位置。当然百度热力图不是每个人都能用。所以也有将就下的方法。比如这个开源的热力图程序：www.labsmedia.com/clickheat/index.html

不要问我怎么用，因为只是上次没事找了找而已，找到以后又怕麻烦没用。如果有人乐意去试试的话，欢迎反馈小白鼠报告。

另外最省事的方法就是看看自己那个栏目浏览的人比较多，Google Analytics什么的里面一看就知道了。

wordpress博客seo优化指南——后台显示流量统计数据：

说到Google Analytics，很多时候不做数据分析的话，仅仅看流量也能满足多数需求了，那么每次跑到Google那边去有点辛苦。

所以可以装一个Google Analyticator插件，按照它的说明折腾着设置下（一堆英文超复杂的设置没能看懂，总之我是关联了下自己的GA账号就结束了）。

其效果即是在WP控制板显示类似下图的东西：

wordpress博客seo优化指南

如你所见最近流量又减少了，因为文章更新频率下去了。果然顾及了论坛就顾及不了博客么（其实还是自己懒为主）。

WordPress基础SEO指南——前端优化：

至今为止，本来就慢的WP程序可能已经被装了更多拖累速度的插件，彻底变蜗牛了，对不起是我害的。

好吧，接下来要让它的速度继续快起来，主要是介绍一下这个插件：WP Super Cache。

还有个插件是：WP Minify，使用方法很简单，安装，开启，结束。它会把页面上加载的一堆CSS和JS都并到一个文件里面去。

然后或许会考虑CSS压缩吧，来个强力的CSSGaga，它能压缩CSS，还能压缩png和jpg，对于大型网站最重要的是，它有无敌的中国特色一键变灰功能，所以以后碰到网站要变熊猫的时候就不必彻夜加班了。

顺带一提压缩png，可能会有人要用到。Fireworks里面选择PNG8格式导出图片，然后跑一次CSSGaga（直接拖放到里面就可以），就可以把图片压缩到几乎最小的状态了。而且此时文件窗口里面会显示一长串火星文字，可以把它直接放到html代码里面。

然后么，WP的前段优化对于咱这些前段菜鸟们也就基本上是这些了。追求极致的快速的话（比如想让WP Super Cache缓存的快点），那么可以把模板里面调用网站名字的代码什么的直接用html写出来。

话说只是随便用了一下这些插件，然后跑一下PageSpeed就96分了，可见这些插件的强力。

WordPress基础SEO指南——外部发表文章：

WP有个XMLRPC协议，能通过它从远程发布文章，尽管直接写程序去用这个协议很麻烦，但有很多程序是能做到的。

比如采集程序、站群程序之类常见的以外，还有少数博客群建工具支持WP发布文章，也有专门发布这类博客的文章的程序，比如Windows Live Writter。如果仅仅是用来发布博文的话，推荐最后一个。

因为WP Super Cache无法让网站后台提速，所以发布文章有时是挺龟速的（我自己倒是不在意，但看到过不少人老是抱怨的），用第三方的程序来发表的话，就没有了这样的龟速问题。

WordPress基础SEO指南（番外篇）——改造小型CMS

以前在自己博客发表过的，后来改版删了。想想既然又写WP相关的文章，那么这篇应该也是有些人想要看的。比如用WP来改造一个企业站什么的，这样就比较方便。以下为原文：

对于WP的爱好者而言，经常是可能想着用WP来做CMS用的，但是毕竟WP是博客程序，难免有些困难。这里就稍微给出一些我自己在用的解决方式，肯定不是最好的，但应该也能将就着用。

首先要确定的一点是，对于大中型网站，不要考虑用WP来做，除非有强大的技术人员进行二次开发。不然例如相关文章这样的东西，可能会给服务器带来较大的压力。考虑做小型网站的话（这里指的大概是100-1000的页面规模），那么就继续看下去。

国内CMS最常见的与博客程序表面不同的地方，就是在首页上有一堆最新文章的显示，但显示的只是标题，而且都是一个区域显示一类文章的（比如某栏目最新文章，推荐文章）等等。

推荐文章之类的，可以用边栏实现，直接用“文本”那个东西，虽然麻烦点但的确是很傻瓜化。目前没找到更好的解决方式。或者就是页面代码里面直接写进去。有时如果只想在首页显示这个栏目的话，用Widget Logic这个插件可以实现。

某栏目最新文章这样的，记得以前看到过这样的插件，但是找不到了，现在我的做法是直接在代码里面插一段话：

<?php $posts = get_posts( “category=【栏目ID】&numberposts=【要显示的文章数量】” ); ?>
<?php if( $posts ) : ?>
<ul>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
<li><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

栏目ID的查看，可以通过安装WP Show IDs这个超级轻量级插件。

而栏目页列表的显示，如果希望文章只显示出前n字的话，使用wp-utf8-excerpt这个插件。注意一下在SEO角度上，这个插件生成的“阅读全文”的链接最好删除，或者nofollow，不然就是给每一篇文章加上至少一个无意义的锚文本。

这样以后，通过自己再改改代码，一个简单的披着CMS皮的WP大致上就可以完成了。

另外要注意的一点是，当文章多了以后，如果开有相关文章之类的插件，估计WP的速度会被拖到很慢，别告诉我你打算关掉这种霸气的SEO插件，那么除了关掉以外的另一种方式就是开启静态缓存，可以通过WP Super Cache来实现。

您可能感兴趣的文章

]]> http://www.52shidai.com/seo/844.html/feed 1 提高论坛网站流量的三点要素 http://www.52shidai.com/seo/817.html http://www.52shidai.com/seo/817.html#comments Wed, 30 Nov 2011 04:38:42 +0000 admin http://www.52shidai.com/?p=817 做论坛的站长都知道，判断论坛网站成功与否的第一个标准就是论坛的会员数量和人气，一个高人气的论坛不但能为论坛在带来大量的原创内容、丰富网站内涵，还能提高网站权重，为关键词带来良好的排名。没有一个论坛站长们不希望自己的论坛拥有上千的日IP，上万的会员数量(自己做的马甲除外)。因为只要有了一定流量的网站，光发布广告位就能为自己带来不错的收入。

但很多论坛都因为缺乏资源、缺乏内容等因素而无法进入人气赚人气的良性循环中。试想一下，游客进入新接触的论坛时，最容易吸引游客进入注册的因素是什么?当然是论坛人气和内容，但是作为一个新论坛网站该如何才能吸引游客进来，注册成为会员呢?以下是我个人对这方面总结的要点，总共有三个方面，分别从网站资源、内容和论坛活动入手，希望对还在为此忧愁的站长有所帮助。

　一、准备丰富充足的论坛资源，为网站注入新鲜的血液

曾经有个老站长告诉我，建设论坛网站需要新鲜充足的资源，不然不要投入到论坛网站的怀抱。因为新鲜的资源是吸引会员的最佳粮食，试想一下，一个完全没有内容的论坛谁会去逛?咱们逛论坛还不就是为了追求一个能够获取资源分享经验的平台吗?如果没有这样的资源为论坛初期打好基础，要把论坛做好做大是一件不可能的事情。而这些资源包括能供应论坛每天更新的帖子，虽然这些内容可以通过采集的方法获得，但是这样做只会导致网站的内容重复，容易被搜索引擎发现从而出现被降权的惩罚，这是对论坛的长期发展非常不利的。所以我们在建论坛站的初期要准备充足的新鲜内容供网站更新，获得游客的青睐。

二、丰富论坛内容，杜绝垃圾帖

当吸引了一部分游客注册之后，相信论坛的会员规模会逐渐壮大，那么这时候就要注意了，人多了如果没有规矩就容易出乱子，就像热闹街道会留下很多垃圾一样，论坛也需要保持清洁。虽然网站出现大量的内容会有利于搜索引擎，但是垃圾内容只会令用户体验直线下降，从长期来看，会员看到这些内容的时候会越来越反感，到最后放弃你的网站。所以不能因为网站上去了而停止维护，要加大力度打击垃圾贴，打击垃圾贴的方法也很简单，指定相关的规定，如：禁止纯广告、标题党、纯外链帖等，然后招募相关的管理人员进行打理。

三、定期开展论坛活动，带动论坛氛围

相信有相当一部分站长都遇到过被论坛的活动吸引而成为会员的情况，我就曾经被一个论坛的活动吸引，很热情地参与了投稿的活动，因为那个论坛提供了投稿数量第一名的送首页10个广告位，那是多么大的好处啊，能不诱人么!当一个论坛发起一项诱人的活动时，无论是路过的游客还是已经注册的会员，都能够为网站聚集人气。活动的方式一般分为两种形式，一种是线上活动，如：投稿送广告、发帖送积分、活跃送友链等等;一种是线下活动，如：登山、摄影会、讲座等，可以根据论坛的类型提供不同的活动，在这里就不一一罗列出来了。

当然，除了以上要注意的几点以外，还有一些细节方面的内容，限于篇幅长度，以后再分享吧!希望以上的经验能为做论坛的站长提供一些参考，如果有写得不对的地方，请多多指正噢!

您可能感兴趣的文章

]]> http://www.52shidai.com/seo/817.html/feed 0 Flickr 的开发者的 Web 应用优化技巧 http://www.52shidai.com/web-front/809.html http://www.52shidai.com/web-front/809.html#comments Sat, 26 Nov 2011 07:20:31 +0000 admin http://www.52shidai.com/?p=809 Cal Henderson　是大名鼎鼎的 Flickr 网站的开发者之一．在一篇名为 Serving JavaScript Fast的文章中，他介绍了用于 Flickr 站点应用优化的技巧，读罢感觉获益良多．”嚼一下别人的馍”，概括一下该文的主要内容．

Flickr 是 Web 2.0 的代表站点。面对的网络问题除了一般 Web 站点都会有的内容优化之外, 还有必须要灵活处理 JavaScript 与 CSS 的频繁变化后部署分发带来的复杂性。

设定文件大小的策略 首先面临的一个问题是把所有的 JavaScript 与 CSS 放到一个文件中好呢，还是分割成多个文件 ? 从减少网络请求的角度上考虑, 前者更好，后者差。但是从并行的角度考虑, IE 与 Firefox 默认情况下都只能同时从一个域请求两个资源. 这会在很多情况下给用户带来不良的使用体验–必须所有的文件都下载完毕才可以看到像样的页面. Flickr 采用了折衷的办法–在保持文件数量尽可能少的情况下，把 JavaScript 与 CSS 分成多个子文件. 这在开发上带来了复杂性，但是对性能的收益是巨大的。

压缩的优化问题 毫无疑问，对站点内容进行压缩是一个比较常用的 Web 优化手段．但是并不一定都能达到理想的效果．原因在于 mod-gzip 模块不但消耗服务器端 CPU 资源，也消耗客户端 CPU 资源. 而且, mod_gzip 压缩文件后创建的临时文件是放到磁盘上的，这也会给磁盘 IO带来严重的问题. Flickr 采用的是 Httpd 2.x 以后支持的　mod_deflate 模块．压缩操作都在内存中进行．mod_deflate 在 Httpd 1.x 是不可用的, 不过可以通过创建 RAM 盘的方式来间接提高性能．

当然, mod_gzip 到也不是一无是处, 对于预压缩的文件, 还是有好处的. 而且, 采用压缩的时候,也要注意策略. 图片文件压缩就没什么必要了(Flickr 上图像多, 而且压缩得不到什么好处). Flickr 只对 JavaScript 和 CSS 进行压缩. mod_gzip 新一点的版本能够自动通过配置 mod_gzip_update_static 选项自动处理 预压缩的文件. Cal 也指出这个特性在一些旧版本的浏览器上会出问题.

压缩的另一个主要手段是内容的压缩. 针对 JavaScript 可以进行通过减少注释、合并空格、使用紧凑的语法等小技巧(Google 的所有脚本都非常难读，而且非常紧凑，思想类似).当然，经过这样处理的 JavaScript 可能带了很多括号不容易解析，Flickr 使用了 Dojo Compressor 来构建解析树。Dojo Compressor 开销很低，而且对于最终用户是透明的. JavaScript 的处理方法介绍过，CSS 处理则相对简单.通过简单的正则表达式替换(比如把多个空格替换为一个空格符), 最高可以获得 50% 的压缩比。

Caching 的优化 Flickr 的开发者充分利用了 Http 1.1 规范定义的 Etag 与 Last-Modified 机制来提高 Caching 的效率. 值得注意的是，Cal 介绍了一个在负载均衡条件下的 e-Tag 小技巧. 即可以设定 Apache 通过文件调整时间与文件大小获得 E-Tag ,而默认情况下, Apache 是通过文件节点获取 e-Tag 的。当然，这也不是很完美，因为会影响 if-modified-since 。

灵活运用 mod_rewrite 据说 Flickr 网站应用是进行每日构建的(Daily Build)。 如果没有一个灵活的机制恐怕这是不可想象的。而且，在 Flickr 这样的站点, 内容的修改同步的处理都是很让人头疼的难题. 他们的利器是 mod_rewrite 的灵活运用。通过配置 URL 重写规则，很容易切换到不同的环境下。听起来很简单, 但是没有一定的 Web 技术功力谈何容易做到 ?!

通过这几个主要方法的运用，我们看到了如梦幻一般高性能的 Flickr .
BTW: 因为在 Flickr 在国内没有服务器, 大陆用户访问的速度就别提了 :(

您可能感兴趣的文章

]]> http://www.52shidai.com/web-front/809.html/feed 0 Web 前端优化最佳实践之 Mobile(iPhone) 篇 http://www.52shidai.com/web-front/806.html http://www.52shidai.com/web-front/806.html#comments Sat, 26 Nov 2011 07:16:44 +0000 admin http://www.52shidai.com/?p=806 Web 前端优化最佳实践最后一部分是针对移动应用的，其实只是针对 iPhone 的，目前只有两条规则。

1. 单个数据对象小于 25K (Keep Components under 25K)

这个似乎只是针对 iPhone 研究的。建议保持单个 Web 数据对象在 25 K 以下。为什么是 25K? Apple 官方信息指出可缓存到内存中的 Web 对象最大支持到 10M，但经过测试，发现也就是 25K 左右。

iPhone 在市场上的优异表现，让 Web 人员不得不考虑如何针对其进行优化。相信这部分内容也在不断变化中。

2. Pack Components into a Multipart Document

把Web 页面组件打包成一个多部分组成的文档。其目的是减少 HTTP 请求。对这部分语焉不详，等待后续更新吧。

–EOF–

Updated: 根据这篇 iPhone caching 的文章，可供 Cache 的最大单个数据对象是 15K，而不是前面说的 25K。iPhone 总的 Cache Size 为 1.5M。浏览器地址栏的刷新按钮将导致无条件刷新所有组件。这些也是挺有趣的。

您可能感兴趣的文章

]]> http://www.52shidai.com/web-front/806.html/feed 1 Web 前端优化最佳实践之 图象篇 http://www.52shidai.com/web-front/804.html http://www.52shidai.com/web-front/804.html#comments Sat, 26 Nov 2011 07:15:49 +0000 admin http://www.52shidai.com/?p=804 Web 前端优化最佳实践第六部分面向 图片(Image)，这部分目前有 4 条规则。在最近的 Velocity 2008 技术大会上，Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making 也非常有参考价值。结合一起说一下。

1. 优化图片 (Optimize Images)

使用 GIF 、JPG 还是 PNG 格式的图片? 尽可能的使用 PNG 格式的图片，更多的功能，更小的尺寸(与 GIF 相比)。

对于 PNG 图片，考虑用 Pngcrush 或类似的工具进行优化。常见的工具如下表:

  • pngcrush http://pmt.sourceforge.net/pngcrush/
  • pngrewrite http://www.pobox.com/~jason1/pngrewrite/
  • OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (refer: 教程)
  • PNGOut http://advsys.net/ken/utils.htm

另请参见: Five Tips For the Effective Use of PNG Images

对 JPEG 图片的优化工具：

必需要强调的是，图片设计的同学啊，请考虑设计面向 Web 的图片，不要动不动就设计超过可接受尺寸之外大家伙，这应该是一种习惯，而不是什么高超的技能，只需要记住就成了。

2. 使用 CSS Sprites 技巧对图片优化 (Optimize CSS Sprites)

之前提到过，简单的说就是”利用 CSS background 相关元素进行背景图绝对定位”，把多次HTTP 调用变为一次调用，更多参考：CSS Sprites: Image Slicing’s Kiss of Death

补充一下：对于这个技巧我曾经见到有人滥用的。把多个背景图片揉成一个，减少　HTTP 调用，这是一个很好的思路。但一定要记住这个大图片不能太”重”，我看到过 100 多K 的背景图。一个图片就把整个网站拖得很慢。比较好的例子可以参考雅虎关系的这个图.

更新：使用 CSS Sprites 的一个潜在的副作用是客户端将消耗更多内存(参考)。

3. 不要在 HTML 中使用缩放图片 (Don’t Scale Images in HTML)

更多的时候，可能是因为偷懒而没有制作合适大小的图片，如果是批量处理图片的话，可能一条 ImageMagic 命令（convert ）就能搞定 。必须提及的是，看到太多的对图片拉伸很难看的页面，救救这些页面!

4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)

更小，可缓存，这两条可能都不是问题。问题是，太多站点根本没有 favicon.ico 。有的时候，判断独立域名的 Blog 是否专业，基本看一下是否有 favicon.ico 就差不多了。

–EOF–

补充：视觉设计者应该尽量考虑控制图片大小，推荐在 200K 以下。这不是胡说的，参考页面。

您可能感兴趣的文章

]]> http://www.52shidai.com/web-front/804.html/feed 0 Web 前端优化最佳实践之 JavaScript 篇 http://www.52shidai.com/web-front/801.html http://www.52shidai.com/web-front/801.html#comments Sat, 26 Nov 2011 07:13:34 +0000 admin http://www.52shidai.com/?p=801 Web 前端优化最佳实践之 JavaScript 篇，这部分有 6 条规则，和 CSS 篇 重复的有几条。前端优化最佳实践，最重要的还是”实践”，要理解这东西容易得很，关键是要去”实践”，去”执行”，去”反馈”，去获取受益。

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

当一个脚本在下载的时候，浏览器干不了其它的事儿(串行了)。所以，把它扔到最后面去处理。对于一些功能性的脚本，可能实现起来有些两难。不过对于国内网站来说，有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说，绝对可行的建议，放到页面最底下。

2. Make JavaScript and CSS External

参见 CSS 篇的描述

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

参见 CSS 篇的描述

4. 移除重复脚本 (Remove Duplicate Scripts)

对于一些历史遗留站点或是论坛类的网站来说，这倒是比较常见的。接手维护人前后变化过多，每个人都有自己的一套。这就会带来一些潜在的麻烦。

5. 减少 DOM 访问 (Minimize DOM Access)

有三条指导建议:

  • 缓存已经访问过的元素 (Cache references to accessed elements)
  • “离线”更新节点, 再将它们添加到树中 (Update nodes “offline” and then add them to the tree)
  • 避免使用 JavaScript 输出页面布局–应该是 CSS 的事儿 (Avoid fixing layout with JavaScript)

6. Develop Smart Event Handlers

除了英文解释外，这里也提醒一下注意关于 Java Script 内存泄漏的问题。

另外推荐一篇《如何优化 JavaScript 脚本的性能》，关于 Ajax 优化指导原则，可以参见 提高 Ajax 应用程序性能，避开 Web 服务漏洞。

后记1) ：整理得差不多之后，发现网络上已经有一篇 《Yahoo!网站性能最佳体验的34条黄金守则》，是翻译稿。看来我做了一部分重复劳动。

后记 2)：CSS / JavaScript 都有优化规则。但似乎缺少了对 Flash 的优化实践。

您可能感兴趣的文章

]]> http://www.52shidai.com/web-front/801.html/feed 0 Web 前端优化最佳实践之 CSS 篇 http://www.52shidai.com/web-front/799.html http://www.52shidai.com/web-front/799.html#comments Sat, 26 Nov 2011 07:11:31 +0000 admin http://www.52shidai.com/?p=799 Web 前端优化最佳实践第四部分面向 CSS。目前共计有 6 条实践规则。另请参见 Mozilla 开发者中心的文章：Writing Efficient CSS

1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)

官方的解释我觉得多少有点语焉不详。这一条其实和用户访问期望有关。CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。没有人喜欢等待，而浏览器已经考虑到了这一点。

2. 避免 CSS 表达式 (Avoid CSS Expressions)

个人认为通过 CSS 表达式能做到的事情，通过其它手段也同样能做到而且风险更小一些。

3. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。

4. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

如果没有 JavaScript 与 CSS 可能更好。但，这是不可能的，SO，尽量小点吧。语法能简写的简写。

5. 使用 <link> 而不是@importChoose <link> over @import

在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。

6. 避免使用Filter (Avoid Filters)

您可能感兴趣的文章

]]> http://www.52shidai.com/web-front/799.html/feed 0 Web 前端优化最佳实践之 Cookie 篇 http://www.52shidai.com/web-front/797.html http://www.52shidai.com/web-front/797.html#comments Sat, 26 Nov 2011 07:10:38 +0000 admin http://www.52shidai.com/?p=797 Web 前端优化最佳实践第三部分面向 Cookie 。目前只有 2 条实践规则。

1. 缩小 Cookie (Reduce Cookie Size)

Cookie 是个很有趣的话题。根据 RFC 2109 的描述，每个客户端最多保持 300 个 Cookie，针对每个域名最多 20 个 Cookie (实际上多数浏览器现在都比这个多，比如 Firefox 是 50 个) ，每个 Cookie 最多 4K，注意这里的 4K 根据不同的浏览器可能不是严格的 4096 。别扯远了，对于 Cookie 最重要的就是，尽量控制 Cookie 的大小，不要塞入一些无用的信息。

2. 针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)

这个话题在此前针对 Web 图片服务器的讨论中曾经提及。这里说的 Web 组件(Component)，多指静态文件，比如图片 CSS 等，Yahoo! 的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。

从这篇 When the Cookie Crumbles 能看出，MySpace 和 eBay 的 Cookie 都不小的，想必是对用户行为比较关心。eBay 前不久构造了 Personalization Platform ，就是从 Cookie 的限制中跳出来。

您可能感兴趣的文章

]]> http://www.52shidai.com/web-front/797.html/feed 0 Web 前端优化最佳实践之 Server 篇 http://www.52shidai.com/web-front/795.html http://www.52shidai.com/web-front/795.html#comments Sat, 26 Nov 2011 07:07:51 +0000 admin http://www.52shidai.com/?p=795 Web 前端优化最佳实践第二部分面向 Server 。目前共计有 6 条实践规则。【注，这最多算技术笔记，查看最原始内容，还请访问：Exceptional Performance : Best Practices for Speeding Up Your Web Site 】

1. 使用 CDN (Use a Content Delivery Network)

国内 CDN 的普及还不够。不过我们有独特的电信、网通之间的问题，如果针对这个作优化，基本上也算能收到 CDN 或类似的效果吧(假装如此)。【Tin 说国内 CDN 用的挺多，看看 CDN厂商的市场就知道了，还没走入寻常百姓家】

2. 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header)

各个浏览器都有针对的方案, Apache 例子【注意：下面的说明例子还不够精细，具体的环境上还要加一些调整】:

ExpiresActive On
ExpiresByType image/gif "modification plus 1 weeks"

Lighttpd 启用 mod_expire 模块 后：

$HTTP["url"] =~ "\.(jpg|gif|png)$" {
     expire.url = ( "" =&gt; "access 1 years" )
}

Nginx 例子参考:

location ~* \.(jpg|gif|png)$ {
  if (-f $request_filename) {
        expires      max;
    break; 
  }        
}

 

3. 压缩内容 (Gzip Components)

 

对于绝大多数站点，这都是必要的一步，能有效减轻网络流量压力。或许有人担心对 CPU 压缩对于 CPU 的影响，放心大胆的整吧，没事儿。Nginx 例子：

gzip            on;
gzip_types      text/plain text/html text/css ext/javascript;

另外参见：

IIS 如何启用 Gzip 压缩?

 

4. 设置 Etags (Configure ETags)

对于 Etag，可能是多数网站维护者都会忽略的地方。在这一系列优化规则出现之前，可能互联网上绝大多数站点都对这个问题忽略了。当然，Etag 对多数站点性能的影响并不是很大。除非是面向 RSS 的网站。【看到有朋友批评说写的简略，并且说 IE 不支持 ETag。明确说一下：IE 支持 ETag，倒是使用 IIS 要注意相关 Etag Bug。】

补充：我的意思是”很多网站在不注意的情况下都是打开 Etag 的，而没有网站关心如何用，消耗资源而不知。并不是说 Etag 不好，合理利用 Etag ，绝对能取得很好的收益.

5. 尽早刷新 Buffer (Flush the Buffer Early)

对这一条，琢磨了半天，貌似还是异步的思路。能更好的提升用户体验?

6. 对 AJAX 请求使用 GET 方法 (Use GET for AJAX Requests)

XMLHttpRequest POST 要两步，而 GET 只需要一步。但要注意的是在 IE 上 GET 最大能处理的 URL 长度是 2K。

您可能感兴趣的文章

]]> http://www.52shidai.com/web-front/795.html/feed 0 Web 前端优化最佳实践之 内容篇 http://www.52shidai.com/web-front/793.html http://www.52shidai.com/web-front/793.html#comments Sat, 26 Nov 2011 07:05:00 +0000 admin http://www.52shidai.com/?p=793 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献。广为人知的优化规则也由 13 条到 14 条，再到 20 条，乃至现在的 34 条–真是与时俱进啊。最新的 34 条也针对不同的角度做了分类。

面向内容的优化规则目前有 10 条。

1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests)

作为第一条，可能也是最重要的一条。根据 Yahoo! 研究团队的数据分析，有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少 HTTP 请求：

  • 1) 合并文件，比如把多个 CSS 文件合成一个；
  • 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；参见：CSS Sprites: Image Slicing’s Kiss of Death
  • 3) 图像地图
  • 4) 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据.

2. 减少 DNS 查找 (Reduce DNS Lookups)

必须明确的一点，DNS 查找的开销是很大的。另外，我倒是觉得这是 Yahoo! 所有站点的通病，Yahoo！主站点可能还不够明显，一些分站点，存在明显的类似问题。对于国内站点来说，如果过多的使用了站外的 Widget ，也很容易引起过多的 DNS 查找问题。

3. 避免重定向 (Avoid Redirects)

不是绝对的避免，尽量减少。另外，应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ，就能有效避免一次重定向。http://www.dbanotes.net/arch 与 http://www.dbanotes.net/arch/ 二者之间是有差异的。如果是 Apache 服务器，通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。

4. 使得 Ajax 可缓存 (Make Ajax Cacheable)

响应时间对 Ajax 来说至关重要，否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。

5. 延迟载入组件 (Post-load Components)

6. 预载入组件 (Preload Components)

上面两条严格说来，都是属于异步这个思想灵活运用的事儿。

7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)

8. 切分组件到多个域 (Split Components Across Domains)

主要的目的是提高页面组件并行下载能力。但不要跨太多域名，否则就和第二条有些冲突了。

9. 最小化 iframe 的数量 (Minimize the Number of iframes)

熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处，也有其弊端，一分为二看问题吧。

10. 杜绝 http 404 错误 (No 404s)

对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误，亦能提升用户体验。值得一提的是，CSS 与 Java Script 引起的 404 错误因为定位稍稍”难”一点而往往容易被忽略。

这是内容篇的 10 条。应该说具体引导性的内容还不够详细。逐渐会根据自己的理解补充上来。

您可能感兴趣的文章

]]> http://www.52shidai.com/web-front/793.html/feed 0 找到适合自己站点SEO优化的金矿 http://www.52shidai.com/seo/721.html http://www.52shidai.com/seo/721.html#comments Thu, 21 Apr 2011 15:55:56 +0000 admin http://www.52shidai.com/?p=721 大家谈到SEO，每个有经验点的站长都会有自己的一套优化学习方法，遇到不懂问题的时候都有自己的一套经验去学习研究解决，但是我们真的找到了自己的优化金矿了吗？相信很多的人都没有吧！或者我们有了这样的一个金矿，但是里面已经没有多少金子了，那我们又该怎么办？下面我谈谈对于优化金矿的一些看法！

1、优化学习金矿要选择好的交流平台网站！

SEO交流平台网站目前有很多，门户网站中最出名的莫过于admin5，chinaz，tui18这三个了，而SEO推广论坛最出名的就是seowhy，admin5，chinaz，tui18，28tui等大批的站点，还有很多新站如雨后春笋慢慢冒出尖来。

很多的站长都会选择这些地方学习交流一些SEO知识，但是真的要找到好经验的地方不多！我一般是进入这些网站里面每个版块找一些精华文章看看，特别是论坛里面，好的文章被推荐自然有他的出彩之处！这是我的优化学习金矿里面的第一矿产！

有很多的牛人现在都有自己的博客，例如卢松松，王通，肖俊等牛人的博客都是不错的学习地方，特别是卢松松博客，大家可以去看看，他的每篇文章都是访问几千，评论几百的，这样的平台得益于卢松松博客里面有大量的高质量文章，我们可以从中学到很多的东西，另外做广州SEO的肖俊也是相当棒的，他的文章更多的是SEO知识，大家可以去学习一下。这个是我优化学习金矿的第二矿产！

2、优化学习金矿要选择好的SEO导师！

SEO优化学习的道路是坎坷的，特别对于新人，或者遇到某个瓶颈，这个时候一定要有一个自己的SEO导师。我的SEO导师是我哥，他是我的第三大矿产！不是说我哥的SEO技术有多厉害，而是他能不断的提醒我哪里应该注意，哪里要加强！

很多人可能认为SEO导师就一定要有非常不错的SEO能力才行，我的想法恰恰相反！有时候我们身在局中看不清前面的路，需要有一个人来指点，这个人不一定是个名人，不一定很权威，但是这个人知道前进的方向，那么就一定是个好的导师！我一直认为学SEO要有自己的明师，而不是名师，名师谁会管我们这些草根，但是明师可以，因为明师可以是自己的朋友，亲人，也可以是陌生人，甚至是敌人！只要能引导我们前进就是我们的好导师！

3、优化学习金矿要选择好的QQ交流群！

做SEO的没有几个QQ交流群真的是很稀奇的一件事，一要么是你性格特立独行，二要么是你不懂得去学习。QQ交流应该是我们众多站长互相交流的主要方式，所以我把这个方式单独拿出来作为我的优化学习金矿第四矿产！

很多的QQ交流群都是一些比较厉害的SEO创建的，而且人气非常之旺，例如羽毛的群是相当的火爆，我们可以在群搜索里面找一些名人群，试着加入进去，你一定会从中学到很多的知识。另外，大家在群里面一定要注意，不要怕问问题，总会有人帮你解答！好好利用QQ群，你发现你会学习的很快！

4、优化学习金矿要多选择合适的实战锻炼！

之所以把这一点放在最后，不是我轻视它，而是想让他来压轴！大家都知道，别人的千万条经验教训，知识总结，都是别人的，自己其实学习了，真正属于自己的不多，只有自己亲身实践过后得到的一些经验才是最好的经验，所以我把实战作为我的第五矿产，这个矿产不亚于前面的几个！

一直很崇尚实战是最好的学习方法，所以这里说说我的一个想法：每天都会很多的站长问我问题，说实话有时候挺忙的，但是又不好意思一口回绝，这里我要跟大家说的一点是，我给大家解决的问题可能也只是自己的片面之词，最好大家听过的经验之后在自己实践一下，如果真的有用，再采用也不迟！另外，有很多的站长有一种惰性，总是寄希望与别人站长，总想在别人哪里找到答案，这种方法是不好的，实践才是最好的获取知识途径！

好了，这篇文章就介绍到这里，希望大家在学习的过程中也找到自己的优化学习金矿，也希望大家还没有找到自己学习金矿的能够从我的这篇文章中有所发现

 

您可能感兴趣的文章

]]> http://www.52shidai.com/seo/721.html/feed 2 容易被搜索引擎k的优化方法 http://www.52shidai.com/seo/673.html http://www.52shidai.com/seo/673.html#comments Fri, 14 Jan 2011 08:24:59 +0000 admin http://www.52shidai.com/?p=673 最不可取的优化方法（也许很快有好的排名但是结果是你的站K）
关键词堆积
所有的锚文字都相同
使用CSS或背景色隐藏内容，这是十恶不赦的大恶
使用JavaScript跳转
相同ip之下的网页直接进行大量交换链接
桥页和Cloaking，诱导搜索引擎的爬虫，这是十恶不赦的大恶
成人内容，违禁药品，赌博相关内容
内容重复
连向作弊的网站
站内的绝大部分网页有相同的网页title
加入到Link Farm或则Link交换类网站
使用被惩罚过的域名
网站建立在被惩罚的IP上

您可能感兴趣的文章

]]> http://www.52shidai.com/seo/673.html/feed 1 SEO的内部和外部的优化 http://www.52shidai.com/seo/671.html http://www.52shidai.com/seo/671.html#comments Fri, 14 Jan 2011 08:23:33 +0000 admin http://www.52shidai.com/?p=671 >交换连接 [...]]]> 网站优化 我分为内部优化和外部优化
（一）内部优化（刚建站的时候其实很重要 这也是优化的基础 ，做好了后期才有质的的飞跃）

A关键词应用策略
域名中包含关键字（.org的后缀搜索引擎给的权重比较高）
URL中出现关键词 ，并且路径最好不要超过3层文件夹中包含关键字
网页Title中出现关键词 （title的写法原则：文字简练能够概括全面并且短，里面做最好冷词站60%已冷带热）
常规内容中出现关键词 (最好有相关的词出现在文章中 例如你是电脑网 那么 计算机，笔记本等词应该出现啊）
在页面的第一段中出现关键词
在页面的最后一段中出现关键词
Heading 标签 比如h1,h2中出现关键词（我认为这是作弊标签，没用） 站内的链接中出现关键词导向相关内容的导出链接
导出链接中出现关键词
图片文件名中出现关键词 Alt标签中出现关键词 comment中出现关键词
关键词进行适 当的修饰加粗、斜体等，以上这些方面大家应该都知道 我就不在举例子了

B关键词布局策略
什么叫关键字布局呢?简单地讲,就是你的关键字会出现在哪些位置.一般我们都以首页来做为例子.
通常大家只关心关键字密度,而忽视了布局.这点是很错误的.很多人在问,为什么我的密度跟他差不多,其他外链及内部优化也不差,凭什么他就排在我前面
在问这个问题之前,请先看看你的关键字是如何分布的. 我个人比较喜欢集中布局+分散布局+小集中（顶部+内容+尾部）的方式
关于布局,我个人感觉,你在顶部或左上方集中出现关键字.然后分散一下,其他地方都有合理地出现,效果是非常好的.这里有一点要注意的就是,很多网站都喜欢用友情链接,让友情链接里出现关键字.这个方法很好,但是否有效?
很多网站的友情链接是JS调用的.据我观察,JS调用这些,百度快照里并没有出现.大家在做友情链接的时候最好用文本文字链接比较好链接的文字中包含网站的关键字会更好

c关键词选取策略
大家在做站的时候优先应考虑你定的那个词是不是热门词一般一个词有1千万相关网页就是热词
然后在分析这个词的相关短语那个搜的次数高 利用百度的相关搜索，百度指数 index.baidu.com 去分析
1.关键词选取不要太泛泛（例如：铁，钢铁等）
2.主关键词不要太热 站在用户的角度去选词 太专业的词即使排在首页也没有流量
3。将一些关键词扩展成一些词语或短句 让他们做你二级栏目的标题
4于自己网站没有相关的内容词最好不要加也就是所有的页面围绕主关键词展开
5 文章内容最好用长尾关键词作为标题 会有很好的效果
（二）外部优化策略（在你的网站建好以后这是你长期的工作 也是保持你的排名稳定法宝）
单向链接（单向链接就是别人加上你的链接而你没有加他的链接)>>交换连接
从同类网站高PR值得网页获得导入链接>> 从不相关网站高PR值得网页获得导入链接
锚文字中有关键词>>图片链接加title注释（alt=“关键词”）
锚文字周围有相关词>> 锚文字周围关键词散落无序，锚文字存在于文章或句子中 加上连接指向主页
导入链接的页面的导出链接小于100个，流出链接越少越好
链接来自不同IP 同一台服务器链接没有多大效果
论坛，博客的外连接已经不是很有效果，搜索引擎已经降低这方面的权重
写一篇有价值的软文带上自己的链接 是增加外连接的最好的方法
经常更新你的网站 增加多的原创内容 是你立于不败之地的最有效的方法

您可能感兴趣的文章

]]> http://www.52shidai.com/seo/671.html/feed 1