フロントエンド初心者でもできる！すぐに試せる簡単なパフォーマンス改善

はじめに

フロントエンドエンジニアとして仕事を始めたばかりの頃は、まずは単純に「動くものを作る」ことに集中しがちです。そして、エンジニアとして経験を積んでいくにつれて、アーキテクチャや設計についても考えるようになります。その中で、見落とされがちな分野の一つが最適化です。

最適化と聞くと難しそうに感じるかもしれませんが、決して難しいことばかりではありません。この記事では、初心者でもできる、フロントエンドのパフォーマンスを改善するための簡単な方法をいくつか紹介します。

なぜパフォーマンス改善が重要なのか？

お客からアプリのパフォーマンスについて特に不満がなかったとしても、改善方法を提案できるようになることで、エンジニアとしての価値を高めることができます。SESでは、お客に価値を提供することがキャリアを伸ばしていく上で非常に重要なので、いくつかの最適化手法を身につけておくと、きっと役に立つでしょう。

初期表示の遅さは、画像から見直そう

アプリの画面が表示されるまでに時間がかかる場合、大きな画像をダウンロードしていることが原因かもしれません。このような場合は、WebP形式を使用することで、画像のファイルサイズを小さくすることができます。

WebPとは？

WebPはGoogleが開発した画像フォーマットで、画質を維持しながら、JPEGやPNGなどの一般的な形式と比べてファイルサイズを約25%小さくすることができます。WebPを使用することで画像のファイルサイズを小さくできるため、より速くダウンロードでき、アプリのパフォーマンス改善にもつながります。 

注意ポイント1：第三者のサイトを使って、自分の判断で画像をWebPに変換しないようにしましょう。お客の許可なく、お客のアセットをこれらのサービスにアップロードすると、トラブルにつながる可能性があります。まずは、お客にWebP形式の画像を提供してもらえるか確認するのがよいでしょう。もし難しい場合は、画像を変換してもよいか許可を取ることを検討しましょう。 

注意ポイント2：Next.jsの<Image />コンポーネントは、画像を自動的にこの形式に変換してくれます。これは主に、Next.jsを使用していないプロジェクト向けのおすすめです。

APIは待たずに並列で取得する

「並列」って何ですか？

そう思った方もいるかもしれませんが、心配する必要はありません。難しい言葉ではありません。簡単に言うと、複数の処理を同時に行うことを指します。バックエンド開発ではよく使われる言葉ですが、フロントエンドではあまり聞かないかもしれません。

これは、JavaScriptが複数の処理を同時に実行することができないためです。

じゃ、無理ですか？

通常の関数では並列に実行することはできませんが、それに近いことができる関数があります。それがPromiseです。

例えば、次のようなAPI呼び出しがあるとします：

// ユーザーを取得
const user = await fetchUser();

// 通知を取得
const notifications = await fetchNotifications();

このコードでは、まずユーザーを取得し、ユーザーの取得が完了してから通知を取得します。そのため、画面の読み込みに時間がかかる可能性があります。

ここでは、Promise.all()を使って2つのAPIを同時に呼び出すことで、パフォーマンスを改善することができます。

Promise.allとは？

JavaScriptの関数で、複数のPromiseを同時に処理することができます。「async」キーワードが付いた関数は、配列の中に入れてPromise.all()に渡すことで、同時に実行することができます。

Promise.all()は次のように使います：

// ユーザーと通知を取得
const [user, notifications] = await Promise.all([ fetchUser(), fetchNotifications() ]); 

簡単ですよね？

これで、ユーザーの取得が完了するのを待たずに、通知を取得できるようになりました。

注意ポイント1：Promise.all()は、渡されたすべてのPromiseを1つのPromiseとして扱います。つまり、API呼び出しのうち1つが失敗すると、すべて失敗します。

注意ポイント2：Promise.all()は、中に入れるすべてのPromiseが互いに独立している場合にのみ使用できます。例えば、1つ目のAPI呼び出しで取得したデータを使って2つ目のAPI呼び出しを行う必要がある場合、Promise.all()は使用できません。

今回の記事で紹介するテクニックは以上です。ただ、Lazy Loadingのように、すぐに実践できる簡単なテクニックは他にもあります。

この記事を通して、少しでもパフォーマンス最適化に興味を持ってもらえたら嬉しいです。