ContentLoded.com

サイトに適したリソース配置とasync/defer完全マスター – レンダリング優先のグッド・プラクティス

タイトル、少し変えました ;-)

第1部「サイト高速化の「戦略」と「戦術」- GradeAのその先へ」では、YSlow や PageSpeed がアドバイスする Tips のうち、HTTP リクエストの削減を優先すべしという「戦略」の話をしました。

また css や js を束ねて結合し、HTTP リクエストを削減する時の「戦術」の話もしました。

今回は、「サイトの特性に適したリソースの配置を行う」ために、「束ねたリソースをドキュメント中にどう配置するのが適切か」を見い出したいと思います。またそのポイントとなるブラウザの基本的な挙動についても言及します。

ブラウザごとの挙動が確かめられる、実験サイト contentloaded.com を立ち上げたので、以下、同サイトから幾つかの例を引きながら話を進めたいと思います。

続きを読む

After Grade A

サイト高速化の「戦略」と「戦術」- GradeAのその先へ

サイト高速化をネタにした記事は星の数ほどありますし、YSlowPageSpeed、あるいは両方同時にチェックできる GTmetrix のおかげで、アドバイスに従って問題点を一つ一つ潰し込んでいけば、着実にスコアを「Grade A」に近づけられるようになりました。

またベスト・プラクティスなんて知らなくても、「CloudFlare 導入、一発 OK!」なんていうお手軽なサービスもあります。

一方、これら個々の Tips、テクニックを断片的に積み上げていくアプローチやブラックボックス方式では、サイト全体を通して「本当に最適なの?」という疑問も生じます。

別な言い方をすれば、「Grade A は取ったけど… その先は?」に対する処方箋が必要なんじゃないかと思っています。

そこで今回は、「スコア」だけでは見えてこない、サイト高速化の「戦略」と「戦術」の話にチャレンジしてみたいと思います。これはフロントエンドという下流のテクニックや Tips の話ではなく、サイトの意図や狙いという上流の要求をフロントエンドという下流に落とし込むための「分析」と「設計」の話です。

ぶっちゃけた話、ろくに設計もしていない(あるいは期せずしてそうなってしまった)乱雑な HTML を、小手先の Tips でいくら弄っても限界があるのは自明の理でしょう。

第1部では、いわゆるベスト・プラクティスの全体を俯瞰しサイト高速化の「戦略」を検討します。第2部では、サイトの要求に適した攻め方、つまり「戦術」を練ります。そして第3部では、戦術に基づいた「実践」について書いてみたいと思います。

続きを読む

IP Geo Block

海外からの投稿を弾くスパム対策用WordPressプラグインをリリースします

スパム投稿を選別して弾くプラグインは、Akismet はもちろん、CAPTCHA を使うタイプ、日本語を含まない投稿を禁止するタイプ、ロボット投稿の裏をかく隠しフィールドを備えたタイプなどなど、数多くあります。

それぞれに一長一短がある中で、投稿者の国を選別するプラグインがあっても良いんじゃない? ということで、これまた一長一短のあるプラグイン IP Geo Block を作りました。島国ニッポンならではの割り切りができる人なら、お試しください :D

続きを読む

IP Address Geolocation RESTful APIs

IPアドレスの地理的位置情報が引ける無料RESTful API集

IP アドレスからサーバーの地理的位置情報(Geolocation)を調べてくれるオンライン・サービスは、ちょっと検索すればすぐに見つかりますし、有料のサービスも山ほどあります。が、サーバーから任意の IP アドレスが引ける無料のサービスとなると、ちょっと時間をかけて検索しなければなりません。

今回は、海外からのコメント・スパムをブロックする WordPress プラグインを作りたくて、タイトルの様なサービスを調べてみました。

IP Geolocation の歴史も調べてみましたので、雑学系としてもご覧ください。

続きを読む

ソーシャルメディアの読み込みは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 が内部でどう苦労しているのか知るのも良いと思います。私自身の勉強も兼ね、その他の情報も色々と補っていますので、良かったら見ていって下さい :D

続きを読む

サイト速度とonload再考

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

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

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

まずは、デモからご覧ください :D

続きを読む

jQueryプラグインのオプションとHTML5 data-*属性でハマった時に幸せになれるかもしれないまとめ

html5 data parser

意外と要注意… なんて記事を書いておきながら、実際に HTML5 のカスタム・データ属性にオプションを指定する jQuery プラグインを作っていて、かなりハマってしまいました。

data-* 属性に書いた複雑なオプションを jQuery Data API で処理するには、JSON で指定しなくちゃダメなんですネ。ちゃんと ドキュメント にも書いてありました ;-)

ということで、「もっと簡単に記述できるようにしたい!」を叶える 簡易な data-* 属性パーサー を作りましたので、ここに発表します。

ついでに data-* を使った jQuery オプション指定のユースケースを整理し、その実装方法をまとめてみたいと思います。

続きを読む

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

iOS Safari

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

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

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

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

続きを読む

フツーここまでやらない、キャッシュヒット率100%で運用するWordPress高速化

プリロード導入前後の平均表示時間の推移

キャッシュ系プラグインを入れて速くなった気がしていても、Google Analytics の「サイト速度」が思ったほど速くなってない、なんて言う経験はないですか?

今年の4月に発覚した WP Super CacheW3 Total Cache の、心底ヤバイ 脆弱性騒動 も乗り切り、懲りもせずタイトルの様なことを試しています ;-)

特に共有サーバーで運営しているよいこの皆さんは、絶対にマネしちゃイケナイ、本サイトのヒミツを暴露しちゃいますネ ;-)

続きを読む