# 画像投稿型SNSの表示速度について

**URL:** <https://www.nocode-faq.com/t/topic/3039>\
**Category:** bubble\
**Created:** [2022 年 7 月 28 日午前 8:02 UTC](https://www.nocode-faq.com/t/topic/3039 "2022-07-28T08:02:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![HIDEMARU](https://avatars.discourse-cdn.com/v4/letter/h/df788c/32.png) [@HIDEMARU](https://www.nocode-faq.com/u/HIDEMARU)\
**Post date:** [2022 年 7 月 28 日午前 8:02 UTC](https://www.nocode-faq.com/t/topic/3039/1 "2022-07-28T08:02:15Z")

</div>

現在Bubbleにて開発した画像投稿型SNSの運用をしております。

> **[カラーのレシピを共有するプラットフォーム](https://colte.airchair.salon/)**
>
> 無料で使えるヘアカラーレシピ共有サイト《COLTE》東京、大阪、福岡の有名美容師インフルエンサーによるヘアカラーレシピが公開中！COLTEがあれば難しいハイトーンカラーにも悩まず調合が可能になります。もっとヘアカラーを勉強したい方、苦手なハイトーンカラーのオーダーを自信を持って施術したい方、ぜひ一度御覧ください。

トップページの表示速度に関して質問になります。

現在RGで表示させている画像が読み込まれるまでか6～7秒ほどかかっており困っています。

SPAを導入した場合リロードしないければその後のエクスペリエンスは向上すると思っているのですが、今よりもっと初回の読み込みに時間がかかるのか等が懸念点としてあります。

同じような現象で過去に解決した方や何かアプローチをご存じでしたらご教示お願い致します。

---

<div class="post-metadata">

**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\
**Post date:** [2022 年 7 月 28 日午後 12:00 UTC](https://www.nocode-faq.com/t/topic/3039/2 "2022-07-28T12:00:56Z")

</div>

投稿されているファイルサイズが大きすぎます。  
縦横180pxの画像なら、50kB以下に圧縮しても問題ないと思います。

 ![2022-07-28_21h54_14](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/80dc6cb4f5d02dd32e2ae5232b7f47d17d7b052c.jpeg)

僕が普段使っている画像圧縮サイト（[Squoosh](https://squoosh.app/editor) ）で、widthを400pxに縮小してwebp形式に圧縮したところ、  
296kB → 34.7kBまで容量を落とすことができました。

 ![2022-07-28_21h56_41](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/e1bc7ea73b49d0dc53c8349421716bf8f229c8dd.jpeg)

もしユーザーがアップロードするようなワークフローがあるなら、  
以下のような画像圧縮プラグインを使ってみるのもいいと思います。

> **[Image Compression Plugin for Bubble, by Renato Asse](https://bubble.io/plugin/image-compression-1627152028063x152738721905770500)**
>
> Image Compression Plugin page on Bubble, by Renato Asse. Add Image Compression in one click to your app. Bubble lets you build web apps without any code.

---

<div class="post-metadata">

**Author:** ![HIDEMARU](https://avatars.discourse-cdn.com/v4/letter/h/df788c/32.png) [@HIDEMARU](https://www.nocode-faq.com/u/HIDEMARU)\
**Post date:** [2022 年 7 月 28 日午後 12:16 UTC](https://www.nocode-faq.com/t/topic/3039/3 "2022-07-28T12:16:20Z")

</div>

＠Aki\_Sydney さん。  
ご返信ありがとうございます。  
上記圧縮プラグイン使用してみます！

ちなみに圧縮形式はjpgが一番軽いという記事を見たのですがwebp形式がいいのでしょうか？？

---

<div class="post-metadata">

**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\
**Post date:** [2022 年 7 月 28 日午後 2:09 UTC](https://www.nocode-faq.com/t/topic/3039/4 "2022-07-28T14:09:34Z")

</div>

Webpは、JPGやPNGより2-3割ほど軽いと言われています。  
かつ、WebpはJPGとPNGの良いとこ取りです。

JPG… 容量は軽いが背景透過ができない  
PNG… 容量は重いが背景透過できる  
Webp… 容量が軽く、背景透過もできる

Webpは割と新しい規格なので、対応しているものがJPGやPNGよりも少ないですが、  
最近WordPressでも公式でWebpに対応したりと、利用の幅はどんどん増えてきているので、  
個人的にはWebp、非常にオススメです🙆‍♂️

---

<div class="post-metadata">

**Author:** ![HIDEMARU](https://avatars.discourse-cdn.com/v4/letter/h/df788c/32.png) [@HIDEMARU](https://www.nocode-faq.com/u/HIDEMARU)\
**Post date:** [2022 年 7 月 30 日午前 5:59 UTC](https://www.nocode-faq.com/t/topic/3039/5 "2022-07-30T05:59:22Z")

</div>

返信が遅くなり申し訳ございません。

テストページで試したところかなり改善されました。  
それでもノーコードの特性だと思いますが2～3秒ほどかかるときがあるのでSPAの導入も検討しようと思います。  
質問に丁寧に答えていただきありがとうございました！