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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

4134閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/01/16 15:05

初めての投稿です。

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

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

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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

(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 03:27

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/01/17 03:40

>本来ならば手っ取り早くこのようにしたいところです。(luckerさんの回答のパクリ) そこ、悩んだんです。お題が「ダブルクオート」だったので。シングルクオートはあえて外しました。 でも、シングルクオートも含むなら $str = preg_replace(['/\="([a-zA-Z0-9\-_]+)"/', "/\='([a-zA-Z0-9\-_]+)'/"], "=$1", $str); ではなく $str = preg_replace("/\=(\"|')([a-zA-Z0-9\-_]+)(\"|')/", "=$2", $str); あたりの方がいいです。綺麗。
退会済みユーザー

退会済みユーザー

2016/01/17 03:49 編集

あー…でも、miyabi-sunさんのコードのほうが、ネストしたコードに対応できるのか… すいません、忘れて下さい。
退会済みユーザー

退会済みユーザー

2016/01/17 04:05

さらに、`<pre>`, `<textarea>` 要素内のものを除外する ことも考慮しなきゃいけないので、こういう処理は面倒だし、リスクに比べてメリットが少ないのは、全くもって同意です。
退会済みユーザー

退会済みユーザー

2016/01/17 05:29 編集

依頼主がGTMetrixでのMinify HTMLを「できれば」100%にして欲しいとのことだったので、リスクを説明して諦めてもらおうと思います。 他の軽量化に関しては既に適用済みとなっているので、あとはクオートの除去くらいでした。 皆さんの言う通り、クオートを除去しても効果は微々どころかほとんど無いかもしれませんし(表示されたhtmlを丸ごとonline minifierで縮小してみると5%~くらいの縮小でした)。 追加されたコード(複数行の部分)は試したところうまく動作しませんでしたが、その他の説明含め大変参考になりました。ありがとうございます。
miyabi-sun

2016/01/17 06:54

ありがとうございます。 やはりそういった経緯があったのですね。 「PageSpeed Insights」は知っていましたが、「GTMetrix」は初めてみました。 採点めっちゃ厳しいですね… ガリガリにチューニングしすぎて殺風景になってしまっているGoogleトップページですら97%だなんて… そんなGTMetrixのサイトですら99%で、90~95%でほぼ頂点クラスのチューニングが必要かと思います。 >追加されたコード(複数行の部分)は試したところうまく動作しませんでしたが やっぱり動かなかったのですね… これデバッグした後に、ダブルクォートを取り外すロジックもあるので、 相当大変だと感じて力尽きてしまいました… 試してくださってありがとうございます。
退会済みユーザー

退会済みユーザー

2016/01/17 07:31 編集

GTMetrixはPageSpeedよりもシビアなので正直やる側にとっては中々辛いです。 本家自体が100%じゃないのがそれを表していますし(苦笑)。 他に方法が無いかstackoverflowを見たところ、この方法がシンプルで少しは除去出来そうでした。 https://stackoverflow.com/questions/23587701/removing-single-and-double-quote-from-html-attributes-with-no-white-spaces-on-al ただ、scriptタグ内などにも影響が出るので今後のリスクを考えるとう~んですね。 追加で色々コードを加えると、予想していない不具合が出てくる可能性もあるので。 かなりの効果があるならまだしも効果が薄いなら尚更ですし、やはりやめておこうと思います。
guest

0

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

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

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

投稿2016/01/17 00:36

編集2016/01/17 00:50
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

投稿2016/01/16 17:10

ipadcaron

総合スコア1693

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問