ウェブサイトを構築する上でページの読み込み速度は非常に重要です。
ページの読み込み速度が遅いと、ユーザーはウェブサイトを離れてしまう可能性があります。

2017年のGoogleの研究によると、モバイルサイトの読み込み速度が3秒以上かかると、53%のユーザーがページを離れるというデータもあります。

53% of visits are abandoned if a mobile site takes longer than 3 seconds to load.
引用元：Top 12 marketing insights from 2017 to carry you into 2018

ページの読み込み速度を向上させるためには、画像の最適化やCSS、JavaScriptの最適化などさまざまな方法がありますが、
今回は実際の案件であった複雑なデータベース構造によるページの読み込み速度の改善事例をご紹介します。

問題の特定

まずは、ページの読み込み速度が遅い原因を特定します。

ページの読み込み速度を測定する

まずは、読み込み速度が遅いページの読み込み速度を測定します。
ページの読み込み速度を測定するためには、Google Chromeのデベロッパーツールを使用します。

1. デベロッパーツールが開いたら、「ネットワーク」タブを選択

デベロッパーツールを開いたら、「ネットワーク」タブを選択します。
このタブでは、各リクエストの読み込み速度やサイズなどが表示されます。

2. ページをリロードする

ページの読み込み速度が表示されます。
読み込み速度が遅い原因を特定するために、各リクエストの読み込み速度を確認します。

ページの読み込み速度が遅い箇所の特定

各リクエストの読み込み速度を確認したところ、今回の場合はページ自体の読み込み速度が遅いことがわかりました。
そして、さらに原因を調査したところ、データベースからデータを取得する部分で時間がかかっていることがわかりました。

解決策の検討

今回のページは一覧ページの位置づけで、取得するデータのデータベース構造は以下のようになっています。

主データには複数の子データが紐づいており、さらにその子データにもさまざまなデータが紐づいているという複雑な構造になっています。

フロントで表示するデータは主データとその子データのみですが、主データに紐づく子データや孫データなどのデータも考慮してデータを絞り込んだうえでデータを取得する必要があり、
その影響でデータベースのクエリが複雑になり、ページの読み込み速度が遅くなっていました。

そこで、以下の2つの解決策を検討しました。

データベースの最適化

データベースのクエリを最適化することで、データの取得速度を向上させる方法です。
具体的には、データベースのインデックスを貼る、不要なデータを取得しないようにするなどの方法があります。

今回の場合にはデータベースのインデックスはすでに適切に設定しており、
不要なデータも取得していないため、データベースの最適化による改善は難しいと判断しました。

データ読み込みの非同期化

次にデータの取得を非同期で行うことで、ページの読み込み速度を向上させる方法です。
具体的には、ページ読み込みのタイミングではデータ取得を行わず、ページの読み込みが完了した後にAjaxを使用してデータを非同期で取得する方式に切り替える方法です。

この方法を採用することで、ユーザーがページを閲覧している間にデータの取得を行うため、ページの読み込み速度を向上させることができます。

解決策の実装

今回は、データ読み込みの非同期化を行うことで、ページの読み込み速度を向上させることに成功しました。

データ読み込みの非同期化

データ読み込みの非同期化を行うために、以下の手順で実装を行いました。

1. ページ読み込み時にデータ取得を行わないようにする

まずは、ページ読み込み時にデータ取得を行わないようにします。
これにより、ページの読み込み速度を向上させることができます。

2. ページの読み込みが完了した後にデータ取得を行う

ページの読み込みが完了した後に、Ajaxを使用してデータを非同期で取得します。
これにより、ユーザーがページを閲覧している間にデータの取得が行われ、待ち時間を最小限に抑えることができます。

3. データ取得が完了したら、データを表示する

データの取得が完了したら、データを表示します。
ユーザーはページを閲覧している間にデータが表示されるため、スムーズなページ遷移が可能となります。

結果

データ読み込みの非同期化を行った結果、ページの読み込み速度が大幅に向上し、
ページの読み込みに場合によっては7秒ほどかかっていたものが、2秒以下にまで抑えることに成功しました。

まとめ

今回は、複雑なデータベース構造を持つウェブサイトのページ読み込み速度の改善事例をご紹介しました。

ページの読み込み速度を向上させるためには、まず問題の特定が重要です。
問題の特定を行った上で、解決策を検討し、実際に解決策を実装することで、ページの読み込み速度を向上させることができます。

今回は、データ読み込みの非同期化を行うことで、ページの読み込み速度を向上させることに成功しましたが、
他にも画像の最適化やCSS、JavaScriptの最適化など、さまざまな方法がありますが、それぞれのウェブサイトの状況や問題に合わせて最適な方法を選択することが重要です。

以上、最後までご覧いただきありがとうございました～。