1,清理垃圾代码.

清理垃圾代码是指删除页面中的冗余代码，可以删除80%的冗余代码，垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码。
最常见的垃圾代码：空格
空格字符是网页中最常见的垃圾代码。但并不是指标签，而是有代码编辑环境下敲击空格所产生的符号，每个空格相当一个字符，那么也就是说，一个页面，空格就占页面体积的15%，100K的页面，有15K是空格字符。
空格字符最常出现 在代码的开始和结束处，还有就是空行中。
这些都是容易产生垃圾代码的地方。
消除这样的垃圾代码的方法就是选中代码然后按shift+tab键左对齐.

2，HTML标签

A，HTML标签转换

HTML标签的转换主要是指使用短标签替换在网页中有同样效果的长标签，例如：,<b>与<strony>两者都是对字体加粗但是<strong>却比<b>多了5个字符。如果一个页面出现上百个加粗标签，就会产生不少的冗余代码。

解决方法是：在制作html页面的时候，进行优化的选择使用的标签。

B，头部标签

<title>网站标题</title>

<meta name="keywords" content="网站关键字，多个关键字用分隔符分开，如 |，" />

<meta name="description" content="对网站的描述" />

C，表格，ur 等容器形式的标签

浏览器编译器遇到一个标签时，就开始寻找它的结束标签，直到它匹配上,才能显示它的内容.，所以当表，ur等容器形式的标签嵌套很多时,打开页面就会特别慢,这样就降低了用户体验了.

解决方法：在编写html的时候，尽量使一个一个容器独立，如果要嵌套的时候，一定要使其清楚、简介。

D，图片ait标签

<img src="图片地址" alt="图片关键字"/>

E, 合理 target="_blank"

合理而不频繁使用target="_blank" 是能够在一定程度上位网站带来回旋流量和点击。同时，在细节上使用 target="_blank" ，可以增强网站整体用户体验.

3，CSS 优化

A，Css调用

有3种方式：

A，直接在页面的<head>和</head>之间写css样式；如果内容少则影响不大，否则大大增加页面的体积，还占用了顶部的重要位置

B，直接在html标签上面定义css 样式；增加页面的代码量

C，引用css文件；

这三种方式中，最利于seo优化的是 c ，也就是 引用css文件

B，使用Reset但并非全局Reset

不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：

*{margin:0;padding:0;}

这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。



C. 良好的命名习惯


无疑乱七八糟或者无语义命名的代码，谁看了都会抓狂。比如下面这样的代码：


.aaabb{margin:2px;color:red;}


我想即使是初学者，也不至于会在实际项目中如此命名一个class，但有没有想过这样的代码同样是很有问题的：


<h1>My name is <span class=”red blod”>Wiky</span></h1>


问题在于如果你需要把所有原本红色的字体改成蓝色，那修改后就样式就会变成：


red{color:bule;}


这样的命名就会很让人费解，同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以，请不要使用元素的特性（颜色，位置，大小等）来命名一个class或id，您可以选择意义的命名如：#navigation{…}，.sidebar{…}，.postwrap{…}


这样，无论你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。


另外还有一种情况，一些固定的样式，定义后就不会修改的了，那你命名时就不用担忧刚刚说的那种情况，如:


.alignleft{float:left;margin-right:20px;}


.alignright{float:right;text-align:right;margin-left:20px;}


.clear{clear:both;text-indent:-9999px;}


如果需要把这个段落由原先的左对齐修改为右对齐，那么只需要修改它的className就为alignright就可以了。


D.代码缩写


CSS代码缩写可以提高你写代码的速度，精简你的代码量。在CSS里面有不少可以缩写的属性，包括margin，padding，border，font，background和颜色值等，如果您学会了代码缩写，原本这样的代码：


li{


font: 1.2em/1.4em Arial, Helvetica, sans-serif;


padding:5px 0 10px 5px;


}


E.利用CSS继承


如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你可以很好的维护你的代码，并且还可以减少代码量。那么本来这样的代码：


#container li{ font-family:Georgia, serif; }


#container p{ font-family:Georgia, serif; }


#container h1{font-family:Georgia, serif; }


可以写成:


#container{font-family:Georgia,serif; }


F.使用多重选择器


你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：


h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }


G. 适当的代码注释


代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。


7. 保持CSS的可读性


书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。


H. 使用外部样式表


这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。


I.避免使用CSS表达式（Expression）


表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。


J,代码压缩


当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor，利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。


4，js调用


Js的2种调用方式：


A，直接写在页面，巨量的JS代码放到页面不但增加页面的体积,而且还会占用首页这样重量级位置...从而使得页面中相对重要的位置不能优先向搜索引擎展示


B，引用js文件（引用外部地址的js会影响打开网页的速度）；


第二种方式可取


												


											
SEO优化笔记的更多相关文章
	

    
								
  1. 一些关于SEO优化的笔记
		
    高级搜索指令: 双引号:“xxx” 代表完全匹配的搜索 减号:-(减号前面必须是空格,后面必须没有空格)代表搜索不包含减号后面的词的页面 filetype:用于搜索特定文件格式(百度支持的文件类型:P ...
    
		
    2. 
						
  2. 《大型网站SEO优化实践》学习分享
		
    本文主要内容源自2013年阿里技术嘉年华中阿里巴巴周文君分享<大型网站SEO优化实践>.学习过后,受益匪浅,特作笔记,经常回顾吸收学习. 大型网站SEO的特点&优势&挑战  ...
    
		
    3. 
						
  3. seo优化入门教程：影响关键词排名的因素
		
    很多人都说网站优化,但是怎么个优化法?优化什么东西?很多人都不知道.虽然我们优化的是我们的网站,但是提升的却是我们的关键词排名. 我们不管去优化哪一个网站,得到的搜索结果,他都会去触发关键词排名的因素 ...
    
		
    4. 
						
  4. 最详细的网站改版SEO优化指南：如何让排名不降反升
		
    我知道,网站改版很是让人头疼.首先,这个过程需要很长时间还有大量工作要做,并且通常结果不会如你的预期.其次,改版确实有破坏之前为 SEO 所做努力的风险. 但不要因为通常网站改版带来排名下降就认为这是 ...
    
		
    5. 
						
  5. 一个网站完整详细的SEO优化方案
		
    根据自己的个人经验完成了这篇文章,希望对SEOer有点帮助,高手直接跳过,请勿喷水... 一个完整的SEO优化方案主要由四个小组组成: 一.前端/页编人员 二.内容编辑人员 三.推广人员 四.数据分析 ...
    
		
    6. 
						
  6. SEO优化小技巧
		
    /** * seo优化课程 * 先谢慕课网 */ /** * SEO基本介绍 * SEO与前端工程师 */ /** * SEO基本介绍 * 搜索引擎工作原理:输入关键字------查询------显示 ...
    
		
    7. 
						
  7. 大型网站seo优化之行业网站seo优化具体操作思路
		
      第一部分:站内优化 第二部分:站外优化 第三部分:内容建设 第四部分:网站完善 一.站内优化 1.站内结构优化 2.内链策略 3.站内细节优化 4.网站地图设置 5.关键词竞争度分析 5.关键词部 ...
    
		
    8. 
						
  8. Lucene.net站内搜索—1、SEO优化
		
    目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...
    
		
    9. 
						
  9. 根据网站所做的SEO优化整理的一份文档
		
    今日给合作公司讲解本公司网站SEO优化整理的一份简单文档 架构 ########################################## 1.尽量避免Javascript和flash导航. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Apache开启不了------The requested operation has failed!
			
    1.这个问题通常是由于端口被占用了,cmd输入netstat -ano查看端口号,根据端口号80的程序的pid在任务管理器下杀掉它. 2.我遇到这个问题不是这个原因.我由于刚配置了虚拟目录.查看虚拟目 ...
    
			
    2. 
						
  2. CodeForces 670E Correct Bracket Sequence Editor（list和迭代器函数模拟）
			
    E. Correct Bracket Sequence Editor time limit per test 2 seconds memory limit per test 256 megabytes ...
    
			
    3. 
						
  3. poj 2186 tarjan求强连通分量
			
    蕾姐讲过的例题..玩了两天后才想起来做 貌似省赛之后确实变得好懒了...再努力两天就可以去北京玩了! 顺便借这个题记录一下求强连通分量的算法 1 只需要一次dfs 依靠stack来实现的tarjan算 ...
    
			
    4. 
						
  4. PHP 错误与异常 笔记与总结（4）通过 trigger_error 触发 PHP 错误
			
    [错误抑制符@] 除了 php.ini 中 error_reporting 和 display_errors 的设置.error_reporting() 函数.ini_set() 函数 外,还可以使用 ...
    
			
    5. 
						
  5. memcached学习笔记4--memcache扩展操作memcached
			
    1. 安装并配置memcache扩展库 找到php.ini文件 添加: extendsion= php_memcache.dll 并把对应的dll文件拷贝到ext目录 2. 使用PHP对Memcahc ...
    
			
    6. 
						
  6. Linux下监控磁盘使用量并在超过阀值后自动发送报警邮件
			
    最近Linux服务器磁盘使用量经常到100%,直到影响到正常服务出现故障才会去注意,做不到防患于未然,今天在网上搜集了资料,加上自己修改,写了一个shell脚本用于实时监控磁盘使用量并在超过阀值后自动 ...
    
			
    7. 
						
  7. IMAP和POP3有什么区别
			
    http://help.163.com/10/0203/13/5UJONJ4I00753VB8.html?servCode=6010237 IMAP和POP3有什么区别?   POP3协议允许电子邮件 ...
    
			
    8. 
						
  8. Anti-pattern
			
    https://en.wikipedia.org/wiki/Anti-pattern https://zh.wikipedia.org/wiki/反面模式 An anti-pattern is a c ...
    
			
    9. 
						
  9. MTU-TCP/IP协议栈-linux kernel-TCP丢包重传-UDP高性能-AI-
			
    http://view.inews.qq.com/a/20161025A0766200窄带时代的QQQQ是窄带时代极具代表性的产品,在那个网络传输效率比较低的年代,大家还记得Google的首页吗?Go ...
    
			
    10. 
						
  10. The world beyond batch: Streaming 101
			
    https://www.oreilly.com/ideas/the-world-beyond-batch-streaming-101 https://www.oreilly.com/ideas/the ...
    
			
    11.