この記事ではAutoptimizeというワードプレスプラグインの使い方について解説しているとん
ワードプレスでブログを運営していると、サイトの表示時間に悩まされることがあります。
サイトの表示時間は、SEOの観点から見ても優先的に気にすべき点であり、多くのブログ運営者が悩まされている点ですよね。
改善する方法は多岐に渡り、初心者でも簡単にできるものから少し難しい設定まで、出来ることは全てやっていく必要があります。
当ブログでは以前このような記事を公開しました。
こちらの記事では、具体的なサイト表示時間の改善方法について解説していますので、参考にしてみてください。
そして、その改善方法の１つとして、ブログ構築に使われているプログラムコードを圧縮するという手法があります。
今回の記事では、プログラムのコードをどう圧縮していけば良いのか、Autoptimizeというプラグインを用いて解説してきます。
Autoptimizeとは？
Autoptimizeってどんなプラグインなんだぷう？
Autoptimizeというワードプレスプラグインは、ブログ構築に使用されているプログラミングコードを圧縮し、サイトの読み込み時間を短縮することが出来るツールになります。
主に、HTML, CSS, Javascriptというプログラミング言語で出来たコードをプラグインが自動で圧縮してくれます。
通常、ブログの記事は設定されているソースコードを元にテキスト、画像等を読み込み、ユーザーのブラウザに反映させています。
当然ながら、読み込むデータが軽い方が負荷は小さくなりますので、サイトが表示されるまでの時間が圧縮可能という仕組みです。
このソースコードの圧縮についてですが、専門的な知識のある方でしたら自分で行うことも可能です。
ただし、初心者の方にとってソースコードをいじるのは非常に難易度が高く、簡単に出来るものではありません。
ですので、Autoptimizeのプラグインを使用して、簡単に効率よく対応を行うことをオススメします。
Autoptimizeは初心者にこそオススメなんだとん！
Autoptimizeで出来ること
まずはAutoptimizeというプラグインで出来ることについて紹介します。主に以下の３つです。
- HTML,CSS,Javascriptの圧縮
- 画像の遅延読み込み
- CDNの設定
HTML,CSS,Javascriptの圧縮
先ほども紹介したように、Autoptimizeはブログサイトを構築するために使用されているプログラミングコードを圧縮することが可能です。
基本的にプラグインの初期設定を一回行なっておくだけで、あとは自動的に圧縮が行われます。
後ほど解説しますが、Autoptimizeの初期設定はチェックをいれるだけの簡単作業です。
初心者でも簡単に設定出来る点がこのプラグインのメリットだと思います。
画像の遅延読み込み
Autoptimizeは画像の遅延読み込みを行う設定も可能です。
画像の遅延読み込みとは、ページを開いた時に全ての画像を読み込む訳ではなく、ページのスクロールに合わせて順々に画像を読み込んでいく方式です。
そうすることによって、ページを開く時の読み込み負荷を減らして、ページの表示速度を早める効果が期待出来ます。
CDNの設定
AutoptimizeはCDNの設定も可能です。
このような設定も可能ですので、よりブログの表示時間を早めることが出来ます。
こちらについては中級者以上向けですので、後々使う可能性があります。
なので、存在は覚えておくといいでしょう。
ソースコードをAutoptimizeで圧縮するメリット
次に、ブログのソースコードをAutoptimizeで圧縮するメリットについて解説したいと思います。
メリットは主に以下の４点です。
- 初心者でも簡単に設定可能
- 不具合の発生確率が低い
- サイトの表示時間が短縮される
- SEOにプラスに働く
初心者でも簡単に設定可能
Autoptimizeプラグインの最大のメリットは、本来上級者でしか出来ないソースコードの圧縮作業を、誰でも簡単に出来る点でしょう。
基本的にはチェックをいれるだけですので、初心者の方でも全く問題なく行うことが可能です。
非常に便利なプラグインと言えるでしょう。
不具合の発生確率が低い
ソースコードの圧縮には、それなりの知識が必要です。
もしこの作業を直接初心者の方が行なった場合、予期せぬ不具合が起きてしまう可能性があります。
消してはいけない文字を消してしまったり、余計なものを追加したりしてしまうと、最悪の場合ブログが表示出来なくなります。
バックアップをとっていなかった場合、かなり致命的なトラブルに発展します。
その点、コードを直接いじるのではなくプラグインで対応すれば安全に圧縮作業を行えます。
仮に不具合が起きてもプラグインを削除すれば元通り。
なので、トラブルが起きる可能性についてフォーカスした場合もAutoptimizeを使用するメリットがあると思います。
サイトの表示時間が短縮される
Autoptimizeはコードを圧縮するプラグインですが、それを行う目的はサイトの表示時間を短縮させるためです。
サイトの表示時間が短縮されれば、シンプルにユーザーの利便性が上がります。
普通に考えて、中々開かないサイトよりもすぐに表示されるサイトの方がユーザーにとって快適です。
現代人は非常にせっかちで、次から次へと情報を取得したい性質がありますので、WEB業界はスピードが命です。
その重要な要素をAutoptimizeによって改善出来ますので、非常にメリットになると思います。
SEOにプラスに働く
そして、サイトの表示時間を短縮出来ると、結果的にSEOに好影響をもたらします。
現にGoogleは、SEOの評価にサイトの表示時間も項目として入れています。
SEO対策に直結するサイト表示時間を短縮することによって、ブログにとって長期的にも良い影響が出ます。
ブログを収益目的で運営している方がほとんどだと思いますので、SEOに好影響というのはかなりのメリットになるでしょう。
サイトの表示速度を上げる方法
サイトの表示速度を上げる方法について、おさらいして欲しいとん
Autoptimizeの使い方について解説する前に、サイトの表示速度を上げる方法について、少しおさらいしておこうと思います。
サイトの表示方法の改善は、SEO対策の中でかなり優先順位が高い方です。
なおかつ、コツコツと対応を行えば改善が見られる分野ですので、ブログを運用する上で意識していきましょう。
表示速度を上げる方法は主に以下の４つです。
- サーバーの乗り換え
- 画像の圧縮
- 画像の遅延読み込み・外部読み込み
- ソースコードの圧縮
サーバーの乗り換え
サイトの表示速度を上げる施策はたくさん細かいものがありますが、一番重要なのはサーバーの選択です。
そもそもブログというのは、サーバーという基盤があってこそ成り立つものです。
大元のサーバーのスペックが低ければ、どんな施策を行なっても大きな変化は起きないでしょう。
ですので、サイトの表示速度を改善したい場合は、まずはサーバーの乗り換えから検討した方が早いです。
ちなみに弊社が運営しているジャストサーバーは、収益化ブログに特化した作りになっており、十分なサーバースペックを誇っています。
サイトの表示速度でお困りの方は乗り換えをご検討ください。
画像の圧縮
まずブログ記事の表示時間を短縮する方法として画像の圧縮という方法があります。
ブログ記事は、主にテキストと画像で構成されています。
テキストに関しては、微々たる容量ですので、記事の文字数については特に気にかける必要はありません。
ただ、その中でも画像の負荷が大半を占めているので、画像の枚数や画像の容量については気に掛ける必要があります。
とはいっても、貼りたい画像の画質を落とすわけにもいきませんし、画像のサイズを小さくすれば視認性が下がるので、それも適切ではないでしょう。
そんな時に、EWWW Image Optimizerという便利なプラグインを使えば、画像の質を落とさずに画像の容量を大幅に減らすことが出来るのです。
非常に便利なプラグインですので、詳細はこちらの記事をご確認ください。
画像の遅延読み込み・外部読み込み
続いての対処方法は、画像の遅延読み込みです。
容量の圧縮だけではなく、画像を順番に表示して読み込みの負荷を減らすというのも効果的です。
その機能についてはAutoptimizeにも搭載されています。
ただ、Jetpackという万能ツールにも遅延読み込みの機能が入っていますので、なるべく１つにまとめたい方はこちらの方がオススメです。
そして、先ほど少し紹介した別サーバーで画像を読み込む機能も搭載されています。
非常に便利なプラグインですので、詳細はこちらの記事でご確認ください。
ソースコードの圧縮
最後はソースコードの圧縮です。
こちらについては先ほどメリットなどを解説したので、概ね理解出来ていると思います。
ですので次の章で具体的な設定方法について解説していきます。
Autoptimizeの設定方法と使い方
Autoptimizeの設定方法を教えて欲しいとん
早速ですが、Autoptimizeプラグインの設定方法について解説していきます。
プラグインのインストール
まずはプラグインのインストールを行なっていきましょう。
ワードプレスの左メニューからプラグインを選択します。
新規追加をクリックします。
続いて、Autoptimizeを検索し、今すぐインストールをクリックします。
続いて、有効化をクリックします。
これでAutoptimizeのインストールが完了です。
Autoptimizeの初期設定
続いて初期設定を行なっていきます。
設定→Autoptimizeを選択します。
Javascriptオプション
Javascriptコードを最適化→チェック
JSファイルを連結する→チェック
インラインのJSも連結→チェック
<head> 内へ JavaScript を強制→チェック不要
Autoptimize からスクリプトを除外→チェック不要
try-catch で囲む→チェック不要
「インラインのJSも連結」という項目についてですが、こちらはHTML内に記載されているJavascriptも最適化するのかどうかの選択です。
まれにサイトの表示が崩れる場合もありますので、一度試してみることをオススメします。
その他の３つの項目については、特にチェックをする必要はありません。
CSSオプション
CSS コードを最適化→チェック
CSS ファイルを連結する→チェック
インラインの CSS も連結→チェック
データ生成: 画像を URI 化→チェック
CSS のインライン化と遅延→チェック不要
全てのCSSをインライン化→チェック
Autoptimize から CSS を除外→チェック不要
「インラインのCSSも連結」という項目は先ほど同様、HTML内に記載のCSSも最適化するのかどうかの項目です。
こちらはサイトによりますので、表示崩れがないか確認してから行いましょう。
その他の項目については特にチェックは不要になります。
HTMLオプション
HTMLコードを最適化→チェック
HTMLコメントを維持→チェック不要
HTMLのコメント維持については、HTML内に記述されているコメントを維持するのかどうかを選択します。
まれにソースコード内に、何についてのHTMLが記述されているのか、丁寧にメモが書かれていることがあります。
データ的にはそれらのコメントも無駄になりますので、不要な場合はチェックを入れないようにしましょう。
CDNオプション
CDNオプションについては、先ほど紹介した、画像の読み込みを別のサーバーで行うことによって読み込みの負荷を減らす方式になります。
こちらについてはそれなりに知識が必要ですので、初心者の方は今はスルーで問題ありません。
その他オプション
連結されたスクリプト / CSS を静的ファイルとして保存→チェック
除外された CSS ファイルと JS ファイルを最小化→チェック
404 フォールバックの使用→チェック
ログイン状態の編集者、管理者にも最適化を行う→チェック
その他のオプションについては、基本的にデフォルトの設定のままで問題ありません。
以上でHTML, CSS, Javascriptの設定が終了です。
画像最適化
続いて隣の項目の画像最適化についてです。
画像最適化の項目については、行うとしたら画像の遅延読み込みにチェックをいれるだけでOKです。
こちらの項目については先ほど解説した通り、画像の読み込みを一度に行わず、スクロールに合わせて行うという方式になります。
少しでもサイト表示速度を早くしたい場合はチェックを入れましょう。
追加
お隣の追加という項目についても、初期設定のままで問題ありません。
これでAutoptimizeの初期設定が完了です。
一度設定すれば、もう設定は不要ですのでご安心ください。
これでサイトの表示が速くなるブゥ！
ワードプレスのオススメプラグインについては、こちらの記事で解説していますのでぜひお読みいただければと思います。
