如何提高网站加载速度速度

如何提高网站加载速度

压缩网站媒体资源

  • 将格式为JPG,PNG的 图片统一压缩为WEBP格式
  • 如果是上传图片到后端,后端一定要将图片压缩

压缩网站代码

  • 去掉网站代码(HTML、js、css代码)的空格、注释、换行,将变量名压缩
  • 对于主流框架,可以使用打包工具对代码优化

使用延迟加载技术

懒加载技术

  • 将img标签的loading属性改为lazy,当设置为lazy时,图片的加载会被推迟,直到图片即将出现在用户的视口中。如:
html 复制代码
<img src="a.jpg" alt="一张图片"  loading="lazy">

注意img标签的loading属性默认是eager

按需加载

将css 和js进行分模块划分,这样每个页面只用少量的css和js了

预加载

link标签的rel属性加上preload属性 如:

html 复制代码
<link rel="preload" href="style.css" as="style">

网站配置(不推荐使用做法)

  1. 配置 CDN 节点缓存(注意频率,耗钱多)
  2. 本地浏览器缓存
  3. 设置CDN 浏览器缓存配置
  4. 升级HTTP2
相关推荐
xiaofeichaichai2 小时前
Webpack
前端·webpack·node.js
问心无愧05132 小时前
ctf show web入门111
android·前端·笔记
唐某人丶2 小时前
模型越来越强,我们还需要 Agent 工程吗?—— 从价值重估到 Harness 实践
前端·agent·ai编程
智码看视界3 小时前
现代Web开发基础:全栈工程师的起航点
前端·后端·c5全栈
JS菌3 小时前
手写一个 AI Agent 全栈项目:从沙箱执行到子智能体的完整实现
前端·人工智能·后端
excel4 小时前
HLS TS 文件损坏的元凶:Git 提交与拉取
前端
Aphasia3114 小时前
https连接传输流程
前端·面试
徐小夕4 小时前
万字长文!千万级文档 RAG 知识库系统落地实践
前端·算法·github
threelab5 小时前
Three.js 物理模拟着色器 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器