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

本贴最后更新于 1455 天前,其中的信息可能已经事过景迁

前言

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

下面是加载中的样子,大概要加载 20s 网页才加载完成
修改前 1.gif

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

打开网站

1.开启 F12 大法

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

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

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

进入七牛云对象存储
image.png
复制图片的外链,我这里做了图片的压缩压缩后图片只有 100 多 k
压缩图片的网站:https://www.yasuotu.com/
image.png

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>

image.png
点击更新
最后回到网站再看一下效果
修改后 1.gif

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

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

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

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Alizhou
    作者

    之前没看到这部分,😭 白忙活了,感谢指导 🙏

  • 其他回帖
  • byxiny

    感谢大佬分享,这就去改掉去,加载速度太慢了。

  • 感谢分享,使用内置皮肤的话参考用户指南 FAQ 部分开启 jsDelivr CDN 支持。

    1 回复