【Autoptimize】HTMLやCSSを最適化して高速表示にしSEO対策する方法【WordPress】

Webクリエイターの井上(@Kouki_Inoue0411)です。
このブログを読んで頂いている方は、【HTML】や【CSS】は、聞いたことのある言葉、もしくはこの【コード】や【タグ】と呼ばれるものを書ける方だと思います。もちろん書けない方でも、本ブログは大丈夫です。

この【HTML】や【CSS】【Javascript】と言ったコードを最適化しウェブサイトを高速表示してくれるWordPress用のプラグインが存在ます。
このプラグインを使って、SEO対策も同時に行えます。

1. 最適化する理由は？
2. Autoptimizeの使い方
3. インストール方法
- 3.1. 設定方法
4. まとめ
- 4.1. 表示スピード計るサイト
  - 4.1.1. Page Speed Insights : Google
  - 4.1.2. GTmetrix

最適化する理由は？

そもそも、なんで最適化しなくてはいけないのか？
それは、

物理的に読み込む事が少ないと読み込むスピードは速くなる

からです。
かなりシンプル。

長ったるいこコードの読み込みより短いコードの読み込みの方が、早くサーバーからダウンロードし表示ができます。
つまり、

の様に大きなデータ送信より、

の最適化された必要なコードのみをダウンロードした方が、明らかに高速表示してくれます。
これは、コードだけに限ったことではなく画像も同じです。

Autoptimizeの使い方

【Autoptimize】は、不具合も報告されています。
インストールし有効化してレイアウトが崩れるようでしたら、使用を控えた方が良いかもしれません。
URL : https://wordpress.org/plugins/autoptimize/

インストール方法

では、【Autoptimize】をダウンロードして使えるようにしていきます。
まずは、WordPressダッシュボードのサイドバーより【プラグイン】→【新規追加】

キーワードから“Autoptimize”と記載すると検索ヒットされます。
【今すぐインストール】→【有効化】これでインストール完了。

設定方法

インストールしただけでは、まだ最適化は出来ていなのでここから設定を行っていきます。
よく使うところのみ紹介します。
サイドバーより【設定】→【Autoptimize】から開けます。

まずは、【JS,CSS & HTML】カテゴリーから。
各チェックボックスにチェックを入れて【変更を保存してキャッシュを削除】をクリックすると最適化されます
【CODオプション】は、知識のある方は行ってください。
分からない方は、スルー。

次は【image】のカテゴリー。
【Optimize Images】は、“画像の最適化をしますか？”と言う意味です。
する場合には、チェックボタンを入れて【変更を保存】。
【Lazy-load images?】は、“画像の遅延読み込みをしますか？”する場合には同じく、チェックボタンを入れて【変更を保存】。

【追加】のカテゴリーは、分かるところのみ設定をしてください。
【さらに追加】は、有料版です。

インストールすると上のバーに、

が、出てきます。
ここから、キャッシュを削除もできます。

まとめ

導入から設定までそこまで難しくはなく、コードの整理にはスキルが必要(らしい)です。
そのスキルをプラグインで一瞬で行えるのは素晴らしい。
中盤でもお伝えしましたが、この【Autoptimize】は、不具合も報告されています。
インストールし有効化してレイアウトが崩れるようでしたら、使用を控えた方が良いかもしれません。

レイアウト等が崩れた場合には、【プラグイン】から【停止】してください。