如何提高网页设计开放的速度

互联网带宽越来越广，页面的加载速度似乎是一个质的飞跃。其实呢因为随着带宽的增加，网页也越来越多的对象，所以加快网页还是一个重要的问题。加快网站打开速度，有三条路径，一条是提高网络带宽，二是用户做优化的机器，三是网站设计师做一定优化的页面。本文站在网站设计师的角度，分享一些提示来优化网页加载的速度。
首先，优化图片
几乎没有没有图片的页面。如果你经历了56K年的猫，你不会真的很喜欢很多的网站图片。因为加载网页需要很多时间。
即使现在，网络带宽已经有了很大的改善，56K猫逐渐淡出，优化图片加快页面或者是必要的。
通过减少图像数量，降低图像质量和使用适当的格式来优化图像。
1，减少图片数量：删除不必要的图片。
2，降低图像质量：如果没有必要，尝试降低地图像质量一样，尤其是jpg格式，质量下降5％似乎不尽相同，但文件大小的变化比较大。
3，使用适当的格式：见下一点。
因此，在上传图片之前，您需要编辑图片，如果您认为photoshop太麻烦，可以尝试一些在线图像编辑工具。太懒了编辑，想要有一个特殊的效果图片？您可以尝试使用javascript来实现图片效果。
二，图像格式的选择
通常在页面上使用图像格式有三个，jpg，png，gif。三种格式的具体技术规格不是本文的内容，我们只需要知道何时使用什么格式来减少页面的加载时间。
1，JPG：一般用于展示风景，人物，艺术摄影作品。有时在电脑屏幕截图中使用。
2，GIF：提供较少的颜色，可以在一些颜色要求不高的地方使用，如网站标识，按钮，表现等。当然，gif是动画图片的重要应用。就像使用Luna一样Pic产生的图片反映出来。
3，PNG：PNG格式可以提供透明的背景，是一种用于显示图像格式的发明。 它通常用于需要透明背景显示或更高图像质量要求的页面上。
三，优化CSS
CSS堆栈样式表加载页面效率更高，浏览体验也得到了改善。 使用CSS，表格布局可以退休。
但有时我们会在使用一些更多的冗长的语句时编写CSS，比如这个句子：
边距：10px;
保证金权利：20px;
边距：10px;
保证金左：20px;
您可以简化为：
边距：10px 20px 10px 20px;
或者这句话：
<P class =“”文字段落“</ p>
<P class =“decora泰德“>二段</ p>
<P class =“”三段</ p>
<P class =“Forth段</ p>
可以使用div来包括：
<Div class =“decoration”>
<P>文字段落</ p>
<P>二段</ p>
<P>三段</ p>
<P>段落</ p>
</ Div>
简化的CSS可以消除冗余属性并提高运营效率。 如果您在懒惰后编写CSS进行简化，可以使用一些在线简化的CSS工具，如CleanCSS。
四，斜杠后的网址
一些URL，如“www.kenengba.com/220”，当服务器二段</ p>
<P class =“”三段</ p>
<P class =“Forth段</ p>
可以使用div来包括：
<Div class =“decoration”>
<P>文字段落</ p>
<P>二段</ p>
<P>三段</ p>
<P>段落</ p>
</ Div>
简化的CSS可以消除冗余属性并提高运营效率。 如果您在懒惰后编写CSS进行简化，可以使用一些在线简化的CSS工具，如CleanCSS。
四，斜杠后的网址
一些URL，如“www.kenengba.com/220”，当服务器收到这样的地址请求时，需要时间确定文件类型的地址。 如果220是一个目录，您可能希望在URL上添加斜杠以使其成为www.kenengba.com/220/，以便服务器能够知道访问目录中的索引或默认文件， 节省加载时间。
5，标高和宽度
这很重要，但很多人因为懒惰或其他原因而忽视它。 当您在网页上添加图片或表单时，您应该指定其高度和宽度，即高度和宽度参数。 如果浏览器没有找到这两个参数，则需要在计算大小的同时下载图片，如果图片很多，浏览器需要不断调整页面。 这不仅影响速度，还影响浏览体验。
这是一个更友好的图片代码：
<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，如果页面嵌入其他站点的小部件，如果有空间可供选择，一定要快速选择。
3，尝试使用图片而不是闪光灯，这对SEO也是好的。
4，一些内容可以静态到静态，以减轻服务器的负担。
5，页脚上的统计代码。