优化网页HTML代码 提高网页访问速度

2016-02-19 21:11 3 1 收藏

今天图老师小编要向大家分享个优化网页HTML代码 提高网页访问速度教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

  一、不要将整个页面放到到一个table中

    一般大家都是用表格来进行布局的,将整个页面的内容都塞进了一个Table(表格)里,然后再由单元格td来划分各个“块”的布局,这种网站的显示速度是绝对慢的。因为Table要等里面所有的内容都加载完毕后才显示出来的,如果某些内容无法访问,就会拖延整个页面的访问速度。在布局时把整个页面分成三部分,头部top、中部middle、版权(尾部)bottom、中部最好再多分几部分,因为,现在大家的首页一般都是分成好几个栏目的内容,其实都可以分开放,不要全都塞到一个Table里。多用几个table,尤其是广告联盟的代码什么的,尽量放到一个单独的table ;比较慢的广告代码,用个table直接放到最底下。反正访问的人最关心的、第一个要看的不是版权信息。

  二、不要放太大的Flash动画、图片,能用GIF格式的就不用JPG的。大图最好切成几块再拼。

  三、尽量用静态HTML页面 ,少用点javascript特效,有时候搞的太多,反而搞的大家眼花,以前看到一个站,状态栏的文字替换狂快,就一直闪啊闪。。   没多少必要,别人是来看站上的文章的、mm图片的。。不是看特效,当然,适当的搞几个还是可以的,至少可以在超级菜鸟面前显示下自己的能力,让他们崇拜下。。

  四、将ASP、PHP等文件的访问改为.js引用

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

    如果你要在静态的HTML页面里嵌入动态的数据,而这些动态的数据是由ASP等程序来提供的话,每次有一个人访问你的网站,服务器就要执行并处理一次count.asp文件,从数据库抽取相应的数据,再输出给网页显示,如果有几万个人同时访问,就要执行几万次。建议在这些程序中将数据动态生成到一个count.js文件中去,然后在首页通过这样的代码来引用.js文件。这样,数据显示的任务就交给客户端的浏览器去做,不会耗费服务器的资源,显示速度自然就快一些。

  五、使用iframe--这个大家都知道,很多GG都是这样发的  呵呵

  使用iframe,这样就不会因为广告页面的延迟而拖了整个首页的显示。

  六、计数器代码放置

    直接把统计代码放到页面内容的前面,或者放在一个Table或者div标签里,那么在计数器不能访问的时候,你的页面上那个Table或者div就会产生几十秒钟的延迟,导致页面很长时间才能访问。正确的方法是:把统计代码放到页面的最下面,并且不要和页面内容同在一个Table或者div标签里。可以在页面代码的最下方直接放置统计代码,或者在最下方单独做一个Table或者div来放置计数器。

  七、友情链接

    很多人都喜欢直接引用友情网站上的图片URL,这样图片要先经过加载才能显示的,各个友情网站的访问速度不一样,整个表格都要等图片

都下载完了才能显示出来,这样大大降低了网页的速度,有时候说不定是几个红叉叉(被D?空间挂了。呵呵)。其实,Logo最好是先下载再传到自己的网页空间。

  最好是文字链接:感觉比较整洁,另外,尽量和同行网站交换连接,可以把其中的有些字连接起来,当作自己站的关键字。比如:你是一个学生站,对方站的名字叫 “**大学学生论坛”,可以写成这样: A HREF="...."**大学 /A A HREF="...."学生 /A A HREF="...."论坛 /A,这样不影响link,又突出了关键字。。

  最后再说几个seo的,昨天在网上看到的

  关键字主要有以下几个部位:

  标题标记: TITLE文本 /TITLE

  META标记:

META NAME="Description" CONTENT="网页简述" META NAME="Keywords" CONTENT="关键字"

  大标题标记: H1文本 /H1等

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  链接标记: A HREF="http://yourcompany.com/page.htm"文本 /A

  网页正文: BODY文本 /BODY

  ALT标记: IMG SRC="1.gif" BORDER=0 ALT="关键字"

  注释标记: !--文本--

  输入标记: INPUT TYPE="HIDDEN" NAME="HIDDEN" VALUE="关键字"

  网址: http://www.关键字.com/关键字.htm

直接给代码啦

未优化的时候

TABLE cellSpacing=0 cellPadding=0 border=0
  TBODY
    TR
      TD align=middle width="100%" colSpan=3TABLE cellSpacing=0 cellPadding=0 width="100%" border=0
          TBODY
            TR height=4
              TD width=7IMG height=4 src="images/fk_top_left.gif" width=7 border=0/TD
              TD width=* background=images/fk_top_bg.gifIMG height=4 src="images/fk_top_bg.gif" border=0/TD
              TD align=right width=7IMG height=4 src="images/fk_top_right.gif" width=7 border=0/TD
            /TR
          /TBODY
      /TABLE/TD
    /TR
    TR
      TD align=middle width="100%" colSpan=3TABLE cellSpacing=0 cellPadding=0 width="100%" border=0
          TBODY
            TR
              TD width=4 height="100%"TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0
                  TBODY
                    TR
                      TD background=images/fk_left_bg.gif/TD
                    /TR
                  /TBODY
              /TABLE/TD
              TD align=middle width=*A href="#" target=_blankIMG height=63 src="images/sun521.jpg" width=84 border=0/A/TD
              TD width=4 height="100%"TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0
                  TBODY
                    TR
                      TD background=images/fk_right_bg.gif/TD
                    /TR
                  /TBODY
              /TABLE/TD
            /TR
          /TBODY
      /TABLE/TD
    /TR
    TR
      TD align=middle width="100%" colSpan=3TABLE cellSpacing=0 cellPadding=0 width="100%" border=0
          TBODY
            TR height=4
              TD width=7IMG height=4 src="images/fk_end_left.gif" width=7 border=0/TD
              TD width=* background=images/fk_end_bg.gifIMG height=4 src="images/fk_end_bg.gif" border=0/TD
              TD align=right width=7IMG height=4 src="images/fk_end_right.gif" width=7 border=0/TD
            /TR
          /TBODY
      /TABLE/TD
    /TR
  /TBODY
/TABLE
 
*********************

优化后的

table border="0" id="table1" cellpadding="0" style="border-collapse: collapse" width="1" height="1"
        tr
                td width="4" height="4"img border="0" src="images/fk_top_left.gif" width="4" height="4"/td
                td height="4"img border="0" src="images/fk_top_bg.gif" width="100%" height="4"/td
                td height="4" width="4"img border="0" src="images/fk_top_right.gif" width="4" height="4"/td
        /tr
        tr
                td width="7"img border="0" src="images/fk_left_bg.gif" width="4" height="100%"/td
                td align="center"IMG src="images/sun521.jpg" border=0/td
                td width="7" align="right"img border="0" src="images/fk_right_bg.gif" width="4" height="100%"/td
        /tr
        tr
                td width="4" height="4"img border="0" src="images/fk_end_left.gif" width="4" height="4"/td
                td height="4"img border="0" src="images/fk_end_bg.gif" width="100%" height="4"/td
                td width="4" height="4"img border="0" src="images/fk_end_right.gif" width="4" height="4"/td
        /tr
/table

来源:http://www.tulaoshi.com/n/20160219/1625468.html

延伸阅读
很多朋友都用虚拟主机来做网站,将网页文件存放在虚拟空间上,但是页面内容一多,网站打开的速度就显得特别慢,如果您碰到这种情况,与其寻求更好的空间,不如通过优化网页代码来取得满意的速度。笔者总结了一些切实可行的方法,制作主页时,以下的方法可以令你的网页速度大大提高。 一、记得帮页面减肥 我们浏览网页实际上是将虚拟...
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div...
页面的加载时间是每一个设计师都担心的数据,或者至少是每个设计师都应该担心的问题。图片的大小肯定是一个需要留意的问题。这就是为什么在这里写了几个有助于优化页面中的图片的小技巧,这些小技巧将有助于大家解决这个问题,这些小技巧也可以在你需要优化图片的时候提供很多帮助。 TinyPNG TinyPNG是使用智能有损压缩技术,来减小png图片的...
如果内容为王的话,那么设计就是城堡。对于企业而言,好的网页设计不仅包含了能够引起访客兴趣的内容,吸引目标用户,而且包含有直观而漂亮的UI设计,促进销售。许多设计师喜欢将自己认为创意爆棚的UI设计直接应用到客户的网站上,但并没有考虑过这种设计是否符合网站的产品,是否符合目标用户群所需要的体验与需求,从这个角度上来说,这样的...
标签: Web开发
优化网页,加快网页下载速度,除了对图片进行优化之外,还需对网页其他各个元素进行优化。在网页编织过程中如能充分利用编辑工具,也可以在网页制作中达到优化目的。下面是Dreamweaver中的一些优化技法: 合理调用CSS 进行网页设计时,运用样式表单CSS来对页面元素进行布置,可以大大地减少HTML代码,这点我们已经很清楚。Dreamw...

经验教程

269

收藏

99
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部