ソースの乱れは心の乱れ!WordPressが生成するHTML/JS/CSSを最適化しよう

投稿者: | 2018年9月13日
ぱっと読むまとめ
ブログ構築お任せください!
・この記事のようなブログを作成したい
・TechPRESSのようなブログを作成したい
・無料ブログではなく自分のドメインでブログを構築したい
・ブログだけでなく、特殊な機能を設置したい
・Wordpressで構築したいけど時間がない
・サーバーの運用もお任せしたい

そんなあなたにTechPRESSのブログ構築サービスは如何ですか?
簡単なブログ設置であれば最短1日で独自ドメイン+SSL+ブログをご用意します。

料金はミニマム設定で25,000円から(ドメイン代は実費を頂きます)

info@techpress.jpまでお気軽にお問い合わせください

ぱっと読むまとめ

プラグイン導入が簡単なWordpress。しかし調子に乗って入れ続けると大変なことに

調子に乗ってプラグインをインストールしまくっていると、実は見えないところに被害が・・・。

それはHTML/CSS/JSのソースコード。

これが荒れるとページの表示が遅くなり、ユーザの離脱に繋がります。また、みなさんが大好きなGoogle PageSpeed Insightsの点数も低くなります。

ということで、HTMLのソースが荒れた方はAutoptimizeプラグインを導入してソースコードを最適化しましょう。

こちらが最適化前のコード

cssがやたら並んでいますね。これ、headタグの中ですよ。

レンダリングブロックの元ですね。表示が遅くなってしまいます。

一番下の部分。こちらもJSがいくつか。それから生のstyleがぺろりんと。

行数は880行ほどあるようです。

この状態でGoogle PageSpeed Insights を見てみますとレンダリングブロックするCSSが12個もあるじゃないか、この野郎、と怒られてしまいます。当然です。

そこでAutoptimizeしてみます

なんともシンプルなAutoptimizeプラグイン。こちらをインストールし、管理画面を開くと下記項目が出てきます。

取り急ぎHTML/JS/CSS全ての最適化をするよう、チェックを入れてみました。

結果は下記。ソースコードが見にくくなりました(笑)

というのも改行コードが取り除かれたから。

改行コードを取り除けばその分ドキュメントの容量を減らすことができますので。

また12個あったCSSは1つのCSSにまとまっています。

ソースの一番下の部分。行数は28行まで減少。JSも一つのファイルにまとまっています。

この状態でGoogle PageSpeed Insightsを見てみると、12個あって怒られていたCSSが3個にまで減りました。

もちろんその分、点数アップです。

とは言え取り扱いは慎重に

かなり過激にコードを最適化してくれるAutoptimize。気持ち良い感じなのですが、私の経験上ここまでドラスティックにコード変更すると、何かしら不具合が出る可能性があります。特にJSがうまく動かなくなることは多いですね。

採用する際はテスト環境で慎重に検証してから導入ください。

ブログ構築お任せください!
・この記事のようなブログを作成したい
・TechPRESSのようなブログを作成したい
・無料ブログではなく自分のドメインでブログを構築したい
・ブログだけでなく、特殊な機能を設置したい
・Wordpressで構築したいけど時間がない
・サーバーの運用もお任せしたい

そんなあなたにTechPRESSのブログ構築サービスは如何ですか?
簡単なブログ設置であれば最短1日で独自ドメイン+SSL+ブログをご用意します。

料金はミニマム設定で25,000円から(ドメイン代は実費を頂きます)

info@techpress.jpまでお気軽にお問い合わせください
ぱっと読むまとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA