此文在优化网页打开速度及SEO方面,以网站浏览者,网站制作者,及服务器管理员的身份分别阐述了我们应该如何做才能解决网页打开慢的问题,向作者致敬

互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃。其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题。加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化。这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧。

一、优化图片

几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。

即使在现在,网络带宽有了很多的提高,56K猫逐渐淡出,优化图片以加快网页速度还是很有必要的。

优化图片包括减少图片数、降低图像质量、使用恰当的格式。

1、减少图片数:去除不必要的图片。

2、降低图像质量:如果不是很必要,尝试降低图像的质量,尤其是jpg格式,降低5%的质量看起来变化不是很大,但文件大小的变化是比较大的。

3、使用恰当的格式:请参阅下一点。

因此,在上传图片之前,你需要对图片进行编辑,如果你觉得photoshop太麻烦,可以试试一些在线图片编辑工具。懒得编辑而又想图片有特殊的效果?可以试试用过调用javascript来实现图片特效。

二、图像格式的选择

一般在网页上使用的图片格式有三种,jpg、png、gif。三种格式的具体技术指标不是这篇文章探讨的内容,我们只需要知道在什么时候应该使用什么格式,以减少网页的加载时间。

1、JPG:一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。

2、GIF:提供的颜色较少,可用在一些对颜色要求不高的地方,比如网站logo、按钮、表情等等。当然,gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。

3、PNG:PNG格式能提供透明背景,是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

三、优化CSS

CSS叠层样式表让网页加载起来更高效,浏览体验也得到提高。有了CSS,表格布局的方式可以退休了。

但有时我们在写CSS的时候会使用了一些比较罗嗦的语句,比如这句:

以下为引用的内容:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

你可以将它简化为:

margin: 10px 20px 10px 20px;

又或者这句:

以下为引用的内容:
<p class="decorated">A paragraph of decorated text</p>
<p class="decorated">Second paragraph</p>
<p class="decorated">Third paragraph</p>
<p class="decorated">Forth paragraph</p>

可以用div来包含:

以下为引用的内容:
<div class="decorated">
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>

简化CSS能去除冗余的属性,提高运行效率。如果你写好CSS后懒得去做简化,你可以使用一些在线的简化CSS工具,比如CleanCSS。

四、网址后加斜杠

有些网址,比如"www.kenengba.com/220",当服务器收到这样一个地址请求的时候,它需要花费时间去确定这个地址的文件类型。如果220是一个目录,不妨在网址后多加一个斜杠,让其变成www.kenengba.com/220/,这样服务器就能一目了然地知道要访问该目录下的index或default文件,从而节省了加载时间。

五、标明高度和宽度

这点很重要,但很多人由于懒惰或其它原因,总是将其忽视。当你在网页上添加图片或表格时,你应该指定它们的高度和宽度,也就是height和width参数。如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。

下面是一个比较友好的图片代码:

<img id="moon" height="200" width="450" src="http://www.kenengba.com/moon.png" alt="moon image" />

当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。

六、减少http请求

当浏览者打开某个网页,浏览器会发出很多对象请求(图像、脚本等等),视乎网络延时情况,每个对象加载都会有所延迟。如果网页上对象很多,这可以需要花费大量的时间。

因此,要为http请求减负。如何减负?

1、去除一些不必要的对象。

2、将临近的两张图片合成一张。

3、合并CSS

看看下面这段代码,需要加载三个CSS:

以下为引用的内容:
<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />

我们可以将其合成一个:

<link rel="stylesheet" type="text/css" href="/style.css" />

从而减少http请求。

七、其它小技巧(译者添加)

1、去除不必要加载项。

2、如果在网页上嵌入了其它网站的widget,如果有选择余地,一定要选择速度快的。

3、尽量用图片代替flash,这对SEO也有好处。

4、有些内容可以静态化就将其静态化,以减少服务器的负担。

5、统计代码放在页尾。

6、尽量不要用一个很小的图片当背景,这样做会加大客户端CPU处理时间
转载自:http://www.chinaz.com/z/zzxy/xy_10.htm

转载于:https://www.cnblogs.com/JoinZhang/archive/2010/07/05/1771677.html

网页打开速度慢的原因及N种解决方法相关推荐

  1. 网页打开速度慢的原因 你知道的有几条?

    "有时候我们打开一个网站,浏览网页的时候,发现网页打开的速度很慢,甚至打不开的情况.虽然网站的内容很好,但是因为速度太慢而不得不停止访问."这样的经历相信大家都有遇见,对于不太了解 ...

  2. w7计算机防火墙无法更改,win7系统提示防火墙无法更改某些设置错误代码0x8007437的原因及四种解决方法...

    win7系统提示"防火墙无法更改某些设置,错误代码0x8007437",这该怎么办呢?下面脚本之家的小编就带来win7系统提示防火墙无法更改某些设置错误代码0x8007437的原因 ...

  3. 电子邮件乱码产生的主要原因及几种解决方法

    关于电子邮件乱码 --转摘自中国科学院,作者不详     本文主要介绍邮件乱码产生的主要原因及几种解决方法: E-mail编码标准 由于一个汉字是用两个扩展 ASCII码表示,对DOS.Windows ...

  4. win7系统开机出现OEM7GRUB 0.4.4提示无法进入系统的原因及两种解决方法

    source:http://www.jb51.net/os/windows/475464.html win7系统开机出现OEM7GRUB 0.4.4提示无法进入系统的原因及两种解决方法 作者:佚名 字 ...

  5. 百度云加速 ajax,使用百度云加速后网站打开速度慢、广告不显示的解决方法

    最近发现自己的博客打开很慢,通过ie浏览器打开速度还可以,使用任何第三方浏览器打开都超级慢,以为是HTML代码元素导致,一番比对后没有发现不是HTML5代码问题,但是在头部发现一串javascript ...

  6. 网络速度变慢的常见23种解决方法

    以下是导致网络缓慢的常见问题,以及一些常见网络问题的解决方法,在此整理给各位网友.(互联网搜集) 一.网络自身问题 您想要连接的目标网站所在的服务器带宽不足或负载过大.处理办法很简单,请换个时间段再上 ...

  7. html5页面打不开原因,有网但是网页打不开是什么原因(原因及2种解决方法)

    本来刚交了宽带网络信用卡年费,并且本地连接表明一切正常情况,却偏要打开网站一直发生难题,换了电脑浏览器和重新启动都失效,应该怎么办呢?不必担心!下边小编给大伙儿梳理了一些相关网络链接一切正常可是不能上 ...

  8. 网站设计者:提高网页打开速度的一些小技巧

    互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃.其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题.加快网页的打开速度,有三个路径,一是提高网络带宽, ...

  9. 网站打开速度慢的原因,排查方法及优化方法(大全)

    如果你的网站打开速度过慢,而你又不知道该如何解决,那么这篇文章是非看不可了.手把手的教你如何排查网站打开慢的原因,以及优化方法. 排查网站打开速度慢的原因: 1网站服务器速度或租用空间所在服务器速度 ...

  10. 网站打开速度慢的原因分析及对策

    网站打开速度慢的原因分析及对策 原因一.你用了很多javascript的特效. 例如鼠标的特效啊.页面上的栏目的特效啊.状态栏的特效啊,等等.这些特效的原理是先由服务器下载到你本地的机器,然后在你本地 ...

最新文章

  1. windows远程桌面如果超出最大连接数, 使用命令行mstsc /console登录即可
  2. 青龙羊毛——鸡厂签到
  3. Netty源码 服务端的启动
  4. 2017 五月 UFED Series Releases 系列 6.2更新发布
  5. python储存与读取图片_Python下opencv使用笔记(一)(图像简单读取、显示与储存)...
  6. 40个非常有创意的404页面设计作品
  7. vue --- 修饰符.lazy、.number、.trim
  8. mybatis系列-06-输入映射
  9. 面试题 01.01. 判定字符是否唯一 (计数排序思想)
  10. 无法连接 Plugins Market 失效的日子
  11. 12.这就是搜索引擎:核心技术详解 --- 搜索引擎发展趋势
  12. 【转】在birt中显示条形码
  13. (php毕业设计)基于php旅游信息网站管理系统源码
  14. Pandas 1.数据的读取和保存
  15. Docker 跨主机容器网络通信 -- Flannel 实现
  16. Linux_系统管理
  17. FCN全卷积网络和Deconv转置卷积原理描述
  18. 不知道考研那些书比较好么?我来推荐~~~(二)
  19. word文档及其历史版本的备份
  20. 第三章 SQL Server 数据管理

热门文章

  1. 222Echarts - 3D 地球(Globe Displacement)
  2. 什么是USBHOST、USB Slave和USB OTG?它们之间有什么区别 USB、MiniUSB、MicroUSB
  3. Android性能优化(一)启动优化
  4. linux 文件比较覆盖,Linux系统 wget 覆盖本地文件
  5. 雷达图使用攻略(上)
  6. Android平台快速集成当下流行平台分享
  7. Ipad 连笔记本共享360wifi热点 总是断开 解决方法
  8. Hive——多行转一行及一行转多行
  9. 齐齐哈尔大学计算机调剂,齐齐哈尔大学2020年硕士研究生调剂信息
  10. webstorm绝对路径引入echarts_Webstorm+Webpack+echarts构建个性化定制的数据可视化图表两个echarts详细教程(柱状图,南丁格尔图)...