スパムの連続投稿によく効くキャッシュを装備したIP Geo Blockの更新告知

ここ数日間、本サイトではスパムの連投が流行っています :x

こいつらに貴重なサーバー資源を食われるのは1ミリたりとも許せないワケで、かつては日本以外の IP アドレスを .htaccess に手作業で書き込んでいましたが、あまりにも量が多く、馬鹿げているので止めました。

そんなワケで作ったのが、海外からの投稿を Akismet の起動前に弾く IP Geo Block というプラグインなんですが、スパムは激減するものの、IP アドレスの検索に少々時間がかかるのが気になる点でした。

で、この度、一度検索した IP アドレスをキャッシュに保持する機構を付けたところ、思いの外、効果があったので、バージョン 1.1.0 として告知したいと思います :)

続きを読む

Future of Responsive Images

レスポンシブデザインの進化はWebの常識を変えるか?

ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。

ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。

最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。

自分としてのテーマは、「じゃあ、今、どうするか?」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。

ちなみに今回記事で取り上げた話題については、レスポンシブ画像のデモ に、もう少し掘り下げて展示しています。そちらもぜひ覗いてみて下さい!

続きを読む

Sample Site

GradeAの先行くWordPress高速化 – 必ず結果の出る実践的HTTPリクエスト削減法

WordPress は、プラグインで手軽に機能が拡張できる反面、あちこちに css や js が散乱し、放っておくとベスト・プラクティスからは程遠い状態になりがちです。

もちろんこういった問題の解決を図るプラグインも多数リリースされていますが、ページ単位の処理なので、サイト全体の構成を通して最適にはなりません。

そこで第1部「サイト高速化の「戦略」と「戦術」- GradeAのその先へ」、第2部「サイトに適したリソース配置とasync/defer完全マスター – レンダリング優先のグッド・プラクティス」では、数あるベスト・プラクティスの全体を俯瞰し、個々の Tips やテクニックからは見え難い、最適化の考え方や道筋を提案しました。

その総仕上げとして今回は、WordPress サイトを例題に、必ず結果の出る HTTP リクエストの削減方法を提案したいと思います。

続きを読む

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

続きを読む