「Simplicity」後継テーマの「Cocoon」を試していますが。 Cocoonの目玉機能？に「高速化」という項目があります。 ※「Cocoon設定」→「高速化」 これは、HTMLやCSS、Javascriptなどを圧縮して高速化を図る機能ですね。 この圧縮というのは、例えばコメント「<!-- ～ -->」「/* ～ */」などで注釈を入れたりして見やすくしながら編集するのが普通だと思いますが、それは人間のためであって、ブラウザがレンダリングする際には不要な無駄な情報なわけです。スペースやタブ、改行も同様。 それらをすべて削除してしまうわけですね。 実は、スペースや改行がなくなったくらいでそんな変わるの？と懐疑的だったのですが(^^;) やってみたら結構効果があるようです、「PageSpeed Insights」の結果が、目に見えて良くなる、ような気がします。 （「３０」がいきなり「９０」になったりはしませんが、試してみたら、「３０」が「５０」くらいにはなる印象がありました。）
ただし、私の場合は、諸般の事情で 「HTMLを縮小化する」「JavaScriptをフッターで読み込む 」は諦めざるを得ませんでした。 諸般の事情とは、WordPressの改行問題を解決するのに、Ｐタグに「 white-space:pre-wrap; 」を設定して記事を書いていたものですから・・・ ⇒ WordPressの改行問題の解決方法 ⇒ WordPressの改行問題 最終結論 【なんだコレで良かったんだ】 ⇒ 単語の途中で折り返すには 改行と折り返し制御まとめ 試しに高速化（HTMLを縮小化する）をオンにしてみたら、ほぼすべての記事の改行がなくなって、大変に読みにくくなってしまいました・・・Σ(￣□￣;) そうなんです、<P> タグにwhite-spaceで折り返し制御のスタイルを指定してあったわけですが、それは高速化の圧縮処理の時には無視されてしまうのですね・・・orz ためしに <pre> タグで実験してみたら、改行は削除されないようでした。
以前、WordPressの自動改行問題を解決するのに<pre>タグを使うことを検討していた時期がありますが、<pre>タグにはいくつか問題がありまして ⇒ <PRE>要素は危険らしい・・・？ ブラウザの解釈の仕方が統一されておらず挙動が制御ｄけいない問題と、一番大きかったのは、フォントがすべて「等幅」にされてしまうこと、で諦めました。 PREタグのフォントをプロポーショナルにする方法を今回改めて調べてみて、実現できる方法が分かったのですが。 ならば現在、Pタグにwhite-spaceを指定しているところをすべて Search Regix でPreに置き換えてしまうか？！とも思ったのですが・・・
よく考えたら、div要素やtableなど、P要素以外にもwhite-spaceを指定しているところがたくさんある事を思い出しまして。 Pだけ置き換えても、それらはすべて改行が削除されてしまいますね。。。orz white-spaceを一切使わずに頑なに改行タグ<br />を使って文章を書けばよいのでしょうから、これから新規にブログを作る人はそれでよいかも知れませんが。 現時点で3500前後ある記事の全ての改行タグを修正するのは大変・・・（ブログ移転の時にやったけど…あのときはまだ記事は1000くらいしかなかったしなぁ…^m^;） それに、white-space:pre-wrap;を使ってしまうと、もう便利で、改行タグなんて使ってられない(^^;) （※それ以前に、未だにテキストエディター編集で、ビジュアルエディターを使ってないから問題なわけですが。。。）
とりあえず、「HTMLを縮小化する」は諦めることにしました。 CSSとJavascriptに関しては圧縮しても問題ないようです。 あと、「LazyLoad」もオンで。 これだけでもかなり速度向上が望めました。 ※「LazyLoad」は表示されていない範囲にある画像の読み込みを遅らせる（ブラウザで表示させるタイミングで読み込ませる）機能ですね。 あまり画像を使ってないのですが、画像が多めに貼られている記事で確認してみたところ、ちゃんと機能しているようです、そして表示にもたつくということもありませんでした。 自分で入力したショートコードが使えなくなってしまったので、最後にある「JavaScriptをフッターで読み込む 」はオフにしました。
コメント