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

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

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

最適化する理由は?

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

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

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

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

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

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

Autoptimizeの使い方

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

インストール方法

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

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

設定方法

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

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

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

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

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

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

まとめ

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

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

表示スピード計るサイト

体感的にではなく、データとして計れるサイトがあります。

Page Speed Insights : Google

Page Speed Insights】は、Googleが管理するページスピードスコアです。
点数で表示され100点になれば最高スコアで100点にならなくても改善方法など、表示され更に改善していくことが出来ます。

スコアの基準は、80点を超えると良いとされています。

ブラウザ・モバイル両方のスコアの計測が可能です。
URL : https://developers.google.com/speed/pagespeed/insights/

GTmetrix

GTmetrix】も同様です。
A~Eで評価されます。
URL : https://gtmetrix.com/

価値を“カタチ”に、発信する“チカラ”に

ライティング委託やブログサイト制作・ウェブサイト制作など委託制作のご依頼を受け付けています。 さらに、動画制作も行っています。