CDNフル活用でつくる、高速Webアプリ / Using CDN To Improve Web Performance

1. CDNフル活用でつくる 高速Webアプリ ~ こえのブログ実装例 ~ Oct. 23 2019, Yamagoya 2019 Kazunari Hara, CyberAgent Using CDN To Improve Web Performance
2. CyberAgent Web Team is now on Performance Accessibility Security
3. CyberAgent Web Team is now on WebパフォーマンスとプロダクトKPIの相関を可視化 する話 https://developers.cyberagent.co.jp/blog/archives/9540/ アクセシビリティへの取り組み https://www.cyberagent.co.jp/way/csr/accessibility/ アメブロ2017 – 大規模サービスhttps化 https://developers.cyberagent.co.jp/blog/archives/7743/
4. CyberAgent Web Team is now
6. Posting a blog entry just by speaking
7. こんにちは 今日はFastly 山小屋にきました Cloud Speech-to-Text
8. こえのブログ is
9. https://twitter.com/sisidovski/status/1158980641955823616 Lighthouse score with firework
10. Performance: - Fast - Consistant
11. “Spike” - a sharp increase in the magnitude or concentration of visitors Spike reasons: - Breaking news - Launch days - Disasters - Bots - System issues
12. When your site is slow...
13. When your site is down...
14. Cache helps performance improvement by reusing resources and removing unnecessary calculation on servers Origin CDN
15. こえのブログ is made with Fastly and GCP to maintain backends more easily
16. Cache Stats of こえのブログ
17. 98% cache hit ratio on CDN
18. 98% cache hit ratio on CDN if you have cats
19. 98% cache hit ratio on CDN if you have cats
20. 99% cache coverage on CDN
21. 99% cache coverage on CDN if you have cats
22. 99% cache coverage on CDN if you have cats
23. 98% cache coverage in browser on repeat view
24. Fast and consistent even during spike as CDN returns cache CDN Origin Client 98%
25. Less network access on repeat view CDN Origin Client 98%
26. Cache Strategy
27. Cache strategy - Keep resources static - Define consistent URLs - Set long cache time (TTL) - Divide endpoint if the resource changes frequently - Tagging cacheable resources and purging if necessary
28. Static: - Same for everyone - Cacheable Dynamic: - Variable by user/session - Hard to cache efficiently Keep as many resources static as possible
29. Keep as many resources static as possible Web App Assets: Entry Assets: {
 “id”: “12345”, 
 “title”: “voice” 
 }
 

30. Most resources of こえのブログ are static since the app was made by a Client Side Rendering (CSR) App {
 “id”: “12345”, 
 “title”: “voice” 
 }
 
 Fetch data from JS when necessary
31. User data is rendered asynchronousl y Displayed later than ranking
32. Define consistent URLs using HTTP methods GET - Retrieve resource information only - Do not change the state of the resource - Return the same result every time
33. Define consistent URLs using HTTP methods POST/PUT/DELETE - create/update/delete resources - Not cacheable
34. Define resources as cacheable or not Cacheable: - Most GET endpoints Not cacheable: - Few GET endpoints with session - Few POST/PUT/DELETE endpoints
35. URL example GET / GET /editor GET /src/**/*.js GET /images/**/*.{png|jpeg|svg} GET /assets/audios/${userId}/${entryId}/ GET /assets/images/${userId}/${entryId}/ GET /api/entry/${userId}/${entryId}/ POST /api/entry/${userId}/ PUT /api/entry/${userId}/${entryId}/ DELETE /api/entry/${userId}/${entryId}/ GET /api/auth/${userId}/status/ Cacheable
36. 93% of endpoints are cacheable
37. Set cache TTL as long as possible Response header for CDN: “Surrogate-Control: max-age=” - Default: 2592000 (30 days) - Fallback: 86400 (1 day)
38. Set cache TTL as long as possible Response header for browsers: “Cache-Control: max-age=” - Default: ※ 120 (2 minutes) - Fallback: 86400 (1 day) ※ Enabled longer cache with service worker
39. Divide endpoint if the resource changes frequently Entry { “id”: “12345”, “title”: “voice”, “view-count”: 2946 } Meta data is immutable View count changes frequently
40. Divide endpoint if the resource changes frequently Response header for stale content: “Stale-While-Revalidate:” CDN Origin Update data in background
41. Tagging cacheable resources with surrogate key “webapp” “blogger/ ameba” “entry/12345 blogger/ameba”
42. Purge the tag when resources have been updated New version release curl -XPOST -H “Fastly-Key:${KEY}” \n -H “Accept:application/json” \n “https://api.fastly.com/service/${SERVICE}/pu rge/webapp”
43. Purge the tag when resources have been updated Data updated curl -XPOST -H “Fastly-Key:${KEY}” \n -H “Accept:application/json” \n -H “Surrogate-Key:blogger/ameba entry/12345” \n “https://api.fastly.com/service/...” Cloud Filestore
44. These key ideas are also useful even when your app uses server side rendering (SSR) To be continued in the fastly meetup #3
45. Backends
46. Cloud Filestore Cloud Storage Cloud Functions Stable Serverless with Fastly and GCP - High CDN cache coverage - Event-driven execution - Auto scalling - Deployability
47. Cloud Storage Static files in Cloud Storage - Scalable - As an origin server - HMAC Authentication https://docs.fastly.com/en/guides/google-cloud-storage
48. Cloud Storage Cloud Filestore Event-driven functions Cloud Functions Some actions Event Cloud Storage
49. onDatabaseUpdate Cloud Filestore Cloud Functions Update entryId: 12345 Purge Surrogate-Key: entry/12345
50. onDatabaseDelete Cloud Filestore Cloud Functions Delete entryId: 12345 Purge Surrogate-Key: entry/12345 Cloud Storage Delete audio
51. “deployability” is an important metric for app quality Over 1,000 web app releasesin 10 month Over 200 VCL deploymentsin 10 month
52. https://speakerdeck.com/herablog/web-app-checklist-2019-at-inside-frontend?slide=134
53. Browser Cache
54. Browser cache strategy No Service Worker: - Cache-Control header Service Worker: - Precaching - Runtime caching Service Worker is available in most modern browsers today
55. Web app assets are cached with service worker at first visit and are never re-fetched until updated // service-worker.js workbox.precaching.precacheAndRoute([ { url: "images/title_service_header.svg", revision: "6a048b548112674c9e65ed" }, { url: "index.html", revision: "6805b47012688211c81521" }, { url: "src/components/voice-app.js", revision: "fdf10df6f530cbce55c8f5" }, ... ]);
56. Other resources are cached as runtime cache and can be used when offline CDN
57. VCL Recipes
58. Cache key to normalize method=${req.request}; origin=${req.http.host}; url=${req.url}; vary=${req.http.Accept-Encoding}; URL and vary can be variable
59. Query normalization import querystring; sub vcl_recv { set req.url = querystring.sort(req.url); set req.url = querystring.regfilter_except( req.url, "^(language|format|offset|limit)$" ); } https://docs.fastly.com/vcl/query-string-manipulation/
60. Vary normalization sub vcl_recv { if (req.http.User-Agent !~ "Edge" && req.http.User-Agent ~ "Chrome/([^.]*)") { set req.http.X-UA = "esm"; } else { set req.http.X-UA = "es5"; } } sub vcl_fetch { set beresp.http.Vary = "Accept-Encoding, X-UA"; } https://docs.fastly.com/vcl/query-string-manipulation/
61. Basic Auth table customer_keys { "Basic a2FrZXJ1OmthZXJ1": "kakeru", "Basic a2FlcnU6a2FrZXJ1": "kaeru" } sub vcl_recv { if (!table.lookup( customer_keys, req.http.Authorization )) { error 401 "Restricted"; } } https://docs.fastly.com/en/guides/basic-authentication
62. Basic Auth sub vcl_error { if (obj.status == 401) { set obj.http.Content-Type = "text/html; charset=utf-8"; set obj.http.WWW-Authenticate = "Basic realm=Secured"; synthetic {"<!DOCTYPE..."}; return (deliver); } } https://docs.fastly.com/en/guides/basic-authentication
63. Access control acl office_ip_ranges { "192.0.2.0"/24; "198.51.100.4"; } sub vcl_recv { if (!(client.ip ~ office_ip_ranges)) { error 403 "Forbidden"; } } https://docs.fastly.com/en/guides/about-acls
64. Routing to different origins sub assets_origin { set req.backend = F_assets_origin; set req.http.host = "${api-assets-domain}"; } sub api_origin { set req.backend = F_api_origin; set req.http.host = "${api-org-domain}"; } sub vcl_recv { if (req.url.path ~ "^/assets/") { call assets_origin; } else if (req.url.path ~ "^/api/") { call api_origin; }... }
65. Adding surrogate key sub vcl_fetch { declare local var.SurrogateKey STRING; set var.SurrogateKey = "assets"; if (req.http.x-url ~ "/audios/standard/([a-z0-9-]{3,24})/([a-zA-Z0-9]+)") { set var.SurrogateKey = var.SurrogateKey + " blogger/" + re.group.1 + " entry/" + re.group.2; } set beresp.http.Surrogate-Key = var.SurrogateKey; } Extracting keys from URL path
66. Modifying response headers sub vcl_deliver { unset resp.http.via; unset resp.http.server; add resp.http.Server-Timing = fastly_info.state {", fastly;desc="Edge time";dur="} time.elapsed.msec; set resp.http.Referrer-Policy = "origin-when-cross-origin"; set resp.http.Strict-Transport-Security = "max-age=31536000"; set resp.http.X-Content-Type-Options = "nosniff"; add resp.http.Content-Security-Policy = "default-src 'self';...” add resp.http.Content-Security-Policy = "upgrade-insecure-requests"; } Removing unnecessary headrers Adding useful headers
67. (CDN) makes your app stable, predictable, efficient, deployable and enjoyable
68. (CDN) makes your app
69. @herablog Related documents: - アメブロ2019: こえのブログでのPWA https://developers.cyberagent.co.jp/blog/archives/20506/ - Web App Checklist 〜高品質のWebアプリケーションをつくる ために〜 https://speakerdeck.com/herablog/web-app-checklist-2019-at-inside-frontend - こえのブログでのPWA ~ PWA編 ~ https://speakerdeck.com/herablog/pwa-night-vol-dot-4 - こえのブログでのPWA ~ 開発現場編 ~ https://speakerdeck.com/herablog/koe-no-blog-pwa - 最新CDN入門 WEB+DB PRESS Vol.109 https://gihyo.jp/magazine/wdpress/archive/2019/vol109