Twitter PWA：知っておくべきこと

公開: 2022-07-03

トップ企業と小規模なフォロワー企業の間の技術格差はかつてないほど接近しています。プログレッシブウェブアプリでは、最大の貢献者の1つは、財務能力が大幅に低下したことです。サービスワーカーに深く言及しなければならないWebアプリテクノロジーの新しく高度な使用法を適用することにより、あらゆる規模の企業がPWAを自社の機能上のニーズと予算に合わせて調整できます。世界の優れたPWAの採用からインスピレーションを得たい場合は、以下のTwitterPWAのケーススタディを見逃すことはできません。

コンテンツ

PWA統合前のTwitterのストーリー

2017年4月、Googleとのコラボレーションにより、モバイルブラウザのサイトを新たに改良したTwitterLiteがリリースされました。この名前は、より軽く、より速く、より使いやすいように作られているという事実に由来しています。

今日に向けて、Twitterは米国で3番目に人気のあるソーシャルメディアサイトであり、世界で15番目に人気のあるサイトです。ユーザーの人口統計のほとんどは米国にありますが、日本とインドはTwitterユーザーの2つの最大の代表であり、合わせて米国のユーザー数を上回っています。

Twitter Liteのストーリーは、2010年から2017年までさかのぼる必要があり、Twitterは世界トップのソーシャルメディアサイトになりつつあります。

Twitterは、初期の最大のライバルであるFacebookと比較して、ラフなスタートを切った。しかし、2010年以降、ブルーバードはチャート上で素晴らしい光景を目の当たりにし、四半期ごとに一貫した成長を遂げました。 2015年、2016年、2017年の間に、成長率は鈍化しました。

Twitterは米国外の可能性を認識し、すぐに国際市場に手を差し伸べていました。

GoogleがPWAを導入するとすぐに、TwitterはPWAを拡張して新しいユーザーを獲得する方法を知っていました。 Twitter Liteが最終的な答えであり、ネットワーク接続の信頼性が低い新興国に捧げられました。新しいTwitterPWAは、最適化されたデータセーバーモードで実行している間、1メガバイト未満のストレージを占有します。ユーザーがクリックするまで、ぼやけたプレビューの画像とビデオ。

Google for TwitterLiteのエンジニアリングリードであるNicolasGallagherは、次のように述べています。 Twitter Liteの成功は、PWAに関する多くの記事の見出しになりました。

世界最大のPWAのソリューション– Twitter PWA

PWA開発の実践的な知識を支援するために、Twitter PWA（Twitter Lite）のフレームワークに関する重要なポイント、およびオンデマンド要求用にカスタマイズされた革新的な方法を以下に示します。

Twitter Liteの全体的な目標は、インターネット接続が不十分であっても、ユーザーが優れたオンサイトエクスペリエンスを利用できるようにすることであり、その後の訪問につながり、訪問者を頻繁なユーザーに変えることに注意してください。 PWAの速度、信頼性、セキュリティを促進する機能のおかげで、mobile.twitter.comでそれを体験できます。

アーキテクチャのアイデア

Twitter Liteは、その中核を成す、シンプルで控えめなサイズのNode.jsサーバーであり、クライアント側のJavaScriptのアプリです。 PWAは、データのキャッシュと保存のためのAPIの構築を可能にします。サーバーは最初に認証プロセスを処理し、アプリの最も初期の状態をアセンブルし、アプリケーションシェルでの初期HTMLレンダリングによってWebコードをインタラクティブページに変換します。

バックグラウンドで読み込まれると、データはTwitterAPIから直接要求されます。このアーキテクチャのシンプルさは、Twitter PWAが、規模の規模においても、優れた信頼性の高いサービスを効率的に提供するのに役立ちます。

パフォーマンスの設計

使いやすさは、TwitterLiteの最優先事項の1つです。数億人ではないにしても、数百万人のユーザーが毎月このソーシャルネットワークにアクセスします。そのため、接続状況に関係なく非常に使いやすいユーザージャーニーを作成したいと考えています。

開発者は、一連の増分パフォーマンスレバレッジであるPRPLパターンを、最新のブラウザーからの最新の更新と組み合わせて利用して、Service Worker、Webプッシュ通知、IndexedDB、およびWebアプリインストールバナーを構築しました。それらはすべて、印象的な読み込み速度と接続からの独立性の一部でした。

データの使用

Twitter Liteは、データ保存モードに加えて、キャッシュされたリソースを利用してより小さなデータを事前に提供するため、データの使用を最小限に抑えるように本質的に設定されているため、タイムラインページで40％の控除が行われます。最適化された画像をオンデマンドでロードするために、HEADリクエストが実行され、ボタンをクリックしてそのサイズが表示されます。

プログレッシブローディング

ブラウザに最初のHTML応答を注いだ後、サーバーがインタラクティブな状態をアセンブルするための重要なリソースをプリロードするための指示が送信されます。スクリプトは、要求された場合にのみロードするためにwebpackを使用して細かく砕かれます。

つまり、Twitter Liteからの初期ロードは、可視ビューの必要性のみが実行されるため、非常に高速です。一方、サービスワーカーは、追加のリソースを事前にキャッシュして、ほぼ瞬時に表示され、将来の対話でスムーズに移行できるようにします。

オフラインでの利用可能性

ネイティブアプリと同様に、ServiceWorkerは一時的なオフライン使用を可能にします。以前に読み込まれたすべてのページは、HTMLアプリシェルのキャッシュ、静的アセット、およびいくつかの最も一般的な絵文字を介して即座に再度開かれます。

「再試行」ボタンは、データまたはスクリプトのロードに失敗した場合に提供され、問題が確実に処理されるようにします。オフラインブラウジングを有効にするだけで、起動時とその後の訪問時の読み込み速度が大幅に向上します。

レンダリング

高価なレンダリング作業を忘れてください。 Twitter Liteは、コンポーネントのレンダリング用に最適化されています。ただし、より大きな問題は、追加のパフォーマンスの要件の無限のリストを含むツイートの複雑さにあります。

次に、仮想化されたリストコンポーネントについて考えました。このコンポーネントは、上記のビューで表示されるコンテンツのみをレンダリングし、画面間をスクロールするために保持されます。もう1つの更新は、非重要なレンダリングを非アクティブモードに延期し、requestIdleCallbackAPIによるデータ消費を節約することによるものでした。

システムと重複した速度

Twitter Liteは、アプリのコンポーネントの詳細に基づいて構築されたレスポンシブデザインシステムであり、あらゆる形状の要求に準拠します。 UIコンポーネントを操作することで、迅速な反復と確立されたビルディングブロックの再利用のためのスペースが確保されました。フレックスボックスは、レイアウトのデザイン、色、フォントサイズ、および長さに固定された限られた数に大きく依存していることにも言及する価値があります。

TwitterPWAの成果

モバイルおよびデスクトップサイト

Twitter PWAは、3Gネットワークを備えたほとんどのデバイスで、5秒以内にインタラクティブになると言われています。 Liteバージョンは、読み込みが30％速くなり、データ使用量を最大70％節約すると同時に、対話までの遅延を25％以上短縮します。

古いネイティブアプリと比較すると、Twitter PWAはサイズの最大3％しか占有せず、デバイスのストレージのスペースのほんの一部です。それでも、それは深く強力に機能します。最も複雑な機能の1つであるタイムラインは、ReduxモジュールをReactコンポーネントの混合コンテンツに接続しながら、限られた30のコード構成行から構築できます。

PWAは、通常のフィード、プッシュ通知ポップアップ、ダイレクトメッセージング、検索タブなどの標準機能を備え、ネイティブアプリと非常によく似ています。タッチレスポンスはネイティブアプリよりも著しく遅いと報告されていますが、トランジションはページや要素全体でレスポンシブです。開発者は、将来のリリースでのユーザビリティと責任の強化に引き続き取り組んでいます。

MacとWindowsの両方で古い無視されていたTwitterの公式アプリと比較して、すべてがデスクトップバージョンで非常に有利であり、狭いウィンドウでうまく機能します。全体のエクスペリエンスは、比較的軽量でリラックスして使用できます。

Twitter Liteは現在最大42の言語をサポートしており、グローバル化機能は、地元の人々に合った数字、日付、メッセージを表示するために作成されました。

数字の結果

セッションあたりのページ数が65％増加
送信されるツイート数が75％増加
バウンス率が20％減少

Twitter PWAはどのようにして最速のPWAの1つになりましたか？

サービスワーカーの既存の知識の機能的な調整と、データ消費量の削減のための最適化により、PWAはより高速な読み込み速度を処理するように配線されており、開始時と移動中の両方で、その後の訪問でほぼ瞬時に表示されます。

速度の最適化は1日か2日ではありませんが、テスト、追跡、測定、なぜそれが起こっているのかを理解しようとすること、そして可能な解決策を適用することの繰り返しのプロセスです。パフォーマンスへの取り組みは、あちこちで監視、測定、改善するという悪循環です。

そうは言っても、Twitter Liteは、最初のページの読み込み、Reactコンポーネントのレンダリング、再レンダリングの防止などに関する小さな改善と更新の蓄積です。それぞれが全体としてのパフォーマンスの向上に対応し、世界最大かつ最速のPWA採用の1つである現在の状況に対応するためのあらゆる小さな努力を行っています。

もちろん、そのタイトルを維持するために、開発者は常にすべてが制御されていることを確認し、機会があればプロセスをさらに良いものに進化させるように努力する必要があります。

TwitterPWAおよびPWAに関するよくある質問

TwitterはPWAですか？

絶対。 Twitterは、2017年にGoogle開発者と共同で新しいプログレッシブウェブアプリバージョンをリリースしました。TwitterPWAはTwitter Liteと呼ばれ、そのビルドは、米国と比較して不安定な接続を頻繁に経験する可能性のある海外のユーザーにサービスを提供することに重点を置いています。

Twitter PWAのようなPWAを構築するのは費用がかかりますか？

Twitter PWAは、すべてのTwitter関係者の中で最も安価なバージョンであると言われていますが、さまざまなブラウザー間で優れたパフォーマンスを発揮し、ネイティブアプリの優れた機能のいくつかにさえ似ています。

Twitter PWAは、優れたパフォーマンスの最適化とPWAの最新テクノロジーの世界クラスのアプリケーションを組み合わせたものです。そうは言っても、Twitter Liteのような優れたPWAを構築することは、採用またはアウトソーシングする開発チームに大きく依存します。

PWAは、ネイティブアプリに代わる最良の方法であり、一般的にWebサイトの将来を予測します。したがって、オンラインビジネスがオンサイトのカスタマージャーニーを改善することでコンバージョン率を活用する方法を探している場合は、重量があり高価なネイティブアプリを捨てて、代わりにPWAを探してください。

あなたのビジネスのPWA開発をどこから始めますか？

さて、それはすべてあなたのビジネスがどこにあるか、それが何を必要としているか、そしてあなたがそれをどこにしたいかから始まるべきです。わかる？関係のないことでお金と貴重な時間を失いたくないからですよね？

次の重要なステップは、PWAがビジネス戦略に適合するかどうかを判断することです。ほとんどの人が、サイトトラフィックを増やしたり、コンバージョン率を改善したり、ユニットの価値を活用したりする方法を探しています。そして、PWA開発機関がそのすべてを支援します。

これらは、サイトのパフォーマンスの低い領域で問題を検出するのに役立ちます。最善の解決策がわからない場合は、相談または検査サービスに連絡してください。

そして、それが次のステップに到達したときです。信頼できるPWA開発サービスプロバイダーを選択します。長年の専門知識を備えた名前が必要であり、クライアントのために最善を尽くすように努力する開発者のダイナミックなチーム、そしてもちろん、高機能で機能豊富なPWAを作成するために必要な優れた知識とスキルが必要です。

Tigrenは、過去10年間に数千のグローバルSMBが信頼してきた世界をリードするアウトソーシングエージェンシーです。私たちは、業界で最高の業績を上げている企業から選ばれた、若くて意欲的で献身的な個人のチームです。

私たちはeコマース開発を専門としており、特にMagentoとPWAの開発サービスを専門としています。私たちはあなたに他では見つけられない最良の取引をもたらし、最後まであなたを助け、あなたが私たちに来る目標を達成したいと思っています。

次のような効果的で費用対効果の高いソリューションが必要な場合は、当社にお任せください。

完全にeコマースのPWA開発をゼロから
一部eコマースPWA開発
組み込みのソリューションと既存のeコマースPWAの改善
すぐに使えるプレミアムeコマースPWAテーマ/プラグイン/拡張機能

重要なポイント

新しいTwitterPWAは、鈍くて反応の鈍いモバイルWebの世界に新鮮な空気を吹き込みます。 TwitterとGoogleの間の強力なパートナーシップは、PWAの可能性に関するすべての懸念と疑問を打ち破り、変革をもたらす採用で名声を博しました。 PWAの早期採用者として成功し、オンラインユーザーを甘やかし始め、手遅れになる前に、今日TigrenでROIの増加を微調整します。