サードパーティJavaScriptの最適化 - 一休.com Developers Blog
本記事は、一休.com Advent Calendar 2018の4日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 今日は、パフォーマンス改善に取り組むフロントエンドエンジニアの多くが頭を悩ませているであろう、サードパーティスクリプト(3rd Party JavaScript)について書きます。 サードパーティスクリプトとは サードパーティスクリプトとは、外部のドメインから読み込むJavaScriptのことです。典型的には、Google Analytics等のスクリプトが、サードパーティスクリプトに該当します。 一休.comでは、サードパーティスクリプトを、アクセス解析・広告のリターゲティング・A/Bテスト等、様々な用途に使用しています。これらのスクリプトは、一つ一つは小さなものであるため、画面表示のスピードに対するインパクトは意識
HTTP/2が速いという幻想 - Webパフォーマンスについて
難しい話じゃないです。 皆さん、ご自分でChrome Developer Toolで簡単に確認できますから、やってみて下さい。 このブログでも、過去に統計分析をした結果は掲載したんですが、「盲信」はそうそう簡単には消えないようでして… takehora.hatenadiary.jp takehora.hatenadiary.jp 以下の図は、Chrome 63.0.3239.108での結果です。 CDNにFastlyでもAWS CloudFrontでも、どのCDNを使って実験して頂いても結構です。 CDNを使わずに、Webサーバ単体でも結構です。 同様の結果になります。 どちらもHTTPS通信です。 どちらも同じオリジン、同じファイル構成です。 HTTP/1.1は、Keep-Alive設定が入っています。 HTTP/1.1での配信 … Load Event 70ms HTTP/2での配信
それ、もっとスマートに書けるよ - JavaScript コードをもっと短く、もっとシンプルに書く Tips 4選
2017年10月6日『まぼろしのJS勉強会 #1 「ナウいJSの書き方・考え方」』にて発表した資料です。 https://maboroshi.connpass.com/event/66502/ #mbrs_js_study
RAIL という Web パフォーマンスモデルの概要
RAIL を簡単に紹介する 主に Googler が、という趣ですが今年に入ってから RAIL というパフォーマンスモデルが紹介される機会が増えてきました。 RAIL は Response / Animation / Idle / Load の頭文字をとった命名で「アプリケーションのライフサイクルの観点から、それぞれのフェーズの基準時間（限界時間）を示したもの」です。 手前味噌ながら Webパフォーマンスにおけるイニシャライズとランタイム で紹介したうちの「ランタイム」部分が細分化されて、それぞれに基準時間を割り当てたようなイメージです。 Idle や Animation あたりの時間は紹介する人・タイミングによって多少ブレている印象ですが、大まかに以下のような感じです。 Response : 100ms 「UI が操作されたときユーザーにレスポンスするまでの応答時間は 100ms 以内」
Bluebirdの高速化を可能にする、3つのJavaScriptパフォーマンスの基礎 | POSTD
最近Reaktorが掲載した『 Promises made by a Reaktor developer had an impact on the industry article 』で約束した、Bluebird promiseライブラリの製作者であるプログラマのPetka Antonovからの知見です。 Bluebirdは広く使用されているJavaScript用のpromiseライブラリで、同じような機能が実装されているにも関わらず、他のpromiseよりも100倍速いという理由から最初に知られるようになったのは2013年でした。Bluebirdが高速な理由はライブラリ全体にJavaScriptの最適化の基礎を一貫して適応しているからです。この記事ではBluebirdの最適化に使用する3つの重要な基礎について詳細に説明します。 1. 関数オブジェクトの割り当てを最小限に抑える オブジェク
Webアプリケーションを高速化する50のトリック
MicrosoftのInternet Explorer PMであるJatinder Mann氏は、BUILD 2012でHTML5アプリとサイトを高速化する50のパフォーマンストリックというセッションで、Webアプリケーションを高速化する多くのチップスを提供した。 Mann氏が提供したアドバイスは、以下の6つの原則を中心に構成されていた。 1. ネットワークリクエストに迅速に応答する リダイレクトを避ける。上位1,000のWebサイトのうち63%は、リダイレクトを使用している。これらはリダイレクトをやめることによって10%のパフォーマンスを改善することができる。 メタリフレッシュを避ける。世界のURLのうち14%は、メタリフレッシュを使っている。 可能な限りユーザーの近くにあるCDNを使用してサーバーの応答時間を最小化する。 異なるドメインからのリソースをダウンロードすることによって、同時
解析まで10分！最強のMySQLチューニングツール「Jet Profiler」 - Lancers開発ブログ
こんにちは、keiです。 今回は、MySQLのチューニングに大活躍な「Jet Profiler」というツールをご紹介します。 Jet Profilerとは Jet Profilerは、MySQL向けのクエリアナライザです。 クエリチューニングは、DBパフォーマンスチューニングの中でも重要な作業の1つですが、 Jet Profilerを使えば、その作業をGUIで直感的に行うことができます。 フリーウェアの形態で提供されており、機能限定版であれば無料で利用することができます。 購入する場合は、$499となります。 詳細情報、ダウンロードは公式ページからどうぞ。 http://www.jetprofiler.com/ja/ Jet Profilerの魅力 その1 導入のしやすさ 通常のWindowマシンに、普通のアプリケーションをインストールする感覚でインストールが可能です。 イン
WEBサイト負荷テストツール7選 | さぶみっと！JAPAN
WEBサイトに情報を入力するだけで負荷テストができるLoad Impact、GUIから操作できるApache JMeterや、コマンドラインから使うcurl-loader・httperf・Siege・Pylot・abを簡単な使い方と共に紹介していきます。 Load Impact http://loadimpact.com/ Load ImpactはスゥエーデンのGatorhole AB社が管理している、フォームに必要な情報を入力するだけで負荷テストをしてくれるWEBサイトです。 ツールをインストールしたりする必要が有りませんので、非常に楽です。 毎月5回まで無料で負荷テストができます。 それ以上は10回/$30のクレジットを購入する事になります。 トップページのフォームにURLを入れて「Run free test」をクリックすると、世界各地のいずれかのAmazon EC2サーバから負荷テス
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
PHPer必見の文書『A HOWTO on Optimizing PHP』を和訳してみたよ！
正式名称は『A HOWTO on Optimizing PHP with tips and methodologies』ですね。 PHPの最適化に関する文書です。 PHP4の時代に書かれたものですが、今でも通用する内容だと思います。 この週末を使ってコレを読んでたので、ついでに和訳しました。 かなり意訳＆拙い翻訳ですが、何かしらのお役に立てればと思って載せます。 情報古かったり個人的に縁のない部分は省略したりしました。 ポロリもあるよ！ —–ココから和訳—– やあ！ こいつの最終更新日は2009年9月30日だよ！ ベンチマークはちょっと古いかもしれないけど、一般的なアドバイスとしてはまだまだイケるんじゃないかな！ 8年間やってきた中でいちばん需要なのはキャッシングだって気付いたからそこんとこは修正したよ。 まあ、squidとmemcacheについて付け加えたんだけどね。 変更事項について知
JavaScriptからメモリ情報を取得する方法
JavaScriptにおいてメモリ管理は基本的にエンジン任せなのであまり意識することは無いかもしれませんが、メモリリークの調査やパフォーマンスの実験のためにメモリ情報をJavaScriptから扱いたいときがあると思います。 メモリリーク調査は専用のソフトウェアなどがあるので、 JavaScript Memory Leak Detector (v2) – GPDE Team Blog – Site Home – MSDN Blogs IE Overview – JavaScript Memory Validator Firefox Debugging memory leaks – MDC Doc Center そちらを使うのでもいいかもしれませんが、new Dateを使った実行時間の記録みたいにJavaScript内からメモリ情報を取得して計測できるとおもしろいと思うので、ブラウザ毎にやる方
CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル
Nicole Sullivan, a web developer living in California. Webページのパフォーマンスを向上させる方法のひとつに、CSSファイルを最適化するというものがある。CSSはプログレッシブレンダリングをブロックする効果があるため、最適化しないでおくとページのレンダリング時間に影響を与える。Stubbornella ≫ Blog Archive ≫ Top 5 Mistakes of Massive CSSにAlexa Top 1000サイトを調査した結果が掲載されている。CSSに関して使うべきだが使われていないCSSテクニックがあり、その上位5が紹介されている。紹介されているテクニックは次のとおり。 42%がCSSをGZIP圧縮で提供していない。 44%が2つをこえるのCSS外部ファイルを使っている。 56%がCSSをクッキーとともに提供している
URLを指定するだけでササッとサーバの負荷テストができるサイト「LOAD IMPACT」*二十歳街道まっしぐら（FC2ブログ時代）
「LOAD IMPACT」はサーバの負荷テストができるサイトです。 サイトによりけりですが、数分から10分程度で完了します。（途中中断できます） 自宅サーバなどを立ててる方はチェックしてみると面白いかも。 当サイトでもやってみました。 （※悪用厳禁ですよ） 以下に使ってみた様子を載せておきます。 まず「LOAD IMPACT」にアクセスします。 無料登録ができますが、登録なしでも測定可能です。 負荷テストしたいURLを入れます。 有料プランがありますが、左側の無料プランで最低限のチェックは可能です。 負荷テストの結果です。 ユーザのロード時間がグラフで表示されています。 右側で結果を切り替えられます。 （ちなみにこの機能を使うには、無料登録が必要です。） 帯域幅の使用量でしょうか。 サイトをお持ちの方はチェックしてみてはどうでしょう。 （本記事で紹介したサイト：LOAD IMPACT）
Gree Fast Processor: PHPを3倍(くらい)速く | GREE Engineering
ごあいさつエントリだけというのもなんなので、引き続きfujimotoです。実質上1つめのような気がするこのエントリでは、PHPが3倍くらい(少なくとも2倍くらいは...)速くなるGree Fast Processorというのを先月作ってみたのでご紹介です。 すぐわかるまとめ Gree Fast Processorというのを使ってみると、シンプルなsymfonyのプロジェクト(xav.ccで試しました)でも2倍弱、結構複雑なアプリケーションだと7倍くらい速くなったりします。いくつかの制約がありますが、パフォーマンスに飢えているかたはお試しください。 こちらはなんかすごい速くなっている感じのグラフ(一番上が速くなった版のRequests per Second、赤が通常版のRequests per Second): これはさすがにbest caseすぎる気がしますが、普通にやっても2倍弱くらいは
PHPをC++に変換して高速化する「HipHop for PHP」をFacebookが公開 : candycane development blog
アメリカ時間の昼ごろにTwitter上が一つのニュースで埋め尽くされました。 PHPをC++に変換して高速化する技術をFacebookが公開したというものです。世界中のPHPハッカーが注目する興味深いリリースという事でちょっと長いですが、リリースノートの和訳を行いました。 原文 http://developers.facebook.com/news.php?blog=1&story=358 Facebookにおいて重要なことのひとつが動作の速さです。過去6年間にわたって、PHPが提供する高速な開発ペースによって多くを成し遂げてきました。プログラミング言語としてみると、PHPはシンプルです。簡単に習得し、簡単に書き、簡単に読み、簡単にデバッグする事ができます。我々は他の言語よりも早くエンジニアを獲得し、それによってより早いイノベーションをすることができます。 今日、私は2年に渡って作業して
Kazuho@Cybozu Labs: パフォーマンスとスケーラビリティのためのデータベースアーキテクチャ (BPStudy#25発表資料)
先週金曜日、BPStudy#25で、「パフォーマンスとスケーラビリティのためのデータベースアーキテクチャ」という題目で話をさせていただきました。その際に使用した発表資料は以下のとおりです。 1. Happy Optimization 最初に、最適化の考え方として、上限値を予測し、それを元にリソース配分を考える、という手法を説明しました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: Webフロントエンド ハイパフォーマンス チューニング: 久保田光則: 本
Webアプリケーションで 60fpsを(極力)目指す
GitHub - olado/doT: The fastest + concise javascript template engine for nodejs and browsers. Partials, custom delimiters and more.
Web ページを高速化する
