SEO(Search Engine Optimization),搜索引擎优化。SEO包含站外SEO和站内SEO两方面。
1、内部优化
META标签优化:例如:TITLE,KEYWORDS,DESCRIPTION等的优化;
内部链接的优化,包括相关性链接(Tag标签),锚文本链接,各导航链接,及图片链接;
网站内容更新:每天保持站内的更新(主要是文章的更新等)。
网站结构优化:包括网站的目录结构,面包屑结构,导航结构,URL结构等,主要有:树形结构、扁平结构等。
2、外部优化
外部链接类别:友情链接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、相关信息网等尽量保持链接的多样性;
外链运营:每天添加一定数量的外部链接,使关键词排名稳定提升;
外链选择:与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。扩展资料
优化目的
1、随着网络的发展,网站的数量已经数以亿计,互联网上的信息量呈爆炸性增长,加大了人们寻找目标信息的难度,而搜索引擎的出现给人们寻找信息带来极大的便利,已经成为不可或缺的上网工具。
2、根据人们的使用习惯和心理,在搜索引擎中排名越靠前的网站,被点击的几率就越大,相反,排名越靠后,得到的搜索流量就越少。据统计,全球500强的公司中,有90%以上的公司在公司网站中导入了SEO技术。
3、一般的网络公司因缺乏专业的营销知识和理念,仅从技术的角度出发为您建造网站,美工只管将您的网站设计漂亮,程序员只管实现您要求的功能模块,这样做出来的网站是有缺陷的,不符合搜索引擎的收录要求,所以必须对网站进行全面的针对性优化。
搜索引擎优化策略应该包括三部分:
1、内容调查和编写
第一件事就是关键词调查,关键词是搜不尽、查不绝的。调查越深入,发现的词条就越多,尽量在允许的时间内对这些词条进行进一步的分析和研究。反复此过程,最后才能确定关键词。
记住重要的一点:Google上进行的一半以上的搜索是不一样的!
需要为选定的每个关键词产生一个单独的页面:一个关键词条一个页面。这意味着一个站要产生无数页面。
2、网站内容排版
这部分工作的目的是提高主页的页面等级PR。
理论上来讲,网站的每个页面都拥有自己的外部链接和PR 值,但这不仅不可能,而且也没有必要。
Google认为每个页面的链接数量最好不要超过50-100。简单来说,随着主页的点击次数的提高,页面的PR值反而会降低。所以我们追求的网站结构是:在每页的链接上限内,给每个页面最少的点击次数。
3、外部链接建设
这是SEO策略中最难的部分,不仅需要投入大量精力,更需要创意,找到链接的独特方法。
获得外部链接的方式:交换友情链接;购买单向链接;增加网站创意与特色,链接自然会找上门。
参考资料来源:百度百科-搜索引擎优化
前端SEO网站优化软件有哪些
很多人学会了一些SEO的常识,就觉得自己已经学会了SEO了,能够给很多网站提供意见,但是其实他们提出的意见,很多时候都是靠猜,靠感觉。至于实际上有没有效果,会不会给网站带来正面的影响,只能走一步看一步。
其实一个SEO做得如何,最了解的还是自己,好的SEOER,能够通过平时一点一滴的数据,进行汇总,通过数据指导,来看清SEO的方向。
SEO是什么,在我看来,SEO就是做搜索引擎的排名,而SEO最终的目的是什么,答案只有一个,那就是通过有排名的关键词,来获得流量,也就是说我们最终的目的就是流量。那么我们很多时候,SEO不要局限在自己的站点上面,我们要把思路拓展,拓展到各个不同的模块领域去。
那么作为SEO,如何科学的去分析自己做的效果如何,如何去更好的通过数据,来指导自己的思维呢?
我们都知道,流量跟排名点击率、排名数、收录数有关系,那么我们的数据,最主要的就是监控这三个维度。
1、排名点击率:
如果是自身网站的话,就比较简单,装个流量统计工具,就可以很好的监控到关键词的点击率。如果是外部的站点,可以通过关键词覆盖的查询,来预估自己的排名点击率。其实在站点和内容都不变的情况下,点击率一般不会有太大的变化。所以排名和收录的因素,就会影响比较大。2、网站排名:
网站的排名主要看两大块,一块是重点词的排名,一块是看长尾的关键词覆盖率。
、重点词的排名:
每天都要监控,重点词是你的核心词,这个主要用来监控自己站内的关键词变化情况,如果重点词排名出现大幅度的变化,要就意味着在这个周期,你的排名有有极大的波动。排名监控可以用分析牛关键词排名监控,可以记录一个月的排名数据,一个月内的排名变化情况清晰可见。如果发现排名有明显的变化,就要去分析近一个月内的网站日志,看看有什么变化,从而找出问题的原因。、长尾关键词覆盖率:
长尾词的关键词覆盖率,主要用来监控站外的排名。
之前跟一个做推广的聊,跟他说查一下关键词覆盖率,他反问我,什么是关键词覆盖?
关键词覆盖,目的就是把你的关键词尽可能的覆盖到搜索引擎结果中,比如百度搜索结果第一页有10个排名,10个都是你所发的排名,那么用户就只能点到你了,点不到别人。
而做医疗的长尾关键词,一般都是地域性的,都是尽可能长的关键词。
之前做的关键词覆盖,当你覆盖率达到60%的时候,一天有10个有效对话,当你的覆盖率达到50%的时候,你的有效对话只有8个,当你关键词覆盖达到30%的时候,你的有效对话只有4个。
那么长的长尾关键词能来对话吗?答案是肯定的,能,太能了。有的人说那么长,谁能搜索得到啊?对,那么长的词可能不一定有人搜,但是通过分词所带来的长尾呢?这种长尾有足够的量,当量大的时候,蚂蚁也能干过一个军团。
所以关键词覆盖率,能够很好的体现你关键词所做的情况。有的人会问,站外推广那么难做,都没有什么地方可做的。其实有的平台,永远都是好的,只是你没去认真研究而已,为什么别人都在做,你却做不了呢?3、网站收录:
站点的收录是非常关键的,当你排名、覆盖率比较稳定的情况下,收录越多,也就意味着你的长尾关键词能够越多。
而我们看收录,并不是看单个链接的收录,而是看整体的收录变化比。这时候可以通过链接权重查询,来查询网址的收录情况。
在排名率不变的情况下,当你的收录越来越高,你的流量就会越来越多。所以如何提高收录,也是一个非常重要的手段。
总体来看SEO的主要核心还是数据分析,具体的数据分析可以参考(百度排名只需分析关键词数据)。其实SEO只要观察细致,很多问题都会变得很简单,你要真正搞清楚你想要什么,你想要的流量,而流量跟网站的排名、网站的收录、排名的点击率是有直接关系。搞清楚这些关系,去逐一分析每一个细节,你会发现SEO会变得很简单。
前端网页优化有哪些
前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。前端优化的目的是什么 ?
1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
前端优化的途径有很多,按粒度大致可以分为两类,第一类是页面级别的优化,例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化,例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。本着提高投入产出比的目的,后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
一、页面级优化
1. 减少 HTTP请求数
这条策略基本上所有前端人都知道,而且也是最重要最有效的。都说要减少 HTTP请求,那请求多了到底会怎么样呢 ?每个请求都是有成本的,既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的,资源上由于每个请求都需要携带数据,因此每个请求都需要占用带宽。由于浏览器进行并发请求的请求数是有上限的 (具体参见此处 ),因此请求数多了以后,浏览器需要分批进行请求,因此会增加用户的等待时间,会给用户造成站点速度慢这样一个印象,即使可能用户能看到的第一屏的资源都已经请求完了,但是浏览器的进度条会一直存在。
减少 HTTP请求数的主要途径包括:
(1). 从设计实现层面简化页面
如果你的页面像百度首页一样简单,那么接下来的规则基本上都用不着了。保持页面简洁、减少资源的使用时最直接的。如果不是你的页面需要华丽的皮肤,则继续阅读下面的内容。
(2). 合理设置 HTTP缓存
缓存的力量是强大的,恰当的缓存设置可以大大的减少 HTTP请求。以有啊首页为例,当浏览器没有缓存的时候访问一共会发出 78个请求,共 600多 K数据 (如图 ),而当第二次访问即浏览器已缓存之后访问则仅有 10个请求,共 20多 K数据 (如图 )。 (这里需要说明的是,如果直接 F5刷新页面的话效果是不一样的,这种情况下请求数还是一样,不过被缓存资源的请求服务器是 304响应,只有 Header没有Body ,可以节省带宽 )
怎样才算合理设置 ?原则很简单,能缓存越多越好,能缓存越久越好。很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于 HTTP缓存的具体设置和原理此处就不再详述了,有兴趣的可以参考下列文章:
Fiddler HTTP Performance中关于缓存的介绍
(3). 资源合并与压缩
如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。 CSS、 Javascript、Image 都可以用相应的工具进行压缩,压缩后往往能省下不少空间。
(4). CSS Sprites
合并 CSS图片,减少请求数的又一个好办法。
(5). Inline Images
使用 data: URL scheme的方式将图片嵌入到页面或 CSS中,如果不考虑资源管理上的问题的话,不失为一个好办法。如果是嵌入页面的话换来的是增大了页面的体积,而且无法利用浏览器缓存。使用在 CSS中的图片则更为理想一些。
(6). Lazy Load Images(自己对这一块的内容还是不了解)
这条策略实际上并不一定能减少 HTTP请求数,但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言,在页面刚加载的时候可以只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片。这样一来,假如用户只对第一屏的内容感兴趣时,那剩余的图片请求就都节省了。 有啊首页 曾经的做法是在加载的时候把第一屏之后的图片地址缓存在 Textarea标签中,待用户往下滚屏的时候才 “惰性” 加载。2. 将外部脚本置底(将脚本内容在页面信息内容加载后再加载)
前文有谈到,浏览器是可以并发请求的,这一特点使得其能够更快的加载资源,然而外链脚本在加载时却会阻塞其他资源,例如在脚本加载完成之前,它后面的图片、样式以及其他脚本都处于阻塞状态,直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多,在 这里有比较详细的介绍 (这里是译文和 更详细的例子 ),而最简单可依赖的方法就是将脚本尽可能的往后挪,减少对并发下载的影响。
3. 异步执行 inline脚本(其实原理和上面是一样,保证脚本在页面内容后面加载。)
inline脚本对性能的影响与外部脚本相比,是有过之而无不及。首页,与外部脚本一样, inline脚本在执行的时候一样会阻塞并发请求,由于浏览器在页面处理方面是单线程的,当 inline脚本在页面渲染之前执行时,页面的渲染工作则会被推迟。简而言之, inline脚本在执行的时候,页面处于空白状态。鉴于以上两点原因,建议将执行时间较长的 inline脚本异步执行,异步的方式有很多种,例如使用 script元素的defer 属性(存在兼容性问题和其他一些问题,例如不能使用 )、使用setTimeout ,在HTML5中引入了 Web Workers的机制,恰恰可以解决此类问题。4. Lazy Load Javascript(只有在需要加载的时候加载,在一般情况下并不加载信息内容。)
随着 Javascript框架的流行,越来越多的站点也使用起了框架。一个框架往往包括了很多的功能实现,这些功能并不是每一个页面都需要的,如果下载了不需要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种,一种是为那些流量特别大的页面专门定制一个专用的 mini版框架,另一种则是 Lazy Load。YUI 则使用了第二种方式,在 YUI的实现中,最初只加载核心模块,其他模块可以等到需要使用的时候才加载。5. 将 CSS放在 HEAD中
如果将 CSS放在其他地方比如 BODY中,则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状态跳转到 CSS状态,用户体验比较糟糕。有些浏览器会在 CSS下载完成后才开始渲染页面,如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。
6. 异步请求 Callback(就是将一些行为样式提取出来,慢慢的加载信息的内容)
在某些页面中可能存在这样一种需求,需要使用 script标签来异步的请求数据。类似:
Javascript:function myCallback(info){
//do something here
}
HTML:cb返回的内容 :
myCallback(Hello world!);
像以上这种方式直接在页面上写 对页面的性能也是有影响的,即增加了页面首次加载的负担,推迟了 事件的触发时机。如果时效性允许的话,可以考虑在 DOMLoaded事件触发的时候加载,或者使用 setTimeout方式来灵活的控制加载的时机。
7. 减少不必要的 HTTP跳转
对于以目录形式访问的 HTTP链接,很多人都会忽略链接否带 ’/,假如你的服务器对此是区别对待的话,那么你也需要注意,这其中很可能隐藏了 301跳转,增加了多余请求。具体参见下图,其中第一个链接是以无 ’/结尾的方式访问的,于是服务器有了一次跳转。
8. 避免重复的资源请求
这种情况主要是由于疏忽或页面由多个模块拼接而成,然后每个模块中请求了同样的资源时,会导致资源的重复请求二、代码级优化
1. Javascript
(1). DOM
DOM操作应该是脚本中最耗性能的一类操作,例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意以下几点:
a. HTML Collection(HTML收集器,返回的是一个数组内容信息)
在脚本中 、 、getElementsByTagName()返回的都是 HTMLCollection类型的集合,在平时使用的时候大多将它作为数组来使用,因为它有 length属性,也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多,原因是这个集合并不是一个静态的结果,它表示的仅仅是一个特定的查询,每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。
当你需要遍历 HTML Collection的时候,尽量将它转为数组后再访问,以提高性能。即使不转换为数组,也请尽可能少的访问它,例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
b. Reflow & Repaint
除了上面一点之外, DOM操作还需要考虑浏览器的 Reflow和Repaint ,因为这些都是需要消耗资源的,具体的可以参加以下文章:
如何减少浏览器的repaint和reflow?
Understanding Internet Explorer Rendering Behaviour
Notes on HTML Reflow(2). 慎用 with
with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的 执行环境 ,将obj放在了其作用域链的最前端,在 with代码块中访问非局部变量是都是先从 obj上开始查找,如果没有再依次按作用域链向上查找,因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的,过长的作用域链会导致查找性能下降。
除非你能肯定在 with代码中只访问 obj中的属性,否则慎用 with,替代的可以使用局部变量缓存需要访问的属性。
(3). 避免使用 eval和 Function
每次 eval 或 Function 构造函数作用于字符串表示的源代码时,脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
eval 函数效率特别低,由于事先无法知晓传给 eval 的字符串中的内容,eval在其上下文中解释要处理的代码,也就是说编译器无法优化上下文,因此只能有浏览器在运行时解释代码。这对性能影响很大。
Function 构造函数比 eval略好,因为使用此代码不会影响周围代码 ;但其速度仍很慢。
使用 eval和 Function也不利于Javascript 压缩工具执行压缩。
(4). 减少作用域链查找(这方面设计到一些内容的相关问题)
前文谈到了作用域链查找问题,这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量,并在遍历结束后再重写那个变量,这一点对全局变量尤其重要,因为全局变量处于作用域链的最顶端,访问时的查找次数是最多的。
低效率的写法:
// 全局变量
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){
//每次访问 globalVar 都需要查找到作用域链最顶端,本例中需要访问 100000 次
globalVar = i;
}
}
更高效的写法:
// 全局变量
var globalVar = 1;
function myCallback(info){
//局部变量缓存全局变量
var localVar = globalVar;
for( var i = 100000; i--;){
//访问局部变量是最快的
localVar = i;
}
//本例中只需要访问 2次全局变量
在函数中只需要将 globalVar中内容的值赋给localVar 中区
globalVar = localVar;
}
要减少作用域链查找还应该减少闭包的使用。
(5). 数据访问
Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组,其中对直接量和局部变量的访问是最快的,对对象属性以及数组的访问需要更大的开销。当出现以下情况时,建议将数据放入局部变量:
a. 对任何对象属性的访问超过 1次
b. 对任何数组成员的访问次数超过 1次
还应当尽可能的减少对对象以及数组深度查找。
(6). 字符串拼接
在 Javascript中使用" " 号来拼接字符串效率是比较低的,因为每次运行都会开辟新的内存并生成新的字符串变量,然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法,即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销,因此当需要拼接的字符串较多的时候可以考虑用此方法。关于 Javascript优化的更详细介绍请参考:
Write Efficient Javascript(PPT)
Efficient JavaScript
2. CSS选择符
在大多数人的观念中,都觉得浏览器对 CSS选择符的解析式从左往右进行的,例如
#toc A { color: #444; }
这样一个选择符,如果是从右往左解析则效率会很高,因为第一个 ID选择基本上就把查找的范围限定了,但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符,浏览器必须遍历查找每一个 A标签的祖先节点,效率并不像之前想象的那样高。根据浏览器的这一行为特点,在写选择符的时候需要注意很多事项,有人已经一一列举了, 详情参考此处。3. HTML
对 HTML本身的优化现如今也越来越多的受人关注了,详情可以参见这篇 总结性文章 。4. Image压缩
图片压缩是个技术活,不过现如今这方面的工具也非常多,压缩之后往往能带来不错的效果,具体的压缩原理以及方法在《 Even Faster Web Sites》第10 章有很详细的介绍,有兴趣的可以去看看。
总结
本文从页面级以及代码级两个粒度对前端优化的各种方式做了一个这些方法基本上都是前端开发人员在开发的过程中可以借鉴和实践的,完整的前端优化还应该包括很多其他的途径,例如 CDN、 Gzip、多域名、无 Cookie服务器等等,由于对于开发人员的可操作性并不强大,在此也就不多叙述了,详细的可以参考 Yahoo和Google 的这些“金科玉律。