AbemaTVのランタイムパフォーマンスのAudit - 1000ch.net
2016.05.17AbemaTVのランタイムパフォーマンスのAudit最近業務で、巷で話題のAbemaTVのパフォーマンス改善をしている。個別具体性が高いが調査改善の雰囲気を感じ取ってもらえればそれで良いかと思い、記事にした。 AbemaTVのフロントエンドの構成話の前提となるAbemaTVのフロントエンドの構成は次の通りで、まさに流行りのといった感じ。 facebook/reactfacebook/immutable-jsReactive-Extensions/RxJSreactjs/react-routercss-modules/css-modulesビルド周りはbabelとwebpack、あとはlintツールがちょこちょこ入ったりしている。この改善の話と関係してくるのは、ReactとImmutableJSとRxJSだけ。 番組再生画面のコメント開閉が重い今回ケーススタディとして挙げ
【翻訳】Introduction to WebP - 1000ch.net
【翻訳】Introduction to WebP ※この記事はMediumに投稿したIntroduction to WebPの日本語訳です。 以前述べたように、画像はWebにおけるネットワーク帯域の約60%~70%を占めています。これは、画像がWebパフォーマンスにおいて最も重要な因子の1つであることを意味します。そんな画像の中でも、WebPは他のフォーマットに比べて幾つかの点において優っています。 WebPの特徴 可逆圧縮と非可逆圧縮 PNGやGIFは可逆圧縮をサポートし、JPEGは非可逆圧縮をサポートしますが、WebPは可逆圧縮と非可逆圧縮の両方を利用することが出来ます。更に特筆すべきは、その圧縮率が他のどのフォーマットよりも高いということです。 可逆圧縮のWebPは、PNGに比べて26%程サイズが小さくなります。非可逆圧縮のWebPは、同等画質のJPEGに比べて25%~34$程サイズ
【翻訳】We should optimize images - 1000ch.net
【翻訳】We should optimize images ※この記事はMediumに投稿したWe should optimize imagesの日本語訳です。 Steve SoudersはHigh Performance Web Siteで、次のように述べています。 エンドユーザーへのレスポンスに費やされる時間の80-90%はフロントエンド において発生している。まずはフロントエンドを最適化することだ。 Webサイトのパフォーマンスの多くはフロントエンドに起因するものです。つまりWebサイトを速くするためには、フロントエンドを最適化しなければなりません。例えば、最適化には次のような要因があります。 ラウンドトリップタイムを最小化する リクエストのオーバーヘッドを最小化する ペイロードサイズを最小化する ブラウザのレンダリング処理を最適化する その他いろいろ… 中でもペイロードサイズの最小
WebPonize
WebPonize 最近はSwiftを書いている。 作っているのはMacアプリでWebPonizeというもの。名前で察しの人もいるかもしれないが、PNGとかJPEGといったフォーマットの画像をアプリにドラッグアンドドロップしてWebPに変換する、というシンプルなアプリ。Swiftの練習できればiOSでも良かったんだけど、こんなのあったら便利だなという妄想をしているとどうしてもディベロッパー向けのツールになる。 WebPonizeという命名については、名詞に~izeという接尾語をつけることで「〜らしくなる」のような形容詞になることをもじってWebP + nizeに。尚且つ、同僚のアメリカ人に発音を考慮してもらってWebPonizeになった。WebPはbを発音しないので、weapon（武器・兵器） + izeになることを想定。 見ての通り、ImageOptimの見た目をパクって踏襲している。
HTTP1.1とSPDYとHTTP2
HTTP1.1とSPDYとHTTP2 Webの通信プロトコルとして普及するHTTPも、HTTP2に向かって大きな変貌を遂げようとしている。最初期のHTTP0.9からどういう変化をたどってきたのか気になったので、調べたメモ。ネットワーク・HTTPの予備知識にWebにおけるネットワーク通信もどうぞ。 各プロトコルの特徴 HTTP0.9からHTTP1.0になった辺は割愛。ログイン状態みたいに状態を保持する機構のためにCookieが登場したり、80番ポートがデフォルトになったりしたのはこの辺りらしい。 HTTP1.0からHTTP1.1にかけてとそれ以降は、急速に進化し肥大化してきたWebコンテンツを支えるための変遷。データは大きくなるし、リクエストも増加の一途を辿ってきたのでネットワークにも進化が要求されている。 HTTP1.1 IPアドレスだけでなくホスト名で通信相手を特定できるようになった（H
Polymerについての所感 - 1000ch.net
2015.01.30Polymerについての所感Polymerを使ったWeb Componentsに<twitter-button>、<facebook-button>、<gplus-one>・<gplus-follow>がある。Polymerのバージョンが古かったのでプルリクエストを送ったんだけど、修正しながら考えてたことを書いてみた。 Polymerに依存するWeb ComponentsPolymerで作ったWeb Componentsは、jQueryとそのプラグインの関係に似てると思ってる。それが配布されることを考えてみよう。 そのコンポーネントのバージョンはPolymerのバージョンに依存することは、使いたいコンポーネントが依存するPolymerが複数存在してしまう可能性を示唆している。Polymerがまだベータ版で後方互換性のない変更が起こる可能性を考えると、依存バージョンがてん
VagrantでCentOSの仮想環境を作ってAnsibleで遊ぶ
VagrantでCentOSの仮想環境を作ってAnsibleで遊ぶ Vagrantは今更説明するまでもないけど、仮想環境の作成や起動・破棄を自動化したりするツール。VagrantはChefやAnsibleといったようなプロビジョニングツールとも連携可能なのでそれも少し。 Vagrantで仮想環境を作る 自身には仮想化する機能を備えておらず、仮想化ソフトウェアとしてVirtualBoxやVMWareなどを使う。今回はVagrant + VirtualBoxでCentOSの仮想環境を作ってみる。 以下のサイトに環境ごとのインストーラがあるので、ダウンロードしてインストールする。 Vagrant Oracle VM VirtualBox CentOS 6のBoxファイルをダウンロード 今度はどのOSで仮想化するか決める。VagrantではOSイメージをBoxと呼ばれる形式で管理する。有志で配布さ
GitHub Pagesに設定しているカスタムドメインをHTTPS対応させる
GitHub Pagesに設定しているカスタムドメインをHTTPS対応させる このブログはGitHub Pagesで運用している。ホスト名を書いたCNAMEファイルをドキュメントルートに配置してドメインを1000ch.netとしているが、これだと証明書がないせいでGitHub Pagesが対応しているHTTPSを利用できない。つまり、 http://1000ch.github.io → http://1000ch.net https://1000ch.github.io → http://1000ch.net となり、 (http://1000ch.github.io → https://1000ch.net) https://1000ch.github.io → https://1000ch.net とならない。 なぜHTTPSにしたいか 話はGoogle I/O 2014に参加した時に
Service Workerに関する仕様とか機能とか
2014.12.29Service Workerに関する仕様とか機能とか今巷で流行りのService Workerについて調べ物してたので、まとめたメモ。 Service Workerが解決してくれることService WorkerはHTML・CSS・JS・画像等などのリソースを、JavaScriptのAPIから命令的にコントロールすることを実現する。Webページのパフォーマンスに関する指標としてネットワークを介して得るリソースをキャッシュさせたりすることが効果的であることは今更改めて挙げないが、Service Workerによって保持されたリソースは、オフライン状態でも返却することが可能という凄さを持っている。つまり、更新性の低いコンテンツであればオフラインでも閲覧させることが可能ということ。 更新性のあるコンテンツでも、回線が不安定な時はローカルに変更を保持して、サーバーに対してデータ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
