HTML縮小?[閉まっている]


99

ページのHTMLソースを入力してコードを縮小できるオンラインツールはありますか?

aspxファイルの場合は、ウェブサーバーでgzipを実行することはお勧めしません。


19
サーバーにgzipを使用するのはいつ悪い考えですか?
チャック

5
aspxページは静的ファイルではないため、IISによってキャッシュされず、リクエストごとにページをgzipするため、私はそれを読みました...
Paulo

23
...そしてそれは問題ですか?サーバーがすでに99.9%のCPUを使用しているのでない限り、おそらくそうではありません。gzip圧縮は通常行うことであり、「縮小」よりもはるかに効果的です。
ボビンス2009


2
ここでの回答は時代遅れであり、それらのいくつかは間違っていることは言うまでもありません。問題と適切なツールに関する私の説明を確認してください。
サルバドールダリ

回答:


63

おそらく、HTML Compressorを試してみてください。これは、(Stack Overflow自体を含めて)何ができるかを示すビフォーとアフターの表です。

申し訳ありませんが、マークダウンにはテーブルの概念がありません

安全な場所でのスクリプトの最小化(ompressor、Google Closure Compiler、独自のコンプレッサー)まで、ページを最適化するための多くの選択肢を備えています。デフォルトのオプションセットはかなり保守的であるため、それから始めて、より積極的なオプションを有効にすることを試すことができます。

プロジェクトは非常によく文書化され、サポートされています。


58

これを行わないでください。むしろ、あなたがそれを主張するなら、より重要なサイトの最適化が完了した後でそれを実行してください。特に手動でオンラインツールを使用して各ページを処理することを計画している場合は、この取り組みのコスト/メリットが無視できる可能性が非常に高くなります。

YSlowまたはPage Speedを使用して、ページを最適化するために本当に何をする必要があるかを判断します。私の推測では、HTMLのバイト数を減らすことはあなたのサイトの最大の問題ではないでしょう。圧縮、キャッシュ管理、画像の最適化などにより、サイト全体のパフォーマンスに大きな違いが生じる可能性ははるかに高くなります。これらのツールは、最大の問題が何であるかを示します。それらすべてに対処しても、HTMLの縮小化が大きな違いをもたらすことがわかった場合は、それを試してください。

(確実に実行したい場合で、Apache httpdを使用している場合は、mod_pagespeedを使用して、空白などを削減するためにいくつかのオプションをオンにすることを検討できますが、リスクに注意してください。)


25
自動化された美化を使用して縮小されたコードが読みやすい場合、最適化の何が問題になっていますか?

12
それはおそらく最大の問題ではありません-しかし、devからqaまたはprodにコンパイルするときに正規化のセットを縮小してマークアップを実行するのが簡単なプロセスである場合、なぜより小さなマークアップドキュメントを送信したくないのでしょうか。
Peavyが

26
実際には元の質問への回答ではありません:(
Chuck Le Butt

7
@Will、それはほぼ確実だない縮小化正規表現を通じてHTMLを実行するための些細なプロセス、さらには、それはおそらく、些細なまたは高速ではありません、適切なパーサーを使用して。さらに、JS / CSSの縮小化とは異なり、HTMLの縮小化は無損失ではありません。どのタグもとしてスタイル設定できwhite-space: pre、縮小化により事前にフォーマットされたテキストが破棄されます。
まぶたのない状態

3
@eyelidlessness-現在、何千ページものページがあり、それらが提供される前に正規表現によって縮小されています。この機能は、システムの複雑な部分や高価な部分ではありません。...一方、でスタイル設定された要素の縮小を回避するために計算されたスタイルを解析する場合white-space:preは、はい、HTMLの縮小はより複雑になります。ただし、誰かがpreor code要素を使用するのではなく、なぜwhite-space:preを使用するのかについては明確ではありません。
ピービー

34

ここにあなたの質問への短い答えがあります:あなたはあなたのHTML、CSS、JSを縮小する必要がありますgruntと呼ばれる使いやすいツールがあります。多くのタスクを自動化できます。その中には、JSCSSHTMLの縮小、ファイルの連結などが含まれます。

ここに書かれた答えは非常に古いか、時には意味がありません。2009年の古いものから多くのことが変わったので、私はこれに適切に答えるようにします。

短い答え-HTMLは必ず縮小する必要があります。今日はささいなことで、約5%スピードアップします。より長い回答については、回答全体をお読みください

昔、人々はcss / jsを手動で縮小していました(特定のツールで実行して縮小しました)。プロセスを自動化するのはちょっと大変で、確かにいくつかのスキルが必要でした。現在でも多くの高レベルのサイトがgzipを使用していないこと(これは些細なことです)を知っているので、人々がhtmlを縮小することに消極的であったことは理解できます。

では、なぜ人々はjsを縮小し、htmlを縮小しなかったのですか?JSを縮小すると、次のことを行います。

  • コメントを削除する
  • 空白(タブ、スペース、改行)を削除する
  • ロングネームをショート(var isUserLoggedInvar a)に変更

それは昔でも多くの改善をもたらしました。しかし、htmlでは長い名前を短い名前に変更することはできませんでした。その間、コメントすることはほとんどありませんでした。したがって、残された唯一のものは、スペースと改行を削除することです。これはほんの少しの改善をもたらします。

ここで書かれた1つの間違った議論は、コンテンツはgzipで提供されるため、縮小は意味をなさないということです。これは完全に間違っています。はい、gzipを使用すると縮小の改善が減るのは理にかなっていますが、コメントや空白を適切にトリミングして重要な部分だけをgzipできるのであれば、なぜgzipを使用する必要があるのでしょうか。これは、アーカイブするフォルダーがあり、決して使用しないがらくたがあり、クリーンアップして圧縮するのではなく、単に圧縮することにした場合と同じです。

ミニファイをする意味がないもう一つの議論は、それが退屈であるということです。2009年もそうだったかもしれませんが、その後、新しいツールが登場しました。現時点では、手動でマークアップを縮小する必要はありません。以下のようなものでうなり声、インストールするのは簡単です作男-contribの-htmlminを(に依存しているHTMLMinifier @kangaxにより)し、HTMLを縮小化するように構成します。必要なのは、うなり声を学び、すべてを構成するのに2時間程度です。その後、すべてが1秒未満で自動的に行われます。1秒の音(grunt-contrib-watchで何もしないように自動化することもできます)は、(gzipを使用しても)約5%の改善にはそれほど悪くありません。

もう1つの議論は、CSSとJSは静的であり、HTMLはサーバーによって生成されるため、事前に縮小できないことです。これは、2009年にもそうでしたが、現在はより多くのそしてより多くのサイトでは、サーバーが薄い単一ページアプリのように見ていると、クライアントはすべてのルーティング、テンプレートや他のロジックを行っています。したがって、サーバーはJSONのみを提供し、クライアントはそれをレンダリングします。ここには、ページとさまざまなテンプレート用のHTMLがたくさんあります。

だから私の考えを終えるには:

  • グーグルはhtmlを縮小しています。
  • pageSpeedはhtmlを縮小するように要求しています
  • するのは簡単です
  • それは〜5%の改善をもたらします
  • それはgzipと同じではありません

3
HTMLの空白は重要であり、特定の空白を削除できるかどうかはCSSに依存するため、HTMLを細かくすることは簡単ではありません。また、シンクライアントはひどいものであり、私の意見では、ダイナミックHTMLの縮小化の問題に対する適切な議論とは言えません。(そのための1つの良い方法は、最初にレンダリングされた出力に不要な空白を含まないテンプレートエンジン[Haml、Jadeなど]を選択することです。)
Ry-

@minitech HTMLの縮小は簡単です。また、空白などの問題(のような<span>)はほとんどありません。まず最初に、有効なhtmlを記述して、空白を無視する方法を常に見つけることができます。また、驚いたかもしれませんが、JS / CSS minifierにもバグが発生する可能性があります。これは、使用してはいけないという意味ではありません。したがって、問題を解決する2つの方法:空白にとらわれないマークアップを書くことを学び、縮小の前/後に製品をテストします(CSS / HTML / JS)。また、Minifierでは、保持する空白を指定できます。
サルバドールダリ

非常識なコード(つまり、タイミングを読み取らず、チートを行わないコード)のJavaScriptミニファイアを修正しても、バグは発生しません。そして、いいえ、特にHTMLは空白にとらわれないので、空白にとらわれないHTMLを書く方法は常にありません。全然。余白によって切り取られると思われる場合は、コピーと貼り付けをテストしてください。時間の浪費のように、サウンドを保持したい空白を指定する(Googleを除く)…
Ry-

@minitech空白にとらわれない方法で書くことができないCSSを見せてくれませんか?私は長い間htmlを縮小しており、今のところ問題は見ていません。
サルバドールダリ

* { white-space: pre; }は明らかなものですが、すべての空白を削除して折りたたむだけでなく(代わりに余白に置き換える)場合、テキストが正しくコピーされず、テキストブラウザーやスクリーンリーダーで大混乱を引き起こす可能性があります。
Ry-

23

HTMLを縮小するためのWebツールを作成しました。 http://prettydiff.com/?m=minify&html

このツールは、次のルールを使用して動作します。

  • すべてのHTMLコメントが削除されます
  • 一連の空白文字は単一の空白文字に変換されます
  • タグ内の不要な空白文字が削除されます
  • これら2つのタグのいずれかがシングルトンではない2つのタグ間の空白文字は削除されます
  • styleタグ内のすべてのコンテンツはCSSであると推定され、そのように縮小されます
  • script別のメディアタイプが提供されない限り、タグ内のすべてのコンテンツはJavaScriptであると見なされ、そのように縮小されます。
    • CSSとJavaScriptの縮小化は、フォークされた形式のJSMinを使用します。このフォークは、CSSをネイティブにサポートし、SCSS構文もサポートするように拡張されています。JavaScriptミニファイではセミコロンの自動挿入がサポートされていますが、中括弧の自動挿入はまだサポートされていません。

    7
    こんにちは、この行を削除します!<!--[if IE 8.0]><link rel="stylesheet" href="css/ie8.css" type="text/css" /><![endif]-->
    UnLoCo 2012

    1
    ええ、これはあなたがkoを使っているなら、災難です!
    Ray Suelzer、2013

    8

    これは私のために働きました:

    http://minify.googlecode.com/git/min/lib/Minify/HTML.php

    これはまだ利用可能なオンラインツールではありませんが、単純なPHPインクルードであるため、自分で実行できるほど簡単です。

    ただし、圧縮ファイルは保存しないので、必要に応じて動的に保存します。Gzipサーバーの圧縮を有効にすることをお勧めします。それがIIS / .Netにどの程度関与しているかはわかりませんが、PHPでは、グローバルインクルードファイルに1行追加するのと同じくらい簡単です。


    6

    CodeProjectには、以下の状況のいくつかを処理するために公開されたサンプルプロジェクト(http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=2794900)があります。 。

    • ScriptResource.axd呼び出しを1つの呼び出しに結合する
    • gzip / deflateを含むブラウザ機能に基づいて、すべてのクライアント側スクリプトを圧縮します
    • コメント、インデント、および改行を削除するScriptMinifier。
    • gzip / deflateを含むブラウザー機能に基づいてすべてのhtmlマークアップを圧縮するHTMLコンプレッサー。
    • そして-最も重要なこと-完全なhtmlを1行に書き込み、可能なレベル(作成中)でそれを縮小するためのHTML Minifier。


    1

    http://code.mini-tips.com/html-minifier.htmlを試してください。これはHtml Minifierの.NETライブラリです。

    HtmlCompressorは、コンテンツ構造を壊さずに余分な空白、コメント、その他の不要な文字を削除することにより、指定されたHTMLまたはXMLソースを縮小する、小さくて高速で非常に使いやすい.NETライブラリです。その結果、ページのサイズが小さくなり、読み込みが速くなります。コンプレッサーのコマンドラインバージョンも利用できます。

    弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
    Licensed under cc by-sa 3.0 with attribution required.