フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.

This is an introduction to modern web loading performance. Learn why performance is important, what performance optimizations exist, and which tools can help you understand if your app is performing well. Want to apply this advice to your site? We help companies like Framer, Toggl, SitePoint to get faster – and we’d be happy to help you as well! Reach out So: why is web performance important? Firs

パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま

You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で

マップ閲覧・編集システムで画面上に DIV で描いていた図形を SVG に移行した。内部に数百のオブジェクトを含む要素の動作が重く、ドラッグしたときにカクカクになる問題を解決したかった。ちなみに Virtual DOM は使っているがすでに最適化は済んでおり、毎回描画されるような事態はあらかじめ避けている。代替案として Canvas と迷ったが CreateJS のようなライブラリを使わないとイベントハンドリングがきついので、 SVG で行けるならそれが一番。以下、移行した結果と移行中に気付いたことのまとめ。 描画パフォーマンスが上がった（Firefox: 20fps ⇒ 60fps、Chrome: 50fps ⇒ 60fps）。 Chrome の DevTools で見ると、DIV 版は UpdateLayout と Paint に時間がかかっているが、 SVG は Layout に時間

こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ

2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ

Frontrend Advent Calendar 2014 - Qiitaの24日目。たぶん。知らんけど。 ちょっと前になるが12/13にバンクーバーで開催されたThe Style & Class Conference 2014に参加してきた。前日にSmashing Conferenceが、ウィスラーというバンクーバーから比較的近い所で開催されていて、本当はそっちに行きたかったんだけど高額なため、地元コミュニティのほうにだけ参加した。ウィスラーの方の記事は@ygoto3が書いてたっぽい。 Smashing Conferenceで登壇していたJohn Allsopp氏やVal Head氏もこのカンファレンスで登壇するということで、『なんだ、ウィスラーのついでかよー』と思い全然期待してなかったのだが、行ってみたらカンファレンス全体の構成などすごく考えられていて、とても素晴らしいカンファレンス

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

HTML5 Advent Calendarに参加しまして、12月1日担当だったのですが、遅れに遅れてクリスマス当日の掲載となりました。申し訳ございません。 html5jにて、パフォーマンス部の創設を担当することもあり、Webパフォーマンス計測に関することを俯瞰できる記事を書いてみました。これを読んで頂ければ、凡そのWebパフォーマンス計測に関する現在までの流れについて、ご理解頂けると思います。 Webサイトのパフォーマンスを計測する事の意義 Webサイトのパフォーマンス(表示速度)が速い方が良いというのは、殆どの方に同意頂ける事だと思います。日常生活の中でWebサイトやスマートフォンサイトを見るのが一般的な事となり、それ故にWebブラウジングをしていて、いわゆる「重い」サイトにイライラする経験は誰しもあると思います。 競合のサービスや商品を提供しているサイト間で、提供する「価値」に特別に違

1秒を切るために 自社サイト(http://spelldata.co.jp)は、AWSのS3上に展開しています。 この自社サイトの計測値を見ていて、1秒を切れない計測点が現れているのが気になりました。 とあるお客様のサイトの高速化を行って、nginx+Wordpressで1秒を切るまでチューニングをしました。 それと比較して、静的なHTMLしか置いていないS3で1秒を切れない事があるのはどうかなと考えました。 この際、Apacheとnginxのサーバも立ち上げて、速度比較をしてみようと思い立ちました。 実験計画 比較対象 自社サイトコンテンツのトップページを計測して比較します。 この手の比較をする際に、負荷を徐々にかけて性能の変化を比較される事が多いのです。素の状態(負荷がかかっていない状態)で、どれだけの性能差があるのかを見るのは、基本性能を知るために欠かせないステップです。ですので、今

CTRL+Xでカット、CTRL+Vでペースト。 ショートカットキーの使い方を覚えると、パソコンの達人になったような気分になりますよね。 しかし、実際にはショートカットキーを使用すると、マウスでメニューから「編集」「ペースト」を選ぶよりも平均2秒も遅いのです。 「そんなバカな」 と思いますよね。 しかし、これはTogことブルース・トグナッツィーニがAppleでMacintoshの開発を担当した際に行った膨大な実験の結果、解ったことなのだそうです。 これはTogのWebページでも詳しく紹介されています。 しかし2秒とはとても信じられません。 むしろ逆のようにさえ感じます。 しかしTogの主張によれば、我々ユーザはショートカットキーを選ぶのに2秒かかっているものの、ショートカットにたどり着くまでの時間を喪失している、つまりプチ記憶喪失状態になっているというのです。 こんな不思議な話が、慶應

2. エンジニアをやっています川田です。Webのパフォーマンス関連のことで、いろいろと活動しています ウェブエンジニア ・Software Design(技術評論社) 2014年5-7月号 「Web標準技術ではじめる Webパフォーマンス改善」 他 ・html5j パフォーマンス部 ・日本Cordovaユーザー会 ・Microsoft MVP (Internet Explorer) ・W3C Web-perf WG 他 ふろしき (川田 寛) Published Community 4年前、とある開発プロジェクトで フロントエンドの性能劣化にかなり苦しめられ 以来、Webのパフォーマンス技術を追っています