Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
Gatlingで負荷試験をする | DevelopersIO
WebサイトやAPIの負荷試験を行う際にまず思い浮かぶツールはJMeterでしょう。 それ以外にGatlingというツールがあり、今回はこれを試してみました。 環境構築 GatlingはJDK8で動作します。Oracle公式サイトからJDK8をダウンロード、インストールした上で、anyenvのjenvを使って以下の環境を構築しました。 $ jenv add /Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home/ $ mkdir -p dev/gatling-test; cd $_ $ jenv local 1.8 $ java -version java version "1.8.0_181" Java(TM) SE Runtime Environment (build 1.8.0_181-b13) Java Ho
Webアプリ負荷試験ガイド - withgod's blog
Webアプリ負荷試験ガイド 目次 Webアプリ負荷試験ガイド 目次 前置き 時間がない人向け要約 about me 何故負荷試験を行うのか 負荷試験ツール 負荷掛けるツール 負荷計測 負荷の可視化 負荷試験の流れ 負荷試験スケジュールについて 注目すべきポイント シナリオ作成 アカウント情報は自動生成出来るようにする DB分割を行ってる場合はDB分割を意識したシナリオを用意する。 負荷試験元 http or https サーバ1台 サーバ単体での負荷 アプリの正常性の確認 サーバ複数台 KVS Memcached Redis RDB 問題になりやすいDB キャッシュの話 大前提 注意すべき点 CDNやProxyレベル local cache or remote cache local cache or memory cache(in app cache) references 更新情報 前
1000万件オーバーのレコードのデータをカジュアルに扱うための心構え - joker1007’s diary
自分が所属している会社のメンバーの教育用資料として、それなりの規模のデータを扱う時に前提として意識しておかなければいけないことをざっくりまとめたので、弊社特有の話は除外して公開用に整理してみました。 大規模データ処理、分散処理に慣れている人にとっては今更改めて言うことじゃないだろ、みたいな話ばかりだと思いますが、急激にデータスケールが増大してしまったりすると環境に開発者の意識が追い付かないこともあるかと思います。 そういったケースで参考にできるかもしれません。 弊社は基本的にAWSによって運用されているので、AWSを前提にした様なキーワードやサービス名が出てきます。後、句読点があったり無かったりしますが、ご容赦ください。 追記: 社内用の資料の編集なのでかなりハイコンテキストな内容だから誤解するかもしれませんが、これらはそもそもRDBの話ではありません。(関係無くは無いけど) 1000万オ
推測するな、計測せよ フォージビジョンのエンジニアが教えるパフォーマンス改善に必要なログ分析
ログ分析勉強会は、日々の業務に役立てられる「ログ分析」についての情報交換を目的として活動しています。オンライン開催となった今回、AWSに詳しい山口氏がWebサービスのパフォーマンス改善に必要なログ分析について、日々の業務から得た知見を共有しました。前半は、クライアント側から見たログ分析について。 Webサービスのパフォーマンスとログ分析 山口正徳氏：山口と言います。よろしくお願いします。今日はみなさんお集まりいただきありがとうございます。なんと現時点で参加いただいているのが303人。こんなに多くの方に参加してもらえるとは思ってもいなかったので、変な緊張感に包まれています。カミカミなところとかがあったりしても、そこはあたたかい目で見てもらえればなと思います。 また、ログ分析勉強会のオンライン配信は JAWS-UG 札幌の三浦一樹さんに協力いただています。配信環境の設営、配信レイアウトの作成な
計測・検討・対処のプロセスでWebサービスのパフォーマンスを改善する
はじめに はじめまして、ホットペッパービューティーコスメ（以下HPBC）にてフロントエンドエンジニアとして学生アルバイトをしている柏です。 Webサービスで普遍的にもとめられる指標にパフォーマンスがあります。素早く表示されるWebサービスはユーザー体験が良く、コンバージョンや直帰率などにも関係があると言われています。HPBCでは、チーム一丸となってパフォーマンスの改善に継続的に取り組んでいます。 6週間のアルバイト期間で、HPBCのBFF(Backend for Frontend)の性能改善に取り組ませていただき、結果としてレスポンスタイムを200ミリ秒程度短縮することができました。本記事では、その取り組みをテーマに計測を通してパフォーマンスのボトルネックを発見する方法、そして開発の速度を落とさずそれらを解消することについて、ご紹介します。 目次 HPBCの構成と課題 Cloud Trac
Docker for Mac の Mutagen-based caching で Volume のパフォーマンスが劇的に改善した - Qiita
Docker for Mac の Mutagen-based caching で Volume のパフォーマンスが劇的に改善したSymfonyMacDockerEC-CUBEmutagen 2020/8/23 追記 2.3.5.0 の Edge release で削除されてしまった模様です。 今後の統合方法を検討するということで、続報を期待します。。 Docker for Mac の Edge channel で、 Mutagen ベースのキャッシュが使えるようになっています。(手元のバージョンは 2.3.1.0) 従来、 EC-CUBE をはじめとする Symfony をベースとしたアプリケーションや、Composer や npm などのパッケージ管理システムのファイルをマウントすると、強烈に遅くなる問題がありました。 今回利用できるようになった Mutagen ベースのキャッシュを利用
yarn installが遅い原因の調査方法
yarn installが遅い原因の調査方法 プロジェクトが依存するパッケージに比例して線形にインストール時間が増えていることが期待します。 投稿日2019-06-13 07:59:00更新日2019-06-13 07:59:00 はじめに npmもしくはyarnのインストール時間が明らかに遅くなっていく場合があります。 早くする方法としては、まずcacheを有効にすることですが効かないパッケージも存在します。 そのようなパッケージをあぶり出すにはどうしたらよいか、というのが今回のお題です。 npm/yarn系の依存するパッケージ数は大抵の場合、人間が把握しきれない量です。 その中から原因をすぐに特定することは困難であるため、人間か理解できる範囲まで情報を絞り込む必要があります。 今回、インストールのログから情報を精査し、ボトルネックとなっている部分を浮き彫りにする方法を紹介します。 ya
急なレスポンスタイム悪化から、オープンソースプロジェクトにPull Requestを送るまで - 弥生開発者ブログ
こんにちは、Misoca開発チームの黒曜(@kokuyouwind)です。 最近はシャニマスのイベントシナリオ感想記事をnoteにまとめたりしています。 😨 急に本番のレスポンスタイムが悪化した話 Webエンジニアにとって、「本番障害」という4文字ほど見たくないものはないでしょう。 本番障害ほどではないにしても、「急なレスポンスタイム悪化」もあまり見たくない文字列ですね。まぁ、見たくなくても向こうからやってくるんですが… というわけで、今回は本番レスポンスが急に悪化したときの話です。いろいろ調べた結果、利用しているオープンソースプロジェクトが原因だったことがわかりPull Requestを送ったので、その流れをまとめてみたいと思います。 ❗️ レスポンスタイム悪化の検知 Misocaでは監視ツールとしてMackerelを、APMツールとしてSkylightを利用しています。 本番レスポン
Ruby中間表現のバイナリ出力を改善する - クックパッド開発者ブログ
Ruby 開発チームに4週間インターン生として参加いたしました、永山 (GitHub: NagayamaRyoga) です。 私は「Ruby中間表現のバイナリ出力の改善」という課題に取り組み、Railsアプリケーションのコンパイルキャッシュのサイズを70%以上削減することに成功しました。以下ではこの課題の概要とその成果について述べたいと思います。 InstructionSequenceの概要 まず、RubyVM 内で実行される命令の中間表現、InstructionSequence (以下 ISeq と省略) について簡単に説明します。 通常の Ruby プログラムは、以下のような手順で実行されます。 ソースコードを構文解析し、抽象構文木を作る。 抽象構文木をコンパイルして、ISeq を作る。 RubyVM (YARV) で ISeq を解釈し、実行する。 ISeq は、このように Ruby
2019年版: JavaScriptのループの考察 - Qiita
JavaScript いつの間にかずいぶん違う言語になったなぁ、と思うけど、 for(let i = 0; i < 100; i++) { /.../ } これはまだこう書くしかないのかな？const使えない？ — Takuo Kihira (@tkihira) June 6, 2019 このツイートを起点に、パフォーマンスの話が出て、紀平さんも計測されていたんですが自分でも思うところがあって計測して考察してみました。 実測前の僕の予想（というか過去の経験）は 普通のforが最速 for-inは速度以前に使ってはいけない for-ofとforEachは関数呼び出しがループごとに挟まるのでどちらも遅いが同じ水準 for ofは言語標準なので最適化が行われる期待！ でした。さて、結果はいかに？ それぞれのループの解説 伝統的なfor 伝統的なループが一番軽いというのはみんなが認めるところです。
CSSを軽量化し、ページ表示速度を改善せよ！ レガシーWebフロントエンドのパフォーマンスチューニング
2018年の7月から実施されたGoogleの検索ロジックの変更（Google Speed Update）により、ページ表示速度がサイト検索順位に影響するようになりました。今回紹介する取り組みは、Google Speed Updateに備え、タウンワークにおいて、できる限りのパフォーマンス改善を行う目的で実施したものです。本稿には、煌びやかなWebの新技術の話は一切登場しません。むしろ、連綿と受け継がれてきた「秘伝のタレ」に立ち向かう泥臭い話です。この取り組みで行ったアプローチは、不要なものを削って速度改善を図るという技術的には非常にシンプルなものです。ただし、いくつかの制約条件によって難易度が上がっています。本稿では、実際の取り組み内容と結果、および今後についてお話しします。 はじめに リクルートテクノロジーズでソフトウェアエンジニアをしている加藤慶之です。 本稿では、リクルートジョブズが
Overview | Lighthouse | Chrome for Developers
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against t
How to optimize for speed
How to optimize for speed# The following gives some practical guidelines to help you write efficient code for the scikit-learn project. Note While it is always useful to profile your code so as to check performance assumptions, it is also highly recommended to review the literature to ensure that the implemented algorithm is the state of the art for the task before investing into costly implementa
ISUCON8 本選出題記 あるいはISUCONベンチマーカー負荷調整の歴史 - 酒日記 はてな支店
ISUCON 8 の本選出題を同僚の @ken39arg と担当しました。参加された皆様、運営にご協力して頂いたすべての関係者の方々にお礼申し上げます。 恒例の #isucon pic.twitter.com/iXAjgfgbeZ— fujiwara (@fujiwara) 2018年10月20日 問題についての講評は公式の ISUCON8 本選問題の解説と講評 をご覧頂くとして、こちらでは今回、出題に導入された新要素である「シェア機能」について、どういう経緯で導入されたのか、裏話的なことを書いておきたいと思います。 「ベンチマークの負荷を自分で決めるのも、自動で際限なく負荷が上昇するのも実際のアプリケーションとは違うよね?」というところから思いついた機構なのですが、経緯についてはいろいろな前提と、歴史の理解が必要になります。結果的に長文になってしまいました。 ISUCONベンチマーカーと
Webアプリケーションのベンチマークをとるときに気をつけている10のこと - たごもりすメモ
10もないかも、と思いながら項目を書き出してみたら10以上余裕であってキリがないので10で収めた。いやあ、あるなあ。 仕事柄よくベンチマークを実行したりしてて色々と思うところが溜まっていたところ、以下のような記事を見掛けたのでなんか書こうと思った。ところでこの記事はベンチマークを実行するための準備作業がループを回して2時間かかるところの待ち時間に書かれている。 sfujiwara.hatenablog.com ISUCONといえば多少縁があるコンテストで、文中でISUCON5のことについても言及されているので、それも含めて。 自分が業務でいじっているのは "Webアプリケーション" というとちょっと違うんじゃないのというものばかりだが、いやー、最近なんでもHTTPで外部APIを作るからベンチマークのコツとしては大体変わんなかったりするよね。 なおこの記事でベンチマークはどのようなものかとか
DigdagをHA構成にしてみた - ZOZO TECH BLOG
こんにちは、最近のマイブームはマヌルネコ動画な新事業創造部バックエンドエンジニアの塩崎です。 今回のテックブログでは、以前にDigdagを紹介した記事の続編として、DigdagをHA構成にするためのTipsなどを紹介します。 Digdagとは Digdagはワークフローエンジンと呼ばれるソフトウェアです。 複数個のタスク間の依存関係からなるワークフローを定義し、そのワークフローの実行及び管理を行います。 この説明だけですと、何が便利なのかいまいちピンとこない方が多いかと思います。 ですが、かゆいところに手が届く便利ソフトウェアです。 具体的なかゆいところの紹介は以前にDigdagを紹介した記事の前半部分に書かれています。 Digdagを使用したことのない方はこちらを読んでから本記事を読み進めると理解しやすいかと思います。 tech.starttoday-tech.com さて、前回の記事で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Speedlify
Understanding CPU throttling in Kubernetes to improve application performance #k8sjp
正攻法はあるのか!?泥臭く戦ったNode.jsバージョンアップ一部始終
