这些优化技巧,可以让网页性能提升10倍



  • 首先可以用一个网站检测工具来诊断网页的打开速度和体积

    站内优化

    打开百度统计,在左侧菜单栏中的优化分析找到网站速度测试(本实战以社区为例)

    https://tongji.baidu.com/

    dae70665-7ac5-4e73-be8a-32c10cb270d9-image.png

    经过分析后找到建议优化的选项,根据建议修改

    b1fed503-de1d-4ab0-9c47-d0f66453cb2d-image.png

    一般咱们优化的方案可以从一下几个方面入手

    压缩网页资源体积

    图片压缩

    网站图片资源一般分为网站框架素材资源和网站内容素材资源。

    框架资源可直接用图片压缩工具进行压缩,咱们选用在线压缩工具 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相关的信息