Pinterest PWA：モバイルパフォーマンスを正しい方法で高める

公開: 2022-06-18

eコマースビジネスの成長を加速するソリューションを探している場合は、MコマースとPWAへの投資を示唆する投稿を確認する必要があります。これらの提案は、信頼できる実際の数値に基づいています。モバイルベースのコンバージョンの増加から、ユーザーエクスペリエンスの向上につながるサイトのパフォーマンスの向上まで、PWAの開発は、Mコマース戦略にぴったりです。詳細については、Pinterest PWAの今日のケーススタディをご覧ください。この未来の次のWebアプリを利用して、モバイルパフォーマンスを向上させ、時間の経過とともにROIを拡大する方法。

コンテンツ

Pinterestの概要

画像愛好家、インスピレーションを求める人、アイデアを見つける人がたむろするためのソーシャルプラットフォームとして、Pinterestを使用すると、レシピ、家の装飾のアイデア、衣装のアイデア、力を与える引用、かわいい動物など、さまざまなアイデアに参加して冒険することができます。などなど。

Pinterestの各投稿はピンと呼ばれます。 Pinterestには何十億ものピンがあり、ピンではテキストではなくjpgまたはpngの形式でアップロードする必要があるため、このプラットフォームは視覚的な発見エンジンとして機能します。ピンをプライベートボードまたはパブリックボードに保存して、インスピレーションをすべて1つの場所にまとめることができるため、次回は、探しているものを簡単に取得できます。

Pinterestは、12年前にPaul Sciarra、Evan Sharp、BenSilbermannによって設立されました。 Pinterestは、それ自体を「世界のアイデアのカタログ」と呼んでいます。 Pinterestのおかげで、まだ名前が付けられていない場合でも、アイデアを見つけるのがはるかに簡単になります。

発見からコンバージョンまでのステップを減らすことで、Pinterestは、ほとんどのソーシャルメディアサイトよりも早くブラウザをリードに変換し、リードを販売に変換する可能性が高くなります。月間4億3300万人以上の個人がPinterestで活動しており、約1,000万人のユニークな訪問者があり、最も急速に成長しているプラットフォームの1つとなっています。

PinterestとPWAが一緒になるのはなぜですか？

それはすべて、Pinterestが注目を集める国際的な聴衆を持っていたために始まりました。したがって、彼らはモバイルウェブに目を向けました。 Pinterestは、アプリとウェブサイトのパフォーマンスが最適化されていないことを認識していました。オンライン環境が勢いを増している中、彼らは競争から解放されるために何かをする必要がありました。

正規ではないモバイルWebユーザーを調査すると、古くて遅いWebエクスペリエンスからサインアップ、ログイン、またはアプリのインストールへの変換能力が1％低いことがわかります。当時、Webアプリのテクノロジーは急速に進化しており、サイトのコンバージョン率を向上させる上でかなりのギャップが生じていました。

2015年、Googleは販売者とエンドユーザーの両方に最大の価値をもたらすソリューションとしてPWAを導入しました。それはPinterestに新しいモバイルウェブ体験のためにどこに投資するべきかという考えを明るくしました。

PWAが提供できる方法は次のとおりです。

ユーザーの場合：PWAは、グローバルスケールでユーザーエクスペリエンスを向上させることを目指しています。つまり、インターネット接続が少ない場所やデータ処理が制限されている場所に住んでいる場合でも、モバイルサイトは帯域幅を節約し、高速かつ応答性の高い負荷をかけます。迅速、スムーズ、シームレスなサイトの相互作用がすべての違いを生み、楽しい旅を促進します。
販売者の場合：PWAがブラウザーを介して実行され、オペレーティングシステム間で機能するため、重複するアプリ開発コストを節約できます。 PWAはネイティブアプリのように機能することができますが、検索エンジンの結果ページでブランドのモバイルサイトを紹介する機会を販売者に提供することもできます。

PWA統合を促進するPinterestの課題

データによると、Pinterestのユーザーの80％が、ネイティブアプリではなくモバイルブラウザでサイトを使用していました。アプリのインストール率は時間の経過とともに増加しましたが、それには欠点がありました。モバイルWebに直接関連する、否定的で、満足できず、イライラしたレビューが多数ありました。

米国以外のユーザーの半数以上が、帯域幅が制限され、読み込み速度が速い優れたモバイルWebを構築することで、グローバルユーザーがPinterestに簡単にアクセスできるようになります。また、認証されていないユーザーがモバイルアプリに切り替える割合はわずかでしたが、ネイティブアプリでは快適なエクスペリエンスが得られませんでした。

ただし、このアプリは、モバイルWebよりも多くのインタラクションでより多くのオーディエンスをもたらしました。ネイティブアプリユーザーをモバイルウェブに変換するのは簡単な作業ではありませんでした。しかし、Pinterestはそれよりも野心的でした。

もう1つのことは、Pinterestの以前のモバイルWebは、対話を開始するために最低23秒を必要としたことです。ユーザーは、2017年の変革前のPinterestのモバイルプレゼンスを「モバイルウェブへの邪悪な呪い」と評価しました。具体的には、2.5MBを超えるJavaScriptが、メインスレッドが最終的に落ち着いてインタラクティブになる前に、解析およびコンパイルされるのに十分な時間送信されました。

PinterestPWAの成果

機能について

疲れたやり取りの時間を解決するために、新しいPinterest PWAはJavaScriptを何百も削減し、コアバンドルを最初の650KBから150KBに縮小しました。さらに、彼らは重要なパフォーマンス指標をなんとか引き上げることができました。インタラクティブな時間は6秒未満で済み、最初のペイントは1.8秒後に表示され、4.2秒から短縮されました。

一般的に、モバイルWebはより軽量で応答性が高くなっています。プラットフォームは画像でいっぱいですが、すべての要素が短く鮮やかに配置されています。ページ遷移も期待どおりに機能しています。

結果

2017年の変革により、新しいモバイルWebの毎週のアクティブユーザー数は年々103％増加しました。

Pinterest PWAと古いモバイルウェブの比較：

5分間でオンサイトで費やした時間が40％長くなりました
ユーザー生成広告が44％増加
広告のクリック率が50％増加
コアエンゲージメントが60％高い

Pinterest PWAとネイティブアプリの比較：

5分間でオンサイトで費やした時間が5％長くなります
ユーザー生成広告が2％増加
広告のクリック率は残った
コアエンゲージメントが約2〜3％高い

この結果は、オンラインプレゼンスを構築することで利益を上げる最大の秘訣を明らかにし、優れたユーザーエクスペリエンスが印象的なユーザーインタラクションレベルを促進し、時間の経過とともにコンバージョンを増加させるという私たちの信念を確認しました。

Pinterest PWAは、ネイティブアプリの模倣に近づいています。したがって、機能に実行可能な変更はありません。ただし、ストレージの使用量は、iOSユーザーに56MB、Androidユーザーに9.6MBを要求し、PWAが提供するのと同じエクスペリエンスを提供し、縮小および圧縮された150KBのダウンロードの負担を軽減します。素晴らしいホーム画面への追加機能に感謝します。

Pinterestのモバイルアプリのイメージチェンジから何を学ぶことができますか？

その名前は「ProjectDuplo」でした。これは、ウェブプラットフォーム開発者と成長エンジニアのチームが誕生した2017年の夏にシンプルさとアクセシビリティに着想を得たものです。古いサイトのパフォーマンスを測定のためにチェックしたところ、モバイルWebはサインアップの10％未満を処理できますが、デスクトップWebはその5倍の量を処理しました。

このプロジェクトの特別な点は、Pinterestのエンジニアが新しいモバイルサイトを構築、統合、立ち上げるのにわずか3か月しかかからなかったことです。これは、世界最大のPWAでもあります。それで、彼らはどのようにそれをしましたか？振り返ってみると、プログレッシブWebアプリという用語をリリースしてから2年後の観点から、彼らはアーリーアダプターになるという同じ懸念を共有していました。

フレームワークを明らかにする

Pinterestの機能で完全に書き直されたプロセスを作成して出荷するための短時間の説明は、Gestaltです。このオープンソースのUIライブラリは、4分の1以内にプロジェクトを提供するのに役立ちます。 Gestaltのコンポーネントスイートを使用すると、CSSに触れることなく、一貫して簡単に見事なページを作成するための独自のデザイン言語を構築できます。

次に、特定の間隔のページ用の特定のレイアウトコンポーネントを使用して、モバイルWeb専用の別のスイートが構築されました。高速でバグのないUI開発を実現するには、PageContainerのデフォルトの境界で、FixedHeaderの境界を除いてFullWidthを除外する必要があります。そして、React 16は、Pinterestで行われたすべてのWeb開発に使用されました。

PWAは、Workboxライブラリの従来の使用法を利用して生成および管理することで有名になるため、ServiceWorkerに細心の注意を払いました。今日のPinterestは、JavaScriptまたはCSSバンドルとそれらのアプリケーションシェルのUIを微調整するために、キャッシュファースト戦略を優先しています。

彼らがどのように速度を加速したか

特にパフォーマンスとスピードは、Pinterestの変革における一流の震源地でした。最適化後、PinterestはJavaScriptファイルを490KBから190KBに縮小し、ルート内のデフォルトレベルのコード分割から実行し、コンポーネントレベルからのコード分割で<Loader>コンポーネントの使用を促しました。

クライアント/サーバー側のプリロードシステムを頼りにすると、初期ページのロードとクライアント側のルートの変更が改善されるため、ロードが高速化されます。

速い体験を保証するために、Pinterestは正規化されたreduxストアに依存しました。これは、ピンやユーザーのアクションなどの信頼できる唯一の情報源を持つことで、ほぼ瞬時にルートを変更する役割を果たします。

具体的なビューでは、コンテンツが制限されたピンのみが表示されます。詳細については、クリックすることを決定するまで、最初にそれを読んでください。そうすれば、サーバーから詳細を取得するのに十分な時間があります。ピンデータは質量に対して正規化されているため、これはすべて可能です。

重要なポイント

Pinterest PWAは、PWAの採用を主導し、大成功を収めました。彼らはユーザーの苦情を聞き、適切な責任を負い、ネイティブアプリがもたらすものにほぼ類似したパフォーマンスと変換を行う新しいモバイルウェブを開発しました。

うまくいけば、この刺激的なケーススタディを通じて、PWAについてもっと学ぶことにオープンマインドになり、PWAがどのように強く危険な状態を維持するのに役立つかを試してみることができます。現時点で最高のeコマースプラットフォームであるMagentoのPWA開発で10年に相当する専門家を探している場合は、Tigrenをチェックすることを忘れないでください。

プレミアムMagentoPWAソリューションの詳細については、Tigrenに連絡し、問題が発生している場所をお知らせください。