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

如何提高网站加载速度

压缩网站媒体资源

  • 将格式为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
相关推荐
去伪存真2 小时前
Android手机不支持文字转语音window.speechSynthesis API,怎么办?
前端
三年三月2 小时前
自建HTTPS证书
前端·javascript
木易士心2 小时前
如何优化v-if和v-for的性能?
前端·javascript
三年三月3 小时前
浏览器地址栏回车 vs 点击刷新按钮的缓存行为差异分析
前端·javascript
码农刚子3 小时前
ASP.NET Core Blazor 核心功能一:Blazor依赖注入与状态管理指南
前端·后端
胖虎2653 小时前
基于Vue3+xgplayer 移动端直播解决方案
前端
用户4099322502123 小时前
Vue 3模板如何通过编译三阶段实现从声明式语法到高效渲染的跨越
前端·ai编程·trae
小左OvO3 小时前
基于百度地图JSAPI Three的城市公交客流可视化(二)——区域客流
前端·javascript·vue.js
小左OvO3 小时前
基于百度地图JSAPI Three的城市公交客流可视化(三)——实时公交
前端·javascript·vue.js
IT_陈寒3 小时前
Vite 5新特性解析:10个提速技巧让你的开发效率翻倍 🚀
前端·人工智能·后端