ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）です。今回はヤフー全社で実施してきた、「Webパフォーマンス改善プロジェクト」についてお話ししたいと思います。 長期に渡る活動の結果、多くのサービスのWebパフォーマンスが徐々に向上しています。この記事では、取り組みの経緯や、多くのサービス分析を通してわかったコスパの良い施策（比較的簡単に実施できてスコアも上がりやすい施策）などをご紹介します。 全社横断でWebパフォーマンス改善を実施する経緯 さかのぼること2021年、Googleから以下のような案内がありました。 「Core Web VitalsがGoogle検索の検索順位に
「達人が教えるWebパフォーマンスチューニング 〜ISUCONから学ぶ高速化の実践」という本を6名の共著で執筆しました。技術評論社さんから、2022年6月4日発売予定です。電子版もでます。 gihyo.jp Amazon はこちら。 達人が教えるWebパフォーマンスチューニング 〜ISUCONから学ぶ高速化の実践 作者:藤原 俊一郎,馬場 俊彰,中西 建登,長野 雅広,金子 達哉,草野 翔技術評論社Amazon タイトルの通り、ISUCON で出題されるようなWebサービスを例にして、Webサービスのサーバーサイドパフォーマンスチューニングを指南する内容です。通称「ISUCON本」と呼んでください。 2020年の末に、技術評論社さんからWebサービス高速化 × ISUCONに関する書籍を執筆しませんか、と藤原までお誘いをいただいたのが発端でした。 書きたい気持ちはあったものの、内容的にとて
はじめに 本記事は dely Advent Calendar 2019 の15日目の記事です。 昨日は開発部サーバサイドエンジニアの高橋くんが「Rails6の複数データベースの仕組みと実装時にハマったところ」という記事を書きましたので是非読んでみてください。 tech.dely.jp こんにちは！dely開発部SREの井上です。 本記事ではWEBサイトのパフォーマンスを定期的に計測する仕組みについて紹介をしたいと思います。 実は去年のAdvent Calendarでも同じような記事を書いたのですが、時代背景に沿って計測するツールをsitespeed.ioからLighthouseに変更したので理由も含めて紹介させてください。 基盤の構築においては下記のサービスやツールを利用しています。 AWS CodeBuild S3 Athena Terraform Lighthouse 前置きはいいから
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、**改善施策ってまず何をどうすればいいの？**という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。
Webページの表示を高速化するための無料ツールWebPagetestを使って、「どこに問題があり、どう解決するのか」を調べる方法を解説する。 画像・JavaScript・CSSといったページを構成する要素こそが表示パフォーマンスの要因であり、HTTPリクエストの数やTCP接続・1バイト目までの時間（TTFB）などを調べれば、遅い原因がどこかわかるのだ。 今ではだれもがよく知っていることだが、SEOとユーザー体験の観点から見て、ウェブページの表示速度は非常に重要だ。ページの表示が速いほど検索エンジンによる検索順位も上がるし、ウェブサイトの動作が速ければユーザーが離脱せずにたくさんのページを見て、コンバージョン率も高くなる可能性が上がる。 要するに、賢明なWeb担当者やSEO専門家なら、コンテンツと同様にページ表示速度の最適化についても考慮しなければならない。 ウェブサイトの表示速度（パフォー
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #はじめに Webパフォーマンスはパフォーマンスエンジニアリングの1つの分野 Webパフォーマンス管理は、Webサイトの非機能要求の性能や可用性を扱います。 専門用語では、コンピュータの登場と時期を同じくして登場したパフォーマンスエンジニアリングという分野に属します。 パフォーマンスエンジニアリング パフォーマンスエンジニアリングとは、Wikipediaでは以下のように記載されています。 Performance engineering encompasses the techniques applied during a systems
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
サーバ側にmod_spdyをインストールし、Google Chromeで、HTTP2.0でベースとなるSPDYのデモが行われた「Chrome Tech Talk Night #5」をレポートする。 Webサイト高速化のプロセス自動化と最高のパフォーマンス計測ツール 1月31日、Google 東京オフィスで開催された「Chrome Tech Talk Night #5」の模様をレポートします。Chrome Developer AdvocateのIlya Grigorik（イルヤ・グリゴリック）氏を迎え、SPDY導入方法を含むWebアプリケーションの高速化や、パフォーマンス向上の手法について説明されました。 イベント自体は「Making the Web Fast with PageSpeed」、「Wait, Chrome DevTools can do THAT?」の2部構成でしたが、このレポ
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 メモ書き。社内説得用。「HTTPリクエストを減らすと高速化できるよ！」てのはよく聞くけど、それが「どうしてか」ってのを(読込待機時間まわりで)具体的な数字を出してることが意外と少なかったので。詳しくは参考リンクにGo! Webサイトを分析するWebアプリ PageSpeed Insights WebPagetest 参考資料など Webパフォーマンス最適化のためのコーディング手法, MOL @importを使うべきでない理由, Screw-Axis まずHTTPリクエストがコストが高い理由ですが、まあ同時読込できないからですよね。読込に1秒掛かる画像A,B,Cがあると
Online diagramming tool for collaborating on wireframes, flowcharts, and more
タイトルは煽り入ってますが。 仮に動的ページを生成するのにかかる時間が1秒、そのうちデータベースやmemcached等リモートサーバへの問い合わせ時間を除くいたCPUの処理時間が0.1秒とする。また、ピークのリクエスト処理量は、平均の２倍とする。 そうすると、クアッドコアのアプリケーションサーバで処理できるリクエストは、 4 core * 10 reqs/sec * 86,400 sec/day * 30 day/mon / 2 = 51,840,000 reqs/mon と、約5,000万PV/月を１台で捌けることになる。 CPUが動いている時間は全処理時間の10倍と仮定したわけだから、アプリケーションサーバの最大同時接続数は 4 core * 10 = 40 程度あればいいことになる。実際には、安全係数を２倍かけて 80 とか。リクエストの処理に必要なメモリ量を 100MB とすると、
思わずIEを使用したくなくなってしまう、IE, Firefox, Chrome, Opera, Safariの主要ブラウザの性能を比較した一覧表をSix Revisionsから紹介します。 Performance Comparison of Major Web Browsers 主要ブラウザの性能比較表 比較表は、ブラウザの各種パフォーマンスを比較しており、右にグラフが長いほど性能が良くない、ということになります。 IEがほとんどの項目でぶっちぎってます。 性能を比較したブラウザのバージョンは下記の通りです。 Firefox 3.5 Google Chrome 3.0 Internet Explorer 8.0 Opera 10.00 Safari 4.0.3 グラフだと正確に把握できない場合は、CSVファイルもダウンロードが可能です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
