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

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

网页提速!

一、优化图片

几乎没有哪个网页上是没有图片的。如果你经历过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、统计代码放在页尾。

转载于:https://www.cnblogs.com/xujiaci/archive/2008/05/06/1184512.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_712289.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

extjs 网站首页table布局,秀一下

用extjs做首页&#xff0c;布局是最难的&#xff0c;我参考网上发挥的&#xff0c;看看吧。呵呵 这个只是首页的中间部分&#xff0c;东、西、南、北都还有东西的&#xff0c;只是没有截图下来。&#xff08;其中三个板块样式应该是一样的&#xff0c;这里为了显示多样化。所以…

springboot做网站_Github点赞接近10万的SpringBoot学习教程+实战推荐!牛批!

很明显的一个现象&#xff0c;除了一些老项目&#xff0c;现在 Java 后端项目基本都是基于 Spring Boot 进行开发&#xff0c;毕竟它这么好用以及天然微服务友好。不夸张的说&#xff0c;Spring Boot 是 Java 后端领域最最最重要的技术之一&#xff0c;熟练掌握它对于 Java 程序…

html推荐网站,20个经典bootsrtap后台html网站模板推荐

今天为大家推荐20款不同风格的Bootstrap后台管理模板&#xff0c;每一款都经典可用&#xff0c;能预览和下载&#xff0c;保证让你挑得眼花缭乱。1&#xff0c;Simpli flag蓝色Simpli Flat蓝色管理模板是一款采用Flat扁平风格的响应式管理模板&#xff0c;功能齐全&#xff0c;…

新练习作,实验室网站首页——未采用

一直很喜欢蓝色 由于种种猫腻&#xff0c;残鸟&#xff01; 每个孩纸的作品后面都有一段悲伤滴往事&#xff0c;而我滴充满了猫腻! 擦~~不解释 让某些银的感觉史一会吧&#xff0c;我先自由的飞一会&#xff01;转载于:https://www.cnblogs.com/meimeiwa/archive/2011/03/12/in…

ECSHOP商城网站建设之自定义调用广告方法(二)

原文地址&#xff1a;http://www.cnblogs.com/zgzy/p/3598991.html 使用ecshop进行商城网站建设时&#xff0c;ecshop默认的很多功能对于我们个性化设计之后不太使用。今天我们主要是来分析如果自定义调用广告位&#xff1a;1.调用单个广告位时我们可以使用&#xff1a;{insert…

网站建设过程中的:重要页面、关键页面、过程页面、结果页面

网站的页面类型和等级可做归类。 有些是“重要页面”&#xff0c;有些是“关键页面”&#xff0c;有些是“过程页面”&#xff0c;有些是“结果页面”。 这些根据页面存在的目的和作用分门别类。 “重要页面”和“关键页面”等级高于“过程页面”和“结果页面” 用户行为分析这…

网站的安全登录认证设计

用户登录是任何一个应用系统的基本功能&#xff0c;特别是对于网上银行系统来说&#xff0c;用户登录的安全性尤为重要。如何设计一个网站的安全登录认证程序&#xff0c;是本文主要讨论的问题。静态密码存在着比较多的安全隐患&#xff0c;***者有很多手段获得静态密码&#x…

借双慧眼识别钓鱼欺诈网站

借双慧眼识别钓鱼欺诈网站 钓鱼欺诈网站&#xff0c;又称仿冒网站。这些网站的内容主要是复制那些正常网站的内容&#xff0c;使得网民粗一看几乎和正常网站一模一样&#xff0c;区别仅限于浏览器的地址。 曾有新闻报道有骗子在北京街头做了个假ATM机&#xff0c;这ATM机和市民…

php漏洞书籍,PHP漏洞全解(一)-PHP网站的安全性问题

845002618491765410.jpg (163.16 KB, 下载次数: 58)2015-11-13 14:40 上传针对PHP的网站主要存在下面几种攻击方式&#xff1a;1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、…

博文视点大讲堂41期——SEO难点之网站内部链接结构 圆满成功

博文视点大讲堂41期——SEO难点之网站内部链接结构 圆满成功 2010年11月21日&#xff0c;电子工业出版社博文视点在中关村图书大厦五层如期举办了“博文视点大讲堂第41期&#xff1a;SEO难点之网站内部链接结构”&#xff0c;本次活动邀请经典畅销图书《网络营销实战密码》作者…

一步一步SharePoint 2007之十七:解决实现Form认证后无法再用SharePoint Designer编辑网站的问题...

值得提一下的是&#xff0c;或许Microsoft公司还没有考虑到实现Form认证后无法再用SharePoint Designer编辑网站的问题&#xff0c;所以这里讲到的方法并不是彻底的解决问题&#xff0c;而是用一个简单的方法巧妙的避开这个问题。希望SharePoint Designer正式版出来后&#xff…

说说大型高并发高负载网站的系统架构 (转)

By Michael转载请保留出处&#xff1a;俊麟 Michael’s blog (http://www.toplee.com/blog/?p71)Trackback Url : http://www.toplee.com/blog/wp-trackback.php?p71 我在CERNET做过拨号接入平台的搭建&#xff0c;而后在Yahoo&3721从事过搜索引擎前端开发&#xff0c;又…

php网站mysql数据库导入工具_phpstudy通过phpMyAdmin导入mysql数据库方法

不是我们作品的用户&#xff0c;也可联系上面QQ提供有偿人工指导服务导入Mysql数据库只用导一次&#xff0c;以后项目出问题了&#xff0c;也不用操作数据库了。但是运行程序的时候一定保证phpstudy是启 动状态。1、a、把电脑上的杀毒软件必须先退出再下载安装。B 防火墙也尽量…

ASP.NET网站防止SQL注入攻击

目的: 对输入的字串长度,范围,格式和类型进行约束. 在开发 ASP.NET 程序时使用请求验证防止注入攻击. 使用 ASP.NET 验证控件进行输入验证. 对不安全的输出编码. 使用命令参数集模式防止注入攻击. 防止错误的详细信息被返回到客户端. 概述 : 你应该在程序中验证所有的不信任输入…

55个应用html5网站的最好例子

HTML5是新的和更新版本的Web标准和著名的HTML技术 。HTML5的新功能&#xff0c;技术和元素&#xff0c;让设计人员能够创建新的和美丽的东西。新标准结合了视频播放和拖和下降&#xff0c;此前一直依赖第三方浏览器&#xff0c;如Adobe Flash和微软Silverlight插件等功能。HTML…

沙发家具网站源码_小户型装修不会选家具?大湾网推荐你了解这些装修风格家具,装修省心空间大!...

原标题&#xff1a;小户型装修不会选家具?大湾网推荐你了解这些装修风格家具&#xff0c;装修省心空间大&#xff01;家具与环境和谐统一&#xff0c;美式、中式、欧式、田园&#xff0c;风格迥异&#xff0c;大有不同&#xff0c;你到底适合什么样的装修风格&#xff1f;帮你…

https传输基于多ip实现的网站数据传输

一.https 简介 HTTPS&#xff08;全称&#xff1a;Hypertext Transfer Protocol over Secure Socket Layer&#xff09;&#xff0c;是以安全为目标的HTTP通道&#xff0c;简单讲是HTTP的安全版。即HTTP下加入SSL层&#xff0c;HTTPS的安全基础是SSL&#xff0c;因此加密的详细…

go语言和php哪个建站好,从0开始Go语言,用Golang搭建网站

实践是最好的学习方式零基础通过开发Web服务学习Go语言本文适合有一定编程基础&#xff0c;但是没有Go语言基础的同学。也就是俗称的“骗你”学Go语言系列。这是一个适合阅读的系列&#xff0c;我希望您能够在车上、厕所、餐厅都阅读它&#xff0c;涉及代码的部分也是精简而实用…

knewone最新分享购物网站模板

演示效果&#xff1a;http://www.erdangjiade.com/templates/390 效果图片&#xff1a; 转载于:https://www.cnblogs.com/66daima/p/7507679.html

Opera Unite如何架设自己的网站

1使用Opera的File Sharing可以共享你的文件 2使用Opera的Stream media可以共享你的视频&#xff0c;有些格式甚至可以直接在浏览器端打开&#xff08;比如MOV&#xff0c;但是需要安装Quicktime的插件&#xff09;。当然这种播放方式并非我们希望的边下边播&#xff0c;而是全…