HTML/CSS/JavaScriptを改善してWebサイトのパフォーマンスを向上しよう「DOM Monster」 // MOONGIFT Archived

DOM MonsterはDOMやテキストノードをチェックし、Webサイトのパフォーマンス改善を提示するブックマークレット。

[/s2If]

DOM MonsterはJavaScript製のオープンソース・ソフトウェア。JavaScriptを活用したWebサイトが増えている。インタラクティブなWebサイト構築にあたって、JavaScriptを使っていくのは良いが、やたらと使うと重たくなってしまう。

実行した所

さらにdivやspanタグを使って細かなCSS設定を行っていると、多数のタグが使われることでレンダリングに影響を及ぼすようになる。そうしたWebサイトの問題点をJavaScriptを使って指摘してくれるのがDOM Monsterだ。

DOM Monsterはブックマークレット型のソフトウェアだ。公式サイトにあるブックマークレットをWebブラウザに登録するだけで利用できる。任意のWebサイトでブックマークレットを実行すれば、画面下に結果と直すべき点がリストアップされる。

エラー多過ぎ…

例えばエレメントやノードの数、ネストの深さなどが並び、その数によって緑や黄色、赤で改善すべき点を教えてくれる。さらにJavaScriptの読み込み数や変更する際のTipsも一緒に表示される。自分のWebサイトが抱えている問題点が分かれば、改善も行いやすくなるはずだ。

[s2If !current_user_can(access_s2member_level1)]

[/s2If]

MOONGIFTはこう見る

ブックマークレットだけで何かをする、というのはインターネット主流の現在にあって、とても有効な攻め方と言えるかもしれない。DOM Monsterでは外部のコンテンツとの連携はないが、スクリプトが外部にあることによって実行されている状況の統計などもとれるようになる。

ブックマークレットはおおむねあるWebサービスの使い勝手をよくしたり、別なサービスとの連携を行わせるものが多い。本家サービスでは不可能な機能を付け加えることも容易だ。常時利用前提の機能拡張と分けて考えると面白いかもしれない。

[/s2If]