ソースの乱れは心の乱れ!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までお気軽にお問い合わせください

オススメの新着記事

迷いに迷ってようやく決定!ワードプレスの関連記事はこのプラグイン 関連記事生成用のプラグインだけなかなか決まらず エンジニア主体で運営されている、このTechPRESS。サーバー選定やデザイン変更などはお手のもので、サクサク出来上がったのすが、唯一「関連記事」...
WordPressの乗っ取りを防ぐのです。不正アクセス対策しましょう 誰でも気軽に設置できるからこそ世界中から狙われやすいWordpress。乗っ取られたら、はいおしまい 今やボタン一つで誰でも簡単に設置できるWordpress。しかしセキュリティ的には非常に脆弱...
いまだにSSLは高いと思っている人が多すぎてびっくりする話 昔はSSL取得に年間数万円かかったけど、それは昔の話であって 20年ほど前はSSLを取得しようと思ってもベリサインかthawteくらいしか選択肢がなく、選択肢が無い故に非常に高い値段を払ってSS...
記事を書く気力が無い日は既存記事のメンテナンスをしよう ヤル気が出ない日は既存記事のメンテナンスをしましょう ブログを書いても書いてもなかなかアクセスが増えない日々。とりあえず100記事は必要と言われて頑張るけど、しかしやっぱりアクセスがない。だんだ...
Googleタグマネージャを利用して Googleアナリティクスを発火させる 管理は楽ですが少々コツがあります Googleアナリティクスを利用する場合、トラッキングコードをあなたのページにぺたりと貼れば、すぐに利用が可能です。一番簡単な方法です。ページビュー計測するだけ...
google検索結果でより目立つ!スターレイティングをWordPressに設置 Googleの検索結果でときどき☆の評価が付いていて目立つサイト、ありますよね 例えばこんなの、です。 この星、結構ずるくないですか? 青、緑、黒ばかりの検索結果の画面で、星...
WordPressの引っ越し・バックアップ!そんな時はAll-in-One WP Migration サーバをお引越ししたい!Wordpressを使っているならAll-in-One WP Migration一択 急にサーバーをお引越ししたくなりましたか?安くてパフォーマンスの良いサーバーでも見つ...
WordPressのブロックチェーンプラグインにはどんなものがある? CMSとして人気の高いWordpress。プラグインが充実しており、その使いやすさも人気の一つです。今回は"Blockchain"のタグがついているwordpressプラグインを気ままにチェッ...
【本当は教えたくない】メディア運営やアフェリエイトに役立つchromeプラグイン4つ 現在新しいメディアや個人ブログ、アフィリエイトが流行っていますよね このtechpressも他聞にもれずその仲間ですが。 今回はそのようなメディアを運営している方に役に立つchromeエク...
【副業でおすすめ】独自ドメインを取得し、レンタルサーバでアフィリエイトやブログを始める こんにちは。 本日はこのTECHPRESSでも使われているサーバとドメインの設定方法についての記事です。 みなさんの中には独自ドメインでアフィリエイトを始めたい、もしくはブログを書...
ぱっと読むまとめ

コメントを残す

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

CAPTCHA