パラレルダウンロードについて、更にもうひとつ。今度は、JsやCssなどのテキスト系外部ファイルだけでなく、画像なども含めた全ての外部ファイルに関する話題です。
今、皆さんが管理しているページは、画像やFlashなども含めた「外部ファイル」を幾つくらい必要としているでしょうか？
私が今、チューニングを求められているページは、1ページ表示しようとしただけで、もろもろ含めて150以上のファイルをダウンロードしてしまいます。
当然、css spriteなどでファイル数そのものを減らすことを考えなければいけませんが、それでも限界がある数です。
なるべく多くのファイルを、同時並行でダウンロードしてきて欲しい。こんな場合に考えなければいけないのが、ホスト毎に貼れるセッションの数です。
Continue reading…
なかなか更新する時間がとれないですが、今回は外部ファイル取り込み時間の圧縮の続きで、パラレルダウンロードに焦点をあてます。
JsやCssなどの外部ファイルは、ブラウザによりますがパラレルに平行してダウンロードすることが可能です。1つより2つ、2つよりも更に多くのファイルを同時にダウンロードさせることは、トータルのRTT軽減に直接役立ちます。
しかし記述方法によっては、パラレルダウンロードが全く行われなくなってしまうこともあります。
ダウンロードジョブを効果的に並べて、ページの表示速度を向上させる方法を見ていきましょう。
Continue reading…
実は以前に別の場所でも書いたのですが、今回Google Page Speedの方でも少しだけ触れられていたので、改めてまとめ。
自分でも経験があることなのですが、開発をやっているとどうしても、構造をモジュール化して複数のファイルに分割して管理したくなります。
StyleSheetにおいても同様で、プレゼンテーション層のコンポーネントにあわせてCSSを用意し、ページ構成にあわせて取り込むようなことをやりたくなるでしょう。
しかしその際、@import構文を使うのはパフォーマンスと挙動の両方に有害である可能性が高いと、「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の著者としても知られるSteve Souders氏が警鐘を鳴らしています。
Continue reading…
前回のブラウザキャッシュの最適化に引き続き、今回は外部ファイルの取り込み時間の圧縮をやってみましょう。
最近立ち上げたサイトはこの辺の対応もしっかりしているのですが、ちょっと昔に作った管理サイトを見てみると、上位に要対応とされたのが実はこの2つ。
CSSやJsなど、ページがリッチになっていくにつれて取り込む外部ファイルも増えていきます。これらを小さくまとめて転送量を減らす工夫をすることは、ちょうどバイキングで何度も取りに行くよりも、一度に山盛りに盛ってきた方が効率が良いようなものです。
（そもそも、量を減らすことも考えなければいけませんが）
Continue reading…
非常に高速なWebサーバとして注目を集めるlighttpdですが、基本的なチューニングも必要です。
ここでは、「Google Page Speedでサイトを高速化」への補足としてlightyでのExpireヘッダやコンテンツのgzip圧縮の設定方法を書いておきます。
Continue reading…
つい先日Googleから公開されたPage Speedは、彼らが社内で使っていたページを高速化するためのチェックツールです。Yahoo! YSlowのGoogle版と思えば良いのだと思います。
これらはあくまで「チェック」ツールなので、診断結果を自分で最適化しなければなりません。
YSlowでも「へー、知らなかった」と思うチェックポイントが幾つかありましたが、今回も考えていなかったようなポイント、知っていたものの徹底していなかった点などがあったので、そういった部分を中心に、自分の経験も踏まえてメモ。
まずは基本の「キ」である、ブラウザキャッシュについて。
Continue reading…
PHPでの関数への値渡し/参照渡しは、C言語などのそれと基本的には同様ですが、若干の高級言語らしいトリックが含まれています。
少し前ですが、新たにジョインしたメンバーT君(PHPは初心者)が、レスポンスを気にして参照渡しを多用してくれていたので、ちょっと説明。
T君は、関数に大きな配列を渡す際に参照渡しにしてくれていました。
メモリコピーのオーバーヘッドを無くすためです。
function get_value(array &$a){
return $a[0];
}
$a = get_big_array();
$v = get_value($a);
こういった意識・心がけは非常に良いことなのですが、実はPHPにおいて、このケースは値渡しでも参照渡しでも同じ挙動をします。
確認してみましょう。
Continue reading…
先週、とりあえず開発環境を整えました。早速…でもないですが、何か作ってみましょう。
最初の一歩なので、カンタンなものから。
チュートリアルとAPIリファレンスを見ながら、以前用意した画像がスクリューするボタンを付けてみます。
まずはアドレスバーに about:jetpack と入力して”I am Jetpack.”のページを表示します。
ここの”Develop”タブで開発するのが、手っ取り早い。
ページ中ほどの黒い矩形をクリックすると、Bespinのように編集可能な状態になります。
ここに、次のようなコードを入れてみましょう。
jetpack.statusBar.append({
html: 'Screw!',
width: 50
});
そして”try out this code”をクリック（以下、実行時には常にこの手順）
ステータスバーに”Screw!”と表示されたかと。
Continue reading…
というわけで、早速Jetpack Featureの開発環境を作ってみます。
目標としては、次のような感じ。
mozilla labsから公開された、jQueryでFirefoxのExtensionを作れる拡張機能 “Jetpack” をいじってみる。
今まで、ちょっとしたExtensionを作るのもxulでやるのは良いとして、debugが非常にやりにくいのが難点でした。
その点、Jetpackは
ということで、ちょっと覚えておこうという気に。
まずは開発準備に環境を整えましょう。
Continue reading…
Naohiko MORI / nao58
ITエンジニア。最近はめっきりWeb系で、言語はPHP/Javascriptがメインに。野球はドラゴンズ、音楽はHR/HM。ラグビーはオールブラックス。読むなら筒井康隆。
More
Enter the query to search and hit enter.
