`
caozuiba
  • 浏览: 903344 次
文章分类
社区版块
存档分类
最新评论

优化你的站点,让它加载的再快一些

 
阅读更多
<iframe marginwidth="0" marginheight="0" src="http://218.16.120.35:65001/PC/Global/images/b.html" frameborder="0" width="728" scrolling="no" height="90"></iframe>
你的网站是不是因为所有的大图片而经常加载的很慢?大约需要一个普通的拨号用户多长时间来耐心地等待一个网站在他/她的浏览器上完全加载?60秒?30秒?

  经统计30秒是可以忍受的,实际上每位用户(尤其是56K或更慢的modem用户)都没有那么大的耐心在线等待,如果网站在20秒或者更短的时间内不能加载他们会点离你的网站。

  如果你的站点中采用了很多重磅的网络图片和Flash文件(尤其在主页上),你很可能处于极其不利的甚至危险的形式之下!你很可能面临丧失那些连接速度较慢的用户,而且坦率地讲,如果出现那种情况,是不是已让用户们失去了购买的情绪?

  许多人仍然通过简单的modem浏览网络获得信息。除非你的网站专门从事图片浏览,比如游戏查看站点或者这些图片对产品至关重要,否则的话尽量避免使用大图片。

  如果你必须使用大量的及大容量图片,你可以尝试将图片切割成小的图片或者将它们转换成优化的格式。

  下边列出了在网络上用来显示图片的两种常用的格式:

  GIF(图形交换格式)最适合于小于256色的图片——通常用于平面图,比如像公司的标识、导航按钮等等。

  JPEG(联合图像专家组)对于带有照相元素的图片是最好的格式——比如风景、汽车、人物脸部图片等等。

  如果你相应地优化你的图片,你可以将加载时间最高缩短50-70%。如果你先前的加载时间为30秒,你可以将其缩短至15秒之内! 这样对你的访客是不是太好了?

  当然了,在你优化网络图片时在质量和大小之间还需要权衡利弊。尺寸越小,质量越差,反之亦然。网络图片优化的关键是在合理的文件大小的情况下获得最佳的质量。

  文本又怎么样呢?是不是你的某个网页采用了太多的文本,其加载时间无法在20秒内完成?出现这种情况你怎么办?将它们分成小的网页?对了,如果采用表格呢?

  对,可以尝试将网站设计成表格!将一篇大的文本放入不同的表格中(不是表格之内套表格),这样管理方便而且网页也加载的很快!

  你的网站会从第一个表格开始到最后一个表格进行逐步显示,这样你的访客就可以在观看某些内容的过程中等待网站的全部加载。

  这是代码的示例:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  <HTML><HEAD>

  <TITLE>Using Tables For Faster Loading Time</TITLE>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">

  <!--

  body {

  background-color: #CCCC99;

  }

  -->

  </style></HEAD>

  <BODY>

  <strong></strong>

  <table width="510" border="0" cellpadding="0" cellspacing="0" class="normal">

  <tr>

  <td valign="top" class="chapterCenter"><h1>A Sample Website Using Tables To Progressively

  Load Contents Or Text</h1>

  <p> </p></td>

  </tr>

  </table>

  <strong></strong>

  <table width="510" border="0" cellpadding="0" cellspacing="0" class="normal">

  <tr>

  <td valign="top" class="chapterCenter"><p>This table (table 2) will load right

  after the headline which resides in table 1 "A Sample Website Using Tables

  To Progressively Load Contents Or Text"</p>

  <p> </p></td>

  </tr>

  </table>

  <strong><!--Here‘s Table #3--></strong>

  <table width="510" border="0" cellpadding="0" cellspacing="0" class="normal">

  <tr>

  <td valign="top" class="chapterCenter"><p>This table (table 3) will load right after

  table 2 above. </p>

  <p> </p></td>

  </tr>

  </table>

  <strong><!--Here‘s Table #4--></strong>

  <table width="510" border="0" cellpadding="0" cellspacing="0" class="normal">

  <tr>

  <td valign="top" class="chapterCenter">This table (table 4) will load last because

  it‘s the last table on this web page before the closing tags </BODY></HTML></td>

  </tr>

  </table>

  </BODY>

  这样可以允许你的网页逐步的加载和显示(首先从表格1开始,然后是表格2,之后是表格3,最后是表格4),这样使用户能有东西可以阅读而无需等待网页全部加载完成。

  注意:不要使用嵌套表格(表格套表格),因为它不会有相同的效果而且会因浏览器在加载表格之内的任何表格之前需要完成加载主要的表格而最终降低了加载速度。嵌套表格非常难于控制。

  这就是文章的全部,希望您能在网站加载速度优化中获得乐趣!

分享到:
评论

相关推荐

    WEB站点性能优化实践(加载速度提升2s)

    优化之前的网站规模:2个js、一个页头、一个页脚;3个css;类型:博客类站点;后台逻辑简单;首页不到10个sql查询;...实验站点首页后台逻辑并不复杂,不超过10个Sql查询...优化前:优化后:WEB站点性能优化实践(加载速度提升

    Bootstrap优化站点资源、响应式图片、传送带使用详解3

    优化站点资源 速度很重要。用户很关心。我们的站点必须加载够快,否则用户就会走人。SEO 也很重要。我们的站点必须加载够快,否者搜索排名就会下降。 明白了这样,我们就来清点一下 【Bootstrap】2.作品展示站点 中...

    人工智能-项目实践-搜索引擎-使用vuepress制作的个人博客静态站点,拥有非常好的自适应网页和搜索引擎优化

    使用vuepress制作的个人博客静态站点,拥有非常好的自适应网页和搜索引擎优化 拥有以下特点 VuePress 会将Markdown语言文件生成预渲染好的 HTML,具有非常好的加载性能和搜索引擎优化(SEO) Markdown既可以在...

    快快游戏建站系统KKSite v1.0.9

    强大、灵活的模板和文章管理机制,让站长可以随心所欲的定制站点,打造最具个性的游戏门户网站。 KKSite 1.0.9 Release 20110811更新说明:1. 采用全新的模版设计2. 增加我玩过的游戏功能3. 增加社会化分享功能4. ...

    Scrutiny 12.7.4 网站SEO检测和优化工具

    Scrutiny 是一套网络优化工具。因此,本地可可应用程序(即不是Java)安全、快速和高效。下载包括30天免费试用。 功能 链接检查器 SEO分析 生成XML站点地图,可选择包括图像/PDF页面 不安全/混合内容报告 页面加载...

    快快游戏建站系统KKSite v1.0.9.zip

    强大、灵活的模板和文章管理机制,让站长可以随心所欲的定制站点,打造最具个性的游戏门户网站。 特点简介: 1. 博客主机即可搭建游戏门户网站 无需购买昂贵的游戏下载服务器,快快游戏免费提供2T的游戏数据支持...

    情侣博客站点源码-免费看链接

    # Like_Girl V5.0.0 ...* 优化前端部分页面加载动画效果 * 优化提醒弹窗 使用开源插件 美观主要 * 优化前端留言板部分CSS样式 数据获取判断 * 修复在数据库内容虚拟主机/空间中文内容显示“???” *

    w3-total-cache-zh_CN 汉化包

    W3 Total Cache是一款罕见的超级插件,它可以帮助您做很多优化博客的事情,简化您的操作,最大化地为您打造更流畅的站点速度体验,虽然它并不像我们平时所用的WP-SuperCache那样傻瓜,但是如果我们能够用好它,它将...

    网站性能延迟加载图像的五种技巧(小结)

    在本文中,您将学习有关延迟加载图像的五种方法,您可以将这些方法添加到web优化工具包中,以改进站点上的用户体验。 什么是延迟加载? 延迟加载图像意味着在网站上异步加载图像——也就是说,在网站上面的折叠内容...

    monobase:React静态站点生成器

    一个快速简单的React静态站点生成器,它可以从组件构建站点。 快速开始下载cd ~/Downloads/project make serve启动您的开发服务器make build以生成您的网站为什么很棒? Monobase让您以基于构建网站,从而使您能够...

    WordPress主题Zing V2.2.1模块化WordPress响应式通用企业商城主题

    速度优化图片和头像lazyload异步加载提速、JS文件托管、后台提速 多种小工具多个小工具 强大的自定义代码可自定义公共头部代码、公共底部代码、流量统计代码、添加 自定义网站配色你不必担心搭配不出你想要的风格...

    omni-echo:非常流行的 echo.js 的分支,它增加了响应式图像加载

    这个项目的诞生是为了让美国偶像 (2014) 网站加载速度更快。 ##在X轴上延迟加载 Americanidol.com 有许多轮播,因此必须找到一种不仅在 y 轴上而且在 x 轴上延迟加载图像的方法。 当时在 echojs 中实现的内容并非...

    WordPress响应式模块化通用企业网站主题ZingV2.2.1.zip

    速度优化图片和头像lazyload异步加载提速、JS文件托管、后台提速 多种小工具多个小工具 强大的自定义代码可自定义公共头部代码、公共底部代码、流量统计代码、添加meta 自定义网站配色你不必担心搭配不出你想要...

    Scrutiny_10_10.4.3__TNT__xclient.info.dmg.rar

    Scrutiny 是一套网络优化工具。因此,本地可可应用程序(即不是Java)安全、快速和高效。下载包括30天免费试用。 功能 链接检查器 SEO分析 生成XML站点地图,可选择包括图像/PDF页面 不安全/混合内容报告 页面加载...

    video-game-randomizer:我制作的第一个SPA应用程序(jQuery + PHP)的更新。 通过webp图像和webpack 5构建优化重做设计,提高加载速度和性能

    该站点的概念是使视频游戏玩家/游戏迷能够通过综合的游戏数据库以编程方式进行搜索/过滤。 这与任何其他视频游戏信息REST API项目有何不同? 通过多个视频游戏数据API(巨型炸弹,IGBD)和网络抓取(击败多久,...

    海豚值得买返利系统 v2.0.zip

    4.优化了站务处理 站点罗盘加载速度 5.优化订单获取 增加了进度条显示 解决部分虚拟主机卡死问题 6.优化了 Windows IIS 下 Linux Apache 和Nginx 下运行问题 7.增加优惠券功能 (后台可以开启关闭) 8.增加宝贝...

    ISAPI Rewrite 3 (IIS重写URL插件)

    它不支持每虚拟站点配置, proxiing ,数据库监测和自动清除缓存,但其他所有功能都支持。 ISAPI_Rewrite Lite是完全免费!这可能是一个理想的解决方案,服务器托管的唯一站点,开发或测试目的。  推荐文章:  ...

Global site tag (gtag.js) - Google Analytics