目次
目次
この文書は、Framerを学ぶ国内ユーザーが韓国語の資料不足によって経験する困難を解決するために、公式ブログの内容を翻訳し、実務で役立つ情報を追加したものです。Framerを使用する皆様に少しでも役立つことを願っています。
サイト最適化が必要な理由
Framerはサイト速度を維持するためにさまざまな最適化を自動的に実施しています。しかし、これに加えて性能向上のために追加の措置を講じることができ、サイトの速度が希望するほど速くない場合は、以下に提案する追加の措置を試してみてください。
画像の最適化
Framerはほとんどの画像を自動で最適化してくれるため、ユーザーが別途WebPに変換したりリサイズする必要はありません。詳細はFramerで画像がどのように最適化されるかをこちらの記事でご確認ください。
一般の画像: 画像をそのままアップロードし、解像度を
Autoに設定してください。FramerがWebP変換とサイズ調整をしてくれます。SVG画像: フレームを作った後、その中に画像をドラッグ＆ドロップしてアップロードしてください。
フォントの最適化
フォントはサイトの読み込み速度と可読性に大きな影響を与えます。Framerはフォントの読み込みを自動で最適化しますが、いくつかの原則を守ることで、より安定して速い体験が可能です。詳細はFramerでフォントを最適化する方法の記事をご参照ください。
LightからExtra Boldまでのフォントウェイトを使用する
: これにより、フォントが読み込まれる際にテキストが消えることがなく、font-display: swapのおかげで代替フォントが先に表示され、自然に置き換わります。Google Fontsを使用する
: Google Fontsは必要な文字だけをダウンロードするので、不要な容量を減らして速く読み込みます。2023年11月以前にアップロードしたカスタムフォントがある場合は、再アップロードする
: この過程を通じてWOFF2形式に変換され、ファイルサイズを減らし性能を改善します。
動画の最適化
動画はサイトの品質を向上させることもありますが、速度を低下させる要因にもなります。したがって、いくつかの原則を覚えておくと良いでしょう。詳しくはFramerでビデオを最適化する方法をご参照ください。
YouTubeまたはVimeoの使用
: これらのプラットフォームは、ネットワーク速度や画面サイズに応じて動画の質を調整します。InsertメニューでYouTubeおよびVimeo要素を使用できます。オートプレイを避ける
: 自動再生は無駄な帯域を消費し、他のサイトの読み込み速度を遅くする可能性があります。
背景で使用する動画の場合は音を消し（
Muted）、ループ（Loop）に設定し、操作ボタンは削除する方法が良いです。これにより表示される時だけ動画がロードされ、帯域を節約できます。
最適化状態の確認
Framerでは、サイトが正しく最適化されているかを直接確認できる機能があります。
上部メニューでSite Settings → Versionsに入り、最新バージョンにOptimizedという表示があるか確認してください。Optimization Errorと表示された場合は問題があることを意味するため、再確認後に再公開が必要です。
カスタムコードの管理
Framerでは<head>や<body>に直接カスタムコードを追加できます。しかし、この機能を無分別に使うと性能が低下する可能性があります。
必要最小限のコードを追加する
: 例えば、MailChimpスクリプトが必要なページがあれば、そのページでのみロードされるように設定するのが良いです。スクリプト別に適切なコードを使用する
: サイト全体に適用するコードはProject settings → Custom codeで管理し、特定のページでのみ必要なコードはPage settings → Custom codeを使用してください。スクリプト配置の位置に注意する
: 通常は<body>タグの末尾に<script>を入れdefer属性を追加することが推奨されます。
コードができるだけ早く実行される必要がある場合はasyncを使用できます。ただし、属性を使わずに挿入するとサイトの速度を遅くする可能性があるので注意が必要です。
スクリプトができるだけ早くロードされる必要がある場合はasyncの代わりに使用するが、両方は使用しない方が良いです。サイトの速度が低下する可能性があります。インラインスクリプトはdefertype="module"で最適化されています。
アニメーション効果の管理
アニメーションはユーザー体験を向上させることができますが、最適な性能を求めるには慎重に使用する必要があります。
ページ上部の重要な要素にはAppear Effectを使用してください。この効果はJavaScriptがロードされる前に実行されるため、ユーザー体験がよりスムーズです。ただし、同じ要素にScroll Animation効果を追加すると初期のロード性能が低下する可能性があるので避けた方が良いです。
影とブラー
影とブラーはデザインに奥行きを加えますが、ブラウザの性能に影響を及ぼす可能性があります。読み込み時間に影響を与えないとしても、アニメーションやスクロール速度そのものを遅らせる可能性があります。
可能であれば最小限の使用にとどめ、性能を維持するためにブラーの値は10以下に維持するのが良いです。
外部埋め込みとiFrame
外部コンテンツを読み込む場合も性能に影響を与える可能性があります。HubSpotフォームやSpline 3Dイラストレーションのような外部要素は基本的にFramerでLazy-load方式で処理されますが、それでもコードが追加で実行されることでサイトが重くなる可能性があります。
この場合、サイトを複製した後、該当の埋め込みを削除してスピードの変化を比較してみてください。このチェックだけでも性能が向上するか確認できます。
これらの手順を試した後も問題が解決しない場合は、お問い合わせページでサポートを受けてください。
本記事はFramer公式ブログの「Optimizing your site for speed and performance」を翻訳・翻案したコンテンツです。
