タグ別アーカイブ: review

Sample Site

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

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

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

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

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

続きを読む

こだわる人のWordPress3大キャッシュプラグイン徹底比較

今回は、WordPress の人気キャッシュ系プラグイン Quick CacheW3 Total CacheWP Super Cache を、3者共通のページを丸ごとキャッシュする 「ページ・キャッシュ」 機能に絞り、比較をしてみました。

これらの情報は既に多数報告されているので、普通に使う分にはそれらで十分なのだと思いますが、性能を引き出すためにも知っておいて損はないかなと思うことをまとめます。

続きを読む

CCV.jsで顔検出

Face Detection Using CCV.js

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

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

ページ中リソースのHTTPレスポンスヘッダを診断するツール

REDbot

REDbot は、 HTTP リソースの問題を、HTTP の定義や広く使われているルールに基づいて診断し、問題点があればそれらをどう改善すべきかの手助けをしてくれるオンライン・ツールです。

自作の PHP スクリプトで生成したレスポンス・ヘッダをチェックしたり、ページ中のリソースに対するキャッシュの状態をチェックしたりするのに役に立つと思います。
続きを読む

YouTube動画のダウンロードを中継してくれるベストサイト

尖閣諸島沖の中国漁船衝突事件のビデオ映像がネットに流れた件で、どうやって YouTube からダウンロードしたんだろう、と思っていたら、「youtube download」 で検索すれば 「約 457,000,000 件」 も出てくるんですネ。知りませんでした… 😉 。Firefox のアドオン にもあるし。

ということで (何が…)、SaveDelete.com から Best Free Sites To Download Youtube Videos を紹介します。自分の PC にインストールする必要がなく、動画の URL を入れれば各種フォーマットに変換してくれますので、お手軽です。

ただし、この手のサイトはいつの間にか消えているって事があるので、幾つかをブックマークしておくのが良いかもしれません。でも、くれぐれも著作権を侵害した映像のダウンロードはしない様にして下さいネ。

参考情報

続きを読む

HTTP/Ajaxのプロファイル分析が出来るProxy型オンラインツール

サイトのパフォーマンスをチューニングするとき、Firefox には FirebugWebkit 系の Google ChromeSafari には開発者ツール、IE には dynaTrace AJAX Edition といった、各ブラウザ専用のツールを使うという選択肢があります。これらはブラウザと密着しているため、HTTP通信のブラウザ内部のキュー状態(例えば ブロッキング など)や JavaScript の動作をトレースすることが出来ます。

一方、クロスブラウザの検証には、ローカルPC上でプロキシとして動作する Visual Round Trip AnalyzerFiddler2 などがありますが、ネットワークのポートを観測しているに過ぎないため、JavaScript をトレースするためには Firebug Lite と組み合わせるということになります。

今回はクロスブラウザのもう1つの選択肢として、HTTP セッションの観測はもちろん、プロキシ型でありながら JavaScript/Ajax の実行プロファイルまで取れるという、1粒で2度おいしい、優れもののオンラインツール RockStar AppsWeb Profiler Razor を紹介します。
続きを読む

WP MinifyでCSS/JavaScriptをまとめて軽量化、ページの応答速度を向上させる

2014年2月26日 緊急追記!

2013年7月23日、本体の minify エンジン が脆弱性のため 2.1.7 に更新されています。本記事で紹介している WP Minify 1.2.0 の最終更新日が2012年6月4日なので、本体を差し替えてのご利用をお勧めします(サポート・フォーラムでも指摘されています が、改善されていません)。


以前 「WordPressテーマ “iNove” のYSlow的サイト最適化」で総合的にページの読み込みを軽量化する方法についてまとめましたが、今回は CSS/JavaScript ファイルの読み込み数が多い Arras Theme を例に、WordPress プラグインの WP Minify で複数のCSSやJavascriptファイルを1つにまとめて軽量化する方法を紹介したいと思います。

まずはそのコアとなる Minify のおさらいですが、次のような機能で HTTP リクエストの「数・量・頻度」を削減し、ページが表示されるまでの時間の短縮を狙います。

  • 複数の CSS や JavaScript ファイルをそれぞれまとめてマージする機能
  • 不要な空白・コメントを除去して軽量化し、gzip エンコードで圧縮転送する機能
  • キャッシュ制御のヘッダ付加や応答(If-Modified-Since に対する HTTP 304 Not Modified)機能

この Minify を WordPress に導入しようとすると、テーマやプラグインを個別に修正する必要が生じるため保守性が悪くなります。WP Minify はこの問題を解決してくれるプラグインなのですが、導入すれば目に見えた効果が即期待できるという魔法の杖では決してありません。

このエントリーでは、トラブルが生じたときの対処方法はもとより、より効果的に使いこなすために考慮すべきことをまとめてみたいと思います。
続きを読む

ウェブサイトの速度とパフォーマンスをチェックするツール18選+α

web performance checking tool
以前このサイトでも ウェッブサイトの表示速度を測定するフリーツール集 でも紹介しましたが、hongkiat.com の記事 18 Website Speed and Performance Checking Tools でさらに新しげなツール類が取り上げられていましたので、紹介をしたいと思います。

記事では、サイトレスポンスの向上を狙って闇雲にコードをいじり始めてもダメで、適切なツールを使って分析し、レスポンスを悪くしている原因を突き止めることが基本であると説いています。
続きを読む

Modernist:タイポグラフィにフォーカスした無料WordPressテーマ

Modernist

Smashing Magazine で「Modernist」という無料 WordPress テーマが GPL の元にリリースされていましたので、試してみました。

このテーマは Smashing Magazine とその読者のためにデザイン、リリースされたそうで、その特徴は次の通りだそうです。

  1. シンプルかつ透明感のある美しさ
  2. 記事を紹介するのに最適なタイポグラフィ
  3. IE 6 以上と Safari、Firefox、Opera の全バージョンで動作
  4. 以前のバージョンを含め、最新のWordPress3.0.1に対応
  5. サイドバーのウィジェットに対応
  6. プラグインなしで Twitter、Facebook、Delicious Digg、および Reddit といったソーシャルメディアの利用が可能
  7. Google が好む SEO 対策されたクリーンな HTML/CSS
  8. 配色や Typekit の利用などに対する優れた柔軟性と拡張性

こういった海外向けのテーマで日本語を表示させた場合、文字や行間などのバランスが必ずしも英語での表示とバランスが合っていないことが多いものです。今回は、このあたりを中心にレポートしてみたいと思います。
続きを読む

統計情報から世界の「今」が見えるサイト集

2010 World Cup Internet Traffic by Akamai

2010 FIFAワールドカップ の開催に合わせ、今や ウェッブトラフィック全体の10%~20%を配信している といわれるコンテンツ配信事業の最大手、Akamai特別ページを開設 し、ネットワークトラフィックをヒートマップ表示しています。ワールドカップ開催中はトラフィックの増加が見込まれるため、通常の Real-Time Web Monitor よりスケールを拡大して模様です。試合の開催国と開催日を FIFA.com で調べ、トラフィック増加の様子を逐一眺めてみるのも、ワールドカップの別の楽しみ方かもしれません (ナイナイ 😉 )。

Calendar World Cup 2010 by MARCA.comちなみに、ワールドカップのカレンダーはこちらが抜群に美しくて見やすいです。

さて、今回は Akamail をはじめ、世界の をビジュアルに知ることが出来るような統計情報を公開しているサイトを幾つか集めてみました。

続きを読む