WordPress CSS,HTML,JavaScriptを縮小最適化してブログを高速化する方法

      2017/02/15

前回から、サイトのユーザエクスペリエンス数値を確認するPageSpeed Insightのポイント上げるためWordpressブログを高速化の方法を解説しています。

▶️.htaccessに追記で圧縮を有効にする【PageSpeed Insights】

▶️画像を一発で圧縮してサイトを高速化!EWWW Image Optimizerの設定と使い方

今回は、CSS、HTML、JavaScriptを縮小する方法を解説していきます。

Sponsored Link

CSS、HTML、JavaScriptを縮小する

▶️PageSpeed Insights TOP

こちらで確認した際に、「修正が必要」「修正を考慮」と表示された中に、下の写真のような項目がありました。

  • CSSを縮小する
  • HTMLを縮小する
  • JavaScriptを縮小する

このサイトの場合の数字は7.1KB、1.9KB、733Bと大きくは有りませんが、「修正を考慮」した方が良いと提示され、対応可能なものは取り組んでいこうという事で今回はWordpressのプラグイン「Autoptimize」1つでこの3点を縮小可能なので導入していきます。

Autoptimizeの使い方

作業としては非常に簡単です。ダウンロードして、設定するだけです。

▶️Autoptimize

Autoptimizeをインストールする

新規プラグイン追加から検索し、インストールします。

インストールが完了したら、有効化し「設定」をしていきます。

Autoptimizeを設定する

「メイン」タグ内に「HTMLオプション」「JavaScriptオプション」「CSSオプション」がそれぞれあるので縮小させたいものにチェックをいれ、「変更を保存してキャッシュを削除」をクリックすれば完了です。

Autoptimizeを使用する際の注意点

サイトによっては、表示に影響を及ぼす場合があります。例えばこのサイトの場合は、

header上部分に赤ラインがでたり、ナビゲーションバーの色が変わったり、フッター色が変わったりとCSSでの影響が出ました。

どれも対処可能な範囲なのでCSSを書き換えるか、もし対応が難しい場合は先ほどの設定画面で影響が出る部分だけチェックを簡単に外せるので初心者にも安心してできます。

縮小後PageSpeed Insightの評価確認

それでは実際何れ程ポイントアップが出来たのかPageSpeed Insightで確認してみます。

前回は73/100でしたが、さて今回は・・・・

74/100で「1ポイントアップ」でした。たった1ポイントですが、ユーザエクスペリエンス向上がSEO対策でも非常に重要な点です。特に私の場合モバイル評価が少し低いので

検索表示が激変!モバイルフレンドリーテストでモバイルファーストに備える
 自サイトをいろいろチェックしていたら、検索結果に「ページがモバイルフレンドリーではありません」と表

こちらで説明したように、モバイルファースト導入を見据えて出来る事なら何でもやるというスタンスでどんどん進めていきます。

皆さんも是非サイト高速化、ユーザエクスペリエンス向上を進めてみてください。

 - SEO対策, WordPress, プラグイン