提高网页加载速度的一些方法和技巧

article/2025/10/16 14:13:20

网页的加载速度是评估网站质量一个重要指标,原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网页,所以网页载入速度会极大地影响网站的流量和访问。
在这里插入图片描述

以下总结了几种可以明显提高网站加载速度的初步简单技巧方式,如果你的网站存在载入速度慢的问题不妨以此为参考对网页做些初步优化。

1、使用良好的结构

可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显。XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 和 标记),这意味着浏览器要下载更多代码。

所以,事情都有两面性,尝试在您的网页中使用较少的XHTML代码,以减小页面大小。
如果您确实不得不使用XHTML,试着尽可能对它进行优化。

2、把CSS文件放在页面头部,JS文件放在底部

把CSS文件放在头部可以禁止逐步渲染,节省浏览器加载和重绘页面元素的资源,把JS文件放在页面底部可以避免代码执行前的等待时间,从而提升页面的加载速度。

3、删除任何不必要的元素

可能这是所有技巧中最显而易见的一个,但是它也是最容易忘记的一个技巧。如果您真正需要在网页上放置许多内容,考虑将网页分为2个、3个或更多的独立页面。

4、压缩和缩小JavaScript文件

您可以使用 GNU zip (gzip)来完成此任务,因为许多浏览器都支持这种压缩算法。

另一种替代方法是缩小文件,这种方法删除代码中所有不必要的字符,比如制表符(tab)、新行和空格,它删除代码中的注释和空白,进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是JSMin和YUI Compressor。

5、优化 CSS 文件

DIV+CSS是现在流利的网页布局方式,DIV定义了元素,CSS控制显示效果,所以往往我们会把CSS写到另外一个或多个外部链接CSS文件中,并且CSS文件代码也有很多行,我们可以使用一些CSS压缩工具来删除CSS文件中不必要的多余内容,如重复定义样式、空格等来瘦身。

如果经过适当优化和维护,CSS 文件不一定很大。例如,具有很多独立类的 CSS 文件会影响下载速度,与 JavaScript 文件一样,您需要优化 CSS 文件,使其包含所需的所有内容,同时保持合理的大小
(参考: 网站CSS代码优化的7个原则)

6、不要使布局超载

坚持简约原则:少即是多。页面中充斥着各种类型的图像、视频、广告等,这大大违背实用性原则
(参考 提高网站速度的6种网站前端优化方法)。

7、不要使用图像来表示文本

使用图像表示文本的最常见示例就是在导航栏中,美观的按钮更加具有吸引力,但是它们的加载速度很慢。

此外,图像仍然不能由搜索引擎直接索引,因此,使用图像进行导航不利于搜索引擎优化,当无需图像就可以通过大量CSS技巧创建漂亮的按钮时,绝不使用图像来表示文本。

8、尽可能避免使用表格

表格被用作网页的主要构建块,但是作为页面布局元素,使用表格现在被认为是糟糕的做法,有时候,您必须使用表格(并且它们被认为是显示表格数据的出色实践),如果是这样,明确地指定表格单元格、行和列的宽度和高度,否则,浏览器必须执行许多操作来计算如何显示它们,这会降低页面加载速度。

9、设置图像大小

与表格单元格、行和列一样,当您未明确设置图像大小时,浏览器需要执行计算来显示图像,这会降低处理速度。

你会给每个图片加上height和width属性吗?这两个属性可以让浏览器在加载图片之前就知道图片的长和宽,并预留出指定的长宽待图片加载后显示,如果没有这两个属性,浏览器还需要在读取图片成功后再处理一次页面布局样式,这无疑减慢了网页加载速度,所以在固定图片大小的情况下最好都使用上长和宽属性。

10、使用 PNG 格式的图像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了:Portable Network Graphic (PNG) 是未来流行的格式。当然,您可以说 GIF 和 JPEG 已经消亡,或者 PNG 没有任何缺陷,但是所有事物都有各自的优缺点,PNG以最佳的文件大小提供了出色的质量,因此,如果进行选择的话,应该尽可能使用 PNG 图像
(参考: JPG、PNG和GIF图片的基本原理及优化方法

11、优化图像

图像能吸引访客的注意,但是每一张图片都需要从服务器下载到访客的电脑中,这无疑增加了页面的加载时间
(参考:实现网页图片预加载效果的3种技术方法)

因此,必须优化图像,优化方法包括适当减小图片尺寸,降低图片的颜色深度。

12、将CSS图像映射用于装饰功能

使用图像映射代替多个图像,这是另一种缩短加载时间的方式,因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者,您可以使用某种名为CSS sprites的工具, CSS sprites可帮助减少HTTP 请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素,您使用CSS来选择(通过调用某些位置和维度)用于特定元素的映射。

13、一些优化网页的技巧

可以使用许多方法来优化您的网页,包括压缩JavaScript文件,使用超文本传输协议(Hypertext Transfer Protocol,HTTP)压缩,以及设置图像大小。

例如:访客点击访问这样一个目录地址:http://www.mahaixiang.cn/SEO/,去打开这个目录下的index.html文档,当服务器收到请求后它需要消耗一些时间来分析这是一个文件还是一个目录,但是如果我们在最后加上一个斜杠(/),服务器就知道你是在访问一个目录地址,然后就直接加载默认文档index.html或index.php就行了,这样服务器就不用花时间来分析这个地址,也起到了一定加速的作用
(参考 :提升网站页面打开速度的12个建议)

14、使用HTTP压缩,并始终使用小写的div和类名

可以使用HTTP压缩来减少服务器与浏览器之间的通信量,可以在Apache中配置HTTP压缩(.htaccess文件) ,或者可以将其包含到页面中(对于PHP,可以使用一个HTTP_ACCEPT_ENCODING 选项)

但是请注意:不是所有浏览器都支持压缩,即使是支持压缩的浏览器,压缩和解压缩都会加重处理器的负载,要在Apache中启用地毯式(blanket)压缩(即压缩所有文本和HTML) ,

使用以下命令:AddOutputFilterByType DEFLATE text/html text/plain text/xml
另外,考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩,因此您可以将压缩对象限制为HTML、 CSS和JavaScript文件。

另一种减少压缩工作的技巧是使用小写形式的<div>元素和类名,由于大小写敏感性,并且使用的是无损压缩,<header>与<Header>不同,它们被压缩为两个不同的标记

15、尽可能延迟脚本加载

-种提升页面下载速度的潜在方式是将脚本放在页面的底部,使页面加载更迅速。

通常,浏览器只能(从同一个域)下载不超过两个并行对象,如果一个对象是一段JavaScript代码,那么在该脚本下载完之前,其他页面组件的下载将会暂停。

如果将JavaScript代码放在页面底部, (在大多数情况下)它将在最后下载,这时所有其他组件都已下载完。

16、对资产使用多个域来增加连接

CDN的另一个优势是它们是独立的域,因为您的浏览器将并发连接的数量限制到一个单一的域,因此无论何时加载一个页面,都很容易占满所有线程。因此,到其他资产的连接被延迟了。

然而,您的浏览器能够打开新线程或到其他域的连接,这样,从另一个域加载的任何资产都可以与其他所有资产同时加载。

17、减少使用重定向

重定向增加了额外的HTTP请求,甚至有时候链向多个域名或是不存在的页面,大大的增减了延迟时间,因此要减少重定向。

18、利用浏览器缓存

浏览器缓存是允许访客的浏览器缓存你网站页面副本的一个功能,访客再次访问时,直接从缓存中读取内容而不需要重新加载,优化网站的缓存系统会降低网站的带宽和托管费用。

19、压缩整合CSS、JS文件减少HTTP请求次数

压缩会移除一些不必要的字符,从而帮助减少文件大小和网页后续的加载时间。

现在的网页都有多个图片、CSS外部文件链接、Javascript外部脚本链接,所以当访问一个网页时浏览器需要多次向服务器请求这些文件,在请求和加载之间会产生不少的时间差,特别是一些网页上有多个小图片、图标按钮的网页,有多少图片,浏览器就需要请求多少将这些小文件,多将请求这些小图片文件将明显影响网页的加载速度。

所以,我们应该尽可能将小图片拼合一个PNG大图片上,然后通过坐标来显示图标,一次请求一个大图片比多次请求小图片速度要快不少。

同样,最好将CSS和Javascript尽可能地整合到一个文件中都有助于加快网页载入速度。

参考:(文章来源:马海祥博客-提高网页加载速度的一些方法和技巧)


http://chatgpt.dhexx.cn/article/nBeRPx0O.shtml

相关文章

jQuery页面加载事件

在jQuery对象与js对象之间的转换的案例中,我们看到所有的js代码都放到了body标签之后,如果把js代码放到head标签中,js代码就会报错,这个问题我们已经在js中学过,就是需要让页面加载完成之后再执行. <!DOCTYPE html> <html lang"en"> <head><me…

html页面加载完成之后,网页加载时页面显示进度条加载完成之后显示网页内容...

现在网上有很多网页加载进度条 &#xff0c;但大多都是时间固定的。 下面的当查询大量数据时&#xff0c;网页加载较慢&#xff0c;在网页加载时&#xff0c;显示进度条&#xff0c;当网页加载完成时&#xff0c;进度条消失&#xff0c;显示网页已经加载完成的内容。 Dim Bar, …

html加载状态,js等待页面加载完成

页面加载完成后等待一段时间在执行js的方法,时间例如方法: function test(){return 1;} 页面加载完毕事件: window.onload = function(){ setTimeout(test,1000);//1000毫秒=1秒后执行test方法 } 如果你使用jquery的话可以: $(window).load(function(){ setTimeout(test,10…

超详细讲解页面加载过程

说一说从输入URL到页面呈现发生了什么&#xff1f;&#xff08;知识点&#xff09; 这个题可以说是面试最常见也是一道可以无限难的题了&#xff0c;一般面试官出这道题就是为了考察你的前端知识的深度与广度。 1.浏览器接受URL开启网络请求线程&#xff08;涉及到&#xff1a;…

页面加载的几种方式和区别

目录 页面加载的几种方式 DOM文档加载步骤原生JS的 ready阶段 执行方法怎么写&#xff1f;全部方式的演示代码window和document的区别 页面加载的几种方式&#xff08;原生JS和jQuery&#xff09; 1. window.onload function(){}; —— 原生JS 2. $(window).load(function(){…

页面加载过程(url->页面)

当我们在浏览器输入URL地址开始&#xff0c;到web页面加载完毕&#xff0c;这个过程称作网页加载过程。具体如下&#xff1a; 在浏览器地址栏输入URLDNS域名解析发送HTTP请求服务器接收请求做出响应浏览器解析渲染页面 1.浏览器接受URL开启网络请求线程&#xff08;涉及到&…

登录校验总结1.0

登录校验 问题分析 基础的登录功能&#xff1a; 接受前端请求传递的用户名和密码&#xff0c;然后再根据用户名和密码查询用户信息&#xff0c;如果用户信息存在&#xff0c;则说明用户输入的用户名和密码正确。如果查询的用户不存在&#xff0c;则说明输入的用户名和密码错误…

java 令牌解析_Java JWT的令牌机制

JWT 简单介绍 全称 Json Web Token 致力于网络安全的一套Json开放标准 主要流程 将用户部分信息进行加密&#xff0c;生成一套令牌&#xff0c;存放于客户端 客户端发起请求时&#xff0c;带入此令牌&#xff0c;交由服务端识别令牌真伪 服务端校验完成&#xff0c;开放部分权限…

JWT令牌

1.普通令牌的问题 客户端申请到令牌&#xff0c;接下来客户端携带令牌去访问资源&#xff0c;到资源服务器将会校验令牌的合法性。 从第4步开始说明&#xff1a; 1、客户端携带令牌访问资源服务获取资源。 2、资源服务远程请求认证服务校验令牌的合法性 3、如果令牌合…

Openresty(十五)通过lua实现令牌校验

一 模块地址 &#xff08;1&#xff09;插件安装 "安装方式"1.opm安装 -->默认安装的位置opm get SkyLothar/lua-resty-jwt2.源码安装,进行copy -->不建议 参考博客 网关权限控制 &#xff08;2&#xff09;常用方法介绍 ① sign 功能&#xff1a…

JWT(JSON WEB TOKEN)

JSON WEB TOKEN简称JWT&#xff0c;是用于对应程序上的用户进行身份验证的标记。也就是说&#xff0c;使用JWTS的应用程序不再需要保存有关其用户的cookie和session数据。此特性便于可伸缩性&#xff0c;同时保证应用程序的安全。 格式 JWT就是一个字符串&#xff0c;经过加密…

JWT令牌技术

JWT令牌 全称&#xff1a;JOSN Web Token(https://jwt.io/) 定义了一种简介的、自包含的格式&#xff0c;用于在通信双方以JSON数据格式安全的传输信息。犹豫数字签名的存在&#xff0c;这些信息是可靠的。 通过base64编码 JWT的组成&#xff1a; &#xff08;JWT令牌由三个…

2 Go语言JSON与XML解析与表单操作

2 Go语言JSON与XML解析与表单操作 1 数据交互的格式2 JSON方式2.1 JSON序列化2.2 JSON反序列化2.3 解析到interface 3 XML方式3.1 解析XML3.2 生成XML 4 字段校验5 文件上传2.1 前后端模拟上传2.2 go客户端模拟上传 3 防止重复提交 1 数据交互的格式 常见的数据交互格式有&…

C++中json解析开源库收集,支持json5

文章目录 zpl-c 库HJSONcJSONRapidJSON &#xff08;推荐&#xff09;DAW JSON Link v2JSON &#xff0c;这库稳定&#xff0c;文档齐全。(推荐)json-c &#xff08;c实现&#xff09;json_dto (一个小的头文件助手)json11 ( C11 的小型 JSON 库 )json_spirit (开发中&#xff…

SpringBoot之JWT令牌

目录 介绍 生成和校验 登录下发令牌 介绍 JWT全称&#xff1a;JSON Web Token &#xff08;官网&#xff1a;https://jwt.io/&#xff09; 定义了一种简洁的、自包含的格式&#xff0c;用于在通信双方以json数据格式安全的传输信息。由于数字签名的存在&#xff0c;这些信…

七 微服务网关gateWay和Jwt令牌

之前写过一篇微服务网关Zuul&#xff0c;今天介绍gateWay&#xff0c;二者大同小异&#xff0c;但各有优势&#xff0c;大家可以都了解一下&#xff0c;拓展自己的知识面&#xff1b; 一 微服务网关 主要作用 整合各个微服务功能&#xff0c;形成一套系统在微服务网关中实现…

登录校验-会话技术/JWT令牌

登录校验 会话技术 会话&#xff1a; 用户打开浏览器&#xff0c;访问web资源的时候&#xff0c;会话建立。直到一方断开连接&#xff0c;会话结束&#xff0c;一次会话中包含多次响应 会话跟踪&#xff1a;一种维护浏览器状态的方法&#xff0c;服务器需要识别多次请求是否来…

服务的校验Content-Type,只接收application/json格式的CSRF绕过方法

如何在JSON端点上利用CSRF漏洞 转载自&#xff1a;https://www.freebuf.com/articles/web/164234.html Alpha_h4ck &#xff08;CSRF Flash HTTP 307&#xff09;别说了&#xff0c;你已经“死”了&#xff01; 如果你想通过第三方攻击者控制的服务器在JSON端点利用一个CS…

nginx 限流,以及nginx直接返回json格式数据

高并发系统有三把利器用来保护系统&#xff1a;缓存、降级和限流 今天我们这里说说限流。一般会在应用层配合redis做限流策略&#xff0c;这里我们聊聊nginx层限流。 限流的目的是通过对并发访问/请求进行限速或者一个时间窗口内的的请求进行限速来保护系统&#xff0c;一旦达…

JWT-JSON Web令牌的深入介绍

JWT-JSON Web令牌的深入介绍 从桌面应用程序到Web应用程序或移动应用程序&#xff0c;身份验证是几乎所有应用程序中最重要的部分之一。 本教程是JWT&#xff08;JSON Web令牌&#xff09;的深入介绍&#xff0c;可帮助您了解&#xff1a; 基于会话的身份验证与基于令牌的身份…