如何有效的优化网页的加载速度?优化网页速度的7种方法

首先,我们来看下网页的加载流程。打开一个网页,会先拉取一个html页面,然后浏览器解析了这个html页面后,会根据页面的内容,去拉取javascript、css和图片文件,最终根据这些文件,将页面渲染出来。

我们可以看到,影响一个网页展示速度的主要因素不是网页本身,而是它依赖的一些其它文件,如果优化了这些资源的加载速度,那么网页展示的速度也就上去了。

让我来一一列举:

1.优化图片资源的格式和大小

一个网页中,图片资源的大小占比是最多的,而且单个的文件的大小也很可观。因此,在保证图片质量不变的情况下,尽可能的使用高压缩率的图片格式,图片格式可以按照这个优先级选择webp > jpeg > png > bmp。同时也要根据图片展示尺寸来拉取大小最为匹配的图片资源,不要没事就把原图拉下来使用。以前我就遇到过这种情况,一个196*196大小区域展示的图片,它的文件竟然达到了几兆,最后才发现把1960*1960分辨率的原图拉下来了。

2.开启网络压缩

大部分浏览器在发出请求时,会带上这个标记「Accept-Encoding: gzip, deflate」,表示这个浏览器可以接受以gzip压缩方式传输数据,如果你的网页服务器也支持gzip压缩数据,那么数据以gzip方式传输时,会减少70~80%的流量。

3.使用浏览器缓存

同一个站点下面的不同页面,往往都会复用一部分资源文件,如果把这些资源文件设置为可缓存的,那么在刷新或者跳转到另一个页面时,都无须再从网络拉取相关资源,这样就大大加快了网页的加载速度。

4.减少重定向请求

有的网站对于不同的终端制作了不同的页面,比如说在手机上访问微博,会从weibo.com重定向至weibo.cn,每一次重定向都会导致浏览器重新发起请求,延长加载时间。对于这种情况,应该尽可能使用响应式设计,一个weibo.com站点覆盖至所有终端。

5.使用CDN存储静态资源

CDN是一种静态内容分发网络,它在每个省,甚至每个城市都部署有自己的服务器,用于分发这些静态内容,那么当某个城市的用户要拉取某个资源时,他会首选从本地的CDN服务器上拉取,这样可以保证他最快速的获得该资源。据砖家统计,网络资源中有70%的是静态资源。这就意味着,有70%的内容产生后是不会变化,那么将它们全部放在CDN上面,可以提升这70%的资源的下载速度。

6.减少DNS查询次数

很多人喜欢把不同的图片挂在不同当域名下,比如说图片A挂在a.pm-teacher.com,图片B挂在b.pm-teacher.com。当一个网页同时使用图片A和图片B时,浏览器需要查询两个域名,要知道,每次解析域名都是会浪费时间的,所以尽可能的将全部图片放在一个域名下。

7.压缩css和js内容

这里说的压缩和第2点并不重复,上面提到的压缩是不改变文件内容的压缩。而css和js中有大量的空格和变量命名(如hello="hello word";),如果将这些空格去除,并用简单的字母来代换变量名(如a="hello word";),那么这些css和js原文件的大小也会缩小,这样也对加快拉取速度是有帮助的。

不知道你有没有看出来,上面提到的优化方案的核心就3点:减少请求数、减少资源大小、找最快的服务器

时间: 2024-10-29 19:10:15

如何有效的优化网页的加载速度?优化网页速度的7种方法的相关文章

Yii中单独为module加载Bootstrap或其他组件的4种方法

Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮.功能完备的网站.但是有时候我们网站前台并不需要Bootstrap,只要管理后台使用Bootstrap,那么该如何单独为一个module加载Bootstrap呢? 这里有4中方法来实现这个:1.在应用的配置文件中添加如下内容 (protected/config/main.php):     'modules'=>array(         'admin'=>array(             'preload'

VC下加载JPG/GIF/PNG图片的两种方法

转载自:http://blog.sina.com.cn/s/blog_6582aa410100huil.html 仅管VC有提供相应的API和类来操作bmp位图.图标和(增强)元文件,但却不支持jpg.gif和png等格式的图片,而这几种格式却是常常要用 到的.这里我给大家介绍两种办法来操作这些格式的图片. 1.用API OleLoadPicture来加载JPG.GIF格式的图片(注:不支持PNG格式,另外GIF只能加载第一帧,且不支持透明) OleLoadPicture函数实际上创建了一个IP

如何优化网页的加载速度

1.优化图片资源的格式和大小 一个网页中,图片资源的大小占比是最多的,而且单个的文件的大小也很可观.因此,在保证图片质量不变的情况下,尽可能的使用高压缩率的图片格式,图片格式可以按照这个优先级选择webp > jpeg > png > bmp.同时也要根据图片展示尺寸来拉取大小最为匹配的图片资源,不要没事就把原图拉下来使用.以前我就遇到过这种情况,一个196*196大小区域展示的图片,它的文件竟然达到了几兆,最后才发现把1960*1960分辨率的原图拉下来了. 2.开启网络压缩 大部分浏

Web前端优化,提高加载速度

研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决定了这个网站的生死存亡. 可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too sim

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

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

测试一个网页的加载速度

用时间差,来测试整个网页的加载速度 <!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="viewport" content="wid

前端性能优化--图片懒加载(lazyload image)

图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求.通俗的说就是你不要就不给你,怎么地.举个栗子,比如在进入某个页面的时候,它会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动下去或没看完整个页面,那么下面的图片就会"没用",加载了也白加载,而且还降低了网页的加

如何使用 require.js ,实现js文件的异步加载,避免网页失去响应,管理模块之间的依赖性,便于代码的编写和维护。

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. 1 <script src="1.js"></script> 2 <script src="2.js"></script> 3 <script src="3.js">

页面加载性能优化

页面加载性能优化 在互联网网站百花齐放的今天,网站响应速度是用户体验的第一要素,其重要性不言而喻,这里有几个关于响应时间的重要条件: 用户在浏览网页时,不会注意到少于0.1秒的延迟: 少于1秒的延迟不会中断用户的正常思维, 但是一些延迟会被用户注意到: 延迟时间少于10秒,用户会继续等待响应: 延迟时间超过10秒后,用户将会放弃并开始其他操作: 因此大家都开始注重性能优化,很多厂商都开始做一些性能优化.比较有名的是雅虎军规,不过随着浏览器和协议等的发展,有一些已经逐渐被淘汰了.因此建议大家以历史