高品質のWebアプリケーションをつくるために Web App Checklist - To make high quality app for better user experience 2019.05.18 Inside Frontend @Abema Towers / Kazunari Hara & tokimari Web App Checklist
高品質のWebアプリケーションをつくるために Web App Checklist - To make high quality app for better user experience 2019.05.18 Inside Frontend @Abema Towers / Kazunari Hara & tokimari Web App Checklist
Server Side Rendering Website アメーバニュース Ameba News はやいFCP https://news.ameba.jp/entry/20190516-669/をMobile、Simulated Fast 3G、4x CPU Slowdown、ローカル環境で測定。 Fast FCP
SSR with Hydration App アメーバブログ Ameba Blog https://ameblo.jp/ca-seo/entry-12458541240.htmlをMobile、Simulated Fast 3G、4x CPU Slowdown、ローカル環境で測定。 TTIが遅くなりがち Slow TTI
GET / FCP TTI JS app.js render() ● H2 Server Push (Preload) ● Web Components ... こえのブログ はCSRを選択 できるだけはやい CSRに挑戦 JSの並列配信 Parallel JS requests Our challenge was to make CSR app as fast as possible 小さいJS Light JS
Use CDN for edge side caching.こえのブロ グで利 CDNキャッシュ の利用 高キャッシュヒット率で オリジンサーバーに 1度しかリクエストしない Only requests content to the origin server once because of high cache hit ratio.
Cache content in CDN as long as possible. できるだけ長く CDNキャッシュ 長いTTLと Surrogate Keyを指定 JavaScript TTL: 30days Key: web/release Entry data 30days blogger/${ID} entry/${ID} Setting long TTL and Surrogate Key
パフォーマンス バジェットは 超えちゃいけない制限 Performance budget is a limit for pages which the team is not allowed to exceed. Timing Resource Rule カスタム指標もOK Custom metrics are also available
● IE11~ ● Edge ● Android OS 5~ ● iOS11~ こえのブログの”閲覧” =アメブロの標準機能 “Browsing” Koe-no-blog is a standard feature of Ameblo. User can experience it by followings browsers:
● Web Share API ● Network Information API ● Intersection Observer ● Vibration API ● etc... Provide better experience with new technologies 新しい技術を より良い体験に Web Share API Original Dialog Method 2
Too low (2.8:1)→ little higher (4.3:1) Use high contrast color for text ● Ameba Green: for logo, icon / 4.26:1 ● Dark Green: for text / 4.66:1 1か0かではなく、まずは向上する At first, we improve contrast a little more than now.
色の見え方は人それぞれ 色の違いなしに見分けられるのが良い → モノクロで確認する Make identification possible without color distinction. So, check in monochrome. Depending on the person, the way they see color changes.