这些优化技巧,可以让网页性能提升10倍
-
首先可以用一个网站检测工具来诊断网页的打开速度和体积
站内优化
打开百度统计,在左侧菜单栏中的优化分析找到网站速度测试(本实战以社区为例)
经过分析后找到建议优化的选项,根据建议修改
一般咱们优化的方案可以从一下几个方面入手
压缩网页资源体积
图片压缩
网站图片资源一般分为网站框架素材资源和网站内容素材资源。
框架资源可直接用图片压缩工具进行压缩,咱们选用在线压缩工具 https://tinypng.com/
进行压缩对于网站资源类的素材,这个需要在上传的入口做好资源压缩,防止用户上传大文件,正确的做法是用户上传完图片后,服务器应当对图片进行压缩在存储
js、html、css 压缩
如果网页开发使用的是 webpack gulp 这一类的构建工具开发的话,打包后的网页自带压缩功能,但如果是常规页面开发,则需要借助一些工具来压缩线上的网站代码,这里推荐使用 parceljs 这个打包工具来压缩代码
打包教程链接:https://xnit.funtask.club/topic/55减少DOM结构
尽量减少DOM结构的深度,和元素的数量,这样可以让浏览器渲染更快,体验更佳
去掉不必要的资源引入
很多时候为了开发方便,我们可能会在一个页面中引入很多js 和 css,其中有一部分js 和 css在页面里面是没有任何作用的,这一部分脚本和样式文件可以直接删除
站外优化
加大服务器的带宽
服务器带宽也是影响网站打开速度的主要原因之一,一般网站带宽建议在5M以上
加入CDN
除了加大网站带宽外,CDN也是一个很好的选择,使用CDN的好处是可以扛住大量并发请求,保证网站的稳定访问,这里不做原理讲解,如需了解可在百度搜索CDN相关的信息
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏