如何加快HTML页面加载速度

1. 页面减肥

a. 页面的肥瘦是影响加载速度最重要的因素。

b. 删除不必要的空格、注释。

c. 将inline的script和css移到外部文件。

d. 可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥。

2. 减少文件数量

a. 减少页面上引用的文件数量可以减少HTTP连接数。

b. 许多JavaScript、CSS文件可以合并最好合并,人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了。

3. 减少域名查询

a. DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好。

4. 缓存重用数据

a. 对重复使用的数据进行缓存。

5. 优化页面元素加载顺序

a. 首先加载页面最初显示的内容和与之相关的JavaScript和CSS,然后加载HTML相关的东西,像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。

6. 减少inline JavaScript的数量

a. 浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大。

b. 不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容。

7. 使用现代CSS和合法的标签

a. 使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片。

b. 使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥。

8. Chunk your content

a. 不要使用嵌套table,而使用非嵌套table或者div。将基于大块嵌套的table的layout分解成多个小table,这样就不需要等到整个页面(或

大table)内容全部加载完才显示。

9. 指定图像和table的大小

a. 如果浏览器可以立即决定图像或table的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作。

b. 这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变。

c. image使用height和width。

时间: 2024-10-29 19:31:26

如何加快HTML页面加载速度的相关文章

页面加载速度优化的12个建议

Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性,同时指出很多网站都没有利用最佳的页面优化技术,页面加速速度都存在很大缺陷.那么该如何补救,提高网站页面的加载速度呢? 报告给出了12个页面加载速度优化的补救措施,用以改善加载时间,改善站长浏览者的用户体验.网站运营人员可以通过这些建议来解决页面加载速度难题.编译如下: 1.合并Js文件和CSS 将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文

提高页面加载速度的方法

提高页面加载速度的方法有如下几个方面:(一)减少HTTP强求(1)增加并行连接(2)合并资源文件:将多个小的css还有javascript文件进行合并成一个大文件,这样页面在加载页面的相关资源的时候,就会减少HTTP的请求,从而加快页面的加载速度(3)使用CSS sprite:将整个网站上所有共用的小图片都合成一张图片,然后使用background-position进行控制所需要的图片位置.原理是虽然每次只是使用了一张小图片,但是整个图片都已经被保存到了缓存中,这样每次使用就不需要再去请求图片

页面加载速度优化

1.合并Js文件和CSS 将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次“Get”请求,延长加载速度,将JS文件合并在一起后,自然就减少了Get请求次数,提高了加载速度. 2.Sprites图片技术 Spriting是一种网页图片应用处理方式,它是将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用CSS技术展现出来.这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,可以减少了整

jquery实现图片预加载提高页面加载速度

使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图片的加载速度,这的确是个好方法,不过有时候我们也可以从前台找一些解决的 方法.下面我来介绍一种在实际应用中经常会使用到的js预加载的方法. 首先在输出图片的时候我们做一些处理 处理完html我们开始写js了,在这里我使用了jquery的类库

Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

【转】Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

如何提升页面加载速度,并简述原理

页面的加载过程主要分为下载.解析.渲染三个步骤,下面从这三个方面阐述提升加载速度的方法: 1.加快文件下载速度,减小资源文件下载对页面解析的阻塞.页面加载过程首先会下载 HTML 文件,然后自上而下开始解析,解析过程中如果遇到外部资源则会开始下载,直至下载完成才会继续解析.所以,加快文件下载速度方式是有效的提升页面加载速度的方法.具体可以是 1)通过设置 CDN.HTTP 缓存等方式,减少 HTTP 传输时间: 2)对文件进行压缩,减小文件体积: 3)对 script.CSS 文件引用标签设置异

优化页面加载速度的方法

1. 优化图像 图像对于吸引访客的关注是很重要的.但是你添加到页面上的每一张图片都需要用户从你的服务器下载到他们的电脑上.这无疑增加了页面的加载时间,因此很可能让用户离开你的网站.所以,优化图像是非常必要的. 过大的图像需要的下载时间更多,因此要确保图像尽可能的小.可以使用图像处理工具如PS来减小颜色深度.剪切图像到合适的尺寸等. 2. 去掉不必要的插件 一个非常值得关注但经常被忽略的因素是你网站安装的插件.如今,大量免费的插件诱导网站开发者添加很多不必要的功能.您安装的每个插件都需要服务器处理

压缩代码加速ecshop程序页面加载速度

由于页面有很多图片,页面加载速度有点慢,本来打算减小图片的体积,后来想想这个后期还得测试下,所以暂时不打算使用google的图片优化工具,先把ecshop生成的html代码压缩下吧 压缩前:首页体积为38kb,压缩后:首页html代码提交24kb,页面测试效果没有任何问题,无错误. 下面我介绍下提升ecshop压缩代码的方法: 1.找到include/cls_templete.php,查找echo $out;在这行代码上方加入底下的代码,保存,然后上传空间,刷新缓冲,ctrl+f5强制刷新页面,