Mercari x Merpay Frontend Tech Talk vol.3参加記録

https://mercari.connpass.com/event/153687/

参加してきました。

一番の目的だった最後の発表に関してフォーカスして感想を書きます。

Practical tips for making a global EC site

概要

ユニクロのグローバルサイト(https://www.uniqlo.com/us/en/home/)のアーキテクチャ、工夫点についての話

特に気になった点

URL設計

URLに接続国を含める

https://www.uniqlo.com/us/en/home/

のように国名をURLに含めていた。

国判定はGeoIPでやっているとのこと。

SEO

GoogleBot以外のBotも考慮する

展開する国によってはGoogle以外の検索エンジンのランキングも考慮する

Google,Bing,YANDEX,Baidu

参考:https://www.globalmarketingchannel.com/press/survey20190319

パフォーマンス

毎日国別にWebpageTestとLightHouse実行

国に近いリージョンにインスタンスを立てて実施しているとのこと

結果を集計して毎週メールしているらしいが、ダッシュボードを大型ディスプレイで共有したほうが良さそう

指標はSpeedIndexとTTIを見ているらしいが変えていく必要があるとのこと

i18n

webpackで翻訳言語ファイルごとにエントリポイントを分ける

bundle-analyzerで翻訳ファイルが混ざっても検知できる

一部のインタラクティブな翻訳はランタイム上でおこなう、このとき単数形と複数形で出し分ける

a11y

下記をチェックする

https://www.matuzo.at/blog/beyond-automatic-accessibility-testing-6-things-i-check-on-every-website-i-build/

画像

画像が大きいほうがコンバージョンが上がる

最適化する

CDNでwebp形式にして配信する

発表のまとめ

・URLは初期段階で考える

・リダイレクトの初期段階でレイヤも決める

・a11yを怠ると起訴されるケースがあるので気をつける(US、カナダなど)

・Webpackを使い倒して国別対応する

感想

現状のアプローチの方向性が一部正しいことを確認できたのが良かった。 現状の仕事でa11yがまだ考慮できてないので、今後に役立てたい。 現状画像最適化のアプローチが足りていない。 現在の仕事ではGoogleBotだけ意識すれば良さそう。

現在グローバルシステムを担当していることもあり、とても興味深く聞かせていただきました。

他のブログ

https://ozaki25.hatenadiary.jp/entry/2019/11/26/205938 https://lealog.hateblo.jp/entry/2019/11/26/210503