Unsplashの画像埋め込みは少し重い

「/image」を利用しUnsplash画像の埋め込みを実施できますが、この利用方法は画像が少し重いです。Unsplashの画像は平均的に画像サイズが大きいです。Notion側ではこのUnsplash画像は直接imgのsrcにunsplashリンクを利用しています。

Unsplashは直接の生画像ではなく imgix という画像のCDNを利用しているため、画像が軽量化されてはいますが、まだまだ圧縮可能です。

ベクター画像（SVG）でのアイコン設定

アイコンなどはSVGのファイルの方が時に軽量なので、SVGを積極的に利用しましょう。また、ページのアイコンに設定できる画像もSVGに対応しているため、SVGでのアイコン設定が推奨です。

しかし SVGは インラインで呼び出すリンクページには表示に対応していないのが注意が必要です。

▶ Notion で使えるアイコン

画像ばかりならば、gallery（ギャラリー）機能を使う

画像を複数貼り付ける場合には、 Galleryのほうがページの負荷が軽いです。数十枚の画像を１ページにブロックとして配置していまうと、ページの読み込みにとても時間が掛かります。

ページ内のコンテンツが単純ブロックとして構成されている場合には、ページを開いた瞬間にすべてのデータを取得しにいくため、重いページではとても負荷が高いです。

Gallery機能をつかって、読込スピードを上げる目的もありますが、データベース機能は表示される部分のみにリクエストが分割されるため量が多すぎるページよりは早くページを閲覧可能です。（非同期のリクエスト）

また、ギャラリーで表示される画像はサムネイルとして最小化されているため、モバイルの帯域も逼迫しません。

▶ ギャラリーを利用したメディア管理

インラインデータベースは読み込みラグがある

インラインにすると、表示に もたつき が発生します。

ページの本文の読み込みとインラインページの読み込みにラグが発生します。 これは、一日に何度も定常的に見るページでやってしまうととてもストレスです。 矢印でしまうか、フルページにするか検討しましょう。安直にinlineは実施しない方がよいです。

あくまで情報の特性や見る頻度などを意識して適用しましょう。

▶ データベースのビューをインラインに置き換える

重いコンテンツはトグルリストにしまおう

PDFや画像などはページを開く際に直ぐにロードが始まるため読込までに時間がかかり、ページが重くなりUX体験が悪くなります。また、インラインデータベースも読込の遅延があるためこれまた重く感じる原因の一つです。

コードブロックなどを利用したときも重くはないですが縦長の時に見通しがとても悪くなります。 そんな時には、トグルリストを使って対象のコンテンツをしまうことで、ユーザ体験を損ないません。 また、ページ遷移をするほどの影響も与えないため比較的量の多いコンテンツでは利用するのが良いでしょう。Toggle Listを利用することで、しまわれたコンテンツのGET処理は走らないので単純な軽量化を実施できます。