Latest Entries

[js] 外部ファイルロードを便利、高速に

tricky2週間ほど前に入手したSteve Sounders氏の新刊「Even Faster Web Sites」ですが、ようやく本格的に読み始めました。
前の「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」は発刊前にネット上で読んでいたのでスルーしてしまいましたが、今回はちゃんと購入。前のものが基本をしっかりと抑えた王道的内容だったのに比べて、比較的トリッキーなテクニックが増えているように思います。

今回は本書の5章から「へー」と思った、外部スクリプトを他のファイルのロードを妨げることなく取得し、なおかつそのファイルのロードが終わった際に後続のスクリプトが実行されるための方法(複雑)を確認してみます。
Continue reading…

[PHP] 高速化Tipsのオカルト(2) echoとprint

fortuneteller高速化Tipsには、実践的に役立つものも多々ありますが、実際的にはほとんど役に立たないものも含まれていることが多いです。

知識として「ふーん」という以上には役立たないTipsの、PHPにおける最右翼はこのechoとprintの速度差問題ではないでしょうか。前回挙げたGoogleのページでも、公開当初はあったものの、後に消されたエントリの1つです。
Smartyなどのレンダリングエンジンに慣れていれば、そもそもデバッグ時以外では使わない場合も多いこのステートメントの「速度差」が、果たしてどの程度のものなのかを確かめてみます。
Continue reading…

[PHP] 高速化Tipsのオカルト(1) 関数への参照渡し

superstition他の言語同様、PHPにも多くの高速化Tipsがあります。汎用で効果的なもの、守銭奴的で本質的に意義の乏しいものなど様々ですが、中には「全く無意味なこと」や「過去のバージョンの話」、「状況次第では逆効果になる」ようなものも散見されます。

先日は、にわかに高速化づいているGoogleも、サイト高速化に関するコミュニティをオープンさせました。その中には、PHPに関するパフォーマンスTipsも含まれています。ところが、これも「オカルト」に毒された誤った内容が多く指摘され、公開から僅か1週間で何度も書き直されるような事態になっています。

ここでは巷間に溢れるPHP高速化Tipsの幾つか怪しいものを検証してみます。
※なお、検証に使ったPHPのバージョンは5.2.9です。
Continue reading…

[Jetpack] 表示中ページのブックマーク数を自動表示

bookmarkまだまだテスト段階のJetpackですが、折角なので遊ぶだけでなく、何か役に立つものを作りたいなと思いやってみました。

使ったのは、v.2から実装されたスライドバー。ここに、現在表示中のページに付けられているブックマークを表示します。
「このページ、どのくらい注目されてるのかな?」と思った時に、割と手っ取り早く分かって便利なんじゃないかと。
現時点で対応しているのは「はてなブックマーク」と「livedoorクリップ」だけです。
Continue reading…

[Jetpack] v.2リリース:スライドバー搭載

jetpackJetpackのバージョン.2がリリースされたので、遅ればせながらAPIリファレンスを更新しました。

今回目に付いた変更は、スライドバー機能が搭載されたことです。
これによって、選択した文字列のWikipediaでの検索結果をサイドバーに表示したり、フラッシュムービーを横で流したまま他のページをナビゲートしたりといった、Juiceのような機能を簡単に作ることが出来たりします。(続きに動画を載せました)

他にもXMLHttpRequestの追加やストレージ機能の実装など、本当に使える機能へ着々と進んでいると思わせます。
Continue reading…

[js] 演算子+と-の速度差と最速ループ

math先週はGoogle Developer Day 2009に行ってきまして、非常に有意義なセッションもあれば、それなりのものもありましたが。

今回は個人的に最も良かったパメラさんのGoogle Maps高速化セッションから、大量マーカーの効果的なプロット方法…は、また今度時間がある時にして、その際に彼女がポロっと漏らした「+=は-=に比べて遅いし」を軽く検証してみました。(FOXでアメリカン・アイドルを観ながら)

検証は、ループカウンタをアップしていく/ダウンしていく方法で比較しています。

※2009.09.27
検証プログラムの問題を指摘いただき、末尾に追加してあります。

Continue reading…

[css] 効率の良いcssを書くための7箇条

inefficientスタイルシートをシンプルに効率よくすることは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繫がります。これはページのパフォーマンスを大きく向上させることに繫がります。

前回は大まかなブラウザの挙動を見ました。
今回は、そういった動きを踏まえた上で、やってしまいがちな非効率なスタイル指定を挙げてみます。そういった指定を避けることで、軽量で高速なスタイルシートを記述することができるでしょう。

なお、この記事は、Google Page Speedの”Use efficient CSS selectors“および、Mozillaの”Writing Efficient CSS for use in the Mozilla UI“などを元に書いています。
Continue reading…

[css] ページにスタイルがあてられる仕組みを学ぶ

painterGoogle Page Speedの記事から始まってしまったサイト高速化関連記事。
今回は、効率の良いスタイルを書くために、ブラウザがHTMLを解析してDOMツリーをつくり、そこにスタイルをあてていく過程を見ていきましょう。

基本的な手順がわかると、どういったcssの書き方が効率が良く、どういった書き方では迂遠であったり冗長であったりするのかが、理解できるようになると思います。

この記事は、Google Page Speedの”Use efficient CSS selectors“および、Mozillaの”Writing Efficient CSS for use in the Mozilla UI“などを元に書いています。そのため、この仕組みは主にMozillaエンジンについてです。IEやWebKitでは若干異なった動作をする部分もあるようです。
Continue reading…

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

speed3~4回で書けると思ったGoogle Page Speedについて。

ひとつの項目について思った以上に長くなってしまっているので、順番を間違えた気もしますが、ここでインデックス的に全体をまとめておきます。

おさらいしておくと、このツールはFirebugと組み合わせて使う、ページのボトルネック調査ツールです。
Page Speedを実行したからといって、自動的にページの表示スピードが速くなるようなことはありません。リストアップされた問題点を理解し、自分の環境にあわせた対応策をとって、はじめてページは高速になります。

自サイトに対して挙げられた項目であれ、そうでなくても、注意すべき点として基本的な内容を理解しておくことは有益です。
Continue reading…

[jQuery] スピンボタンで数値入力補助

jQuery Spin自作のjQueryプラグインを追加しました。
最近むしろあまり見なくなった(?)スピンボタンインターフェースをWebフォーム上に簡単に実装するためのプラグインです。

実はこちらのプラグインは新作ではなく、1年以上前からjQuery本家公式リポジトリGoogle Codeで公開しています。
意外なことに地味に好評で(特に海外で)、ダウンロード数も確認できるだけで累計で2,000を超えていました。バグ報告や機能追加要望も幾つかもらっていたのですが、多忙を言い訳にひたすら放置してしまっていた可哀想な子です。
今回、利用している方からメールをいただいて急にやる気が出て、ついでにgithubにプロジェクトを作ったりしながら大幅にバージョンアップして、日本語のページも用意した次第です。
今まで不便をかけていた方には、本当に申し訳ありませんでした。



Copyright © 2004–2009. All rights reserved.

RSS Feed. This blog is proudly powered by Wordpress.