読み込みスピード改善¶

大前提として、ecforceは一般的な企業サイトやLPに比べて処理が多いため読み込みが重くなります（平均で4秒程度）。

それよりも読み込み速度が遅いと、クライアントよりスピード改善が求められるケースがあるので対応のしかたを記します。

使用ツール

• Google Chrome Developerツール
• PageSpeed Insights

手順1. 現在の読み込みスピードを確認し現在適用中のテーマを複製する¶

どれぐらい改善したのか定性データでは報告できないため、定量的なデータを取得します。

指標はGoogle Chrome Developerツールで計測される秒数と、より正確に計測されるPageSpeed Insightの秒数になります。

▼ Google Chrome Developerツール¶

「ネットワーク」タブを開いた状態で、ページを更新し読み込みます。この時、更新アイコンを長押しして「キャッシュの消去とハード再読み込み」を選択してください。
キャッシュがある状態だと正しい速度が計測できません。
読み込んだ時に、ファーストビューが表示された時の秒数を右下の終了から読み取ってください（キャプチャの赤枠）。
より正確な計測は下記のPageSpeed Insightでしますが、ユーザーが「ページが読み込めた」と判断するのはファーストビューなので、この時の秒数を確認しておきます。

▼ PageSpeed Insights¶

計測したいサイトのURLを貼り付けて計測します。
一度計測すれば、URLで結果が保存されるのでいつでもURLから再アクセスできます。

次に、改善用のテーマとして、現在適用中のテーマを複製しておきます。

手順2. 改善アクションをリストアップ¶

PageSpeed Insightsの計測結果の続きを見ると、改善できる箇所がリストアップされています。 多くは最低限必要なファイルなのですべてをクリアすることは難しいですが、この中から着手できそうなものをピックアップします。

【改善アクション】画像の軽量化¶

画像ファイルが1MB以上でwebp化されていない画像があればwebp化します。

【改善アクション】不要なファイルの読み込みを削除¶

• vimeo動画を複数埋め込んでいる場合、<script src="https://player.vimeo.com/api/player.js"></script>が1ページ内で複数読み込まれていないか？
• Google Fontsの読み込みが重複していないか？

【改善アクション】不要なコメントアウトの削除¶

今後使うかもしれないから、と残してあるコメントアウトが今後ずっと使わない可能性もあります。
当分使われていないコードは削除してしまいましょう。

【改善アクション】使用していないセクションの削除¶

ecforceの開発元であるSUPER STUDIO社からの回答を引用します。

不使用の「セクション」を削除いただきますと、応答速度を改善可能かと存じます。
ただし、「セクション」の削除をされる際には、
現在使用されているテーマをコピーしていただき、
コピーしたテーマにて、削除後の挙動が問題ないかをご確認いただくようお願いいたします。
「セクション」の削除につきましては、
以下FAQにて詳細がございますため、
ご参照いただけますと幸いです。

◎セクションを削除する
確認URL：https://support.ec-force.com/hc/ja/articles/4404154819225-%E3%83%86%E3%83%BC%E3%83%9E%E7%AE%A1%E7%90%86-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-%E3%83%88%E3%83%83%E3%83%97%E7%94%BB%E9%9D%A2#01FC2SW07V9QTAC9854DJYJYGP

【改善アクション】過大なDOMサイズの回避¶

カルーセルの中身が多い場合、目には見えませんが横に長い要素が存在します。
これがレンダリングに影響してくるため、可能であれば表示件数の上限を決める処理を追加してよいかどうか検討が必要です。

手順3. 改善後、再度計測して報告する¶