[Web] Google Page Speedでサイトを高速化(3)

2009 年 6 月 11 日

Pararellなかなか更新する時間がとれないですが、今回は外部ファイル取り込み時間の圧縮の続きで、パラレルダウンロードに焦点をあてます。

JsやCssなどの外部ファイルは、ブラウザによりますがパラレルに平行してダウンロードすることが可能です。1つより2つ、2つよりも更に多くのファイルを同時にダウンロードさせることは、トータルのRTT軽減に直接役立ちます。
しかし記述方法によっては、パラレルダウンロードが全く行われなくなってしまうこともあります。
ダウンロードジョブを効果的に並べて、ページの表示速度を向上させる方法を見ていきましょう。
continue reading… «[Web] Google Page Speedでサイトを高速化(3)»

Tags: Posted in WebLeave a Comment

[css] @importを使うべきでない理由

2009 年 6 月 7 日

Stop Import実は以前に別の場所でも書いたのですが、今回Google Page Speedの方でも少しだけ触れられていたので、改めてまとめ。

自分でも経験があることなのですが、開発をやっているとどうしても、構造をモジュール化して複数のファイルに分割して管理したくなります。
StyleSheetにおいても同様で、プレゼンテーション層のコンポーネントにあわせてCSSを用意し、ページ構成にあわせて取り込むようなことをやりたくなるでしょう。

しかしその際、@import構文を使うのはパフォーマンスと挙動の両方に有害である可能性が高いと、「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の著者としても知られるSteve Souders氏が警鐘を鳴らしています。
continue reading… «[css] @importを使うべきでない理由»

Tags: Posted in Web11 Comments

[Web] Google Page Speedでサイトを高速化(2)

Serve前回のブラウザキャッシュの最適化に引き続き、今回は外部ファイルの取り込み時間の圧縮をやってみましょう。

最近立ち上げたサイトはこの辺の対応もしっかりしているのですが、ちょっと昔に作った管理サイトを見てみると、上位に要対応とされたのが実はこの2つ。

CSSやJsなど、ページがリッチになっていくにつれて取り込む外部ファイルも増えていきます。これらを小さくまとめて転送量を減らす工夫をすることは、ちょうどバイキングで何度も取りに行くよりも、一度に山盛りに盛ってきた方が効率が良いようなものです。
(そもそも、量を減らすことも考えなければいけませんが)
continue reading… «[Web] Google Page Speedでサイトを高速化(2)»

Tags:,, Posted in Web1 Comment

[lighttpd] ExpireとCompressでサイトを高速化

2009 年 6 月 6 日

Speed of Light非常に高速なWebサーバとして注目を集めるlighttpdですが、基本的なチューニングも必要です。

ここでは、「Google Page Speedでサイトを高速化」への補足としてlightyでのExpireヘッダやコンテンツのgzip圧縮の設定方法を書いておきます。
continue reading… «[lighttpd] ExpireとCompressでサイトを高速化»

Tags: Posted in lighttpd1 Comment

[Web] Google Page Speedでサイトを高速化(1)

つい先日Googleから公開されたPage Speedは、彼らが社内で使っていたページを高速化するためのチェックツールです。Yahoo! YSlowのGoogle版と思えば良いのだと思います。

これらはあくまで「チェック」ツールなので、診断結果を自分で最適化しなければなりません。
YSlowでも「へー、知らなかった」と思うチェックポイントが幾つかありましたが、今回も考えていなかったようなポイント、知っていたものの徹底していなかった点などがあったので、そういった部分を中心に、自分の経験も踏まえてメモ。

まずは基本の「キ」である、ブラウザキャッシュについて。
continue reading… «[Web] Google Page Speedでサイトを高速化(1)»

Tags: Posted in Web1 Comment

[PHP] 配列やオブジェクトの値渡しと参照渡し

2009 年 6 月 5 日

PHPでの関数への値渡し/参照渡しは、C言語などのそれと基本的には同様ですが、若干の高級言語らしいトリックが含まれています。
少し前ですが、新たにジョインしたメンバーT君(PHPは初心者)が、レスポンスを気にして参照渡しを多用してくれていたので、ちょっと説明。

値渡しでも、ポインタが渡される

T君は、関数に大きな配列を渡す際に参照渡しにしてくれていました。
メモリコピーのオーバーヘッドを無くすためです。

function get_value(array &$a){
  return $a[0];
}
$a = get_big_array();
$v = get_value($a);

こういった意識・心がけは非常に良いことなのですが、実はPHPにおいて、このケースは値渡しでも参照渡しでも同じ挙動をします。
確認してみましょう。
continue reading… «[PHP] 配列やオブジェクトの値渡しと参照渡し»

Tags:, Posted in PHPLeave a Comment

[Jetpack] Screw!ボタンをつけてみる

2009 年 5 月 31 日

先週、とりあえず開発環境を整えました。早速…でもないですが、何か作ってみましょう。

最初の一歩なので、カンタンなものから。
チュートリアルAPIリファレンスを見ながら、以前用意した画像がスクリューするボタンを付けてみます。

とりあえず、ボタンを表示

まずはアドレスバーに about:jetpack と入力して”I am Jetpack.”のページを表示します。
ここの”Develop”タブで開発するのが、手っ取り早い。
ページ中ほどの黒い矩形をクリックすると、Bespinのように編集可能な状態になります。
ここに、次のようなコードを入れてみましょう。

jetpack.statusBar.append({
  html: 'Screw!',
  width: 50
});

そして”try out this code”をクリック(以下、実行時には常にこの手順)
ステータスバーに”Screw!”と表示されたかと。
continue reading… «[Jetpack] Screw!ボタンをつけてみる»

Tags:,, Posted in JetpackLeave a Comment

[Jetpack] 開発環境構築

2009 年 5 月 24 日

legoというわけで、早速Jetpack Featureの開発環境を作ってみます。

目標としては、次のような感じ。

  • 既存のFirefox 3.0系は、そのまま使えるように残す
  • それとは別に、Firefox 3.5 Betaをインストールする
  • Firebug 1.4 Alphaも入れる

continue reading… «[Jetpack] 開発環境構築»

Tags: Posted in JetpackLeave a Comment

[Jetpack] インストールと開発環境構築準備

mozilla labsから公開された、jQueryでFirefoxのExtensionを作れる拡張機能 “Jetpack” をいじってみる。
Jetpack
今まで、ちょっとしたExtensionを作るのもxulでやるのは良いとして、debugが非常にやりにくいのが難点でした。
その点、Jetpackは

  • 書きなれたJavascript+jQueryで記述できる
  • インラインで実行確認できるツールがある
  • Firebugとの組み合わせでデバッグしやすい

ということで、ちょっと覚えておこうという気に。
まずは開発準備に環境を整えましょう。
continue reading… «[Jetpack] インストールと開発環境構築準備»

Tags:,, Posted in JetpackLeave a Comment

[PHP] bitの異なるOS間でのserializedデータ交換

2009 年 5 月 22 日

例えば64bit OS上で、あるデータを serialize します。
次に32bit OSでこの値を取得して unserialize した場合のお話。
レアなケースとは思いますが、それにハマってしまったので一応共有。

現象

64bit OSから、例えば次のようなコードで、配列をシリアライズして memcache に保存します。

$x = '1062430001292';
$a[$x] = $x;
$v = serialize($a);
$m->set('test', $v);

本来 memcache::set を使うなら serialize 不要ですが、ここは分り易くするために。
で、この値を32bit OS側から取得してやります。

$v = $m->get('test');
$a = unserialize($v);
print_r($a);

すると、結果は次のようになってしまいます。

Array
(
    [1573079180] => 1062430001292
)

添え字と値は同じものを指定していたはずですが、全く異なる値になってしまいます。
continue reading… «[PHP] bitの異なるOS間でのserializedデータ交換»

Tags:, Posted in PHPLeave a Comment