限界を極めた内定者が語る！ Web Speed Hackathon 2022 戦略と秘訣 | CyberAgent Developers Blog
本記事は CyberAgent Developers Advent Calendar 2022 21 日目の記事です。 2023 年度入社予定の加藤 零(@cut0_) です。現在は株式会社 WinTicket で内定者アルバイトをしています。Web Speed Hackathon 2022 Public では 499.1 点を記録しました。 お疲れさまでした！ 届かなかった残り 0.9 点を噛み締めて社会人エンジニアを迎えようと思います。 CDN 使わずに Heroku 単体でもここまで戦えます！！https://t.co/ikVmhml6iq #WebSpeedHackathon — レイ (@cut0_) November 27, 2022 本記事では、Web Speed Hackthon 2022 Public で取り組んだことに加え、これから Web Speed Hacktah
500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
Heroku 無料枠が終わる前に！#WebSpeedHackathon 2022 Public で Web パフォーマンスチューニングを遊び倒そう | CyberAgent Developers Blog
Heroku 無料枠が終わる前に！#WebSpeedHackathon 2022 Public で Web パフォーマンスチューニングを遊び倒そう WINTICKET の竹内 @dora1998 です。普段は競輪・オートレースのインターネット投票サービス「WINTICKET」の Web フロントエンドを開発しています。 本記事では、Web パフォーマンス改善のコンテスト「Web Speed Hackathon 2022」について、この度一般向けにオンライン開催を行うことが決定したのでその告知をさせていただきます！ TL;DR Heroku 無料枠で遊べる Web パフォーマンス改善コンテスト “Web Speed Hackathon 2022 Public” を開催します！ 改善する対象は https://web-speed-hackathon-2022.herokuapp.com/ です
無料でウェブページのパフォーマンスを一発可視化できるツール「Firefox Profiler」レビュー
Firefoxにはウェブ開発者向けの開発ツールが搭載されています。この開発ツールにウェブサイトのパフォーマンスを可視化できる分析ツール「Firefox Profiler」が追加されていたので、実際に使ってみました。 Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/ Firefox Profilerを使うには、分析対象ウェブページを開いた状態でキーボードの「Shift」と「F5」を同時押しして、現れたメニューから「記録を開始」をクリックします。 記録を開始したら、ウェブページを更新したりウェブページ内の要素をク
curlでパフォーマンス測定 | DevelopersIO
コマンドラインツールのcurlを用いてHTTPによる通信のパフォーマンスを調べる方法を考えていこうと思います。 curlとは curlはURLを用いてデータをやりとりするためのコマンドラインツールもしくはライブラリです。 コマンドラインツールとしてはcurl、ライブラリとしてはlibcurlがあります。 HTTPだけではなくFTPやSMTPなど様々なプロトコルに対応しています。 自分は主にCLIからHTTPリクエストを送りたい時などに使っています。 使ってみたい方は以下の方法でインストールできると思います brew brew install curl apt apt install curl --write-outを使ってパフォーマンス測定 curlには様々なオプションが用意されていますが、今回、主に用いるのはこの-w, --write-outオプションです。 このオプションは指定したフォ
秒間100万リクエストをさばく - Googleの共通認可基盤 Zanzibar - 発明のための再発明
はじめに Googleの提供するサービス郡が共通して利用している認可システムにはZanzibarという名前がついています。ZanzibarはGoogleDrive・Google Map・Youtubeなどの巨大なサービスにも使用されています。 そのため、利用量も凄まじく 数10億のユーザー 数兆のACL(access control list) 秒間100万リクエスト もの量をさばいています。 にも関わらず、Zanzibarはこれを10ミリ秒以内に返します(95パーセンタイル)。 この記事では、そんなZanzibarの内部構造に関する論文「Zanzibar: Google’s Consistent, Global Authorization System」の中から、主に大量のリクエストをさばくための工夫を紹介します。 ちなみに、以前Googleの社内システム用の認可システム「Beyond
WordPress でも大丈夫！実例で見るウェブパフォーマンス改善
ウェブパフォーマンス、あるいはウェブページの表示速度は、ウェブサイト品質の重要な指標の1つです。今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insights (Lighthouse) のパフォーマンススコアを、30点以下から95点以上に改善した際、実際に行った施策を用います。
Chrome DevToolsを用いたメルカリWebのパフォーマンス計測 - Mercari Engineering Blog
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
Kazuho's Weblog: ウェブページの描画 (first-paint) までの時間を測定するツールを作った件、もしくはHTTP2時代のパフォーマンスチューニングの話
ウェブページの描画 (first-paint) までの時間を測定するツールを作った件、もしくはHTTP2時代のパフォーマンスチューニングの話 ウェブページの表示までにかかる時間をいかに短くするかってのは、儲かるウェブサイトを構築する上で避けて通れない、とても重要な要素です。 少し古いデータとしては、たとえば、ウェブページの表示が500ミリ秒遅くなると広告売上が1.2%低下するというBingの例なんかも知られているわけです。 「ウェブページの表示までにかかる時間」と言った場合、実際には以下のようないくつかのメトリックがあります。 イベント 意味
光を超えるためのフロントエンドアーキテクチャ - Speaker Deck
HTML5 Conference 11/25
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
Webアプリケーションのベンチマークをとるときに気をつけている10のこと - たごもりすメモ
10もないかも、と思いながら項目を書き出してみたら10以上余裕であってキリがないので10で収めた。いやあ、あるなあ。 仕事柄よくベンチマークを実行したりしてて色々と思うところが溜まっていたところ、以下のような記事を見掛けたのでなんか書こうと思った。ところでこの記事はベンチマークを実行するための準備作業がループを回して2時間かかるところの待ち時間に書かれている。 sfujiwara.hatenablog.com ISUCONといえば多少縁があるコンテストで、文中でISUCON5のことについても言及されているので、それも含めて。 自分が業務でいじっているのは "Webアプリケーション" というとちょっと違うんじゃないのというものばかりだが、いやー、最近なんでもHTTPで外部APIを作るからベンチマークのコツとしては大体変わんなかったりするよね。 なおこの記事でベンチマークはどのようなものかとか
60FPSへの夢、そしていかにキャッシュを従えるか / 書評「超速! Webページ速度改善ガイド 使いやすさは「速さ」はじまる」 - mizchi's blog
CAの ahomu/1000ch さんからご恵贈頂き、レビュー書いてくれと頼まれたので、自分のパフォーマンスというものへの思いの丈と共に書評を書こうと思う。 自分も6年ぐらいフロントエンドぐらいやってきたけど、あんまりちゃんと用語定義をしないまま「勘」で調査しがちだったのと、彼ら二人がどの数値見てるんだろう、という視点で読んだ。 gihyo.jp 要約: これはフロントエンドエンジニアの勘を体系化/言語化したものだ フロントエンドエンジニアにとって Chrome DevTools は日常的にお世話になる、「これナシでは生きていけない」という類のツールだ。だが、これの読み方は癖があり、経験的に蓄積してきた積み重ねがなければやや難しい側面があった。 この本は、フロントエンドエンジニアが今まで経験的に蓄積してきたでろう「勘」を、Webの仕様や各社のUXガイドラインの明確な定義を通して再整理したも
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
Solving anything in VCL
Andrew Betts Web Developer, The Financial Times at Fastly Altitude 2016 Running custom code at the Edge using a standard language is one of the biggest advantages of working with Fastly’s CDN. Andrew gives you a tour of all the problems the Financial Times and Nikkei solve in VCL and how their solutions work.
Webサイトパフォーマンスの振り返り 2016 - Webパフォーマンスについて
やっと表示速度の認知に火がつき始めた 2016年も、残り一ヶ月となりまして、WebサイトパフォーマンスのAdventカレンダーがスタートしましたので、今年のWebサイトパフォーマンスの動向を振り返ってみます。 今年の1月から3月、日本のECサイト売上上位150社に営業をかけて、色々とお話したのですが、ECサイト関係は、まだまだ表示速度の重要性を認知していない事が分かりました。 4社が興味を示してくれましたが、「配信品質管理」という認識まではやっぱり無かったです。 「日本はこのまま品質管理としてのWebサイトパフォーマンスが普及せずに今年も一年が過ぎてしまうのか？」と危機感を抱き、今年は、以下のカンファレンス等で講演の機会を頂きました。 関西フロントエンドUG主催 frontend conference 2016 「Webサイトパフォーマンスの基礎知識」 Movable Type Devel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Speed Hackathon Online 出題のねらいと解説
Rust速習会3 - Speaker Deck
最近の Web パフォーマンス改善について知っておきたいコト
Webアプリケーションで 60fpsを(極力)目指す
