JavaScript Performance Optimization Tips: An Overview — SitePoint
In this post, there’s lots of stuff to cover across a wide and wildly changing landscape. It’s also a topic that covers everyone’s favorite: The JS Framework of the Month™. We’ll try to stick to the “Tools, not rules” mantra and keep the JS buzzwords to a minimum. Since we won’t be able to cover everything related to JS performance in a 2000 word article, make sure you read the references and do y
大規模ブログサイト表示速度改善 大解剖
2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、React/Redux/Node.jsを使ったIsomorphic JavaScript特有のパフォーマンスチューニング手法や実際にあった問題および、その解決方法について。
requestAnimationFrame とタイマーの今更な比較とデモ
フレーム描画のタイミング制御モデル 今更 requestAnimationFrame() だなんて Can I use を見ても IE 10 ですら実装していて、世界の 9 割以上で動作しうるカバレッジなわけですが改めて setTimeout() との違いを表現しうるサンプルをこさえてました。 それぞれの仕様の詳細や挙動についてはそれこそ今更なのでググっていただくとして、この記事ではサンプルについて曖昧な説明を添えていきます。 CodePen - setTimeout vs requestAnimationFrame (with CSS Transitions) See the Pen setTimeout vs requestAnimationFrame (with CSS Transitions) by Ayumu Sato (@ahomu) on CodePen. 比較のポイントとシ
フロントエンド速度改善でやったこと(Expiresヘッダ、faviconのgzip圧縮、JSの読み込み遅延化) - $shibayu36->blog;
フロントエンド速度改善をしようとして参考にしたもの - $shibayu36->blog; という記事を以前に書いたのだけど、結局何をやったか書いて欲しいと社内で言われたので、今回のフロントエンドの速度改善でやったことについて書いてみる。そこまで大したことはやってないので参考程度にどうぞ。 前提 ページのレンダリングが遅いと思い始めたので改善をすることになったのだが、改善をし始めたところChromeのアップデートがあり爆速になってしまった(FirefoxやSafari等はもともと速かった)ので、では明らかにやったほうが良いことだけやりますかという話になった。そのためあんまりbefore/afterもちゃんと取っていないので、今回はやったことの紹介くらいに留める。 やったこと 計測や調査をしてみたところ、以下のようなことはやってしまったほうが良いということになった。 静的ファイルに適切にEx
とあるサイトの高速化についてフロントエンドでやったことまとめ。 - Toro_Unit
業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる！というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われるものをつらつらと。 リクエストの削減とファイルサイズの最適化 まず一番最初に考えなければいけないのがリクエスト数です。すごいおおざっぱに言うと、WEBサーバー（ApacheとかNginxとか）への負荷は、PV数×リクエスト数です。PVがそんなに無くてもそのページのリクエストがめちゃくちゃ多いとそれだけでかなりの負荷になります。リクエストを半分にできれば2倍の人数がさばけるってことに、すげーおおざ
Instagramの利用率を大きくアップさせた、わずかなコードの変更とは？ - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
上： iOSのInstagramアプリ上の写真家Lisa Bettany氏(@mostlylisa)のページ Image Credit: Ken Yeung/VentureBeat Facebook が所有する写真共有アプリ Instagram を開発するソフトウェアエンジニアたちは、アプリのパフォーマンスをいかに改善できるか常に模索している。パフォーマンスの改善というのは、完璧主義の行いのようにも聞こえるかもしれない。だが、実際にそうした行為が重要な指標の改善にもつながる。たとえば、ユーザーの利用が増えるというように。 それこそ、まさに最近起きたことだ。エンジニアは、モバイル端末上でInstagramの各写真に20個のコメントを表示させるという機能に疑問を抱き始めた（「全てのコメントを見る」をタップしたときに、コメントがより速くロードされるように）。彼らは、コメントの数を3つに減らす決断
6万ミリ秒でできるLinuxパフォーマンス分析 | Yakst
NetflixのシニアパフォーマンスアーキテクトであるBrendan Gregg氏による、Linuxサーバにログインして60秒でまず調べることのまとめ。 パフォーマンス問題でLinuxサーバーにログインしたとして、最初の1分で何を調べますか？ Netflixには、多数のEC2 Linuxからなるクラウドがあり、そのパフォーマンスを監視したり調査したりするための数々のパフォーマンス分析ツールがあります。その中には、クラウド全体にわたる監視を行うAtlasや、オンデマンドにインスタンスの分析を行うVectorがあります。これらのツールは多くの問題を解決する手助けをしてくれますが、各インスタンスにログインし、標準的なLinuxパフォーマンスツールを実行する必要がある場合もあります。 この記事では、すぐ使えるはずの標準的Linuxツールを使いコマンドラインにおいて、最適化されたパフォーマンス調査を
指定したウェブサイトのパフォーマンスを測定してくれるサイト「Website Grader」 | ライフハッカー・ジャパン
「Website Grader」は指定したウェブサイトのパフォーマンスを測定してくれるサイトです。ページサイズや読み込み速度、モバイルに最適化されているか、SEOなどを測定してくれます。また次に何をすればよいかの提案もしてくれますよ。 以下に使ってみた様子を載せておきます。まずWebsite Graderへアクセスしましょう。測定したいウェブサイトのURLを入力します。 しばらくすると測定結果が表示されます。まずは全体の評価から。 ページサイズおよび読み込み速度について。緑色が良い評価で赤色が悪い評価ですね。 最近はモバイルへの最適化がされていないページは評価が低くなってしまいます。モバイルに最適化されているかもチェックしてくれるので助かりますね。 最後に次にとるべきアクションを一覧で表示してくれます。どのようにすればさらに良いウェブサイトにできるかを提案してくれるのでありがたいですね。ぜ
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
60 (フレーム・パー・) セカンズ：Pinterestの描画パフォーマンス最適化のケーススタディ | POSTD
今日はWebサイトやWebアプリの描画パフォーマンスをどう改善したらいいのか、ということについて取り上げようと思います。私たちWeb開発者にとって、この分野は比較的新しく注目し始めたエリアで、 ユーザエンゲージメントとユーザ体験 に影響があるため重要です。 フレームレートはWebにも影響がある フレームレートとは、 連続した イメージを端末がスクリーンに映し出すレートのことです。秒間フレーム数（FPS）が低ければ肉眼で個別のフレームを判別でき、FPSの数値が高ければユーザにとっては反応が速いと感じられます。ゲーム業界ではおなじみの概念となっているものですが、Webにも当てはまるのです。 長時間に及ぶイメージのデコード、不必要なイメージのリサイズ、重いアニメーションとデータ処理はすべてフレーム落ちを起こす可能性があり、結果としてフレームレートは下がり、jankが多いページになってしまいます。
パフォーマンス分析の方法論23選 | POSTD
パフォーマンス分析のメソドロジーとは、システムやアプリケーションのパフォーマンスを分析する際に準拠できる手法です。メソドロジーを手がかりとして作業に着手できますし、根本原因やその他の要因の発見に役立ちます。異なる種類の問題を解決するのには、それぞれに適したメソドロジーがあります。目的を達成するまでに何度か方法を変えて試してみるといいかもしれません。 メソドロジーを使わない分析は手探りの探索になり、ある問題に対する手がかりが見つかるまで（もしあればですが）ずっと場当たり的にメトリクスを分析することになってしまいます。 このサイトでは以下のメソドロジーについて詳しい資料を公開しています。 USE（Utilization Saturation and Errors）メソッド ：リソースのボトルネックを見つける TSA（Thread State Analysis：スレッドステート分析）メソッド ：
あなたのPythonを爆速にする７つの方法
最近プロコン（プログラミング・コンテスト）をはじめました。 基本的にはアルゴリズム勝負なのですが、とにかく速度を競うプロコンです。 小手先の速度チューニングもバカにできません。 何が速くて何が遅いのかはっきりさせるため、ボトルネックになりそうな操作のベンチマークを取りました。 実行環境は下記のとおりです。 python2.7.5 OS: MacOSX 11 CPU: Core i7 2GHz (4core) MEM: 16GB その1. 配列の初期化を高速化する まずはプロコンの基本中の基本、配列の初期化です。 下記７つの初期化方法を比較してみます。 空配列へappendして配列をつくる for内包表記で配列をつくる サイズ1(None)の配列を乗算してから値を代入する サイズ1(None)の配列を乗算する サイズ1(ゼロ)の配列を乗算する すべてゼロのarrayをつくる 0〜nのarra
GreenSock Animation Platform (GSAP) Speed Test
JavaScript Animation Speed Test Compare the performance of various JavaScript libraries with GSAP. This test simply animates the left, top, width, and height css properties of standard image elements. There are also versions of several of the tests that use transforms ("translate/scale") instead so that you can compare performance. The goal was to be extremely fair and use the same code for everyt
「SQLパフォーマンス詳解」という本を翻訳しました | b.l0g.jp
「SQLパフォーマンス詳解」という本を翻訳しました 2015-04-07 題の通り、「SQLパフォーマンス詳解」(原文タイトルSQL Performance Explained)という本を翻訳しました。PDF版と印刷版が上記サイトから購入できます。 (追記 2017年9月から、渋谷のBOOK LAB TOKYOさんでも印刷版を販売していただいています。輸送コストの関係で、サイトから購入するより若干安くなっています) リレーショナルデータベースにおいて、SQLとインデックスがどのように関連し、どのようにすればSQLのパフォーマンスを良くできるのかを解説した本です。特定のデータベース製品に焦点を当てた本は多数ありますが、この本ではOracle Database、PostgreSQL、MySQL、SQL Serverの4つのメジャーなリレーショナルデータベース製品を同時に扱っていて、それぞれのク
sar(sysstat)によるボトルネック特定 - Qiita
sar(sysstat)とは LoadAverageやCPU使用率、ディスクI/Oの状態を表示できるコマンド。 何より便利なのは、過去にさかのぼれる点。 sarのインストール
ウェブパフォーマンスの基礎とこれから
8. TCPデータ インターネットはなぜ遅いのか？ クライアント サーバ ネットワークA R R R ネットワークB ネットワークC ネットワークD 2点間の距離が遠い場合は、ackの応答に時間がかかり、ネットワークリソースを十分に活かしきれません TCPデータ TCPデータ TCPデータ 使い切れていない ネットワークリソース ack ack ack ack きたぞー 送ったぞー 9. インターネットはなぜ遅いのか？ 海外にアクセスしようものなら、ackの応答時間(Round Trip Time)に10倍以上もの差が出ることもしばしば US カリフォルニア州 166ミリ秒15ミリ秒 yahoo.co.jp さくら インターネット RTT= RTT= 大阪 東京 KDDI Softbank Telecom yahoo.com 海底ケーブル (恐らくJapan-US経由) R R R R R
React CanvasによるモバイルブラウザのUI改善とそれが起きる必然 - ワザノバ | wazanova
http://engineering.flipboard.com/2015/02/mobile-web/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 ものごとが進化すると、利用するユーザの満足度はあがるので、それを用意する作業量はツールの改善に従って最終的には減っていくのか？ スマホが登場して、アプリ上でのスワイプなどの直感的にできる操作や表現の幅が広がり、またディスプレイも改善。では、プロダクトをつくる側がそれに慣れてくると、作業量が減るのか？いや、現実は逆。同じことを実現する作業量は減っても、トータルでは減らない。ブラウザとアプリにまたがって、双方のメリットを取り込もうと、もっとレベルの高いUIを目指した競争が続いています。 David BellonaがTwitter Universityでの
CSS Triggers List - What Kind of Changes You Can Make
• Layout • Paint • Composite align-content Changing align-content alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations. Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together. align-items Changi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Performance Testing Modern Apps
レンダリングを意識したパフォーマンスチューニング
