アメブロ 2016: 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~

2e0e89a34badf79dcff642cb7b5c126f?s=47 Kazunari Hara
February 25, 2017

アメブロ 2016: 実録、アメブロリニューアル275日 ~ Webパフォーマンス編 ~

Inside Frontend #1での発表内容です。

- [アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~](https://developers.cyberagent.co.jp/blog/archives/636/)
- [アメブロ2016 ~ Isomorphic JavaScriptの詳しい話](https://developers.cyberagent.co.jp/blog/archives/3513/)
- [アメブロの大規模システム刷新と それを支えるSpring](https://www.slideshare.net/nin2hanzo/spring-69237035)
- [アメブロ2016:インフラ編 〜大規模リニューアルの裏側〜](https://developers.cyberagent.co.jp/blog/archives/2653/)
- [SpeedCurve](https://speedcurve.com)
- [リニューアル前](https://speedcurve.com/herablog/test/160413_R2_a0d134e5e6384947e979f0f029c4f05e/?share=zpalm08uq1h35axc4d5ylxncbyp832)
- [deps: update V8 to 5.6 #10992](https://github.com/nodejs/node/pull/10992#issuecomment-277925187)
- [Designing Style Guides On The Web](https://medium.com/@herablog/designing-style-guides-on-the-web-1706f3eefade#.3tzqlrfui)
- [モダンなMETA](https://www.slideshare.net/herablog/meta-49939784)
- [アメブロをスクリーンリーダーで読み上げてみた ~2016年夏~](https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia)
- [アメブロにおけるAMP](https://www.cyberagent.co.jp/technicalcreator/article/id=12157)
- [AMPを導入してどうだったのか?](http://ameblo.jp/ca-seo/entry-12159258765.html)
- [Make your mobile pages render in under one second](http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/)
- [Optimising the front end for the browser](https://hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572)
- [Debugging Node.js with Chrome DevTools](https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27)
- [Optimization killers](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers)
- [Premature Optimization](http://wiki.c2.com/?PrematureOptimization)
- [RedisとMemcachedの利用方法に関してのツイート](https://twitter.com/cubicdaiya/status/827403388048470016)
- [Is Fiber Ready Yet?](http://isfiberreadyyet.com/)
- [Front-End Performance Checklist 2017](https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/)
- [lighthouse](https://github.com/GoogleChrome/lighthouse)

2e0e89a34badf79dcff642cb7b5c126f?s=128

Kazunari Hara

February 25, 2017
Tweet

Transcript

  1. 8.

    詳しくはブログを アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ https://developers.cyberagent.co.jp/blog/archives/636/ アメブロ2016 ~

    Isomorphic JavaScriptの詳しい話 https://developers.cyberagent.co.jp/blog/archives/3513/ アメブロの大規模システム刷新と それを支えるSpring https://www.slideshare.net/nin2hanzo/spring-69237035 アメブロ2016:インフラ編 〜大規模リニューアルの裏側〜 https://developers.cyberagent.co.jp/blog/archives/2653/
  2. 10.
  3. 14.
  4. 15.
  5. 19.
  6. 26.

    AMP

  7. 33.

    http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/ - Keep server backend time to generate HTML to

    a minimum (under 100ms) - Avoid HTTP redirects for the main HTML resource - Avoid loading blocking external JavaScript and CSS before the initial render - Inline just the JavaScript and CSS needed for the initial render - Delay or async load any JavaScript and CSS not needed for the initial render - Keep HTML payload needed to render initial content to under 15kB compressed Make your mobile pages render in under one second Basics
  8. 38.

    Performance Auditing - HTMLファイルサイズを減らす (71kB) - Blocking Resourcesを減らす (8つ) -

    JavaScriptの非同期読み込み - CDNキャッシュの最適化 - Web Fontの統合 (3種類) - いらない読み込みの削除 - 画像のCSS化
  9. 48.

    Do

  10. 49.

    Performance Auditing - HTMLファイルサイズを減らす (71kB) - Blocking Resourcesを減らす (8つ) -

    JavaScriptの非同期読み込み - CDNキャッシュの最適化 - Web Fontの統合 (3種類) - いらない読み込みの削除 - 画像のCSS化
  11. 60.
  12. 64.

    結果は悪かった 500 1000 1500 2000 5 10 20 40 283

    928 965 1,887 レスポンスタイム (ms) 同時接続数 100ms
  13. 66.
  14. 80.