您的位置:百味书屋 > 范文大全 > 经典范文 > 如何优化网站HTML代码? 正文

如何优化网站HTML代码?

2017-01-19 06:17:54 来源网站: 百味书屋

篇一:html代码优化

SEO优化

一、SEO优化

1. 内部SEO(代码优化)

网站如果想要有好的排名,需要做很多工作,个人觉的内部优化应该是首位,

否则你的SEO推广会打折。就算你的网站做的多好看,设计的多漂亮,里面

的东西多么吸引人,但是内部没有优化好,用户很费力的进到你网站去寻找,

如果换做那个是你,你会不会继续看下去。如果我们合理的设计网站的内部,

那么当一个客户来访问快就可能成为回头客。

2. 外部链接SEO

做好了内部SEO,其实只是刚开始,一个网站好比一个沃尔玛,几时内部装

修的怎么好,商品怎么齐全,价格怎么优惠,但是没有人去看,说什么也没

意义,网站需要做外面的SEO来让大家都知道它的存在,并且有一半的客户

认可你,这才是你最终的目标,总体上,外部SEO最重要的就是外部链接情

况,外部链接表现在两个方面:1.质量2.数量;来自不同域名的外部链接对

网站的影响不同,质量的另外一个方面是相关性,相关性高的网站对网站关

键词排名的影响比较大,另外一个就是外部链接的数量,数量越多同样很重

要,增加网站的权威性。除了质量和数量,关键词是否多样性链接存在的时

间长短等,这些都影响关键词的排名

二、优化原则

1. 不影响原外观

2. 不要把整个页面放到一个table里面

3. 不要嵌套太多表格,因为表格需要代码全部下载才能显示出来

4. 不要用太大、太多Flash动画

5. 不要用太多JavaScript特效,用户是来看内容不是看特效

6. 尽量把大图切成小图,可以再次利用的图片就无需再另切图了

三、优化技巧

1. 使用静态页面可以有效减少服务器资源占用

2. 重复使用的样式写到外部CSS文件,一般是整站一个共用CSS文件,各独立

栏目共用一个CSS文件,某页面特有的可以写在本页面内

3. 需要从数据库读取但又不经常更换的内容,写到单独JS文件,例如各个栏

目,内容是从数据库获取的,但又不会频繁更换

4. 需要链接外部的Flash、图片等,可以用iframe标签,避免外部网络延迟而

拖慢整体页面显示

5. 为了方便程序员写循环,可以适当在代码里面加注释

四、网页优化

1.切图步骤

1) 从整体布局考虑分块

2) 划线分割

3) 隐藏不需要的内容

4) 输出html文件(如分多层切图,重复第三步骤)

5) 用Dreamwaver等网页工具打开,整理表格

6) 编写CSS文件

2.切图技巧

1) 尽量按规则表格方式切,因为切后一般用需要整合

2) 表格需要全部下载才能显示出来,尽量把大表格分成横向并排的表格

3) 尽可能新建网页,新建表格把切好的图块手动放进去,因为PS、Fireworks

切图生成的网页文件有很多垃圾代码

4) 文字尽量用文本格式写在网页源码,方便修改

五、内部优化

SEO全称是Search Engine Optimization,即针对搜索的优化。网站在推出之后,最大的难点莫过于推广,而通过搜索引擎带来的流量是不可忽视的,如何通过优化代码使搜索引擎最大限度的收录,也就成为重要课题。

1.明确的标题,即<title>标签

例如搜索“购物”,搜索结果有2个页面,一个标题包含“购物”,另一个只包

含在正文<body>标签中,第一个页面会排第一位。

根据观察,各搜索引擎都会对标题进行截断,具体为baidu20字、google30

字、Yahoo20字、MSN Search25字(均为中文)

所以标题不能过长,要跟正文内容符合,购物网,标题可以为“我要购物网”

2.META标记

<meta name="description" content="网页简述">

<meta name="keywords" content="关键字">

3.链接文本

文章、新闻经常标题过长,为了页面美观而不得不截短,加入title属性,一

来有利于访客阅读完整标题,也有利于搜索引擎的收录

<a href=”">我要购物网</a> 虽然这两

种方式都可以链接到我要购物网的首页,但是对于搜索引擎来说是有差别的,

这样势必造成了2个重复的页面,对于我们的博客收录的排名是不利的。

14.超级链接地址的大小写要统一,对于Google来说

/bbs/portal.php 与

/bbs/ PORTAL.PHP 同样是两个不同的页面。

15.当然还有CSS或者其他的代码优化,这里我只说其他最简单的,最普及的方

法。

六、 这样做有哪些好处?

1.易于维护

HTML代码发展到现在,已经变得十分臃肿,这对网页设计师来说是非常不利的,特别在重构大型网站的时候,经常显得力不从心

2.加速开发

通过结构与表现层分离,可以优化团队工作流程,提高工作效率

3.拓展访问渠

不需做大改动即可在PDA等掌上设备浏览

4.节约带宽成本

一般运用网页标准进行网站重构之后,代码可以减少一半以上,每页面如果能减少几十K,乘以访问量,一个月下来,就可以节约昂贵的带宽费用了

5.提高用户体验

干净简介的代码,总比臃肿复杂代码显示得快,用户不必再忍受缓慢的访问速度

七、外部链接SEO

1. 为网站添加心血液(文章)必做

每篇文章都是知识海洋中的一部分,只有不断的更新增加才能吸引用户,吸引蜘蛛。用户你的打开网站,最终想要的是内容或者是服务。因为有了这样需求,网站才能不断的进步,留住用户,取得盈利。蜘蛛也是一样,它才会多多关注你的站,如果你的站不更新,蜘蛛就吃不到新的食物。更新文章的数量,没有固定的篇数,只要按照自己的习惯就好。

2. 关注流量来源和收录

流量一直是我们最关心的,流量来源是否稳定,最好每天记录一个数字,分析一下流量来源取决于哪些因素,我们才能更好的把握流量来源。网站收录是否正常,收录的数量是多少,收录的时间大概是什么时候,都要做个记录,一定会对你有帮助。哪些栏目中文章收录的多,为什么这个栏目收录的文章多,其它栏目为什么收录少?我们要做比较,分析,才能更好的了解搜索引擎。

3. 关键词排名

关键词的排名,影响着网站流量。记录每天的关键词排名,一个是给上司一

个交代,一个是你工作的体现。关键词为什么排名靠前了,关键词下降了为什么?关键词密度还在2%-8%之间吗?一个月关键词排名第一有多少天等等,多问几个为什么,我们就会成长。

4.增加反向链接

要有高质量的链接,而不是到处都是那种垃圾链接,弄多了垃圾链接,迟早要被K站的。

5.做好内部链接,让蜘蛛来时能顺畅的浏览你的网页。

6.描文本链接

不管是外部链接还是内部链接,最好都做成描文本链接,这样可以提高网站关键 字排名<a href=”http:///”>手持终端</a>

7.要持续增加外链

不要今天一下增加很多,明天又一个没有,这样会引起搜索引擎怀疑。俺就做过这样的事,百度账号都给封了,网站持续一个月都没有给更新快照,排名也下降很多。

8.确定好关键词

做关键词是一个很有学问的事情,这要看个人能力,如果你没有能力,那就不要做非常热门的关键词,你也竞争不过人家,比如这个站就做之类的关键词,做了一个月了也查不到排名,后来我就换了比较中性的词,差不多的关键词,等排名上去了,在考虑换热门关键词循序渐进嘛。

篇二:HTML代码优化方法总结和使用心得

在前段领域中,对Javascript和CSS的优化一直是大家关注的焦点,相应的压缩优化工具也非常丰富,相对而言对HTML优化的关注则显得有些冷淡。在Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法,例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等,唯独没有细说HTML优化。在整个前端的构成中,HTML是必不可少的一部分,而且是真正的展示“前端”。虽然与动辄十几K的Javascript相比,HTML的大小在整个页面资源中一般不会占太多的比重,而且还有Gzip,但是事实表明,大多数页面都有较大的压缩余地,即使是Gzip过后仍然能减小可观的体积,这一事实在后续的文章中会给出,本文主要讨论HTML优化的一些可

行和看上去不那么可行的途径。

对于各种优化途径,如果一定要我给一个分类的话,我会用颜色来区分。对于那些在各种页面中都适用而且无害的方法,我将它们归为绿色。相对而言,只有在某些具体的情况下才适用或者有

违标准的方法归为橙色。

绿色方法

1. 使用相对URL

对于页面中的各种URL,例如链接、外链CSS的href、外链Javascript的src、图片src、iframe src等,如果能够确定它们与当前页面是处于同一域名下的话,则可以使用相对URL,这

样每一个URL都能够节省至少一个域名的长度。

2. 删除HTTP或HTTPS

绝对URL都以HTTP或HTTPS等协议头开始,如果能确定URL的协议与当前页面URL的协议是一致的,或者说该URL在多种协议下均是可用的,则可以考虑删除这个协议头。这样做虽然有些非

主流,但事实证明是可行的,而且也有理论依据(见

[/retype/zoom/35960fc189eb172ded63b7c6?pn=3&x=0&y=0&raww=639&rawh=51&o=jpg_6_0_______&type=pic&aimh=38.309859154929576&md5sum=58781b6f000d81c16995ef4f23c21617&sign=d87f7b35b4&zoom=&png=0-229&jpg=0-3500" target="_blank">点此查看

<!--[if expression]> HTML <![endif]—>

诸如这样的语法,只有符合expression的浏览器才能识别其中

的内容。

(b). CDATA注释

复制内容到剪贴板

<script type="text/javascript">

/* <![CDATA[ */

// content of your Javascript goes here

/* ]]> */

</script>

CDATA本身是XHTML中才需要的,在CDATA中的内容不需要对特殊字符进行转义,不过为了兼容老版本的浏览器,需要加上注释,以免出错。不过,对于这个注释,如果你的页面并没有真正的使

用XHTML标准则可以大胆的删除掉。使用XHTML标准不是简单的

声明DTD就可以办到的,除此之外还需要服务器能够派application/xhtml+xml这样的内容格式,另外还需要浏览器支持,目前IE并不支持XHTML格式。因此,目前你的页面可能是按照XHTML规范来写的,也能通过HTML验证,但想要兼容IE则一定还是以HTML方式来展示的。这样一来,很多为了遵循标准而增加的内容则可以删除,具体的在后文的橙色部分详述。

(c). 自定义注释

产品中自定义的一些具有特定功能的注释,例如统计。

4. 压缩空白符

在HTML中的大多数标签中,多个空白符都会被压缩成一个来显示,于是可以通过删除多余的空白符来减小HTML体积。不过需要注意的是并不是所有的空白符都可以这样做,例如pre、textarea中的空白符是按原样显示的,标签属性中的属性值也

是按原样显示的,例如title、value等。

5. 压缩inline css & Javascript

不管inline还是external,都需要压缩,这是减小体积的最直

接的方式。

6. CSS&Javascript尽量外链

外链CSS和Javascript,不仅仅是减小HTML本身的体积,而且还可以充分利用浏览器的缓存机制,所以当CSS、Javascript的代码量超过一定体积时,尽量外链。除此之外,尽量避免在页面中使用onmouseover=”xxxx”的方式来注册事件,既不利于维

护也容易产生不必要的冗余代码。

7. 删除元素默认属性

在HTML规范中,很多HTML元素的属性是有默认值的,对于这些

默认值可以抹去不写,下面是不完全统计。

篇三:如何优化网页代码的结构

所谓网页减肥是指对网页本身结构和代码的一些优化,而不仅仅是指通过一些方法对网页文件大小进行压缩。网页减肥一直是一个热议的话题。一般我们所做的事就是去除沉冗代码。今天佳酒网小编给大家分享一些自己的体验。

网页的DIV和CSS重构

页面减肥最大的意义在于减少垃圾代码,让搜索引擎蜘蛛顺利的对网页爬行,并抓取到合适的内容。DIV和CSS的构架页面有着打开迅速,并且更利于引擎蜘蛛抓取内容的优势。但是由于DIV和CSS代码会产生大量的CSS代码,而这部分代码又会阻碍蜘蛛抓取页面的标题部分,因此,我们需要将CSS单独的进行保存。

Javascript脚本代码的减肥

网页的冗余代码包括ASP.NET产生的Viewstate,网页内部未被封装的Javascript代码,其他系统自动产生的页面垃圾代码等。

一般情况下,我们如果不使用ASP.NET所提供的一些默认的模版或者方式,Viewstate是可以被清楚的,如果我们只是试用ASP.NET以不同的模块生成HTML页面,那么原始的HTML模版页面也可以屏蔽掉Viewstate代码。

网页文本的减肥

网页文本内容过长,用户打开页面的速度会变慢,整个页面无法设置标签,那么用户体验大打折扣。遇到这种情况,一般选择对文章进行分页处理,使得每张网页的长度不超过3屏。这样不但利于用户体验,而且对搜索引擎也是有很大好处的。

网页图片的减肥

当打开一个页面时,由于网页上的图片文件过大,要等待很长时间。而这个时间一旦超过人民可以承受的极限之后,用户就会把这个页面关闭。对于搜索引擎也是如此,爬出在采集图片的时候,当它认为这张图片太大,无法在短时间内下载完成后,就会认为这张图片没有实际的价值,从而放弃对图片的采集,或者降低对该网站的评分。

因此,我们在制作网站的时候,除了看图片的质量,还要特别关注网页图片的大小,以便让其可以在最短的时间内下载完成。

FLASH的减肥

我们在做网页减肥的时候,注意尽量不要使用Flash来体现整个页面的关键部分,如导航、内容、链接等。或者用一个HTML格式的网站地图来弥补,具体的办法是在页脚部分加上HTML格式的链接,在HTML格式的链接处加一个sitemap文件的链接,以便搜索引擎可以通过这样的补救办法来寻找链接。

如果网站全是Flash的话,我们一定要在首页添加一个文字形式的链接,链接到一个简化版、无Flash的网页中,该网页需要包括Flash的一些文字内容。这样不但有利于提高用户体验,而且对搜索引擎收录页面也是非常有好处的。


如何优化网站HTML代码?》出自:百味书屋
链接地址:http://www.850500.com/news/72896.html
转载请保留,谢谢!
查看更多相关内容>>如何优化网站HTML代码?
相关文章
  • 如何优化网站HTML代码?

    html代码优化SEO优化一、SEO优化1 内部SEO(代码优化)网站如果想要有好的排名,需要做很多工作,个人觉的内部优化应该是首位,否则你的SEO推广会打折。就算你的网站做的多好看,设...

推荐范文