質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

htmlの縮小(ダブルクオーテーションの削除、置換)

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 2,784
退会済みユーザー

退会済みユーザー

初めての投稿です。

現在wordpressでウェブサイトを構築しているのですが、htmlの縮小でつまづいています。

プラグインを使用せずにfunction.phpを用いてhtmlの縮小を行っており、改行や空白の削除での縮小は出来たのですが、それぞれのタグに付与しているダブルクオーテーションの削除だけが上手くいきません。

例  rel="nofollow" から rel=nofollow
例2 id="hoge" から id=hoge

以下を使用すればhtml内のダブルクオーテーションを全て削除出来ます。
$str = str_replace(array('\'', '"'), '', $str); 

しかし、削除してはならないものまで削除してしまいます。
(id="hoge hoge2"のように空白を挟んだものや、マルチバイト文字を用いたもの、URL記載されているものなど)

ダブルクオーテーションを削除したところで大した縮小は望めないとは理解していますが、もし上手いやり方があればご教授願いたく思います。

よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

 一応書いておくべきだと思うので書いてます、必要に応じて読んでください

優先順位を大幅に間違えてるように思えます。
そもそも何故そんなことになってしまっているのかを伺ってもよろしいですか?
上司の指示?サーバーの負荷が重くなった?コストダウン?

(Amazonリンク) ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
この辺を全てやり尽くした上でのダブルクォート削減ならば良いのですが…

代表的な質問事項を上げておきます。

  • 誰がHTMLの妥当性をチェックするの?
      - メリットに対してのリスクが高すぎる
      - 例えば回答者が作ったロジックに抜け漏れがあって潜在的な売上を逃した場合、誰の責任か?
      - 仮に私が上司で部下が同じ事をやろうとしていれば、リスクや責任を回避するためにやめるよう指示する
  • gzip圧縮はかけた?
      - テキストファイルならば圧縮後のファイルサイズは25%程度になる
      - ダブルクォート2つ減らしても0.5バイトの削減程度の効果しか得られない
  • 画像ファイルは全て最適化済?
      - 画像の最適化で数10~100KB単位でファイルサイズが変わる
      - どんなしょぼい1ドットの画像でも1KB
      - デザイン面で画像を減らしてCSSで頑張れないかを検討するほうが先
  • CSSやJavaScriptファイルも最適化済?
      - こちらは静的サイトジェネレーター等のツールで一撃
  • なぜWordpress?
      - WordpressはWebサイトを楽して作るためのもので、動作自体はかなり遅い
      - 静的ファイルで持ったり、そもそもPHPやApacheを手放す事を検討する話にもなりそう

 本題

しかし、削除してはならないものまで削除してしまいます。 
(id="hoge hoge2"のように空白を挟んだものや、マルチバイト文字を用いたもの、URL記載されているものなど)

W3C HTML5仕様書(日本語訳) 1.9 HTMLの簡単な手引きによると、NGな要素は以下

空白文字または任意の" ' ` = < >

つまりマルチバイトやリンクはあっても大丈夫ですかね。
(IEでは~…Firefoxでは~…等の例外はあるかと思いますので、この辺の動作検証はお願いします)

本来ならば手っ取り早くこのようにしたいところです。(luckerさんの回答のパクリ)

$str = preg_replace(['/\="([a-zA-Z0-9\-_]+)"/', "/\='([a-zA-Z0-9\-_]+)'/"], "=$1", $str);

しかし、ScriptやStyle、テキストノード内の文字列も殺し始めるのでちゃんとタグの中身ですよということを確認する必要があります。
正規表現でその辺を証明しつつ作る方法はあるかと思いますが…

なので今回はタグの中身ということを確認しつつ、
$target_attributes=の位置が全て入った配列を突っ込むコードを書いてみました。
※未テストなのでこのままだと多分動きません。

もっとスマートな書き方は色々出来ますが、それなりに高速に動作するはずです。
もしこの続きからされるのでしたら使ってみてください。

$html = $str;
$target_attributes = array();
$offset = 0;
while (($elm_start = mb_strpos($html, '<', $offset)) !== false) {
  // 1文字目が/なら終了タグなので飛ばす
  if ((mb_strpos($html, '/', $elm_start + 1) === ($elm_start + 1)) {
    $offset = $elm_start + 1;
    continue;
  }
  //TODO: 必要があればこの辺にScriptタグ内でないことを証明する
  // タグの終了文字を控えておく
  if (($elm_end = mb_strpos($html, '>', $elm_start + 1)) === false) break;
  $elm_offset = $elm_start + 1;
  while (($elm_offset = mb_strpos($html, '=', $elm_offset)) !== false) {
    if ($elm_offset < $elm_end) break;
    $target_attributes[] = $elm_offset++;
  }
}

// 多分$htmlを破壊的に書き換えて行くことになるので、$attributesを降順にしておく
rsort($target_attributes);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/01/17 14:28 編集

    依頼主がGTMetrixでのMinify HTMLを「できれば」100%にして欲しいとのことだったので、リスクを説明して諦めてもらおうと思います。

    他の軽量化に関しては既に適用済みとなっているので、あとはクオートの除去くらいでした。

    皆さんの言う通り、クオートを除去しても効果は微々どころかほとんど無いかもしれませんし(表示されたhtmlを丸ごとonline minifierで縮小してみると5%~くらいの縮小でした)。

    追加されたコード(複数行の部分)は試したところうまく動作しませんでしたが、その他の説明含め大変参考になりました。ありがとうございます。

    キャンセル

  • 2016/01/17 15:54

    ありがとうございます。
    やはりそういった経緯があったのですね。

    「PageSpeed Insights」は知っていましたが、「GTMetrix」は初めてみました。
    採点めっちゃ厳しいですね…
    ガリガリにチューニングしすぎて殺風景になってしまっているGoogleトップページですら97%だなんて…
    そんなGTMetrixのサイトですら99%で、90~95%でほぼ頂点クラスのチューニングが必要かと思います。

    >追加されたコード(複数行の部分)は試したところうまく動作しませんでしたが
    やっぱり動かなかったのですね…
    これデバッグした後に、ダブルクォートを取り外すロジックもあるので、
    相当大変だと感じて力尽きてしまいました…
    試してくださってありがとうございます。

    キャンセル

  • 2016/01/17 16:20 編集

    GTMetrixはPageSpeedよりもシビアなので正直やる側にとっては中々辛いです。
    本家自体が100%じゃないのがそれを表していますし(苦笑)。

    他に方法が無いかstackoverflowを見たところ、この方法がシンプルで少しは除去出来そうでした。
    https://stackoverflow.com/questions/23587701/removing-single-and-double-quote-from-html-attributes-with-no-white-spaces-on-al

    ただ、scriptタグ内などにも影響が出るので今後のリスクを考えるとう~んですね。
    追加で色々コードを加えると、予想していない不具合が出てくる可能性もあるので。

    かなりの効果があるならまだしも効果が薄いなら尚更ですし、やはりやめておこうと思います。

    キャンセル

+1

効果あるかどうかの議論は考慮しませんが、やりたいのであれば、

$str = preg_replace("/\"([a-zA-Z0-9\-_]+)\"/", "$1", $str);

あたりでいいのかな… テストしていません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-2

10000000 の 500 程度じゃ効果無いですよ。
hpがどれだけ大きいのか教えてください。

クオートの除去なんて、破綻が見えてます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る