20 种提升网页速度的技巧

引言

  不是所有人都能够使用高速 Internet 连接。即使每个人都能够使用高速网络,也会因为各种各样的原因使您的 Web 应用程序看起来运行缓慢。在这个宽带速度不断提高的时代,您应当关注一下页面加载时间。将珍贵的页面加载时间缩短几秒,将更加珍贵的请求和响应时间缩短几毫秒。您将为访问者创造一种更好的体验。
阅读完本文之后,您将能够较好地了解网页加载时间优化的基本知识。您还能够使用工具和知识更好地识别和判断加载缓慢的页面部分和瓶颈。

先决条件

  在理想情况下,您应该安装了 Mozilla Firefox。您还应该大体了解 Web 开发。本文涉及的主题并不复杂,但是如果您了解超文本标记语言(Hypertext Markup Language,HTML)、层叠样式表(Cascading Style Sheet,CSS)以及 编程语言等主题,那么在学习本文时将更加得心应手。不需要使用集成开发环境(IDE),只需使用您喜爱的编辑器。

  您必须在浏览器中启用了 JavaScript。另外,要学习与 Firebug 和 YSlow 相关的内容,您需要安装 Firefox Web 浏览器。

假设您没有宽带

  许多人通过某种形式的宽带连接访问 Internet,这些形式可能是 DSL、网线、光纤或其他方法。但是,无法使用这类技术的用户不得不使用拨号连接。您一定已经忘记拨号上网是什么感觉了,但您可以试着回想一下网页逐行加载时的情形。

  幸运的是,这些可怜的人们现在已经能够获得一些帮助。您可以通过缩短加载页面的时间来改善他们的体验。但是,拨号连接并不是降低加载和响应速度的惟一原因。许多 Web 设计人员错误地认为高速 Internet 连接的到来会使网站性能优化变得没有必要。这种观点是不对的。例如,过去使用桌面软件执行的许多任务现在可以在线执行。在 Web 应用程序中获得像桌面软件那样的高速响应体验非常困难,因此性能优化非常重要。幸运的是,一些工具和最佳实践可用于缩短响应和加载时间,提供更加流畅的体验。

基本工具

  对于所有与优化相关的任务,您必须使用工具来诊断瓶颈和识别问题。现在在 Web 开发中使用最广泛的两个工具是 Firebug 和 YSlow,它们都是开源、免费的 Firefox 插件。

Firebug
  Firebug(参见 参考资料)是最流行的 Firefox 扩展之一,该应用程序能够使 Web 开发人员的工作更加轻松。它包含许多非常有用的功能,比如:

JavaScript 调试 JavaScript 命令行 监视 JavaScript 性能和跟踪 XmlHttpRequests 登录 Firebug 控制台 跟踪 检查 HTML 元素和动态编辑 HTML 代码 动态编辑 CSS 文档

YSlow
  YSlow(参见 参考资料)分析网页,并根据 Yahoo! 起草的高性能网站规则(参见 参考),告诉您网页加载缓慢的原因。YSlow 是一个与 Firebug 集成的 Firefox 插件,因此您需要首先安装 Firebug,然后才能安装和使用 YSlow。

继续>>下一页[第1页][第2页][第3页][第4页][第5页][第6页]

时间: 2024-09-27 12:09:26

20 种提升网页速度的技巧的相关文章

[译]如何运用最新的技术提升网页速度和性能

本文讲的是[译]如何运用最新的技术提升网页速度和性能, 原文链接 : Why our website is faster than yours 原文作者 : by Declan 译文出自 : 掘金翻译计划 译者 : hpoenixf 校对者: MAYDAY1993,circlelove 我们最近升级了我们的网站.虽然这主要是界面方面的大调整,但作为一个软件开发者,我们更关注在技术细节上面.我们的目标是加强控制,关注性能,在未来可以灵活地调整和让在网站上撰写内容变得有趣.下面讲述了我们是如何让我们

利用JS延迟加载百度分享代码,提高网页速度_javascript技巧

发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示.这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --><div id=&quo

8种提升网页设计品质的布局方案

网页设计中,内容组织恐怕是最至关重要.最影响设计品质的方面了.如何将信息组织到好的布局中,是一个网站的基础,并且应该在考虑外观之前就决定好.没有好的布局,网页信息流就不能正确传递,所有东西都不能建立起合理的联系. 在这篇文章中,我们将讨论八个布局解决方案/技巧,这些方案和技巧将有助于你创建整洁有序的内容布局. 这八个技巧包括滑门 (sliders).标签式.渐进布局(progressive layouts).结构网格.模态窗口(modal window).翻转元素.手风琴效果(accordion

优异的网站用户界面 16种提升网页转化率的UI秘诀

优异的用户界面可以让用户用得顺心,从而提高转化率(conversion rate),换言之,好的 UI 在使用与销售层面上形成双赢.本文整理了16点优化用户界面的方法,希望对大家有所帮助. 1.单栏型式优于多栏 单栏型式让你更能掌握自己的内容,从顶部到底部一气嗬成,用故事引导读者,最终是要诱引他们「采取行动」(call to action,下称 CTA,意指下载或消费等目的);而多栏反而可能导致读者分心. 2.不要噼头销售产品 「略施小惠」给使用者,贩卖的意图不要设计得太明显.小小的优惠或礼物,

js实现网页图片延时加载 提升网页打开速度_javascript技巧

提升网页加载速度的方法有很多种,用 jquery.lazyload.js 实现图片异步延迟加载,对于页面包含图片较多的网站来说,会是个不错的提升网页打开速度的方法.代码君网站栏目页列表左侧,在PC端预览时能看到一个文章略缩图展示模块,一定程度上会延长网页加载时间.本文采用图片异步延迟加载的方法,来提升本站页面加载速度. 图片异步加载,就是不必一次性把页面的所有图片都加载显示出来,等用户滑动滚动条到某个位置时才会加载显示相应位置的图片,这样能很好地提升网页加载速度,进一步提升用户体验. 有很多技术

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能有20%的提升. 它并不是一门新技术,有人认为只有 Chrome 才具备这个功能.也有人认为它是有史以来提升浏览器性能最有效的方法.如果你第一次接触预加载器,也许心中已经有了无数个问号.什么是预加载器?它是如何提升浏览器性能的? 首先需要了解浏览器是如何加载网页的 一个网页的加载依赖于脚本文件.CS

125个提升网页可用性的优化小技巧(四)

  往期回顾: <有图有案例!125个提升网页可用性的优化小技巧(一)> <有图有对比!125个提升网页可用性的优化小技巧(二)> <有图有案例!125个提升网页可用性的优化小技巧(三)> 尽可能兼顾不同用户的知识和技能水平 用户可能是新手.专家或介于两者之间,要根据用户情况设计界面. △ 使用适当的新人引导(四种主要的新人引导策略) 这四种用法刚好可以用一个2*2的矩阵来表示.根据下方图示选择最适合你界面的方式: △ 为新手用户添加提示而不干扰专家用户 △ 使用卡片分

win7系统下提升网页浏览速度的方法

  许多用户在win7系统中都遇到过打开网页出现速度慢的问题,对于这种问题网页打开速度慢是由三部分原因造成的,其一是网站所在服务器资源不足,造成网页打开速度慢,第二种原因是因为宽带网络不稳定,造成的网络丢包.延时高,前两种是我们无法通过自身解决的,那么我们看下第三种,第三种也是本文主要介绍的内容,我们通过对系统注册表修改,从而达到快速访问网页的目的,下面和小编一起看下吧! 设置方法: 1.首先打开Win7系统的注册表编辑器,只要打开开始菜单中的运行,然后输入regedit 回车即可打开; 2.注

网站设计:提高网页打开速度的技巧

http://www.aliyun.com/zixun/aggregation/9872.html">互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃. 其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题.加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化.这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧. 一.优化图片 几乎没有哪个网页上是没有图片的.如果你经历过56K