6-15. 軽快なページ設計
Notionは様々なコンテンツをブロックとして表現することができるため、楽しくなりすぎてブロックをどんどん作り上げて重いページができあがることがあります。 縦に長すぎるページや適度にページが分かれていないのも原因となる場合があります。
ここではNotionのページを軽量で構成するための注意点を記載していきます。
画像の圧縮とリサイズ
Notionはウェブの構築技術がまるっと活かせます。あまり不必要な大きな画像はロードに時間が掛かるためサイズの調整と圧縮を実施しましょう。
なおNotionはWebPにも対応しているため最速を目指す人は積極的に利用してよいでしょう。しかしダウンロードして利用させる画像の場合は再利用性が低いことに注意が必要です。 (通常のPCはWebPの表示に対応していないため)
Unsplashの画像埋め込みは少し重い
「/image」を利用しUnsplash画像の埋め込みを実施できますが、この利用方法は画像が少し重いです。Unsplashの画像は平均的に画像サイズが大きいです。Notion側ではこのUnsplash画像は直接imgのsrcにunsplashリンクを利用しています。
Unsplashは直接の生画像ではなく imgix という画像のCDNを利用しているため、画像が軽量化されてはいますが、まだまだ圧縮可能です。
実験結果
- この画像は Unsplash上では 👉 2MB
- 埋め込みを利用する事で 👉 264 KB
- 個別にダウンロードし、リサイズと圧縮を実行しWebPに変換 👉 100KB
なお、この処理を実施した際でもNotionは USリージョンのS3に保存。 Unsplashの場合は imgix、すなわち fastlyのCDNとなり、日本にCDNが存在するため地理的にはUnsplashに優位があります。
コンテンツの属性に応じて使い分けましょう。つまり、そんな気にしなくても大丈夫です。
ベクター画像（SVG）でのアイコン設定
アイコンなどはSVGのファイルの方が時に軽量なので、SVGを積極的に利用しましょう。また、ページのアイコンに設定できる画像もSVGに対応しているため、SVGでのアイコン設定が推奨です。
しかし SVGは インラインで呼び出すリンクページには表示に対応していないのが注意が必要です。
画像ばかりならば、gallery（ギャラリー）機能を使う
画像を複数貼り付ける場合には、 Galleryのほうがページの負荷が軽いです。数十枚の画像を１ページにブロックとして配置していまうと、ページの読み込みにとても時間が掛かります。
ページ内のコンテンツが単純ブロックとして構成されている場合には、ページを開いた瞬間にすべてのデータを取得しにいくため、重いページではとても負荷が高いです。
Gallery機能をつかって、読込スピードを上げる目的もありますが、データベース機能は表示される部分のみにリクエストが分割されるため量が多すぎるページよりは早くページを閲覧可能です。（非同期のリクエスト）
また、ギャラリーで表示される画像はサムネイルとして最小化されているため、モバイルの帯域も逼迫しません。
インラインデータベースは読み込みラグがある
インラインにすると、表示に もたつき が発生します。
ページの本文の読み込みとインラインページの読み込みにラグが発生します。 これは、一日に何度も定常的に見るページでやってしまうととてもストレスです。 矢印でしまうか、フルページにするか検討しましょう。安直にinlineは実施しない方がよいです。
あくまで情報の特性や見る頻度などを意識して適用しましょう。
重いコンテンツはトグルリストにしまおう
PDFや画像などはページを開く際に直ぐにロードが始まるため読込までに時間がかかり、ページが重くなりUX体験が悪くなります。また、インラインデータベースも読込の遅延があるためこれまた重く感じる原因の一つです。
コードブロックなどを利用したときも重くはないですが縦長の時に見通しがとても悪くなります。 そんな時には、トグルリストを使って対象のコンテンツをしまうことで、ユーザ体験を損ないません。 また、ページ遷移をするほどの影響も与えないため比較的量の多いコンテンツでは利用するのが良いでしょう。Toggle Listを利用することで、しまわれたコンテンツのGET処理は走らないので単純な軽量化を実施できます。
Notionのデータベースを”ワンランクアップ”させるデザイン術【10選】