タグ別アーカイブ: tool

Sample Site

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

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

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

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

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

続きを読む

WordPressのショートコードを極める実用例題&便利プラグイン集

ちまたで 言われている のと同様、私もショートコードの便利さにはまっています。で、自分用のショートコード が貯まってくると、テーマとは独立に My プラグインとして管理したくなりますよネ。

今回の記事は、私が実用的だと思うショートコードと、それらを集めてオリジナルなプラグインを作るための便利ツールを紹介してみたいと思います。
続きを読む

ブラウザ動作の理解-レンダリングの負荷を測る

転勤・単身赴任というライフ・イベントがあり、すっかり更新が止まっていましたが、前回 に続き、「Rendering: repaint, reflow/relayout, restyle」から後半のレンダリング負荷を測るツールの使い方をお届けします。記事中の リフローリペイント といった用語は、前回記事「用語の定義」 を参照してください。

元記事は初稿が2009年12月でツールのバージョンも古いため、現時点の最新バージョンで記事を再構成しています。また実行環境によって観測結果が異なるため (非力なマシンの方がレンダリング負荷の割合が高いけど、サンプルとしては分かりやすい)、以下に本記事で試した環境を記しておきます。

  • dynaTrace AJAX Edition
    • バージョン:Version: 2.1.0.603, built on 2010-12-15
    • ブラウザ、PC:IE8 / Windows 7 / Intel® Core™ 2 Duo E6550 2.33GHz
  • Google Chrome SpeedTracer (エクステンションは コチラ から)
    • バージョン:0.20 – Friday, February 11, 2011
    • ブラウザ、PC:Chrome9 / Mac OS X 10.6.6 / Intel® Core™ 2 Duo 1.86GHz

続きを読む

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

REDbot

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

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

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 を紹介します。
続きを読む

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

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

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

ブラウザのレンダリング互換性を検証するツール比較

下の円グラフは Market share for browsers, operating systems and search engines が調べた2010年1月~4月までのブラウザ市場シェアーです。IE 系が優勢ですネ。

ブラウザのバージョン別市場シェアー

さらに2009年6月から2010年4月までの推移を見てみると、下の様に IE6 は Firefox の伸びと共に減ってきてはいますが、まだがんばっちゃっている様子が分かります。

ブラウザバージョン別シェアーの推移Copyright © 2010 NetApplications.com

IE 6、7、8 のブラウザの互換性チェックって、依然として重要だなと再認識しています。

そこでかなり既出の話題になりますが、情報更新も兼ね、表示互換性をチェックするツールをまとめてみます。
続きを読む

FiddlerでAddThisのHTTPセッションをデバッグしてみた

WordPress用のAddThisプラグイン には、1日分のブックマーク登録状況をダッシュボードに表示する機能があるのですが、バージョン1.6.3 には日本語表示にバグがあるようで文字化けを起こしてしまいます。

文字化けしたダッシュボード上のAddThis

文字化けしたダッシュボード上のAddThis

AddThis サポートフォーラムでこの件を報告した ところ、文字化けした部分をポストしてくれるかい? そうすればテストするヨ と言われたのですが、どうにもコピーがうまくが出来ません…。そこで HTTP セッションの生データを観測してやろうと考えました。

HTTP のセッションデータを観測できるツールとして、以前にこちらの記事で紹介した Microsoft 謹製の Visual Round Trip Analyzer (正確にはその下位ツールである Network Monitor)を使うこともできたのですが、今回は以前より気になっていた Fiddler を使ってみたところ、インストールから10分も経たないうちに原因が推定できました、というのが今回のお話です。
続きを読む

Webデザイナーのためのオンラインツール10選

このサイトの暗過ぎる色使いとアカ抜けないデザインを何とかしたいと思っている私が興味を惹かれた記事を、海外サイトから紹介します。

Iconfinder

Icon Finder
高品質なアイコンが検索できるサイトです。検索のオプションとしてサイズ、背景色(白、透過、黒)、ライセンスの種類などを指定することが出来ます。
続きを読む