はてなブログでSREをやっているid:cohalzです。 2019年12月頃からid:utgwkkやid:onkとともに、はてなブログにおけるキャッシュ周りの改善を行いました。その結果、次のような成果が得られました。 ブログ記事のキャッシュヒット率が、1日平均で8％から58％に向上 アプリケーションサーバの台数を、以前の半数以下に削減 DBに届くリクエスト数が、以前の3分の2まで減少 レスポンスタイムの平均が、以前の8割まで減少 この記事では、実際にどういった改善を行ったのか、その際に気をつけたことや大変だったことを紹介します。 はてなブログがVarnishを導入した経緯と課題 開発合宿をきっかけに問題が明らかになる 進め方をまず考える ホストのメモリをできるだけたくさん利用する メモリを積んだホストでなぜかレイテンシが悪化 キャッシュが分散しないようVaryヘッダを使う デバイス情報を適
脳内キャッシュが全然足りてません✧（・ㅂ・）و こんにちは。クイックSREチームのみっちーです。 今回は、弊社のWebサイトにブラウザキャッシュ設定を実装したときに悩んだ箇所を簡単にまとめてみました。 今回の記事は、こんな人向けです。 そもそも「ブラウザキャッシュ」ってなんだろう？ ブラウザキャッシュは知ってるけど、設定方法がよくわからない。 とりあえず「Webサイトの表示を速くしたい」と思っている。 目次 1. キャッシュとは 2. ブラウザキャッシュの基礎 3. ブラウザキャッシュの設定方法 4. ブラウザキャッシュ設定時のCDNの挙動 1. キャッシュとは 最初に、キャッシュについての説明をします。 キャッシュ プログラム処理結果をディスクやメモリ上に保存し、次回以降に同じ要求が来た場合には計算を省略することで、応答速度の向上を図る仕組みです。 キャッシュと一括りにしても、大きく分け
ブラウザキャッシュとレスポンスヘッダの関係を調べてみた。 調べたブラウザ Firefox 3.5 IE 6 Opera 9.64 Google Chrome 2.0.172.33 レスポンスヘッダ Expires Last-Modified Cache-Control Pragma 結論 以下のレスポンスヘッダを返す。 Expires、Last-Modified、Cache-Control、Pragma 以外のヘッダについては任意。 キャッシュさせたい場合 Cache-Control: private, max-age=有効期間の秒数 条件付GETをさせたい場合 Expires: 過去の時刻 Last-Modified: 過去の時刻 キャッシュさせたくない場合 Cache-Control: no-cache 調査方法 それぞれのブラウザで以下のレスポンスヘッダを返すページを読み込んだときに
@egapoolです。今回初めてISUCON7に参加させていただきました。（チーム名：元pyns） 当日やったこととこかはこちらにまとめています。 ISUCON7に参加して予選突破しませんでした。 – そろそろちゃんとやります 今回のお題の一つ目の壁は、いかに画像ファイル（アバターアイコン）をキャッシュさせてサーバーからデータを返さないようにするかでした。 8時間の大部分をこの対応に費やしましたが解決は出来ませんでした。 原因はきっちり304を返すための基礎知識が足りていなかったことです。 ですのでこれを機に勉強しなおしてみました。 304 (Not Modified) 大前提ですが、304ステータスコードは キャッシュの有効無効の確認付きリクエストに対して、有効である場合に返すステータスコード です。 この場合サーバーはリソースデータ(ペイロード)を送信しません。 すなわち，サーバは、［
最近何かと話題なCDNですが、そもそもCDNってなんだろう・・・どんなことに使えるんだろう？的なことを書いてみようと思います。 一応先に言っておくと、私はCDN業者に所属したことないのであくまでも利用者として見た時の話を書きます。 また、私の考えであり、様々なワークロードがあるなかでこれがすべてではありませんので、こんな考えもあるんだなぁぐらいに思ってもらえると助かります。 そもそもCDNってなんだろうか そもそもCDNはContent Delivery Networkの略であってCache Delivery Networkの略ではありません。 要はコンテンツをクライアントに対して高速・効率的に配信するためのネットワークです。 良くCDNといえばその成り立ちからキャッシュというイメージはありますが、重要な要素の一つではあるもののCDNの全てではありません。 さらに言えばAkamaiのInt
概要 Webフロントのパフォーマンス診断 - Carpe Diem で指摘されたブラウザキャッシュの対応をするため調べてみました。 大きく分けて強いキャッシュと弱いキャッシュの２種類のキャッシュがあります。 強いキャッシュ ブラウザ側でリソースを保持し、期限が切れるまでサーバにHTTPリクエストを発行しません。 なので一度ブラウザにキャッシュされるとサーバ側からハンドリングすることができなくなります。 これを設定する方法は Cache-Controlヘッダー Expiresヘッダー の２つがあります。 Cache-Control: max-age サーバからのレスポンスで以下のようにCache-Controlヘッダーを付けます。 Cache-Control: max-age=3600 このヘッダーが付いたリソースはブラウザ上では強いキャッシュとして残ります。 max-ageは秒数なので、こ
こんな感じ sleep 3 ; echoの結果を最大5秒間キャッシュしている様子。 キャッシュの実装 実装はこのあたりに置いてある。 TTL付きのキャッシュを実装するにあたり、シェルで実現するならファイルに保存しておいて、作成日時はそのファイルのメタ情報を利用すれば楽。 また、やろうと思えば更新日時と作成日時がどちらも取れるので、細かいTTLの実装も可能。 stat -c %Yコマンドで指定したファイルの最終更新日時のepoch秒を取得できる。 それと現在時刻を比べて指定した時間より経過していたら...という処理を書くことでTTLを実装する。 statを使ってファイルの有効期限判定するには以下のようにする。 $ touch -d '1day ago' hoge.txt $ [ $(( $(date +%s) - $(stat -c %Y hoge.txt) )) -gt $((60 * 6
Intro ブラウザはリロード時に、 max-age に満たないキャッシュを持っていても Conditional GET によってキャッシュの Validate (有効性の問い合わせ)を行う。 Cache-Control Extension として提案されている Immutable 拡張は、キャッシュが max-age 内であればリロード時もキャッシュヒットさせる拡張である。 このヘッダの効果と、本サイトへの適用について記す。 Cache-Control Cache-Control に max-age を指定することで、ブラウザにリソースをキャッシュさせることができる。 このキャッシュは max-age の期間内は fresh とみなされ、 fresh であればサーバへの問い合わせなく再利用される。 サーバへの問い合わせ(RTT)が無いため、事実上最速のリソース取得となる。 Reload
YAPC::Asia Hachioji 2016 mid in Shinagawa 2016-07-03 Yusuke Wada a.k.a. yusukebe
ほとんどのブラウザで、通常リロードは Cache-Control: max-age=0、スーパーリロードで Cache-Control: no-cache がリクエストヘッダとして送られてくるみたいなのですが、実際の挙動はともかく意味の違いがよくわかりませんでした。 RFC7234 によると max-age は The "max-age" request directive indicates that the client is unwilling to accept a response whose age is greater than the specified number of seconds. Unless the max-stale request directive is also present, the client is not willing to accept
Intro システムにおいてキャッシュの設計は永遠の課題であり、 Web のパフォーマンスにおいても非常に重要である。 Web では、 HTTP ヘッダを用いてブラウザやプロキシにキャッシュの制御を指定する。 Stale-While-Revalidate ヘッダは、このキャッシュ制御に選択肢を追加する新しい仕様である。 このヘッダの概要と、本サイトへの適用を解説する。 Web におけるキャッシュ キャッシュの種類 まず、ブラウザが持つ従来のキャッシュの機構について整理する。 そもそも、キャッシュを行う意義は大きく二つある。 リソースの取得を高速化する サーバへの負荷を減らす これまでは HTTP ヘッダを用いて、キャッシュを管理させる方法を用いてきた。 Web における、キャッシュの指定には大きく二つの方式がある。 ブラウザはリクエストを発行せず、保持するキャッシュを使用する(Cache-
忌み嫌われるキャッシュたち。 キャッシュはどうやら、世間では嫌われ者のようです。 ScrenCaptured_2016-03-05_0.54.33 どうして、そんなにキャッシュされるのがイヤなんだろうか。 そもそもキャッシュってなんだっけ？ キャッシュとは、更新されていないコンテンツ（画像、CSS、JS、HTML、DNS結果など）を何度も何度も取得行かずに済むように、クライアントPC側で保存し再利用する仕組み。 つまり、転送量の節約。無駄な転送を控える。非常にエコな仕組みであります。 HTTPのエコ。HTTPはエコなプロトコルだったはず。 3つのR です。 Reduce Reuse Remix 。複数のファイルをそれぞれ、別途管理して１つのページとして構成(Remix)する仕組みです。 ブラウザのキャッシュを利用するメリット 通信料の節約、画面表示の高速化、戻るボタン対応など。 ブラウザは
Leverage Browser Caching Stay organized with collections Save and categorize content based on your preferences. This rule triggers when PageSpeed Insights detects that the response from your server does not include caching headers or if the resources are specified to be cached for only a short time. Overview Fetching resources over the network is both slow and expensive: the download may require m
古い書籍に掲載されたPHP記述の掲示板ソフトを動かしていると、ログアウト処理がうまく動作していないことに気がつきました。チェックの方法ですが、ログアウト処理の脆弱性検査の簡単なものは、「安全なウェブサイトの作り方」別冊の「ウェブ健康診断仕様」に記載されています。 (J)認証 ログアウト機能はあるか、適切に実装されているか ログアウト機能がない、あるいはログアウト後「戻る」ボタンでセッションを再開できる場合 この仕様書にある通り、『ログアウト後「戻る」ボタンでセッションを再開できる』状態でした。 おそらくセッション破棄がきちんと書かれていないのだろうと思いログアウト部分のソースを見ると、以下の様な処理内容でした（オリジナルからはリライトしています）。 <?php // logout.php require_once('common.php'); // 共通の設定・処理 session_sta
How the HTTP Cache works All HTTP requests that the browser makes are first routed to the browser cache to check whether there is a valid cached response that can be used to fulfill the request. If there's a match, the response is read from the cache, which eliminates both the network latency and the data costs that the transfer incurs. The HTTP Cache's behavior is controlled by a combination of r
Zsh では、たいていのものは補完できるのだが、場合によって補完が行われるまでに時間が掛かるという問題に遭遇する。たとえば補完候補リストを生成するのに、ネットワークを通じてリモートのリソースにアクセスする場合など、コストのかかる処理が必要なときだ。 補完の重要な目的のひとつはコマンドライン編集を加速させることだが、補完自体に時間が掛かって編集が待たされてしまっては本末転倒である。そこで Zsh には、コストのかかる補完データをキャッシングして、その後の補完を高速に行うための機能が用意されている。今回は、私が補完スクリプトを実装する際に、キャッシュ機能を利用する必要が生じた実際例に基づいて、その使い方と得られた知見を説明したい。 実際に使った例 キャッシュ機能を利用する必要が生じたのは、[jhbuild] link-jhbuild コマンド用の[補完スクリプト] link-jhbuild-c
2014年03月14日20:00 カテゴリTipsCode Tips - 静的リソースのURIに?をつけるべからず Webを支える技術 HTTP、URI、HTML、そしてREST 山本陽平 であればなおのことこの実装はNG。 ブラウザのキャッシュを利用できれば、余分なリクエストを減らすことができます。はてなブログでは、なるべく長い間ブラウザにキャッシュを保存するために、JavaScriptなどの一部の種類のファイルのレスポンスに、以下のようなヘッダを指定しています。 はてなブログにおけるページ表示速度改善の取り組みについて - Hatena Developer BlogはてなブログではJavaScriptを配信する際には、上記のURLのように、?よりあとの部分にabc078624b2a746c618156847827166bのようなバージョンIDを付与しています。JavaScriptが変更
mod_cahceで画像をキャッシュしてる場合は画像に"Vary: User-Agent"つけないようにしましょうという話 はい 外部ストレージで画像を管理してて、表示時に毎回その外部ストレージに取りにいかなくて済むようにフロント側でキャッシュしとくというのはよくある話(?)だと思います。 例えばapacheの設定で RewriteEngine on RewriteRule ^/images/(.+)$ http://external.storage.dameninngenn.com/images/$1 [P,L] <IfModule mod_cache.c> CacheRoot /dev/shm/mod_cache CacheEnable disk /images # ... </IfModule>みたいにしておくと /images/hoge.jpg にリクエストきた場合キャッシュされて
今日はちょっと呪文的なお話。 こんな構成になっているWebサーバがあります。 Apache(1)->PlonePloneが返してくるページの一部がちょっと複雑でレスポンスが悪いのでApacheとPloneの間にSquidをかまして、その一部のページだけをキャッシュしてやることにしました。 Apache(1)->Squid->Ploneところが全然キャッシュしてくれません。Squidのログを参照するとTCP_MISS/200ばかりを返してくる。debug_optionを最高レベルにして丹念にしらべるとどうもキャッシュストアはしているけれども次回のリクエストでキャッシュから取り出してくれないみたい。 レスポンスヘッダはこんな。 Cache-Control:private Content-Encoding:gzip Content-Language:ja Content-Length:6904
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く