私が直近（2023年10月〜2024年1月）のSTUDIOプロジェクトで直面した問題をもとに、3ヶ月前の自分に伝えたかったことを書き残したいと思います。
この記事は主にWeb開発者の方へ向けた内容となります。
STUDIOの読み込み速度には気をつけて
STUDIOでページを制作する際は、十分に読み込み速度に配慮するようにしましょう。
PCは問題なくとも、スマホの読み込み速度が遅い傾向があり注意が必要です。
超特急で開発したものの、いざスマホ実機でページにアクセスすると重たいページで読み込みに10秒かかってしまう経験をしました。
これからSTUDIOでの開発を検討されている方は、
後ほど記載する点についても気をつけていただけたらと思います。
STUDIOの見解
STUDIO側もスマホ読み込み速度の遅さは認識しており、解決のために継続的に調査をされているようです。
現時点でSTUDIOが提案している改善策はこちらです。参考にしてみてください。
各工程で気をつけたいこと
それぞれの開発工程において気をつけるべきだった点についてご紹介します。
技術選定時
プロジェクトの要件に対して、読み込み速度が重要かを確認してください。読み込み速度が遅くても大丈夫なケースはそんなに多くないはずです。
私のプロジェクトでは、採用を意識したコーポレートサイトのリニューアルが目的だったので、志願者を離脱させないスピードは必要でした。今の知見で再度技術選定するならSTUDIOを選んでないと思います。
現在の弊社では、以下の限られた場合のみでSTUDIOを選定する方針です。
・スピードを要求しない 且つ シンプルなサイト
・コーディングでページが完成するまでにプロトタイプとして爆速で必要なLP
特にSTUDIOを採用するべきではないWebサイトの特徴 ▼
①文字や画像などの全体の要素数が多いサイト
要素数が多ければ多いほど、レンダリングに時間がかかります。
レスポンシブ対応のためPCとスマホ版でCSSのサイズを変える場合、STUDIOで生成されるCSSコードではPC用のCSSを一度打ち消してからスマホ用のCSSを適用するという、冗長な記載になってしまいます。
要素数が多くなればなるほどこのCSSの表記が膨らみ、ページの表示に大きな影響を与えているのではと推測しています。
②デザインが凝っていたり、SVGのイラストや画像を多用したい
画像が多いと読み込むデータ量が多くなって遅くなるのは大体予想がつくかと思いますが、SVGの使用もかなり速度に影響を与えていました。
SVGファイルはファイルサイズ自体が大きくなくても、曲線やドットが多いイラストであればレンダリングに時間をかけてしまいます。
私のプロジェクトではSVGイラストが多く、SVGから軽量なPNG/WebPに置き換える対応が必要でした。それにより数秒短縮できました。
③CMSで多くの値を管理したい
CMSのテーブル上に多くのカラムが必要だったり、1ページあたりのCMS読み込み量が多い場合は特に読み込みが遅くなる傾向があります。
ヒアリング・基本設計の時点である程度CMSで管理したいか決まると思うので、早めに検討してみてください。
④コンバージョン狙いのLPなど、読み込みスピードが特に重要
STUDIOで作成したページは上記3点を踏まえた状態でも最高のパフォーマンスとはなりにくいです。
試しにSTUDIO DESIGN AWARD に出展されているページのパフォーマンスをPage Speed Insightで確認してみると、
スマホ版のパフォーマンスはいずれも100点満点中26〜50と、理想よりもかなり低い傾向にあります。
STUDIOプラットフォームとしてのパフォーマンスの限界がありそうなので、スピードを要求されるサイトにはおすすめできません。
STUDIO DESIGN AWARD
（※Page Speed Insightでは、あえて電波状況などが悪い状況を再現して計測しているので、体感スピードでは全然問題のないページもありますが。）
技術選定の結果、STUDIOを利用される場合
デザイン時（ワイヤーフレーム）
・1ページ内の情報量が多くならないようにしましょう。
・CMSは多用しない設計にしましょう。
デザイン時（詳細デザイン）
デザイナーさんには、以下を意識してもらうようにしておくと良いです。
・PC版、タブレット版、スマホ版のレスポンシブに耐えるデザインにしましょう。
PC版とスマホ版で同じ要素の伸縮だけでは対応しきれない場合、要素の表示/非表示を設定する必要があります。
STUDIOにおけるスマホ版では、PC版とスマホ版の要素をすべてが読み込んでから非表示にするため、パフォーマンスの悪化の原因となります。
・同じ理由で、画像はできるだけPC版とSP版で同一のものを使い回せるようにしましょう。
・基本的に、イラスト/画像は少なめのデザインにしてもらいましょう。
開発時
・（上記デザインの注意点と同じ理由で）表示/非表示の切り替えの使用は必要最低限にしましょう。
・レスポンシブ対応時のスタイル設定は、できるだけブレークポイントごとに細かく設定する必要がないように、設計を考えてから行いましょう。
その他、検証のすすめかた
開発の早い段階からスマホ実機での確認をしておくことをおすすめします。1ページ目を実装したタイミングで仮ドメインにてパスワード付き公開をしましょう。
ページ実装後、私はいつもSTUDIOのライブプレビューや公開画面をPCの検証モードからレスポンシブの表示確認していました。
しかし、このやり方ではスマホサイズの表示は確認ができるだけで、PCのCPUを使っているのでスマホでの実際の読み込み速度までは再現確認できていませんでした。
実機でのアクセス時に体感スピードを確認するだけでなく、スマホのブラウザ検証画面も活用されると良いと思います。
実機をPCと接続した状態で、iphoneならSafariで、AndroidならGoogle Chromeの検証機能を使って確認することができます。
iOS https://qiita.com/unsoluble_sugar/items/2a3d06631a6b8259dc44
Android https://webrandum.net/chrome-dev-tool-android-real-machine/
出来上がったページの読み込みが遅い場合
STUDIOのサポートの方に粘り強く問い合わせをした結果、読み込みスピードを改善する方法が一つ見つかりました。
サイト内の遷移リンクを内部リンクから外部リンクに変更する
STUDIOではリンク先にサイト内ページを選択する際、URL候補がドロップダウンに表示されるのでそれをクリックして設定するかと思います。
ですがこの状態だと、リンクが内部リンクの設定になっています。
↓
これらを意図的に、サイトのドメインを含む外部リンクに変更しましょう。
自身のページのTOPドメインを先頭に追加するだけです。
https://your-domain.com/path-xxxxx
すべてのサイト内リンクに適用しましょう。
私のサイトでは、この変更により体感で2−3秒の読み込み時間の短縮になりました。
※改善した詳細の理由についてはよく理解できていないので、公式の発表を待ちたいと思います。
まとめ
私が気をつけたことを羅列してみました。
具体的な数値の把握などが難しく、曖昧な傾向をであるとしか言えないのですが、少しでも参考になれば幸いです。
誤った内容があったり、他にも気をつけたほうがいいの補足があれば、ぜひコメントで教えていただけますと幸いです。
参考記事
こちらも参考にさせていただきました。
・https://fwywd.com/tech/why-adopt-studio
Discussion
素晴らしい！
まとめていただきありがとうございます。