HTTPヘッダチューニング Etag・Last-Modified | REDBOX Labo
今回は既にCDNを利用している方も、利用していない方も今すぐ出来るHTTPヘッダチューニングをご紹介します HTTPヘッダのお話では、レスポンスヘッダやリクエストヘッダの中に何があり、どういう役割なのか簡単にまとめてみましたが、非常に多くのデータがWEBのやりとりで利用されていることが分かったと思います。 CDN利用時に利用者側が出来るチューニングは、オリジンサーバー側のApacheやNginxなどでどのようなHTTPレスポンスヘッダを付与するのか、しないのかということを決めるヘッダチューニングです。 Last-ModifiedヘッダはレスポンスヘッダのひとつでApacheやNginxなどのWEBサーバー側で適切な設定をすることによって、ブラウザ側にコンテンツの最終更新時刻を送信することができます。 ブラウザ側は、このコンテンツの最終更新時刻を覚えておき次回リクエストした際にリクエストヘッ
CSS Triggers List - What Kind of Changes You Can Make
• Layout • Paint • Composite align-content Changing align-content alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations. Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together. align-items Changi
Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法
転送量を減らしてサイトを高速化しよう Webサイトの高速化に関して、以前の投稿で「Apacheのmod_expiresでファイルタイプごとにキャッシュをコントロールする方法」を解説しました。 今回は同じくApacheのモジュールmod_deflateについて解説します。 mod_deflateとは mod_deflateはコンテンツを圧縮して、転送量を減らすことで高速表示を可能にするモジュールです。転送量が減る反面、CPUの処理は増えるため、ボトルネックがCPUの処理能力の場合は逆にレスポンスが低下します。 そのため導入後のリソースの監視と速度測定が必要になります。ただ、最近の高速なCPUであればどちらかと言えば回線がボトルネックになるため、多くの場合はmod_deflateの導入によって高速化されます。 mod_deflateの書式 このページではmod_deflateの基本的な使い方に
DMM inside
日本アニメ初の快挙！海外アニメ賞を受賞した『スキップとローファー』海外ライセンス部長&プロデューサーが語る、奮闘の舞台裏
Guy Podjarny「HTTP Pipeliningはwebを速くも遅くもしない」 - 以下斜め読んだ内容
Guy's Pod 2012.6.26のブログエントリ Guy's Pod » Blog Archive » HTTP Pipelining – Not So Fast…(Nor Slow!) http pipeliningサポートが普及した でも全然サイト高速化に貢献できてないこと なんで速くなってないのか調べた（サイトの作りが効果を相殺してる） グラフ入りで詳しく書いてるエントリ spdyのベンチマークの姉妹編のようなエントリで、http pipeliningとspdyが持てる力を発揮できてない理由は共通してる、など勉強になった 以下斜め読んだ内容 http pipelinig 昔から知られた最適化テクニック 最近モバイルでもブラウザでも広く使われつつある chrome/fxはデフォルト有効になった http pipeliningで速くなったと期待して軽くテストしてみた 全然速くなくて
最新バージョンのChrome 31とOpera 18、asm.jsとWebGLで高速実行を実現。Unreal Engine 3対応に
最新バージョンのChrome 31とOpera 18、asm.jsとWebGLで高速実行を実現。Unreal Engine 3対応に Mozillaが開発したasm.jsは、JavaScriptを事前最適化コンパイラで徹底的に最適化するとともに、実行時チェックやガベージコレクションなどの実行速度の足を引っ張る処理を止めてしまうなどの手法で、JavaScriptを高速で実行できるようにする仕組みです。 asm.js:コンパイラのための低レベルかつ高度に最適化可能なJavaScriptのサブセット MozillaはFirefoxでasm.jsに対応していますが、GoogleもJavaScriptエンジンの最適化の一環としてasm.jsも高速に実行できるようにすると、5月に行われたイベント「Google I/O」で表明していました。 MozillaのGame Platform Strategis
DNS プリフェッチの制御 ｜HTMLに書くだけでサイト読込が速くなる（かも） - それマグで！
Amazon.co.jpのソースを見ていたら、見慣れないタグを見つけた dns-prefetch タグ <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="http://g-ecx.images-amazon.com"> <link rel="dns-prefetch" href="http://z-ecx.images-amazon.com"> <link rel="dns-prefetch" href="http://ecx.images-amazon.com"> <link rel="dns-prefetch" href="http://completion.amazon.com"> <link rel="dns-prefetch" href="http://cl
ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
spacer.gifとそのDataURI化したやつのリポジトリを作った - inkdesign
17 Feb 2013 1px × 1pxの透明なspacer.gifといえば、大昔はレイアウトにおいて支え棒のような役割で使っていたのを思い出す。今やそうしたレイアウト、その余白はCSSでやればいいわけだが、spacer.gifはそういう用途でないところで地味に使う。 spacer.gifの使いどころ 一例として、今関わっている画像を扱うサービスを例に説明する。画像を並べるページがあるのだが、一定条件で画像を空になる場合がある。この空の状態をつくるために、src属性を空にする必要がある。が、この対応は好ましくない。 その理由は、Nicholas C. Zakas氏の記事で解説されているが、少し古いブラウザでは空のsrc属性があった場合にHTTPリクエストが発生してしまうからだ。 またWebkitでは属性値が空か、src属性そのものが無い場合に、クラッシュしてしまうというようなバグもあった
HTTPリクエストを減らすために【終章】我々には1000msの猶予しか残されていない
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 最終日は、我々フロントエンドデベロッパーに課せられた理想と現実のはざまについて冷静と情熱のあいだらへんで考えていく。まずは下記のブログを読んでもらいたい。 Google ウェブマスター向け公式ブログ: スマートフォンサイトの読み込み速度を改善するために まぁ読まなくてもいいのだが、ここで述べられている重要なことは2つ。 モバイルの平均読み込み時間は7秒 しかし、ユーザーは1秒未満を求めている 平均読み込み時間の7秒とい
HTTP Caching in Ruby with Rails | Heroku Dev Center
Out of the box, Rails 3 provides a simple HTTP caching configuration for static pages and assets. While your application benefits from this setup, specifying appropriate cache headers for all requests, even dynamic ones, can give you an order of magnitude improvement in response times, user experience and resources required to power your application. This article walks through several use cases wh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tsenart/vegeta: HTTP load testing tool and library. It's over 9000!
Parking Page
Yahoo!検索のパフォーマンス向上策全て見せます
GitHub - RazrFalcon/svgcleaner: svgcleaner could help you to clean up your SVG files from the unnecessary data.
http://build-podcast.com/cloudflare/
PageSpeed Module | Google for Developers
https://developers.google.com/web/tools/setup/workspace/setup-devtools
GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド | コリス