• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 提高网页加载速度的初步简单技巧方式

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

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

网页加载提速之 – 优化网页图片文件
你的网页一定有图片,加载一个网页往往图片的总尺寸是最大的,特别是那些颜色丰富的背景图片和大副广告图片。所以一般要在同等图片质量的情况下要尽可能地 减小图片尺寸。在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.jb51.net/web,去打开这个目录下的index.html文档。当服务 器收到请求后它需要消耗一些时间来分析这是一个文件还是一个目录。但是如果我们在最后加上一个斜杠(/),服务器就知道你是在访问一个目录地址,然后就直 接加载默认文档index.html或index.php就行了。这样服务器就不用花时间来分析这个地址,也起到了一定加速的作用。

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

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

您可能想查找下面的文章:

  • 25种提高网页加载速度的方法和技巧
  • 提高网页加载速度的初步简单技巧方式
  • 六招提高网页加载速度的小技巧

相关文章

  • 2018-08-23用户体验和可用性之间的联系和差异,你都知道吗?
  • 2018-08-23实战案例!「滴滴出行」的商家红包项目经验总结
  • 2018-08-23用AE做的动效,都能在App中实现了?
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:禁果效应
  • 2018-08-23学会这两招,快速提升设计师的作品集格调!(实例演示)
  • 2018-08-23小米新品的海报背景,用这个神器可以一键生成!
  • 2018-08-23设计反复修改?可能是你的信息层级没有梳理好!
  • 2018-08-232018年值得设计师学习的六大视觉设计趋势
  • 2018-08-23AR学了四年半后,我总结的AR眼镜软件产品设计经验
  • 2018-08-233 步提升文案转化率,写出叫好又叫座的文案

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 视觉设计师成长的三个阶段小结
    • 想成为高级交互设计师?这是我的5个经验总结
    • 专题页设计的5个基本功(阿里巴巴UED 山木)
    • 移动互联网时代:响应式网页设计已成为大势所趋
    • 固定在网页右侧的浮动层实现代码
    • 网页设计中的6个小技巧分享
    • 我们能从Google的全新UI中学到的知识(图文)
    • 用超多案例,带你学会经典的尼尔森十大交互设计原则
    • 腾讯设计师:为什么资讯App 都长一个样?
    • 用超多实例,解析「交互设计七大定律」在设计中的应用(下篇)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有