タグ

ブックマーク / www.suzukikenichi.com (3)

  • Service WorkerをサポートしないiOSでもPWAで成果をあげた世界最大のビューティサイト

    [レベル: 中級] Google Developers サイトに PWA の成功事例が新たにたくさん追加されました。 多くは、Google I/O 2017 でも紹介されていました。 この記事では、特に注目したい事例として Lancôme(ランコム)を紹介します。 Lancôme はコスメやスキンケア、フレグランスなどの美容アイテムを取り扱う世界最大の化粧品会社です。 Lancôme の全体的な成果 PWA による全体的な成果として Lancôme は次のような改善を手にしました ページがインタラクティブになるまでの時間が 84% 減少 ※“インタラクティブ (Interactive)” とはここでは、ページが表示されたり、何らかのアクションをそのページで起こせる状態になったりすることだと考えてください コンバージョンが 17% 増加 直帰率が 15% 減少 モバイルのセッションが 51%

    Service WorkerをサポートしないiOSでもPWAで成果をあげた世界最大のビューティサイト
    braitom
    braitom 2017/06/08
    化粧品会社のLancômeがPWAを導入してどのような効果があったのかが書かれている。特にプッシュ通知で大きな成果があったとのこと。Service Workerが動かないiOSでも滞在時間が増えた理由については触れられていない
  • PWAとAMPのイイとこ取りを実現するPWAMPとは?さらに優れたモバイルUXを提供可能に

    [レベル: 上級] 先週投稿したプログレッシブ ウェブ アプリ(以下、PWA)の記事で、「AMPよりもPWAに注目したい」と個人的な思いに触れました。 ところが、PWAとAMPの対立軸を作ったように思わせてしまったかもしれません。 しかし、PWAとAMPは排他的な技術では決してありません。 それどころか、両者を組み合わせることによってさらに優れたモバイルユーザー体験を提供できます。 そこでこの記事では、PWAとAMPを組み合わせる、通称”PWAMP”について解説します。 AMPとPWAを連携する3つのパターン GoogleのAMPチームに所属している Paul Bakaus(ポール・バカウス)氏は、AMPとPWAを組み合わせるパターンとして、次の3つの形態をSmashing Magazineの記事で紹介しています。 AMP as PWA AMP to PWA AMP in PWA それぞれ

    PWAとAMPのイイとこ取りを実現するPWAMPとは?さらに優れたモバイルUXを提供可能に
    braitom
    braitom 2017/02/01
    AMPとPWAを組み合わせる方法について。AMP as PWA、AMP to PWA、AMP in PWAの3種類ある。
  • スマートフォン用ページに振り分けるときはrel=”canonical”を設定する

    iPhoneiPadAndroid端末の普及でスマートフォン専用のページを用意するサイトも増えてきています。 スマートフォンからのアクセスに対して「リダイレクトによってスマートフォン専用のURLに振り分けるとき」の注意点を今日はお伝えします。 rel=”canonical”タグで、対応するデスクトップ用ページのURLを指定してください。 重複コンテンツの発生を防止するためです。 現状GoogleデスクトップPCとスマートフォンを区別せず同等に扱います。 スマートフォン用の検索結果も用意していません。 共に、ウェブクローラのGooglebotがクローリングします。 ※従来のモバイル端末はモバイルクローラのGooglebot-Mobileがクローリングします。詳しくはこちらの記事を参照。 スマートフォン用のコンテンツはデスクトップ用のページと、完全ではないにしてもほぼ同じになるはずです。

    スマートフォン用ページに振り分けるときはrel=”canonical”を設定する
  • 1