SSSSLIDE
一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog
ヤフー株式会社より出向しております、卯田と申します。 主務で、一休.comおよびYahoo!トラベルのフロントエンド開発を担当しています。 兼務で、ヤフー株式会社の全社横断組織でWebパフォーマンス改善の推進を行っております。 本稿では、直近半年弱(2023年2月〜8月)で、断続的に行っていた一休.comのパフォーマンス改善について振り返ります。 開始が2023年2月となった理由は、Nuxt3バージョンアップ以降にパフォーマンス改善活動に着手したためです。 一休.com/Yahoo!トラベルのNuxt3バージョンアップ詳細については、以下のブログをご覧ください。 user-first.ikyu.co.jp サイトパフォーマンス改善の意義 改善の方針 方針1: Core Web Vitalsを改善する 方針2: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ
【翻訳】goroutine の仕組み - まるまるこふこふ
訳者による概要 Krishna Sundarram 氏の記事「How Goroutines Work」の翻訳です。 「goroutine とは軽量スレッドである」という説明に対して抱くであろう 「どのようにして並行処理を実現しているのか」「既存のスレッド処理と何が違うのか」「なぜ軽量なのか」という疑問を解消する文章です。 とても良い文章なのですが、現在リンク切れになっており、 とてももったいないことだと思ったので、日本語に翻訳しました。 原文: How Goroutines Work (2017/12/02 現在、リンク切れ) golang の紹介 もしあなたが golang 初心者で、並行処理(Concurrency)と並列処理(Parallelism)の違いがわからなければ、Rob Pike 氏のトーク (リンク先は英語)を参照してください。約 30 分のトークですが、30分視聴するだ
個人開発で得たスピード仕事術
できる犬さんMarkdownエディタを一人で作りながらフリーランスをしています。今月(11月)の売上は18万円を超えました。順調に伸びていて嬉しい。毎日楽しいです。 個人開発はスピードが全てです。残業代もがんばった賞も出ないからです。一人何役もこなさないといけないので、作業のスイッチングコストが常につきまといます。設計してコードを書いてユーザサポートをしてマーケティングして・・。ましてや本業などがあると、プロジェクト単位で脳を切り替える必要もあります。 プロになってから約8年、常に本業と並行して何かしらの個人開発を続けて来ました。そして、このスイッチングコストをどうすれば最小限に抑えられるかという課題と向き合ってきました。自分で言うのも何ですがかなり速いと思います。例えば、先日ユーザさんから機能要望を受けたのですが、書き込みを見て２時間で対応してリリースしました。そしたらユーザさんが「速す
MYSQL効率化 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? テーブルを作る時の注意点# テーブル作る時気づいてなかったが、後でデータの量増えたらスピードに影響があるところはいくつある 1. textよりcharかvarcharの方がいい### charとvarcharの長さは固定で、設定できるもので、デフォルト値も指定できるが、text長さもデフォルト値が指定できない。それでハードウェア上にcharとvarcharの方が効率が高い。charの長さは255の定数で、足りない分はMYSQLがスペースで補充する。varcharの長さはv5.0.3以降65535まで設定できて、長いカラムにおすすめ。 2
速いSQLを書くコツ！！
このページでは、SQLの実行速度を速くし、少ないメモリで実行するためのテクニックを紹介いたします。と言っても、実は『プログラマのためのSQL 第2版』の受け売りがほとんどでして、この本を読んでいただければ、ここを読む必要はありません。 また、SQLの最適化の実行前と実行後で、SQL文の解析結果を比較することが重要です。適当にSQLをいじって速くなったからそれでよし、という非科学的な態度じゃダメですよ。SQLの解析方法については、別の文章で説明します(ただしオラクルのみ。僕がオラクルしか使ったことがないので)。 なお、SQLの応答速度が遅い場合、その原因はSQL単体にあるとは限りません。索引の使用が不適切だったり、メモリの使用効率が悪かったり、ファイルI/Oが多くなっていたり、という他の原因も考えられます。 サブクエリーを引数に取る場合、IN述語よりもEXISTS述語を使え 繰り返す。サブク
UNIONを使うとWHERE a OR bより早いよ！って内容に対する調査 - Qiita
概要 WHERE a > xx OR b > xxのようなクエリはUNION使った方が早いよ！って記事があったので「本当に！？」と思って調べてみました。 準備 環境 MySQL 5.7.22 テストデータの作成 CREATE TABLE `test` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `a` int(11) NOT NULL DEFAULT 0, `b` int(11) NOT NULL DEFAULT 0, PRIMARY KEY (`id`), KEY `a` (`a`), KEY `b` (`b`) ) ENGINE=InnoDB; insert into test () values (); insert into test (id) selet 0 from test; insert into test (id) s
SQLのインデックスとそのチューニングについてのオンラインブック
開発者向けのSQLインデックス解説サイト、管理についての間違いない知識を提供します。 インデックスは開発時には忘れられがちである一方で、非常に効果的なSQLのチューニング方法です。Use The Index, Lukeでは、HibernateなどのORMツールの解説にとどまらず、SQLのインデックスについて基礎から説明します。 Use The Index, LukeはSQLパフォーマンス詳解のWeb上の無料版です。サイトを気に入って頂けたら、ぜひ書籍も購入してみて下さい。また、このサイトの運営をサポートする様々なグッズも販売しています。 MySQL、Oracle、SQL ServerなどにおけるSQLのインデックスUse The Index, Lukeでは、ベンダにとらわれないインデックスの説明を心がけています。製品特有の事柄については、以下のような表示をしています。 Db2 (LUW)U
毎回関数を作ってpropsに設定する問題の修正 · Webフロントエンド パフォーマンス改善ハンドブック
毎回関数を作ってpropsに設定する問題の修正 Reactのよくある問題として、propsに関数を渡すパターンで毎回関数を作って渡してしまうが知られています。 毎回新しい関数を作ってしまうと、同じ異なる値（props）となるため無駄にコンポーネントが更新されてしまいます。 why-did-you-updateでもこの問題を検知できます。 この問題は、関数同士の比較は常にtrueとしてしまうshouldComponentUpdateを実装するか、一度作った関数をちゃんと使いまわす（constructorで作成やpublic fieldを使う）ことで解決できます。 また、ESLintやTSLintといったLintツールでも検知できます。 tslint: jsx-no-lambda eslint: jsx-no-bind 参考 React.jsのrenderの戻り値の中で.bindで新しい関数を
react-reduxのパフォーマンスについて - anect Tech Blog
エンジニアの原です。 これ、数人同じ事思ってる人いたみたいでした。よかった。 http://anect.hatenablog.com/entry/2017/06/09/151000:embed:cit ブログ内では「mapStateToPropsとmapDispatchToPropsを使う理由が分からない、mergePropsで全部やるのがシンプルで良いじゃないか」というものでしたが 今回react-reduxのソースを解説しつつそれらの役割と必要性についてと実際どうするべきか、について少し考えました。 TL;DR 結論から言うと 「場合によって（というか多くの場合）はmapStateToPropsとmapDispatchToPropsをちゃんと使わないとパフォーマンスが下がる」 です。 以下、ソースの解説と自分の意見です。 react-reduxの実装の話 ちょっとだけreact-red
ISUCON8予選突破しました - あおうさ＠日記
予選突破 ISUCONというWebアプリケーションのパフォーマンス改善コンテストに参加し、予選突破しました。去年は不参加だったので2年振り2度目。(blog書くのもISUCON6振りで2年振りという... output無さすぎ) いやー実に楽しかった。やっぱりISUCONでしか味わえないモノがある。いつも何か新しい学びがある。 予選は両日共に問題なく進んだようですし、予選問題もいい問題でした。ベンチマーカーが詰まることもなく快適な予選でした。運営のみなさんありがとうございます。 久しぶりの参加だったので事前にISUCON7予選を解いてみたりconoha vpsでサーバ立ててansibleやfabric(deployに使っている)の動作確認をしたりして挑みました。ISUCON7予選を動かし始めたらあーこの感じやっぱり楽しいなと思って気持ちを高めてISUCON8に臨めて良かった。何を事前準備し
Introduction · Webフロントエンド パフォーマンス改善ハンドブック
Webフロントエンド パフォーマンス改善ハンドブック このパフォーマンス改善ハンドブックでは、ウェブアプリケーションにおけるフロントエンドのパフォーマンス改善について扱っています。 ダウンロード版 埋め込み動画を再生できないなど一部制限がありますが、ダウンロード版を配布しています。 PDF版 EPUB版 MOBI版 目的 このハンドブックでは過去に行った改善の事例を中心に紹介しています。 そのため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを使い映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのフロントを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれています。 開発と平行して行われていたため、React 15から16の間
Webpagetestから始める継続的パフォーマンス改善
autoscale: true Webpagetestから始める継続的 パフォーマンス改善 ページロードタイム編 :hourglass: 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Create: textlint, Almin アジェンダ パフォーマンス改善は指標を決めて行わないと迷子になる パフォーマンス改善を行うには継続的な計測を行う 今回はページロードについて、ランタイムは範囲外 パフォーマンス改善のアプローチ 継続的なパフォーマンス計測とリグレッションの検知 ^ 目的はパフォーマンス改善には計測が必要という事実を知ること ^ パフォーマンス計測は継続的に行う必要がある ^ パフォーマンス改善は何を目的、指標にして改善するかを決めないと迷子になる ^ 目的をもって継続的にパフォーマンス改善を行い
Jet Profiler for MySQL
is a real-time query performance and diagnostics tool for the MySQL database server. Query, table and user performance Jet Profiler focuses on queries, tables and users. This gives you the information you need in order to quickly fix performance problems in your code, such as most frequent queries, most used tables or the busiest users. Graphical visualisation Data is collected, analyzed and displ
ステートレスなコンポーネントによるReactのパフォーマンス最適化
再描画による「遅い」Reactコンポーネントを速くするための方法を検討しました。追体験しながらどうぞ。 処理結果が変わるようなデータを内部に保持していないステートレスなコンポーネントを解説します。つまりthis.state ={...} を含まないコーポネントです。与えられたプロパティと、下位のコンポーネントを持ちます。 まずは超基本 import React, { Component } from 'react' class User extends Component { render() { const { name, highlighted, userSelected } = this.props console.log('Hey User is being rendered for', [name, highlighted]) return <div> <h3 style={{f
Railsパフォーマンス基本のキ
Railsのパフォーマンスについてよくある問題とそれに対して戦いを挑むために必要なもの。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SSSSLIDE
PageSpeed Insights
https://developers.google.com/web/tools/setup/workspace/setup-devtools
Railsアプリケーションのパフォーマンス改善手法 / #ginzarb
