by Access Japan
販売ドメイン 2250(2021/10/19追加)

13本入荷しました

18本入荷しました

8本入荷しました

VISA,mastercard,JCB,AMERICAN ECPRESS,Diners Club INTERNATIONAL,PAYPAL

商品購入でポイント3%還元 | 10本まとめ買いで10%OFF

Autoptimizeの使い方・設定方法【HTML・JavaScript・CSSを最適化するWordPressプラグイン】

投稿日:

Twitter Facebook はてなブックマーク line

Autoptimizeの使い方・設定方法【HTML・JavaScript・CSSを最適化するWordPressプラグイン】

WordPressサイトの表示速度を早めるための1つの施策として「ソースコードの圧縮」があります。

ソースコードの圧縮をする際に、必要となってくるものが今回紹介する「Autoptimize」です。

そんなAutoptimizeを自分(企業)のWordPressサイトに導入する時に、

  • 『Autoptimizeってそもそもなに』
  • 『Autoptimizeの導入方法って難しいのかな』
  • 『Autoptimizeだとよく不具合が出ると聞くけど不安だな』

などのお悩みが発生するはずです。

今回のコラム記事では、WordPressサイトの表示速度を改善したい方に向けて、Autoptimizeとはどんなプラグインなのか、Autoptimizeの導入手順、Autoptimizeの使い方について解説をしています。

本コラム記事では、画像を使用して操作方法を解説していますので、Autoptimizeの扱いに慣れていない方も安心してご覧ください。

Autoptimizeとはどんなプラグインなのか

Autoptimizeのプラグインページ

Autoptimizeとは、ソースコードの圧縮を簡単に行うことができるWordPressのプラグインです。

Autoptimizeでできること

  1. HTML圧縮
  2. CSS圧縮
  3. JavaScript圧縮
  4. 画像の最適化

通常、ソースコードを圧縮する際にはfunctions.phpをカスタマイズしなくてはいけません。

しかし、エンジニアではない方がfunctions.phpを触ってカスタマイズするのは危険です(サイト崩れやサイトが正常に動かなくなる可能性が出てしまう)。

functions.phpを触って、サイトを壊してしまうリスクを負うくらいであれば、本コラム記事で紹介するAutoptimizeを導入して、ソースコードの圧縮を行なうべきです。

Autoptimizeの導入手順

Autoptimizeの導入は3分程度で完了します。

ここからは導入手順を画像付きで解説していきますので、お手元にパソコンを準備してください。

Autoptimizeを導入するために、まずはWordPressの管理画面に行きます。

WordPressの管理画面から「Autoptimize」と入力しているところ

プラグイン→新規追加の順でクリックし、検索窓に「Autoptimize」と入力してください。

Autoptimizeをインストールする画面

表示されたプラグインをインストール→有効化の順でクリックすることでAutoptimizeの導入は完了です。

たったこれだけの手順でAutoptimizeの導入は完了です。

ここからは、実際のAutoptimizeの使い方について詳しく解説していきます。

Autoptimizeの使い方

Autoptimizeの主な使い方は下記の通りです。

  1. HTML&CSSファイル圧縮
  2. JavaScriptファイル圧縮
  3. 画像圧縮

1つずつ画像付きで、詳しい使い方について解説していきます。

使い方1:HTML&CSSファイル圧縮

まずはHTML&CSSファイルを圧縮する方法について解説していきます。

HTMLオプションの画面

HTMLオプション  
HTMLコードを最適化 チェック
HTMLコードのコメントを維持 チェックしない

コメントを維持の部分にチェックを入れてしまうと、余計なコードが削除できないので、ここはチェックなしにするべきです。

CSSオプションの画面

CSSオプション  
CSSコードの最適化 チェック
CSSファイルを連結する チェック
インラインのCSSも連結 チェック
データ生成:画像をURI化 個人の好み次第
CSSのインライン化と遅延 不要
すべてのCSSをインライン化 不要
AutoptimizeからCSSを除外 不要

CSSファイルを連結する部分にチェックを入れると、いくつものファイルが統合されるので、サーバーへのリクエストが少なくなり、結果的に表示速度をアップさせることができます。

インラインのCSSとは、HTMLファイルに記述されたタグに直接記述することです。
具体例)アクセス中古ドメイン

このインラインで書かれたCSSも連結した方が、表示速度が上がるのでチェックしましょう。

次のデータ生成に関しては、サーバーのリクエスト数を減らすことができる一方で、ファイルのサイズを大きくしてしまうので、そこまで表示速度に影響を与えません。

そのため、今回は「個人の好み次第」と記述しました。

また、その他のCSSのインライン化と遅延、全てのCSSをインライン化、AutoptimizeからCSSを除外の部分はチェック不要です。

使い方2:JavaScriptファイル圧縮

HTML&CSSのファイルを圧縮できた方は、JavaScriptのファイルを圧縮していきましょう。

JavaScriptオプションの画面

JavaScriptオプション  
JavaScriptコードの最適化 チェック
JSファイルを連結する チェック
インラインのJSも連結 不要
内へJavaScriptを強制 不要
Autoptimizeからスクリプトを除外 不要
try-catchで囲む 不要

先程、インラインのCSSを連結部分にはチェックしていましたが、今回のJSファイルを連結する部分ではエラーが出やすいのでチェックは不要です。

内へJavaScriptを強制する項目にチェックしてしまうと、サイト崩れが起きてしまうことが多いので、あまりお勧めしません。

また、Autoptimizeからスクリプトを除外、try-catchで囲む項目はシンプルに不要なので、チェックの必要ありません。

使い方3:画像の遅延読み込み

Autoptimizeには画像の圧縮機能が準備されているのですが、できればAutoptimizeではなく、他の画像圧縮専用のプラグインを導入しましょう。

画像最適化の画面

画像の遅延読み込み(Lazy-load)を利用の部分のチェックも最近は不要になってきています。

というのも、最近のWordPressには標準でLazy-loadの機能が実装されているからです。

普段からWordPressのアップデートを行なっている方であれば、ここの項目は不要で大丈夫です。

2020年以降にWordPressアップデートを行なっていない方は、WordPressをアップデートするか、ここの項目にチェックを入れましょう。

Autoptimizeは高速化に必要です

Autoptimizeの使い方・設定方法について詳しく解説してきました。

あらためて、Autoptimizeについてまとめておくと下記の通りです。

  • Autoptimizeとはソースコードを圧縮するプラグイン
  • Autoptimizeの導入は3分程度で完了する

2021年6月にGoogleで導入されたランキングシグナルの「コアウェブバイタル(Core Web Vitals)」では、ページの表示速度が重要になってきます。

今回のAutoptimizeを利用してソースコードを圧縮し、ページの表示速度を改善させましょう。

この記事を読んだ人はこれも読んでいます

Autoptimizeの使い方・設定方法【HTML・JavaScript・CSSを最適化するWordPressプラグイン】

この投稿が気に入ったら
シェアしてください。

Twitter Facebook はてなブックマーク line

厳選されたオールドドメイン

SEOに効果的な
中古ドメインを探してみる
中古ドメイン一覧
  • サテライト

  • SEO対策

  • アフィリエイト

  • 高品質

  • 即時納品

  • 返品保証

中古ドメインでお悩みの方はこちらのまとめ記事をご覧ください アクセス中古ドメイン豪華2大キャンペーン!!全商品対象 中古ドメイン10本まとめ買いで最大10%オフ 無料会員登録で必ずもらえる!!500px(500円相当!!)アクセス中古ドメイン豪華2大キャンペーン!!全商品対象 中古ドメイン10本まとめ買いで最大10%オフ 無料会員登録で必ずもらえる!!500px(500円相当!!)

TLDでドメインを探す

パワーランクでドメインを探す

アフィリエイター募集 中古ドメインを紹介して高額な報酬も狙えます!! いちばんやさしい初めての中古ドメイン

チャットでのお問い合わせでは、以下の場合、対応を中断させていただくことがございます。予めご確認ください。

また、お問い合わせいただきましたチャットの内容は、お客さま対応の品質の維持・向上のため記録させていただきます。

プライバシーポリシーに同意の上お問い合わせをお願いします。https://communityserver.org/privacy/

Loading...