ページ速度

【初心者のサイト改善】HTML・CSS・JSを圧縮するAutoptimizeの設定方法と使い方

過去の自分
過去の自分
画像の容量を削減したけど、まだブログの表示速度がイマイチ遅いかも…

もしもそう感じたなら、ソースコードを圧縮することで、表示速度の悩みを解決できるかもしれません。

そんなとき役に立つのがソースコードを圧縮してくれる「Autoptimize」というプラグインです。

このプラグインを使うと、プログラミングのわからない初心者の方でも、無料でカンタンにソースコードを圧縮して表示速度を速くできます。

そこで今回は、WEBサイトやブログを表示する速さを改善するためのプラグイン「Autoptimize」の設定方法と使い方について解説します。

Autoptimizeとは?

Autoptimizeは、WordPressの

  • HTML
  • CSS
  • JavaScript

ソースコードを圧縮して、ページ表示速度を向上してくれるプラグインです。

ソースコードを圧縮するのは、プログラミングがわからない初心者にはハードルが高くて難しいですが

このプラグインならチェックを入れるだけで、カンタンにソースコードを圧縮できます。

【What’s ソースコードの圧縮】



改行や無駄な空白、タブ、コメントアウト部分が削除された状態にすること。

プラグインを使わずに無闇にソースコードを修正すると、レイアウトが崩れてしまうことがあります。最悪、ページが表示されない状態になってしまうことも。

なので初心者の方は、プラグインを使いましょう。

Autoptimizeの特徴

プラグイン「Autoptimize」には、以下のような特徴があります。

  • 日本語に対応している
  • 誰でも無料で使える
  • 圧縮したいファイル(HTML、CSS、JavaScrpt)を選択できる
  • 圧縮したいファイルと別の圧縮ファイルを作るため、元に戻せる

Autoptimizeでは、元のソースファイルを上書きしないため、プラグインを停止すると元通りに戻してくれます。

そのため、気軽に戻せるので、「ページの表示が崩れてしまって戻せない」といったトラブルを回避できます。

こういった特徴があるため、初心者の方にもオススメのプラグインです。

ソースコードを圧縮するとページの表示速度が向上する理由

ウェブサイトやブログへアクセスすると、何かしらのページが表示されます。

実はそのときにページに掲載されてる文章や画像などのデータを、毎回ダウンロードしています。

そのためダウンロードするデータが多ければ多いほど、

過去の自分
過去の自分
このサイトめちゃめちゃ重いな〜。

待つ時間もったいないし、ほかのサイトで探そう。

とブログから離脱して、結果的にSEOにまで影響してくる可能性も出てきます。

だからこそ、ダウンロードするページのデータ(転送量)を少なくして、サイトやブログを高速化する必要があるのです。

Autoptimizeをインストールする前の注意点

インストールする前に気をつけておきたいことがあります。

ソースコードを圧縮すると、何かしらサイトの表示が崩れてしまう可能性があるということです。

特にJavaScriptの設定は動作に不具合が出る可能性があります。

必ず設定を保存したら、ブログの表示に不備がないかチェックしましょう。

もし表示がおかしくなったとしても、

  • Autoptimizeを停止する
  • それぞれの項目のチェックを外す

を行えば元の状態に戻せます。

なのでご安心ください。

設定の項目で注意が必要な項目には、注意点を記載していますので、参考にされてみてください。

Autoptimizeをインストールする

それでは早速インストールしてみましょう。

まずはWordPressの管理画面にログインします。

ワードプレス管理画面へログインする

「プラグイン→新規追加」をクリックします。

プラグイン→新規追加をクリックする

右上の検索窓に「Autoptimize」と入力します。

Autoptimizeを検索する

「今すぐインストール」をクリックします。

今すぐインストール

「有効化」をクリックします。


Autoptimizeの設定方法

管理画面の左メニューの「設定」の中に追加された「Autoptimize」をクリックします。

設定_Autoptimizeを選択する

右上の「高度な設定を表示」をクリックします。

高度な設定を表示をクリックする

「JS、CSS&HTML」をクリックします。

そして以下の項目を設定していきます。

  • HTMLオプション
  • JavaScriptオプション
  • CSSオプション
  • CDNオプション
  • キャッシュ情報
  • その他オプション

HTMLオプションの設定

以下の画像の赤枠項目にチェックを入れて、HTMLを圧縮して最適化します。

HTMLオプションの設定

JavaScriptオプションの設定

以下の画像の赤枠項目にチェックを入れて、JavaScriptを圧縮して最適化します。

Javascriptオプション

JSファイルの圧縮はサイト表示が崩れる可能性があります。

そのため1つずつチェックを入れて、ご自身のサイトやブログの表示を確認しながら進めていくのをオススメします。

CSSオプションの設定

以下の画像の赤枠項目にチェックを入れて、cssを圧縮して最適化します。

CSSオプションの設定

CDNオプションの設定

デフォルト設定のままで大丈夫です。

cdnオプションの設定
【What’s CDN】

CDNとは、画像の読み込みを他のサーバーで読み込ませ、ブログにかかる負荷を分散させる方法のこと。

キャッシュ情報

デフォルト設定のままで大丈夫です。

キャッシュ情報の設定

その他オプション

デフォルト設定のままで大丈夫です。

Autoptimizeの設定を保存する

設定項目にチェックを入れたら、ページの最下部にある「変更を保存してキャッシュを削除」をクリックして、設定を保存しましょう。

変更を保存してキャッシュを削除する

設定を保存したらブログの表示に不備が出ていないか忘れずに動作確認しておきましょう。

TOPページや記事ページを表示して、表示崩れやJSの動作に不具合が出ていないか確認してください。

AutoptimizeのBefore/After

実際に僕のサイトでAutoptimizeを使用する前と使用した後で、どれだけ表示速度が改善したのかを公開します。

Google Page InsightsでのBeforeスコア

まずAutoptimizeを使用する前のGoogle Page Insightsでの分析結果はこちら!

06_採点結果

Google Page InsightsでのAfterスコア

つぎにAutoptimizeを使用した後のGoogle Page Insightsでの分析結果がこちら!

Autoptimize提供後のpagespeedinsights結果

DESKTOP:85→94
MOBILE:51→55

パソコン・スマホどちらも表示速度の改善ができました!

Autoptimize導入後のGTmetrixのスコア

Google Page Insightsだけでは心許ないので、「GTmetrix」でも分析してみました。

その結果がこちらです。

GTmetrixの結果

GTmetrixのほうでも、表示速度の改善ができました。

まとめ

Autoptimizeを使ってソースコードを圧縮すると、サイトの表示速度が早くなります。

やったことは各項目にチェックを入れただけ!この作業だけで表示速度が変わってきます。

僕の場合、点数の伸びはイマイチでしたが、中には数十点近く伸びる方もいらっしゃいます。

実際にページを表示したときの体感スピードも結構変わったように感じますよ。

画像圧縮したけど、ブログの表示速度をもっと早くしたいと思っている方は、ぜひ使ってみてください。

COMMENT

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