まだまだテスト段階のJetpackですが、折角なので遊ぶだけでなく、何か役に立つものを作りたいなと思いやってみました。
使ったのは、v.2から実装されたスライドバー。ここに、現在表示中のページに付けられているブックマークを表示します。
「このページ、どのくらい注目されてるのかな？」と思った時に、割と手っ取り早く分かって便利なんじゃないかと。
現時点で対応しているのは「はてなブックマーク」と「livedoorクリップ」だけです。
Continue reading…
Jetpackのバージョン.2がリリースされたので、遅ればせながらAPIリファレンスを更新しました。
今回目に付いた変更は、スライドバー機能が搭載されたことです。
これによって、選択した文字列のWikipediaでの検索結果をサイドバーに表示したり、フラッシュムービーを横で流したまま他のページをナビゲートしたりといった、Juiceのような機能を簡単に作ることが出来たりします。（続きに動画を載せました）
他にもXMLHttpRequestの追加やストレージ機能の実装など、本当に使える機能へ着々と進んでいると思わせます。
Continue reading…
先週はGoogle Developer Day 2009に行ってきまして、非常に有意義なセッションもあれば、それなりのものもありましたが。
今回は個人的に最も良かったパメラさんのGoogle Maps高速化セッションから、大量マーカーの効果的なプロット方法…は、また今度時間がある時にして、その際に彼女がポロっと漏らした「+=は-=に比べて遅いし」を軽く検証してみました。（FOXでアメリカン・アイドルを観ながら）
検証は、ループカウンタをアップしていく/ダウンしていく方法で比較しています。
※2009.09.27
検証プログラムの問題を指摘いただき、末尾に追加してあります。
スタイルシートをシンプルに効率よくすることは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繫がります。これはページのパフォーマンスを大きく向上させることに繫がります。
前回は大まかなブラウザの挙動を見ました。
今回は、そういった動きを踏まえた上で、やってしまいがちな非効率なスタイル指定を挙げてみます。そういった指定を避けることで、軽量で高速なスタイルシートを記述することができるでしょう。
なお、この記事は、Google Page Speedの”Use efficient CSS selectors“および、Mozillaの”Writing Efficient CSS for use in the Mozilla UI“などを元に書いています。
Continue reading…
Google 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…
3～4回で書けると思ったGoogle Page Speedについて。
ひとつの項目について思った以上に長くなってしまっているので、順番を間違えた気もしますが、ここでインデックス的に全体をまとめておきます。
おさらいしておくと、このツールはFirebugと組み合わせて使う、ページのボトルネック調査ツールです。
Page Speedを実行したからといって、自動的にページの表示スピードが速くなるようなことはありません。リストアップされた問題点を理解し、自分の環境にあわせた対応策をとって、はじめてページは高速になります。
自サイトに対して挙げられた項目であれ、そうでなくても、注意すべき点として基本的な内容を理解しておくことは有益です。
Continue reading…
自作のjQueryプラグインを追加しました。
最近むしろあまり見なくなった(?)スピンボタンインターフェースをWebフォーム上に簡単に実装するためのプラグインです。
実はこちらのプラグインは新作ではなく、1年以上前からjQuery本家公式リポジトリとGoogle Codeで公開しています。
意外なことに地味に好評で(特に海外で)、ダウンロード数も確認できるだけで累計で2,000を超えていました。バグ報告や機能追加要望も幾つかもらっていたのですが、多忙を言い訳にひたすら放置してしまっていた可哀想な子です。
今回、利用している方からメールをいただいて急にやる気が出て、ついでにgithubにプロジェクトを作ったりしながら大幅にバージョンアップして、日本語のページも用意した次第です。
今まで不便をかけていた方には、本当に申し訳ありませんでした。
パラレルダウンロードについて、更にもうひとつ。今度は、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…
Naohiko MORI / nao58
ITエンジニア。最近はめっきりWeb系で、言語はPHP/Javascriptがメインに。野球はドラゴンズ、音楽はHR/HM。ラグビーはオールブラックス。読むなら筒井康隆。
More
Enter the query to search and hit enter.
