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

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

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

この記事の要約

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

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

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

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

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

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

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

ユーザーの期待値はオリンピックなので、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の技術要素について紹介して、ここで述べたメリットが具体的にどういう形で実現されるのかを次回以降の記事でお伝えします。