リニューアルした日経電子版が高速すぎてヤバイ件｜こんぴゅ
日本経済新聞は国内を代表する経済誌だ。その電子版はwebでの継続課金を大成功させ、いまや50万以上の有料会員を擁するモンスターサイトだ。 その日経電子版が11月6日に全面リニューアルしたのだが、公開後、web業界がにわかにざわついた。表示速度が爆速だったのだ。日経公式もモバイルで2倍の表示速度を達成したと堂々と宣言していた。 webサービスは継続率こそ神KPIで、その継続率には速度が大きく影響する。 これはチェキらないとヤバイと感じ、友人のkitakさんとスピードの秘密を調査してみた。 Fastlyをコンテンツキャッシュに使う殆どのデータはFastlyを経由して取得されていた。Fastlyは最近注目を集めているCDN（世界中にエッジサーバーを配置し、高速にコンテンツを配信するサービス）で、非常に高機能でユニークなサービスだ。 一般に、CDNはいったん世界中にコンテンツをばらまくと、それを無
Netflix functions without client-side React, and it's a good thing
Netflix functions without client-side React, and it's a good thing A few days ago Netflix tweeted that they'd removed client-side React.js from their landing page and they saw a 50% performance improvement. It caused a bit of a stir. This shouldn't be a surprise The following: Download HTML & CSS in parallel. Wait for CSS to finish downloading & execute it. Render, and continue rendering as HTML d
JavaScriptライブラリ/プロジェクトのファイルサイズの問題点を見つける方法 - Qiita
ブラウザ向けのJavaScriptだとファイルサイズはある程度気になると思います。 この記事では、ファイルサイズの計測方法やボトルネックとなってるライブラリの見つけ方についてできるだけ簡単な方法をまとめます。 ファイルサイズと一言にいっても、ブラウザでは大体minifyしてから配布するのでminify後のファイルサイズも重要です。 ソースコード自体のファイルサイズ minifyしたファイルサイズ minify + gzipしたファイルサイズ コメントの多いソースコードはminifyするとかなり小さくなったりすることが多いので、ソースコード自体のファイルサイズでは比較しにくいです。 また、ソースコードにおいて assert モジュールを使っているとファイルサイズが10kb弱程度minify後で変わります。 assertモジュールは通常外しても問題ないので、unassertでビルド時に取り除き
アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ
みなさんこんにちは、サイバーエージェントでフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドをJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。本記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日本国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう
Medium
You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories will take you somewhere new?
graphite, grafana, sitespeed.io, diamond で継続 Web パフォーマンスモニタリング - Qiita
graphite, grafana, sitespeed.io, diamond で継続 Web パフォーマンスモニタリングgraphitegrafanadiamondperformancesitespeed.io Web のパフォーマンス継続モニタリング環境 intro Web の健康状態を把握するためには、きちんとしたモニタリング環境を整える必要がある。 正しくメトリクスが測定できていないと、正しくボトルネックの把握ができないし、チューニングの副作用も正しく把握できない、アプリの変更の影響もわからないし、負荷対策もできない。 単にパフォーマンスチューニングだけのためではない。が、パフォーマンスチューニングには必須、という関係。 そして、メトリクスは一回適当に取っただけでは正確とは言えず、やっぱり定期的な取得が必要になる。 この辺のノウハウは、サーバサイドではかなり成熟している。 しかし
Welcome to the wonderful world of Web Performance
Welcome to the wonderful world of Web PerformanceUnlock the full potential of your website with sitespeed.io - the ultimate tool for monitoring and enhancing web performance. Say goodbye to the complexity and high costs of measuring performance. With our easy-to-use Open Source tools, you’ll have complete control over your metrics and own your own data. Welcome to the world of exceptional web perf
楽しく役に立つCSSのプロファイリング | POSTD
私はここ最近、いわゆるシングルページWebアプリケーションのパフォーマンスの最適化に取り組んでいます。そのアプリケーションは非常に動的かつインタラクティブで、新しいCSS3の利点が詰め込まれたものです。単に角丸やグラデーションの効果にとどまらず、影やグラデーション、要素の変形がふんだんに使われており、加えてtransition効果（時間的変化）や多彩な半透明色、疑似要素をベースにしたCSSの巧妙なトリック、それに実験的なCSSの特徴がちりばめられています。 分析する際には、Javascript/DOM側のボトルネックだけではなく、CSSの領域にも踏み込んでみました。上に挙げたすばらしいUIの要素が、パフォーマンスにどのような影響を及ぼしているかを見たかったからです。このアプリケーションのベースにあるJavascriptのロジックは以前（表面的な装飾のないバージョン）からさほど変わってはいま
BabelとTraceurでES6末尾再帰最適化を試す - teppeis blog
ちょっと前にBabelに末尾再帰最適化が入って話題になったけど、同じくTraceurにもv0.0.85で最適化が入ったので試してみた。 末尾再帰最適化って何？ 厳密な話はそちらの筋に任せるとして、ざっくりしたストーリーはこんな感じ。 再帰って深くなるとstack overflowになっちゃう 再帰をシンプルなループ（スタックを使わないジャンプ）に変換できればstack overflowを避けられる 一般に末尾再帰であれば再帰をループに変換できる方法が知られている（これが末尾再帰最適化） 末尾再帰とは、関数の最後のステップだけで再帰呼び出しを行うこと 末尾再帰ではない再帰関数でも、CPS変換を使うことで末尾再帰関数に変換が可能 CPS変換とは、関数を結果の値を受け渡すスタイルから継続渡しスタイルに書き換えること つまり、普通の再帰関数 -> CPS変換で末尾再帰化 -> 末尾再帰最適化を適用
DevTools: State Of The Union 2015
As the complexity of the web apps you build keeps moving, so do the Chrome DevTools. In DevTools State of the Union, Addy will give you the latest update on your favourite companion; exploring new features like paint profiling, animation inspection and updates to the JavaScript editing workflow with V8. * Note: these are annotated slides aimed at making it easy to read and follow along with what I
New JavaScript techniques for rapid page loads
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
クリティカルCSSの動的なインライン化
Inlining critical CSS for first-time visitsという、クリティカルCSSを初回訪問時のみインラインに展開して、その後はインライン化せず予めキャッシュさせておいたフルセットのCSSを使うというアイディアについての記事を読んだ。実装はともかく、アイディアとして成立していないんじゃないかと思う。 クリティカルCSSをインライン化することのメリットは既に多くのウェブサイトでも取り上げられており、もちろんネタ元のGoogle PageSpeedでも項が割かれている。ここでは特に触れないが、描画領域の大きさにかかわらず初期描画の高速化には大きなメリットがあるとは言えるだろう。上記リンク先の記事ではそれを動的に行うことで、2度目以降の訪問の時にはキャッシュ済みであるフルセットのCSSを使わせるようにし、効率的なキャッシュ運用と保守性を実現する実装について解説されて
モノモーフィズム（単相性）について – JavaScriptのパフォーマンスを例に | POSTD
JavaScriptのパフォーマンスに関する講演やブログ記事では、よく単相的コードの重要性が強調されています。しかしながら、モノモーフィズム（単相性）／ポリモーフィズム（多相性）とは何なのか、それがどうパフォーマンスに影響してくるのかということについては、あまり分かりやすく説明されていません。私自身の講演でも、＜＜ 1.良い型、2.悪い型 ＞＞的な二者択一のスタイルに要約してしまうことが少なくありません。パフォーマンスに関するアドバイスを求められることがありますが、そういう時に最もよくリクエストされるのは、 モノモーフィズムとは実際のところ何なのか 、ポリモーフィズムがなぜ生じ、それがなぜ悪いのか、ということを説明して欲しいというものです。 困ったことに、そもそも「ポリモーフィズム」という用語そのものが相当に多重定義されています。昔ながらのオブジェクト指向プログラミングにおいては、 ポリモ
Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL
Frontrend Advent Calendar 2014 - Qiitaの24日目。たぶん。知らんけど。 ちょっと前になるが12/13にバンクーバーで開催されたThe Style & Class Conference 2014に参加してきた。前日にSmashing Conferenceが、ウィスラーというバンクーバーから比較的近い所で開催されていて、本当はそっちに行きたかったんだけど高額なため、地元コミュニティのほうにだけ参加した。ウィスラーの方の記事は@ygoto3が書いてたっぽい。 Smashing Conferenceで登壇していたJohn Allsopp氏やVal Head氏もこのカンファレンスで登壇するということで、『なんだ、ウィスラーのついでかよー』と思い全然期待してなかったのだが、行ってみたらカンファレンス全体の構成などすごく考えられていて、とても素晴らしいカンファレンス
The Trace Event Profiling Tool (about:tracing)
When diagnosing performance problems it can be valuable to see what Chrome is doing "under the hood." One way to get a more detailed view into what's going on is to use the about:tracing tool. Tracing records activity in Chrome's processes (see multi-process architecture for more on what each process is doing). It records C++ or javascript method signatures in a hierarchical view for each thread i
2014年のWebパフォーマンスふりかえり - 来年以降の期待etc
ひさびさにWebフロントエンドパフォーマンス系の話題をつらつらと書いてみます。例によってモバイル系開発者寄りの視点かもしれません。文中の参照リンク多め。 ファクタ まずはパフォーマンスに影響を与えるファクタについての所感。Webパフォーマンスにおけるイニシャライズとランタイム ::ハブろぐ で示した分類に基づきます。 イニシャライズ（いわゆるページロード） 4GやLTEが普及してもコンテンツの肥大化には追いついていない concat と CSS Sprites の呪いが解けない HTTP/2 の Streams and Multiplexing に期待 HTTP/2 の Server Push にも期待 画像周りだと <picture> 関連仕様も使いたい（srcsetだけならいける？） WebRTC とか WebSocket とかストリーミングとかは？ （やや疎い、てかイニシャライズじゃ
ブラウザーに優しくて、アニメーションを滑らかに
ブラウザーに優しくして、 アニメーションを滑らかに Brian Birtles, Mozilla Japan html5j October 2014, Tokyo Animation is awesome… Source: Christopher Price 2013, http://topherchris.com/post/55109717733 Animation is awesome… Source: icanhasGIF.com windfinder.com earth.nullschool.net healthmap.org/ebola/ 蔓延[まんえん] = spread (disease) ebolavideo.org ウィンドウを最小化する 逆に負担になります。うまくいかなかった冗談みたい。 Animation is awesome? HTC J 端末上の Firefox
Private Presentation
Private content!This content has been marked as private by the uploader.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Re-evaluating Front-end Performance Best Practices
GitHub - axemclion/protractor-perf: E2E test framework to check for performance regressions in Angular apps
