Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
Webpagetestから始める継続的パフォーマンス改善
autoscale: true Webpagetestから始める継続的 パフォーマンス改善 ページロードタイム編 :hourglass: 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Create: textlint, Almin アジェンダ パフォーマンス改善は指標を決めて行わないと迷子になる パフォーマンス改善を行うには継続的な計測を行う 今回はページロードについて、ランタイムは範囲外 パフォーマンス改善のアプローチ 継続的なパフォーマンス計測とリグレッションの検知 ^ 目的はパフォーマンス改善には計測が必要という事実を知ること ^ パフォーマンス計測は継続的に行う必要がある ^ パフォーマンス改善は何を目的、指標にして改善するかを決めないと迷子になる ^ 目的をもって継続的にパフォーマンス改善を行い
新機能 – Amazon Elastic File System (EFS) のプロビジョンドスループット | Amazon Web Services
Amazon Web Services ブログ 新機能 – Amazon Elastic File System (EFS) のプロビジョンドスループット Amazon Elastic File System を利用すると、何百、何千もの Amazon Elastic Compute Cloud (EC2) サーバーやオンプレミスのリソースから超並列アクセスが可能なペタバイト規模のファイルシステムを作成でき、アプリケーションを中断させることなくオンデマンドでスケールできるようになります。内部的には、スケーラブルで、高い耐久性を備えた、高可用性があるファイルシステムを提供するために、ストレージは複数のアベイラビリティーゾーンと冗長ストレージサービスをまたいで分散されます。スペースの割り当ておよび請求は従量制であるため、実際の使用量に比例したコストをキープしながら、必要な分だけ消費することがで
エンジニアとして成功するための大事なことトップ3 - Qiita
Youtubeの要約です。 先日すごく感銘を受けた動画を見ましたので、シェアさせてください。 もっと短く要約しようと思ったのですが、ほとんど和訳になってました。ところどころ省略しているところもありますので、全文訳で無いことは注意です。 3 top qualities for a Software Engineer to be successful Techlead Google Youtube Patrick Shyu 【導入部分】 手を早く動かす事はとても大事。何も意味がなくても、キーボードを早く叩いたり、マウスを動かしたり、「早く動く真似事」をするだけでも体が早く動く事に慣れるので、普段からやっておくと良い。 1 【インパクト】 エンジニアにとって重要なのは、単にとても多くのバグを無くすだけでも、リファクタリングするだけでも、フレームワークを作るだけではないです。 重要なのはポジティブ
超速! Webページ速度改善ガイドの出版に寄せて
超速! Webページ速度改善ガイドの出版に寄せて 事前に各所で告知していた通り、この度 超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる という共著の書籍が、技術評論社より出版されます。名前の通り Web サイトを高速化する知識を得るための本です。 本書の概要 技術評論社の Web サイトの通りですが、目次は次のようになってます。 まず1章で Web パフォーマンスとはなんなのかを、ビジネスへの影響やユーザー環境の多岐化、高度化する Web 技術などの観点で解説します。2章以降では、Web パフォーマンスをネットワーク、レンダリング、スクリプトといった技術要素に分解し、それぞれの基礎知識を抑えつつケーススタディを学んでいきます。また、8章では画像全般（画像フォーマット、最適化方法、レスポンシブなロードなど）について、9章ではネットワーク周辺の新たな技術（Servic
WebAssemblyはなぜ速いのか | POSTD
本記事はWebAssemblyに関するシリーズの第5回目で、今回のテーマはWebAssemblyが高速な理由です。前の記事をお読みでない方は、 初めから目を通される (訳注:原文リンク)ことをお勧めします。 前回の記事 (訳注:原文リンク)では、プログラミングに WebAssembly あるいはJavaScriptを使うかは二者択一の選択ではないことを説明しました。私たちは、WebAssemblyのみのコードベースを書く開発者が膨大な数になるとは思っていません。 ですので、アプリケーションにWebAssemblyとJavaScriptのどちらを使うか選ぶ必要はありません。しかし私たちとしては、開発者がJavaScriptコードの一部をWebAssemblyに置き換えることを期待しています。 例えば、Reactで開発しているチームは、リコンサイラコード（言い換えれば仮想DOM）をWebAss
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
Webパフォーマンス管理の基本 1 - Qiita
はじめに Webパフォーマンスはパフォーマンスエンジニアリングの1つの分野 Webパフォーマンス管理は、Webサイトの非機能要求の性能や可用性を扱います。 専門用語では、コンピュータの登場と時期を同じくして登場したパフォーマンスエンジニアリングという分野に属します。 パフォーマンスエンジニアリング パフォーマンスエンジニアリングとは、Wikipediaでは以下のように記載されています。 Performance engineering encompasses the techniques applied during a systems development life cycle to ensure the non-functional requirements for performance (such as throughput, latency, or memory usage) w
「Java パフォーマンス」感想 - unnamed
本書の翻訳者の一人である@cero_tより献本頂きました、ありがとうございます。というわけで一週間かけて読んでみた。 www.amazon.co.jp 今現在 Java で開発している人、特に運用者や試験者は間違いなく買っておくべき本です。Javaに限らない一般的なパフォーマンスチューニングの考え方・観点から、Java アプリケーションにおいてボトルネックになりやすい GC や JIT の詳細な確認方法からチューニング方法が解説されている。特にすごいのが Java の世界のみならず、OS の世界まで触れている点。流石に OS の世界はここに書かれているのが全てではないけれど、Java アプリに関わる部分で問題になりやすい点は割と触れている。 JDK8 にも対応しており、今現在手に入る情報としては一番頼もしいと思う。4000 円程度でこの知識量が手に入るなら非常に安い。 お勧めの読み方 個人
nginx最大パフォーマンスを出すための基本設定 | Node.js技術
解説 worker_processes auto; - Nginx本体のプロセス数、autoにしてnginx内部判定に任せるのは賢明 worker_rlimit_nofile 100000; - workerプロセスが最大に開けるファイル数の制限。このように設定したら、ulimit -a以上のファイル数を処理できるようになり、too many open files問題を回避できる worker_connections 2048; - 一つのworkerプロセグが開ける最大コネクション数 multi_accept on; - できるだけクライアントからのリクエストを受け取る use epoll; - Linuxカーネル2.6以上の場合はepoll、BSDの場合kqueue server_tokens off; - セキュリティ対策です、エラー画面のnginxバージョン番号を非表示 sendf
Dockerは速いのか？Dockerのパフォーマンスについて重要なことは何か？ - ゆううきブログ
だいぶ前からDocker（Linuxコンテナ）のパフォーマンスについて、速いことは速いだろうけどどの程度速いのか、もし遅いことがあるなら何がパフォーマンスにとって重要なのか（AUFSが遅いとかそういうの）が気になっていたので、今回は で紹介されていた Docker のパフォーマンス検証に関する IBM の Research Report を読んだ。Report の内容をベースに、Docker のパフォーマンスの勘所などをまとめてみた。 Report のタイトルは An Updated Performance Comparison of Virtual Machines and Linux Containers 。 GitHub にベンチマークコードと実験データが置いてあってちゃんとしてる。 前提 まず、VMとコンテナの歴史を振り返るのに知らぬはエンジニアの恥。今さら聞けない【コンテナ/仮想
Facebook: iOSアプリのアーキテクチャ - ワザノバ | wazanova
https://www.youtube.com/watch?v=XhXC4SKOGfQ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 39分前 FacebookのiOSチーム、Adam ErnstとAri Grantによる@Sacle 2014での講演。データモデルとビューレイヤの改善の取組みについて紹介してくれてます。 1) データモデル 背景 2年前からHTML5からネイティブに切り替えて一旦大きく改善したが、その後機能を追加するたびにアプリのパフォーマンスが悪化。 ネイティブに移行後、オブジェクトのキャッシュレイヤとしてiOSのCore Dataを使ったのが失敗であった。 Core Dataの役割は「整合性を含むオブジェクトグラフ管理」 Facebook iOSアプリの場合、サーバ側を正のデータとするが、
第 5 章 オペレーティングシステムのチューニング (Sun Java System Application Server Enterprise Edition 8.2 パフォーマンスチューニングガイド)
接続ハッシュテーブルのサイジング 接続ハッシュテーブルには、アクティブな TCP 接続に関するすべての情報が保持されます。接続ハッシュテーブルのサイズを取得するには、次のコマンドを使用します。 ndd -get /dev/tcp tcp_conn_hash この値によって接続数が制限されることはありませんが、接続のハッシュにかかる時間が長くなることがあります。デフォルトサイズは 512 です。 ルックアップを効率化するには、サーバーで予想される同時 TCP 接続数の半分の値を設定します。この値は、/etc/system でのみ設定可能で、起動時に有効になります。 現在の TCP 接続数を取得するには、次のコマンドを使用します。 netstat -nP tcp|wc -l ファイル記述子の設定 Solaris では、ulimit プロパティーによる開けるファイルの最大数の設定は、サポートでき
ハイパフォーマンス ブラウザネットワーキング、読むべき本だった - terurouメモ
Twitterで「なんかやばそうな本が出るぞ！！！」みたいな事を言っていたら、それが偶然拾われて、献本して頂く流れになりました。オライリーさん、ありがとうございます。 とりあえずざっと全体を流し読みした（と言っても3時間弱は読んだ）ので、書評っぽいことを書いておく。 ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化posted with amazlet at 14.05.10Ilya Grigorik オライリージャパン 売り上げランキング: 4,747 Amazon.co.jpで詳細を見る 読むべき人間 以下に該当する人間に対しては必読に値する本だと思う。 HTTPを扱うアプリケーション*1のアーキテクチャを設計する人間 Webサーバ等のHTTPに関連するインフラを担当する人間 HTTP 2.0、WebSocket、Server-S
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Google I/O 2012発 JavaScript高速化Tips集の日本語訳
既に「Google I/O 2012で公開されたJavaScript高速化Tips集 | IDEA*IDEA」や「JavaScriptパフォーマンスを上げるシンプルな13の最適化 | Act as Professional – hiroki.jp by HIROCASTER」で紹介されて話題になっていたJavaScriptの高速化TIPSがhosikitiさんによって和訳されています。 リストでまとめられたリストを日本語で見たいという要望に見事に応えてくれていました！ 1.コンストラクタ関数内ですべてのオブジェクトメンバを初期化する 2.常に同じ順番でオブジェクトメンバを初期化する 3.Numeric型(31bitで表現される符号付き整数)を出来るだけ使う 4.0から始まる連続した値を配列のキーとして使う 5.巨大な配列(64000個以上の要素を持つもの)は予め確保せず、必要になったら随時
今こそ見直すApacheの設定 - blog.nomadscafe.jp
nginxやvarnishなどがアツいですが、Apacheもまだまだ実績や安定性から採用されていると思います。ここではデフォルトとは異なる値に変更するサーバ設定を中心に、パフォーマンス改善、安全性向上のためのApacheの設定を紹介します。 mpmの確認 > /path/to/bin/httpd -V Server version: Apache/2.2.19 (Unix) Server built: Jun 23 2011 17:13:13 Server's Module Magic Number: 20051115:28 Server loaded: APR 1.4.5, APR-Util 1.3.12 Compiled using: APR 1.4.5, APR-Util 1.3.12 Architecture: 64-bit Server MPM: Worker PreforkやW
ついに出た！Chrome版「Page Speed」の使い方
2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか？ 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブパフォーマンスの基礎とこれから
