タグ別アーカイブ: Javascript

ソーシャルメディアの読み込みはDNSプリフェッチのまとめ設定がお得

zenback の読み込みコードが非同期化され、かつ 平均20%+の速度アップが図られた そうで、ユーザーとしては嬉しい限りです。

zenback に限らずソーシャルメディアの導入は、必然的に外部サービスを多用することになります。どのサービスも、スクリプトや画像、トラッキング用コードなどのリソースを、その特性に合わせて 2〜4 程度のホスト/ドメインに分散させているのが普通です。

こういった分散化は並列に読み込みめるリソース数を増やし、クッキーのあり/なしを区別できるので高速化に寄与します。が、利用するサービス数が多くなると、いわゆる「DNS ルックアップ」にかかる時間が無視できなくなり、さすがにデメリットの方が目立ってきます。

例えば本サイトの場合、最終的に25以上の異なるホスト/ドメインから 有象無象 のリソースを読み込んでいるのですが、「DNS ルックアップ」の合計だけで1秒を超えることなどザラにあることが分かりました。

今まで「大して効果ないんじゃない?」と「DNS プリフェッチ」の導入は見送っていましたが、この1秒を消し去ってくれれば幸せになれるかも…と思い直し、導入することにしました。

ということで、今回は twitter や facebook などのソーシャルボタンに DNS プリフェッチを導入した時の効果を報告したいと思います。

続きを読む

そのコード、本当にjQueryが必要ですか?ネイティブ関数の代替Tips集

sitepoint から「本当にjQueryが必要ですか?」とタイトルのついた3本の記事を紹介します。

言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。

また JavaScript 初学者の人も、jQuery が内部でどう苦労しているのか知るのも良いと思います。私自身の勉強も兼ね、その他の情報も色々と補っていますので、良かったら見ていって下さい 😀 。

続きを読む

サイト速度とonload再考

単にウケ狙いなら「革新的!GAのページ平均読み込み時間を劇的に速くする方法」とか「もう3rdパーティーに邪魔させない、超高速スクリプト読み込み術」(笑)とかの煽りタイトルを付けるところですが、今回はもっと本質的なことを論じてみたいと思います。

プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス」では、スクリプトの読み込みと実行を window.onload 対象から切り離し、見た目のページ速度を速くする方法について書きました。この方法は既存のスクリプトを書き換える必要があるため、Stoyan Stefanov によって 実験的に実装された Facebook SDK か、自前のスクリプトにしか適用できませんでした。

しかし今回、Hatena や Twitter、Pocket、Disqus など、他の 3rd パーティ製スクリプトにも適用できる方法 − “進化版 frame-in-frame 法” を見い出しましたので、その方法を共有し、それがもたらす結果について掘り下げてみたいと思います。

まずは、デモからご覧ください 😀 。

続きを読む

プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス

iOS Safari

本ブログでは、サイトの高速化に直結する「JavaScript 非同期読み込み」の話題を多数取り上げてきました。タイトルに釣られてこの記事を見てくれている方なら Google Analytics の非同期コードスニペット はご存知でしょうし、規模の大きいサイトやアプリ用に RequireJS などのフレームワークを使っている方もいるでしょう。

GA も RequireJS も、動的に生成したスクリプト要素を DOM に埋め込む「DOM 挿入法」が用いられています。さらに遡れば、Steve Souders が 2009年4月の記事 ノン・ブロッキングなスクリプト読み込み で、6つの手法に分類しています。

果たしてこれらの方法は、サイトの高速化にとってベストなのでしょうか?

答えは2012年12月の海外記事にありました。そこで本エントリーでは、日本ではほとんど取り上げられていない Frame in Frame という ノン・オンロード・ブロッキングなスクリプト読み込み を紹介し、タイトルの様な視点で、その活用方法を考えてみたいと思います。

続きを読む

Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論

How are you responsive?

2012年2月、Modernizr 2.5 の カスタム・ビルダー から Respond.js が外されました。理由は、HTML5 Boilerplate (以下 H5BP) コミュニティでの決定です。Respond.js は、IE8 以下などのメディアクエリ未対応なブラウザにもその代替え機能を提供するスクリプトで、レスポンシブ Web デザイン を支えるスクリプトとして、H5BP に長らく (8ヶ月) 採用されてきた経緯があります。

ではなぜ、Respond.js は外されたのでしょう?

今回は、その決定を下した長~い議論 Issue #816: Revert mobile-first media queries and remove respond.js から、ベスト・プラクティスの要点と、Paul Irish の考える H5BP の理想像を読み解いてみたいと思います。

ヘタクソで読みづらいですが、日本語訳 も作りましたので、どうぞ 🙂 。

続きを読む

document.writeを使った遅いブログパーツ(例えばzenback)を非同期化してサイトを高速表示する方法

広告やソーシャル系のサードパーティー製ブログパーツを張りたいんだけど、サイトの表示速度が遅くなるのって我慢なりませんよネ。こういったブログパーツの多くが JavaScript で作られています。自サーバーに設置したスクリプトならまだ手の打ちようはあるし、本サイトでも JavaScript 読み込みを高速化するための非同期化ネタを幾つか扱ってきました。例えば Google Analitics の非同期トラッキングスニペットLABjsHEAD JS などの非同期ローダーが有名なところでしょう。

ところが困ったことに、こういったサードパーティ製スクリプトに document.write が使われていると、Google Analitics のようなテクニックや非同期ローダーでは、ほとんどの場合でページが白紙となってしまい使えません。Twitter や Facebook など超有名どころは既に自社のブログパーツを非同期化していますが、まだまだ document.write が現役で幅を利かせているのではないでしょうか。

HTML (ドキュメント)、スタイルシート (見た目)、JavaScript (振る舞い) という3つの言語による分業や、セマンティックなマークアップ、DOM ベースのスクリプティングなどが主流の今日で、またページの表示速度が遅くなるとコンバージョン率を悪化させるという話は有名なのに、本当に困ったことです (タイムリーなことに、スクリプトに document.write を使うのはやめよう というエントリーが、先日 Steve Souders によってポストされました)。

ということで、今回は document.write を使ったスクリプトにも使える、古くて新しい非同期化の方法を紹介したいと思います。

2012年10月10日 修正

Friendly Iframe の具体的なサンプルコードを追記し、また記事中での一貫性を持たせるため、他のコードも若干修正しました。

2012年8月4日 修正

非同期読み込み遅延読み込み を少し厳密に区別しました。

2012年4月9日 追記

IE での動作確認が出来ましたので、記事の後半を大幅に修正しました。

続きを読む

やっと理解できた!JSオブジェクト指向プログラミング再入門

既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、「おお、なるほど!」 っていう、頭の中のスイッチがパチンッ!と入るような境地には達していませんでした。

かつて私も オブジェクト指向なJavaScriptプログラミングのススメ なんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.callFunction.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。

そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事 オブジェクト指向 JavaScript 入門 は、オブジェクト指向の概念と JavaScript のプログラミング言語仕様をほどよくバランスさせながらも、「JavaScript のオブジェクト指向プログラミングはこうだ!」っていう大胆な書きっぷりが、私的にはスイッチが入ったのでした。

もちろんこの記事に目を留めてもらった人と私のバックグランド (仕事上は組み込み系の C → UML → C++ です) は違いますし、また優れた解説記事が多数ある中、私がこの記事を共有する価値があるのかどうか分かりません。が、私のように クラス に馴染んだ人間に教える良い方法でもあると思ったので、翻訳を中心に、その 感じ を伝えるチャレンジを再度してみたいと思います 😉 。

続きを読む

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

ひょんなことから normalize.css のページを覗いていたら、Google Analytics、Google +1、Twitter、Facebook の各 JavaScript をまとめて非同期で読み込んでいるスクリプトが使われているのを見つけました。

CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議」 でも書きましたが、スクリプトの非同期読み込みは、Google Analytics のコードスニペット で一応の決着を見た感じで (実は、標準化を巡って第2ラウンドが始まってはいますが…)、今や Google+1 はもちろん、Facebook も同様の手法を推奨しています。

調べてみたら、「それなら Twitter のスクリプトだって同じように読めばいいじゃないか」 という感じでどんどん まとめスクリプト の改良が進んできたようです。

我が日本としてはこれに 「はてな」 を加えるしかない!、ということで作ってみましたので、公開したいと思います。

続きを読む

CCV.jsで顔検出

Face Detection Using CCV.js

CCV.js (C-based Computer Vision Library) は、オープンソースな画像処理ライブラリ OpenCV の純粋なアルゴリズム部分を一部 JavaScript に移植したライブラリです。しかも元のライブラリではかなりの仮想化・階層化されていた画像処理用メモリ管理部分を簡素化し、Canvas で扱えるようにしてありますので、現在のモダンブラウザでも動作する軽量なライブラリとなっています。

ライブラリとはいうものの、現時点はまだ物体検出のアルゴリズムしか移植されていないようなのですが、顔検出のサンプルがありましたので試してみました。
続きを読む

HTML5でモダンブラウザのCSS3バグを回避するためのハック方法

browser sniffing
将来、何かの役に立つかもしれないので、メモとしてエントリー。

IEなんかの古いブラウザに対応するための CSS ハック方法は古くから知られていますが、CSS3 への過渡期の現在、(本当は使いたくない)ベンダー・プレフィックスや Modernizr なんかを使って新しいデザインにチャレンジしている人も多いことでしょう。

それでもなお、特定ブラウザの、特定バージョンで思った通りのデザインにならないことがあれば、やはり何かしらのハックに頼らざるを得ない状況は、今も昔も変わらないのかもしれません。

そんな場合のハックを An HTML5 boilerplate addon for CSS browser nitpicks から紹介です。紹介されているテクニックは、従来型の CSS 解釈時バグや CSS 属性のアリ/ナシといった特徴や機能ベースではなく、そのものズバリ、ユーザーエージェントによるブラウザの嗅ぎ分け(Browser Sniffing)方法です。JavaScript でいえば、このような方法は全く好ましくないとされていますが、HTML5 時代の、特にモダンブラウザごとに対応する方法としてはアリ…? かもしれませんネ。
続きを読む