[徹底解説!]プラグインAutoptimizeで簡単サイト高速化

サイト高速化

WordPressプラグイン「Autoptimize」でサイト表示スピードをUpさせよう!!

サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです

どんなに良い記事を書いて、役に立つ情報を発信したとしても、サイトの表示スピードが遅かったら、せっかく訪れてくれたユーザー(訪問者)がすぐにサイトから離脱する可能性が高くなります。

それだけではなく、Google検索の評価が下がることにつながって、検索順位も大幅に下がる可能性も指摘されています。

ユーザビリティを高めるため、Google検索で高評価を得るためにも、サイトスピードの高速化はサイト運営者にとって必須のものとなっています。

今回は、サイトスピードを高速化する方法の1つである「レンダリングを妨げるリソースの除外」を可能とするWordPressプラグイン「Autoptimize」の解説をしていきます。

「Autoptimize」で高速化した結果どのくらい改善されたのか

今回、サイトスピードを計測できる以下の3種類のサイトを使用して、それぞれのプラグインでの点数の比較をしてみました。

PageSpeed Insights

Pingdom

GTmetrix

まず、それぞれのサイトごとの結果を見てみます。(5回計測した中のMAX値)

左がプラグイン導入前、右がプラグイン導入後となります。PageSpeed Insightsについてはモバイル表示での結果になります。

  • PageSpeed Insights  22 ⇒ 36
  • Pingdom       75 ⇒ 79
  • GTmetrix         85 ⇒ 87

これまで、様々な高速化の方法を試してきた中でも、今回のプラグインは点数の上がり幅が大きいです

ちなみにPageSpeed InsightsのPCでは、「98」という点数になりました。

「Autoptimize」がサイト高速化できる理由

プラグイン「Autoptimize」で出来ることをまとめてみると、

・HTMLの圧縮

・CSSの圧縮

・JSの圧縮

・Googl Fontの最適化

・絵文字の削除

「Autoptimize」インストールの方法

それではWordPressプラグインの「Autoptimize」をインストールしていきます。

このプラグインは日本語対応になってませんが、それぞれの設定項目について詳しく解説していきますので心配無用です。

このプラグインをインストールするためには2通りの方法があります。

  • 「Autoptimize」配布サイトから直接ダウンロード

プラグインを配布しているサイトから直接ダウンロードを行い、サーバ内のWordPressディレクトリに直接インストールする方法になります。これはディレクトリ構造が分かっている方にオススメの方法になります。

  • WordPress管理パネルのプラグイン新規追加からインストール

WordPress管理パネルの「プラグインを新規追加」からインストールする方法になります。直接ダウンロードに比べこちらの方が直感的にインストールできるので初心者の方にオススメの方法です。

「Autoptimize」配布サイトからダウンロード

まずは、プラグインを配布しているサイト(WordPress.org)へ移動し、ダウンロードをクリックします。

サイトはこちらになります。↓↓(配布サイトは別タブが開きます)

Autopitimize

autoptimize公式サイトの画像

こちらのサイトでダウンロードしたプラグインを「/wordpress/wp-content/plugins」ディレクトリにアップロードします。

autoptimizeダウンロードzip画像

ダウンロードしたプラグインを展開します。

autoptimizeフォルダの画像

アップロードが完了したらWordPress管理パネルから「インストール済プラグイン」をクリックします。すると、

autoptimizeプラグイン設定画面の画像

プラグイン一覧の中にインストールされたのが分かるので、「有効化」をクリックします。有効化後は管理パネルにある設定画面からいつでも設定を変更できるようになります。

※この時、ディレクトリに直接アップロードした場合は必ずファイルの所有権の変更を行っておきましょう。

これで、直接インストールする方法は完了しました。

詳しい設定方法については、後ほど解説します。

WordPress管理パネルのプラグイン新規追加からインストール

次に紹介するのは管理パネルからプラグインをインストールする方法になります。

まずは、管理パネルから「プラグイン新規追加」をクリックします。

プラグインの検索に「Autoptimize」と入力します。

autoptimizeプラグインインストール画面の画像

このように表示されるので「今すぐインストール」をクリックします。

プラグインインストール有効化の画像

有効化をクリックしてインストールが完了します。

管理パネルからプラグインを見てみると、以下のようにインストールされているのが確認できます。

autoptimizeプラグインインストール完了画面の画像

プラグインのインストールの解説はこれで終了です。

次は実際に設定を行っていきましょう。

Autoptimize」の設定方法

 

ここでは具体的な設定方法について解説していきます。

設定を行いたい場合は、上図のプラグイン一覧画面から「Autoptimize」下の「setting」をクリックするか、

管理パネルの設定から「Autoptimize」をクリックすれば設定画面になります。

autoptimize設定画面の画像

「Autoptimize」の設定は、以下の3点のみで完了します。

・HTMLコードを最適化

・JavaScriptコードの最適化

・CSSコードを最適化

それぞれにチェックを入れて、下部の「変更を保存してキャッシュを削除」をクリックします。

変更を保存してキャッシュを削除ボタンの画像

 

まとめ

今回紹介した「Autoptimize」は、HTMLやCSSの圧縮をメインに行うプラグインになります。

このプラグインである程度は圧縮できるのですが、それでもいくつかのHTMLやCSSのコードが残ってしまいます。

CSSを圧縮する方法については別の記事で解説しているので良かったら試してみて下さい。

冒頭でも書きましたが、サイトの表示スピードのUpはSEO対策としても重要なテーマです。

検索順位を上げるテクニックは沢山ありますが、初心者や慣れていない人には難しい方法も多いです。

サイトのスピードUpはプラグインを入れるだけで、初心者の人にもすぐに対策できます。

是非、いろいろ試してみて、ユーザビリティの向上を目指して下さい。

レンダリングを妨げるリソースの除外を行ってサイトスピード改善!!
「レンダリングを妨げるJavaScriptの除外」を改善しよう!! SEO対策を行う上でユーザビリティをUpさせる為にサイトスピードの改善は避けて通れません。 そもそも「レンダリングを妨げるリソースの除外」って一体何なのか?...
[2019]徹底解説!!ワードプレス リビジョン削除で高速化
そもそもリビジョンって何なの??? 皆さんはワードプレスに搭載されているリビジョンという機能はご存知でしょうか??? 記事を作成していく過程において、要所要所で下書き保存をしたり、プレビューをチェックしながら進めていくと思います...
WordPressプラグインで高速化の効果を検証してみた!その1
WordPressプラグインで高速化の効果を検証してみた 今回は、多くの種類があるWordPressプラグインの中でも「高速化」を狙えるプラグインを使用してみたら、実際どのくらい高速化できるのかということを検証しました。 そもそも高速化...
画像圧縮プラグインEWWW Image Optimizerの使い方
ワードプレスを高速化!プラグインEWWW Image Optimizerで画像を圧縮しよう ここでは、ワードプレスプラグイン「EWWW Image Optimizer」を使用して画像の圧縮方法について解説していきます。 何のため...
わずか3分!SNSアイコン表示Offでワードプレスを簡単高速化!
SNSアイコンを表示オフにしてワードプレスを簡単高速化! ここでは、使用しないSNSアイコンの表示設定をオフにして簡単にWordPressを高速化する方法について解説していきます。 このページを見ているということは、Word...
ワードプレス高速化!プラグインa3 lazy loadで簡単設定
a3 Lazy LoadをインストールしてWordPressを高速化しよう サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。 どんなに良い記事を書いて、有益な情報を発信したとしても、サイトの読み込...
使用していない CSS の遅延読み込みを改善!絵文字削除(wpemoji)
絵文字(wpemoji)を削除して使用していない CSS の遅延読み込みを改善! SEO対策を行う上でユーザビリティをUpさせる為にサイトスピードの改善は避けて通れません。 そもそも「使用していない CSS の遅延読み込みを改善」...

コメント

タイトルとURLをコピーしました