Rebuilding our tech stack for the new Facebook.com
Facebook.com launched in 2004 as a simple, server-rendered PHP website. Over time, we’ve added layer upon layer of new technology to deliver more interactive features. Each of these new features and technologies incrementally slowed the site down and made it harder to maintain. This made it harder to introduce new experiences. Features like dark mode and saving your place in News Feed had no strai
Performant Front-end Architecture | DebugBear
Deliver a great user experience with in-depth page speed insights and monitoring. This post describes some techniques to make front-end apps load faster and provide a good user experience. We'll look at the overall architecture of the front-end. How can you load essential resources first, and maximize the probability that the resources are already in the cache? I won't say much about how the backe
Techniques to make a web app load fast, even on a feature phone | Articles | web.dev
At Google I/O 2019 Mariko, Jake, and I shipped PROXX, a modern Minesweeper-clone for the web. Something that sets PROXX apart is the focus on accessibility (you can play it with a screenreader!) and the ability to run as well on a feature phone as on a high-end desktop device. Feature phones are constrained in multiple ways: Weak CPUs Weak or non-existent GPUs Small screens without touch input Ver
JavaScript Loading Priorities in Chrome
February 18, 2019 How browsers schedule and execute scripts can impact the performance of web pages. While techniques like <script defer>, <link rel=preload> (and others) influence script loading, knowing how browsers interpret them can also be helpful. Thanks to Kouhei Ueno, we now have an up to date summary of script scheduling in Chrome.
手元のコードのパフォーマンスを計測するperformance.markのスニペット
一部の機能をパフォーマンス改善したときにそれを計測したり、データを集めたいときがあります。 しかし、それだけのためにライブラリを追加するのも面倒くさい(実装後に計測コードは外すので)し、コンソールに結果を出すのもデータ収集的にイマイチです。 // よくあるコンソールに表示するパフォーマンス計測コード const start = performance.now(); // ------------ // 計測したい処理を書く // ------------ console.log(`${performance.now() - start}ms`); 結果をコピーしてSpreadSheetなどで可視化できたり、処理時間と関連する要素も保存しておきたいです。 (コンソールに出力すると埋もれたり、加工がめんどうです) そのようなときによく使っているPerformance.mark()とPerfor
JavaScript/Vue.jsアプリのパフォーマンス改善 一休.comスマートフォンサイトを高速化するためにやったこと | ログミーBusiness
2018年12月12日、株式会社一休が主催するイベント「Ikyu Frontend Meetup」が開催されました。同社が運営する一休.comと一休レストランの開発に携わるエンジニアたちが、フロントエンド開発における知見を共有します。プレゼンテーション「JavaScript/Vue.js アプリケーションのパフォーマンスチューニング」に登壇したのは、株式会社一休宿泊事業本部、プロダクト開発部の宇都宮諒氏。一休.comのスマートフォンサイトにて実施した、Vue.jsを用いたパフォーマンス改善の舞台裏を語ります。講演資料はこちら JavaScript/Vue.jsアプリケーションのパフォーマンスチューニング宇都宮諒氏：では、Vue.jsアプリケーションのパフォーマンスチューニングの話をしたいと思います。 自己紹介ですが、株式会社一休の宇都宮と申します。宿泊事業本部のUIチームに所属していて、主
Start Performance Budgeting
October 2, 2018 If you’re building a web experience and want to stay fast, a performance budget can be critical. For success, embrace performance budgets and learn to live within them. Network & CPU limits on mobile can require asking hard questions like, “what is really important to my users?” When we talk to Fortune 500 companies that put in the work to improve performance, perf metrics will oft
The Cost Of JavaScript In 2018
Update: The Cost Of JavaScript In 2019 is now available to read. Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens? Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay inter
Why You shouldn’t use lodash anymore and use pure JavaScript instead
So why shouldn’t you use lodash? Here are two main issues. SpeedThe first and most important thing is speed. Because performance really matters for a good user experience, and lodash is an outsider here. We’ll look at two scenarios using features such as find and reduce. And compare them with JavaScript analogues. To calculate the time difference, we will use the built-in Date constructor. (All ca
AbemaTV の番組表リニューアルに伴うパフォーマンス改善 - Qiita
以前の番組表 ↓↓↓ AbemaTV 新番組表 大きく変わったところ チャンネルが横スクロールですべて見れるようになった サイドバーにチャンネル一覧ができた 日付切り替えがセレクトボックスからカレンダー表示になった etc. 今まではチャンネルが 5ch 毎に区切られていたので、わざわざページを切り替えて見ないといけなかったのを、横スクロールですべてのチャンネルが一覧で見られるようになりました。 さらにチャンネル毎の番組表にもアクセスしやすくなり、日付の切り替えもしやすくなったかと思います。 このリリースによって、ユーザービリティが少しでも向上していれば幸いです。 しかし、便利になった反面、このリリースに至るまでに、パフォーマンス面で様々なところで問題になりました。 今回は実際にリニューアル中に課題となった箇所と解決方法の一部を紹介します。 AbemaTV 以外であまり参考にならないかもし
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
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
jsPerfを自分専用の環境にクローンしてみる
おれ専用 mathiasbynens/jsperf.com 外向けに公開したくないけどjsPerfでテストしたいな〜、と考えていた折、GitHubにリポジトリあるじゃん！ってなったのでcloneしてみた。ローカルコピーの案内もあったのでレッツトライ。 How to run a local copy of jsPerf for testing/debugging mathiasbynens/jsperf.com 基本的に、GitHubのREADMEにあるローカルコピーの方法まんまです。出力にPHPが使われているので、Static HTTP Serverの類では動作しないことに注意してください。 PHPのビルトインウェブサーバーだとさっくり動いたりしないかな？ jsPerfのリポジトリをcloneする % cd /path/to/jsperf-public % git clone git://
Mobile Performance Manifesto
⚠️ Warning: this is an old article and may include information that’s out of date. ⚠️ Earlier this year I gave a talk (slides) outlining the latest and greatest in mobile performance, including a bit of my own unscientific research into carrier latency and bandwidth thanks to boomerang.js. I realized that interest in mobile performance has exploded recently, especially with Steve Souders announcin
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - GoogleChromeLabs/quicklink: ⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time
20160930 フロントエンド高速化 業務編 (社内勉強会)
実践・ウェブアプリ高速化テクニック#Chrome+HTML5 Conference
IBM Developer