提高网页加载速度的初步简单技巧方式

  网页的加载速度是评估网站质量一个重要指标。原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网 页,所以网页载入速度会极大地影响网站的流量和访问。以下总结了几种可以明显提高网站加载速度的初步简单技巧方式,如果你的网站存在载入速度慢的问题不妨 与此为参考对网页做些初步优化。

  网页加载提速之 – 优化网页图片文件

  你的网页一定有图片,加载一个网页往往图片的总尺寸是最大的,特别是那些颜色丰富的背景图片和大副广告图片。所以一般要在同等图片质量的情况下要尽可能地 减小图片尺寸。在Photoshop中我们可以用保存为Web图片的选项试一下。图片也有几种常用的文件格式。如JPEG一般是用来存储照片或全彩色图片 的,比如照片、屏幕截图等。GIF图片格式的颜色要比JPEG少,适合做小图,如制作按钮、Logo等,另外GIF支持动态效果。PNG跟GIF比较相 似,但它的尺寸较大,支持的颜色也比GIF要多,并且PNG支持背景透明。我们可以试试使用一种不同的格式保存图片试下,如将PNG和JPEG换成GIF 试试。

  网页加载提速之 – 图片使用height和width属性

  你会给每个图片加上 height和width属性吗?这两个属性可以让浏览器在加载图片之前就知道图片的长和宽,并预留出指定的长宽待图片加载后显示。如 果没有这两个属性,浏览器还需要在读取图片成功后再处理一次页面布局样式,这无疑减慢了网页加载速度。所以在固定图片大小的情况下最好都使用上长和宽属 性。

  网页加载提速之 – CSS文件压缩瘦身

  DIV+CSS是现在流利的网页布局方式,DIV定义了元素,CSS控制显示效果。所以往往我们会把CSS写到另外一个或多个外部链接CSS文件中,并且 CSS文件代码也有很多行。我们可以使用一些CSS压缩工具来删除CSS文件中不必要的多余内容,如重复定义样式、空格等来瘦身。可以尝试使用一下 CleanCSS工具来压缩你的CSS文件。

  网页加载提速之 – 目录地址后加上斜杠(/)

  如访客点击访问这样一个目录地址:http://www.3lian.com/web,去打开这个目录下的index.html文档。当服务 器收到请求后它需要消耗一些时间来分析这是一个文件还是一个目录。但是如果我们在最后加上一个斜杠(/),服务器就知道你是在访问一个目录地址,然后就直 接加载默认文档index.html或index.php就行了。这样服务器就不用花时间来分析这个地址,也起到了一定加速的作用。

  网页加载提速之 – 整合CSS、JS文件减少HTTP请求次数

  现在的网页都有多个图片、CSS外部文件链接、Javascript外部脚本链接。所以当访问一个网页时浏览器需要多次向服务器请求这些文件。在请求和加 载之间会产生不少的时间差。特别是一些网页上有多个小图片、图标按钮的网页,有多少图片,浏览器就需要请求多少将这些小文件,多将请求这些小图片文件将明 显影响网页的加载速度。所以我们应该尽可能将小图片拼合一个PNG大图片上,然后通过坐标来显示图标。一次请求一个大图片比多次请求小图片速度要快不少。 同样,最好将CSS和Javascript尽可能地整合到一个文件中都有助于加快网页载入速度。

  写在最后,这里只提到了一些简单的初级皮毛,因为这些是最容易做的优化方式。下一步我们还需要考虑网页代码(php或aspx)是否优化高效、服务器的响 应速度、服务器带宽是否够用等等更深层的因素。但如果将上面几点做到位,相信网页加速速度会提高不少

时间: 2024-12-21 20:39:58

提高网页加载速度的初步简单技巧方式的相关文章

提高网页加载速度的一些建议

分享优化网页加载速度的七个技巧一.优化图片几乎没有哪个网页上是没有图片的.如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站.因为加载那样一个网页会花费大量的时间.即使在现在,网络带宽有了很多的提高,56K猫逐渐淡出,优化图片以加快网页速度还是很有必要的.优化图片包括减少图片数.降低图像质量.使用恰当的格式.1.减少图片数:去除不必要的图片.2.降低图像质量:如果不是很必要,尝试降低图像的质量,尤其是jpg格式,降低5%的质量看起来变化不是很大,但文件大小的变化是比较大的.3.使用恰当

如何提高网页加载速度

1.减少页面请求: 从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少. 之前我下载163邮箱的登陆页面的图片时发现,它们的只用到了一个图片来完成整个页面的所有图片,当时我就纳闷了,这跟平时做的网站不一样呀.然来这样做减少浏览器的请求次数,用httpwatch你会发现请求的总时间大大减少了.同样的想法,在做css样式,JavaScript代码的时候也要做到尽可能的放在一个文件下来减少WEB请求. 2.页面压缩技术,给我们js

Windows下使用apache模块实现合并多个js、css提高网页加载速度_win服务器

现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多.当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验.使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度. 示例效果如下: mod_concatx模块是在mod_concat基础上修改的,感谢他们的工作. 原有的mod_concat模块有很大的参考价值,但实际作用不大. 该模块存在以下三个问题: 1.每次都会重新向客户端发数据,没有合理利用浏览器

谷歌推出Zopfli算法 提高网页加载速度

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 Google日前发布了一款新型数据压缩算法,Zopfli.该算法能更紧凑地压缩网页内容,比之前的Zlib算法的压缩密度要提高3至5个百分点,使得网页在服务器端的传输也更加快速.Zopfli算法是Google企业文化中"20%时间"的产物,这个计划允许工程师拿出20%的工作时间去研发自己感兴趣的项目.该算法由Google在苏

谷歌计划将移动网络网页加载速度提高一倍

中介交易 SEO诊断 淘宝客 云主机 技术大厅 网易科技讯 4月19日消息,据国外媒体报道,作为谷歌的技术总监,艾维那·简恩(Arvind Jain)一直在通过全球的旅馆.办公室.机场休息区等各种途径监控网络接入速度,寻求途径来加快接入网络的速度.简恩的任务是使移动网络的网页加载速度比目前提高一倍.目前,美国移动网络的网页加载速度平均为9.2秒. 作为全球最大的搜索引擎提供商,谷歌力求通过提高移动网络接入速度来推动电子商务和网络广告的发展,这当中有数十亿美元的开发空间,这已成为全公司的目标.当用

今年移动浏览器网页加载速度将提高30%

摘要: 5月11日消息,据科技博客CNET报道,谷歌网络性能首席工程师史蒂夫苏德斯(Steve Souders)日前表示,来自谷歌分析(Google Analytics)服务追踪的数据显示,与去年相比,今年智能手机和平板电脑 5月11日消息,据科技博客CNET报道,谷歌网络性能首席工程师史蒂夫·苏德斯(Steve Souders)日前表示,来自"谷歌分析"(Google Analytics)服务追踪的数据显示,与去年相比,今年智能手机和平板电脑上的移动浏览器网页加载速度将提高30%.

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能有20%的提升. 它并不是一门新技术,有人认为只有 Chrome 才具备这个功能.也有人认为它是有史以来提升浏览器性能最有效的方法.如果你第一次接触预加载器,也许心中已经有了无数个问号.什么是预加载器?它是如何提升浏览器性能的? 首先需要了解浏览器是如何加载网页的 一个网页的加载依赖于脚本文件.CS

【原】提高网站加载速度的3项黄金守则

如何优化网页加载速度是每个前端开发工程师需要了解的,也是前端开发工程师需要具备的基本条件. 优化网站加载速度的原理主要是减少网站文件的大小,减少HTTP请求数.网站文件越小,浏览器加载页面会比较轻松,打开页面的速度也会提升:一个HTTP请求,对页面打开速度造成的延时大概是0.01秒,HTTP的请求数越多,网站打开的速度就会越慢. 那么如何减少网站文件的大小,减少HTTP请求数呢?笔者做前端(重构方向)有2年多了,这里分享3项优化网站加载速度的方法,希望能给有需要的同学以及刚接触前端的初学者带来帮

什么措施能影响网页加载速度呢?

摘要: 从我开始知道 SEO 这几年起,基本上所有的 SEO 活动都是基于前端的,从header 到 body,从小标签到 CSS,从链接到关键词密度:初期牛人们诊断一个网站 SEO 的标准也是从前端页面着手,不 从我开始知道 SEO 这几年起,基本上所有的 SEO 活动都是基于前端的,从header 到 body,从小标签到 CSS,从链接到关键词密度:初期牛人们诊断一个网站 SEO 的标准也是从前端页面着手,不过的确也是,从排名算法前端的代码的确占了大部分的比例,但后端的服务器速度优化,也开