解决 Solo 主题 Bubble 主页背景图片加载慢的问题

前言

由于服务器使用阿里云服务器只有 1M 带宽,网页加载几百 k 的资源时候至少需要数秒,开启了 nginx gizp 压缩后网站加载速度还是不太能接受(有钱的同学直接升带宽就不用看我这个了哈哈)

下面是加载中的样子,大概要加载 20s 网页才加载完成

下面记录一下自己分析也算是解决问题的过程：

打开网站

1.开启 F12 大法

发现首页的一个 860k 的背景图片居然加载花了 16.55s

• 元素定位找一下该图片在 dom 的位置
  
  可以看到是 .header--index:before 样式设置的图片 url，下面思路就有了
  只要把图片放到一个加载速度快的服务器(还可以使用 cdn)然后再修改这里的 css 加载新的 url 就可以了,我这里选择七牛云(每个月有免费 10G 存储空间)

2.把图片下载下来上传到七牛云

进入七牛云对象存储

复制图片的外链，我这里做了图片的压缩压缩后图片只有 100 多 k
压缩图片的网站:https://www.yasuotu.com/

3.修改网站 css 使其加载七牛云资源

可以修改 solo 源代码，也可以使用 solo 后台 偏好设定 设置在 HTML head 里
我选择设置在 HTML head 里
在 HTML head 加入以下 css 代码

#url改成刚才上传到七牛云的外链
<style>
.header--index:before, .header--other:before {  background: url(https://qiniucdnpublic.zhouli.info/header-bgys.jpg);background-size: cover; }
</style>

点击更新
最后回到网站再看一下效果

2020-4-3 15:34 更新说明

我的思路是没有看到官方说明而自己分析得出来的解决办法
后来看到官方文档可以直接使用 jsDelivr CDN 来进行静态资源加速，😭 白忙活了

如果使用用内置皮肤的话参考用户指南 FAQ 部分开启 jsDelivr CDN 支持