Navigation

    云、贵、川、渝IT人的圈子
    • Register
    • Login
    • Search
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 招聘
    • 活动
    • 项目

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

    开源推荐
    性能优化 网页优化
    1
    1
    29
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • liazei33
      liazei33 last edited by admin

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

      站内优化

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

      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相关的信息

      1 Reply Last reply Reply Quote 0
      • First post
        Last post
      8
      玻
      U
      A
      大
      A
      黑
      低
      天
      白
      快
      爱
      白
      美
      此
      荒
      为
      哭
      柳
      无
      真

      社群
      昆明网页设计交流吧
      友情链接
      • Funtask
      • Funtask 社区
      • SUWIS
      • 云南北大青鸟
      ©2019-2020 滇ICP备20006698号