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

如何提高网站加载速度

压缩网站媒体资源

  • 将格式为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
相关推荐
好好研究1 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
伍哥的传说5 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点5 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian5 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao6 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0016 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴6 小时前
Smoothstep
前端·webgl
若梦plus6 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员6 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉6 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro