9个技巧网页快速减肥

就算网站内容很优秀,但如果访问速度很慢,相信也不会有多少人耐心等待。

对于网站设计师来讲,网站的访问速度甚至比内容还重要。就算网站内容很优秀,但如果访问速度很慢,相信也不会有多少人耐心等待。下面就介绍一些网页教学网试用过的网站减肥方法,效果还不错,希望在将来设计网站的时候能多多注意以下几项。

      1:使用Gzip压缩文档:Gzip编码是用来改进网页性能的方法,不仅可以减小存储空间,还可以减少传输所需要的时间。将网站中的文件使用Gzip压缩后,可以显著地增加网页加载速度,同时也可以降低网站的带宽流量消耗。(使用此方法会加重服务器负担,因为需要修改服务器配置,对于虚拟主机用户来讲不可操作。)

      2:CSS压缩减肥工具 http://www.xland.com.cn/css/geshihuacss.htm
把你的网站CSS代码复制到此框内,点击压缩化,一般都可以对CSS压缩1-5k。

      3:给JavaScript文件减肥:这个方法不同于Gzip压缩功能,缩小JavaScript文档有很多方法,在这里推荐使用JS在线减肥网站:http://javascriptcompressor.com/

      4:将样式表文件放在外部调用:把页面中需要用到的JavaScript 和CSS样式表文件放在另外的文件夹中,这样一来在打开网站其他页面时就会缓存这些调用的文件,从而加快网站页面的加载速度。

      5:网站图片尽量使用GIF格式。GIF格式图片占用空间小,例如我的网页教学网的插图,JPG格式的图片一般在10-50K之间,而GIF格式图片一般都是10K以下。

      6:尽量不要在首页调用太大的FLASH文件和视频文件。

      7:避免使用网页重定向:无论是通过服务器端重定向还是通过JavaScript代码进行内容重定向,网站都会首先加载一个空白的页面,然后再定向到另外的页面,这样不仅延长了页面的加载时间,还很有可能导致无法跳转,让用户面对一个“空白”页面。

      8:把统计代码放到网站的最下面:不要和页面内容同在一个Table或者div标签里。可以在页面代码的最下方直接放置统计代码,或者在最下方单独做一个Table或者div来放置计数器。这样,在计数器不能访问的时候,你的网站速度也不会受到丝毫影响。

  9.网站测试速度的网站http://loadimpact.com

在文本框中输入要测试网站的网址webjx.com,然后点击Start test按钮就开始对网站速度进行测试。稍等一段时间,可以统计出加载网站的一些详细载入数据。包括整体加载和站内图片以及JavaScript 、CSS等代码载入。可以在右侧列表选择不同文件来同时对比,最多三个对象的加载数据。而且在Loadimpact网站中还可以生成图表显示,方便我们进行分析。通过生成的数据,就会知道自己网站速度的瓶颈在哪里,从而进一步来解决问题。

时间: 2024-10-24 19:07:44

9个技巧网页快速减肥的相关文章

总结网页代码常用小技巧,网页制作必学

技巧|网页 1.让浏览器窗口永远都不出现滚动条. 〈body style="overflow-x:hidden;overflow-y:hidden"〉或〈body style="overflow:hidden"〉 或〈body scroll=no〉2,没有水平滚动条〈body style="overflow-x:hidden"〉3,没有垂直滚动条〈body style="overflow-y:hidden"〉 2,如何给图片抖

DHTML技巧--网页文字选取

dhtml|技巧|网页|dhtml|技巧 请参考以下代码: <SCRIPT language=javascript>function select(){ var rng = testInput.createTextRange();<FONT color=#006400> //先要建立一个TextRangle物件,BODY,BUTTON,TEXTAREA,INPUT均包含此方法 rng.moveStart("character",0); //设置选取开始位置 rn

如何将图文并茂的网页快速转换为WPS(WORD)文档

看到图文并茂的网页,想把它全部或部分转换为WPS(WORD)文档保存起来,最便捷的方法是什么?复制文字,下载图片,插入图片?有了WPS2010,不用这么折腾! 1. 保存网页. 看到中意的网页,本例中选择http://bbs.wps.cn/thread-21914954-1-1.html,执行"文件"→"另存为",文件类型选择"网页,全部". 2.用WPS文字打开html文件.执行"文件"→"打开",文件类

怎么将网页快速转换为WPS与WORD文档

  网页也能快速转换为WPS与WORD文档,这些你都知道了吗?下面为你介绍网页快速转换为WPS与WORD文档的方法: 1. 保存网页 在浏览器中访问目标网页,执行菜单"文件"→"另存为",文件类型选择"网页,全部". 2.用WPS文字打开html文件 执行"文件"→"打开",文件类型选择"网页文件"或"所有文件",以打开刚才下载得到的<[征稿八]怎样用WPS制作

教程/dreamweaver/技巧 Dreamweaver快速编辑网页标签

dreamweaver|技巧|教程|网页 不知各位是否有手写代码的习惯.例如:要在一个单元格插入一段CSS代码,或者一段Javascript代码,怎么做才比较快捷方便呢? 虽然Dreamweaver已经为我们提供了代码视图,可是必竟还要手工去查找,还要来回地切换.虽然也可以用代码视图与编辑视图并存的方式,但还要占用一半的屏幕空间,使本来便不大的编辑区域更显得拥挤.有没有更好的办法呢?答案是肯定的. 下面我们以Dreamweaver MX为例,假设大家Dreamweaver面板布局都为默认的布局方

网站设计技巧:网页元素设计和网页转场设计

文章描述:浅谈网页元素与页面的转场设计. 在电视作品中,段落与段落.场景与场景之间的过渡或转换,叫做转场.为了使电视片内容的条理性更强.层次的发展更清晰.在场面与场面之间的转换中,需要一定的手法. 网站也是类似的,一个完整的网站由若干页面组成,而每个页面又由若干元素组成.为了使网站内容的条理性更强.操作逻辑更清晰.用户体验更好.用户转化率更高,在不同元素与页面的转换中,也需要一定的技巧. 过渡效果 a 渐入渐出 这种方式非常常见:比如在酷狗音乐盒中关闭音乐后,声音在几秒钟内逐渐停止,而不是马上消

网页设计技巧:网页实用字符图标代替图片

文章简介:上一周我提出一个关于"在'响应式设计'中图像处理的关键问题"的概述:尤其是如何为各种尺寸的设备提供相适应的的图片?而今天我会认真考虑一下"字符图标",并且我们可以在我们的网页中使用"字符图标"来代替一些图片,达到一样的效果. 图片是有诸多优点的,然而目前在网站设计这行业面临各种各样的挑战.图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.图片还有一个缺点就是不能很好的进行&q

网页设计技巧:网页表格设计技巧总结

一个好的表格应该以易于理解,简单明了的方式传递大量的信息.真正的重点应该 放在信息上, 对表格的过度设计会抵消这种作用.从另一方面来说,巧妙的设计不仅可以使一个表格更具吸引力, 而且可以增加可读性. 表格信息通常是很乏味的 从某种意义上来说,的确如此.一个好的表格应该以易于理解,简单明了的方式传递大量的信息.真正的重点应该 放在信息上, 对表格的过度设计会抵消这种作用.从另一方面来说,巧妙的设计不仅可以使一个表格更具吸引力, 而且可以增加可读性. 今天我们来看看提升表格功能和美观的几种方式.我们

网页设计技巧:网页设计中的F式布局

文章描述:今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. F式布局简介 F式布局是一种很科学的布局方法,基本原理依据了大量的