Webサイトを爆速にするJAMstackとは?

こんにちは。天野たけしです。

現在はアムステルダムに住んでいて、ウクライナの開発会社数社とPWAやJamstackなどのテクノロジーを絡めたwebプロジェクトに関わっています。

またプロダクト・マネージャーのスキルを体系的に学べるProduct Institute Japanのスタッフとして活動しており、Scrum Masterの資格を取り実際のプロジェクトで実施中です。

TL;DR この記事の要約

  • いつも使っているサイトやアプリは世界最速
  • 遅いwebサイトにはいろいろなコストが発生する
  • 解決策としてのJamstackとそのメリット

今日朝起きてスマホやwebサービスで何を使いましたか?

いきなり関係なさそうな質問ですが、とりあえず答えてみてください。大体みなさん同じ様な答えだと思います。

  • インスタグラム
  • Facebook
  • Gmail, Google MapsなどのGoogleアプリ
  • Amazonサービスもろもろ

これらのアプリやwebサービスで共通していることは何でしょう?

これらは世界最高のwebエンジニアのいる会社が作った世界最速のサービスで、これ以上速いサービスはありません。

つまりユーザーは1日中世界最速のサービスを使っているんですね。これはいつもオリンピックを見ているようなものなんです。

ユーザーの期待値はオリンピックなので、web開発をしている我々は少しでもこのオリンピックのレベルに近づけて行く必要があります。

そうしないとユーザーにとってたまに訪れるその他の遅いサービスは県大会のレベルになり、見向きもしなくなってくれます。だって朝から晩まで一般的なユーザーはオリンピックを見てる訳ですから (笑

遅いwebサイトのコスト

もうちょっと掘り下げてサイトが遅いとどいうコストが発生するかを見ていきましょう。

ページロードの時間が遅くなると直帰率が増える

(出典) https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

Think with Googleのこの記事ではページロードにかかる時間が1秒から3秒まで落ちると直帰率が32%増えるとの結果が説明されています。まだどんどんページロードの時間が増えると90%, 106%そして123%まで増えています。

サイトパフォーマンスはUXの一部

  • サイトが遅い、クラッシュするなどUXの悪いサイトには88%のユーザーが戻らない
  • 400ミリ秒サイトが遅くなると最初の週はGoogle検索が0.44%経り、次の週は0.76%減る
  • ページロード・タイムはGoogleのSEOの重要な要素

(出典) https://designingforperformance.com/performance-is-ux/

遅いサイトは売上に影響する

  • ロード時間が1秒増えると7%コンバージョン率が落ちる
  • 67%のユーザーがサイトから遅いから買い物を辞めている
  • ロード時間を半分にするとショッピングカートへの商品追加が11%増加
  • Bingの検索結果の表示が2秒遅れると広告の売上が4.3%減少

(出典) https://www.dareboost.com/en/webperf-impacts

こういった統計からも分かる通り、サイトが遅いことで様々な面からデメリットがあるのが分かります。

解決策 -> Jamstack

遅いサイトへの解決策として、Jamstackという新しいwebのアーキテクチャが登場しました。

Jamstackでは開発時に事前に生成された静的なhtmlファイルをCDNのホスティングにデプロイする事で高速にWebサイトが配信されるようになります。

Jamstackの技術的な詳細は次回以降の記事で紹介するとして、Jamstackの本家のサイト (https://jamstack.org/why-jamstack/) では以下のメリットが紹介されています。

セキュリティー

Jamstackではページがホスティングされているサーバーには事前に作られた静的なhtmlが置かれています。このためページ閲覧時にはデータベースやサーバーサイドのスクリプトへのアクセスが必要ないため、セキュリティーが強化されます。

スケーラビリティー

Jamstackの静的なhtmlはCDNから配信されるため、キャッシングなど難しい設定は必要ではありません。サイトへのアクセスが急に増えてもサイトが遅くなったり見れなくなったりという事はありません。

パフォーマンス

Jamstackでは事前に静的htmlが生成されるため、ページリクエスト時にサーバーが側でページを動的に生成する必要がありません。静的htmlがCDNから配信されることで、非常にパフォーマンスの高いサイトのために高価で複雑なインフラを構築する必要がありません。

メンテナンス

ホスティング側の構造がシンプルになるので、メンテナンスも楽になります。サイトのパフォーマンスを常に監視して問題発生時にサーバーのメンテナンスを行う必要が無くなります。

ポータビリティー

Jamstackサイトは事前に静的HTMLファイルを生成するので、ホスティングサービスの移管などが簡単に行えます。このためインフラのベンダーロックインから開放されます。

開発者の体験

Jamstackへは様々なツールで開発することができます。ReactJSやVueJSなど人気のあるJavascriptのフレームワークを使う事ができ、開発者にとってもスムーズにJamstackでの開発が可能です。

この様に様々なメリットのあるJamstackですが、次回以降の記事ではJamstackの技術要素について紹介して、ここで述べたメリットが具体的にどういう形で実現されるのかを次回以降の記事でお伝えします。

 


この記事を書いた人
たけし天野
天野たけし
広島出身。カナダ、モントリオールのコンコーディア大学でコンピューターサイエンスと経済学の学位を取得して卒業。 イメージソース、電通の子会社の電通アベニューレイザーフィッシュ(現:電通アイソバー)などで仕事をした後、PayPal Japanでインテグレーションマネージャーとして従事。myGengo (現:Gengo)の初期メンバーとしてサービスのローンチまでに携わり、PayPal退社後にローンチしたeBay出品サービスNijuyonの開発・運営も行っている。現在はアムステルダム在住でウクライナの開発会社と数社とPWAやJamstackなどのテクノロジーを絡めたwebプロジェクトに関わっている。またプロダクト・マネージャーのスキルを体系的に学べるProduct Institute Japanのスタッフとして活動。Scrum Masterの資格を取り実際のプロジェクトで実施中。趣味はヨガと筋トレ。

週1日~/リモートの案件に興味はありませんか?

週1日~/リモートの関わり方で、「開発案件」や「企業のIT化や設計のアドバザリーなどの技術顧問案件」を受けてみませんか?副業をしたい、独立して個人で仕事を受けたエンジニア・デザイナー・PM・技術顧問の皆様のお仕事探し支援サービスがあります。

FLEXYでご案内できる業務委託案件

業務委託契約・開発案件

テーマ 案件はFLEXYに登録後、コンサルタントからご紹介します
勤務日数 2〜3日/週
報酬 4万円/日
必要スキル JavaScript・React
勤務地 東京都内 / フルリモート
リモート 週1日のオンラインMTG・リモート

外部CTO、技術顧問案件

テーマ 技術アドバイザリーとして知見と経験を生かす(FLEXY登録後に詳細のご紹介)
勤務日数 1日/週
報酬 5〜10万円/日
必要スキル エンジニア組織立ち上げや統括のご経験、コードレビュー経験、技術的なアドバイスが出来る方
勤務地 東京都内 / フルリモート
リモート フルリモート

インフラエンジニア(業務委託契約)

テーマ 案件はFLEXYに登録後、コンサルタントからご紹介します
勤務日数 2〜3日/週
報酬 5万円/日
必要スキル それぞれの案件により異なります
勤務地 東京
リモート 相談可

業務委託・フロントエンドエンジニア

テーマ 案件はFLEXYに登録後、コンサルタントからご紹介します
勤務日数 週2日〜
報酬 5万/日
必要スキル それぞれの案件により異なります
勤務地 東京
リモート リモートと常駐のMIXなど

技術アドバイザリー案件

テーマ CTO、技術顧問案件はFLEXYに登録後、案件をコンサルタントからご紹介します
勤務日数 週1日
報酬 5万以上/日
必要スキル CTOとして活躍可能な方、エンジニア組織のマネージメント経験
勤務地 東京
リモート 最初は業務委託契約で週3日などご要望に合わせます

業務委託契約・サーバサイドエンジニア

テーマ CTO、技術顧問案件はFLEXYに登録後、案件をコンサルタントからご紹介します
勤務日数 週2〜3日
報酬 案件により異なります
必要スキル 案件により異なります
勤務地 東京都内
リモート 相談可能
個人登録

お仕事をお探しの方(無料登録)
法人の方(IT課題の相談)