HTMLとCSS、JavaScriptを縮小し最適化するプラグイン【Autoptimize】

今回はHTMLとCSSとJavaScriptを縮小し最適化するプラグイン【Autoptimize】を紹介しておきます。

このプラグインを利用する事でCSSだけでなく、HTMLやJavaScriptも縮小させてさらにページの表示速度を上げる事ができます。今回はプラグインを有効化して設定をすれば終了という簡単な作業です。

スポンサーリンク

プラグインAutoptimizeのインストールと有効化

このプラグイン「Autoptimize」ではHTML、CSS、JavaScriptを縮小化して最適化してくれます。しかも設定も簡単なのでおすすめです。ただ、環境によって効果も違ってくるかもしれませんので、プラグインをインストールする前に「PageSpeed Insights」と「GTmetrix」で表示速度のスコアを確認しておき、プラグインを入れて設定した後でもう一度スコアを計測して比べてみるといいかもしれませんね。

具体的にどの辺が縮小されるのか?という部分ですが、ブログを開いて右クリックで「ページのソースを表示」をクリックすると通常はこんな感じのソースになってます。

autoptimize-5

↓↓このソースがこんな感じに圧縮されるわけです。

autoptimize-4

余計なスペースとかコメントとかをギュウギュウ詰め込むって感じです。もちろんプラグインを停止すると元に戻す事もできます。

インストールと有効化はいつもどおり。プラグインの新規追加で「Autoptimize」を検索してインストール、有効化します。

autoptimize-1

プラグインの有効化ができたら設定をしていきましょう。

Autoptimizeの設定

WordPressの管理画面から「設定」⇒「Autoptimize」を選択します。

autoptimize-2

「Autoptimize」の設定はシンプルです。

autoptimize-6

  • Optimize HTML Code?:HTMLを縮小し、最適化しますか?
  • Keep HTML comments?:HTML内のコメントをも最適化やっちゃいます?

autoptimize-7

  • Optimize JavaScript Code?:JavaScriptを最適化します?

利用しているJavaScriptによっては最適化する事で上手く動かないものがあるかも知れませんので、設定後に確認して下さい。上手く動かないものがあればこのチェックは外します。

※私のサイトの場合は不具合が出たので、「Optimize JavaScript Code?」のチェックは外してます。

autoptimize-8

  • Optimize CSS Code?:CSSを縮小し最適化します?
  • Generate data: URIs for images?:CSSに背景画像を埋め込む?

この2つ目の「Generate data」の部分はよく分からないのですが、一応チェックを入れてます。もしこの設定にして表示のおかしい部分が出てきたらこのチェックは外しましょう。

autoptimize-9

「CDN Options」は使わないのでここは空欄にしてます。

全ての設定が完了したら、「Save Changes and Empty Cache」をクリックして、設定の保存とキャッシュのクリアをしておきましょう。

autoptimize-10

以上で設定は完了です。後は冒頭で解説したようにページスピードのスコアを比べてみて下さいね。
WordPress高速化まとめページ

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

HTMLとCSS、JavaScriptを縮小し最適化するプラグイン【Autoptimize】”に5件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. 乃風

    うまくいきました、しげぞうさん。すごくうれしいです。本当にありがとうございました。(^^♪

  2. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。アイキャッチ画像と文字との余白という事なので、「margin-bottom」ではなくて、「margin-top」で上手く行くような感じがします。

    スタイルシートに以下のコードを追加して試して見てもらえますか?

    .post-thumbnail-caption {
        margin-top: 20px;
    }
  3. 乃風

    大がかりな変更になるのですね。ちょっと驚いてしまいました。いつも、ありがとうございます、しげぞうさん。

    早速やってみました。うまくいきました。うれしいです。(^^♪

    ただ、画像と文字にもう少しスペースがほしくて、「 margin-bottom: 5px;」の5pxを少しずつ増やしたり、あるいは「キャプションの下の余白を20px」の20pxも増やしたり、色々と行ってみたのですが、全く反応がありません。どうしたらいいのでしょうか。

    現在は、下記の状態に戻しました。
    アイキャッチ画像の下の余白を5px。
    キャプションのテキストを中央寄せ。
    キャプションの文字サイズを15px。
    キャプションの下の余白を20px。

  4. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。多分アイキャッチ画像の事だと思うのですが、アイキャッチ画像の下に出典などを追加するという事ですよね。これは本文の始めの部分にそのまま書いてスタイルシートで位置調整をするという方法が簡単なんですが、画像の説明文を追加するのであれば画像のキャプションという機能を使った方が構成的には良い感じがしました。

    なので、ちょっと面倒なんですが、若干カスタマイズしていきます。カスタマイズする前に変更前のファイルはメモ帳などにコピペしていつでも元に戻せるようにしてから試して下さい。

    まず、「content.php」に次のような記述があると思いますので、探して見て下さい。

    <?php if ( is_search() || is_home() || is_archive() ) : // Only display Excerpts for Search ?>
    <div class="entry-post-thumbnail">
    <?php the_post_thumbnail('thumbnail'); ?>
    </div>
    <?php else : ?>

    ここは今のままでOKなので、そのまま残します。

    上記の記述の下にアイキャッチ画像を表示させる次のようなコードがあるかと思います。

    <?php the_post_thumbnail(); ?>

    もしこの記述がない場合はおそらく以下の記述があります。

    <?php if ( ! post_password_required() && ! is_attachment() ) :
    				the_post_thumbnail();
    			endif; ?>

    どっちかの記述があると思います。これがアイキャッチ画像を表示させている部分なんですが、これを削除して次のコードに書き換えます。

    <?php the_post_thumbnail();
    echo '<div class="post-thumbnail-caption">' 
    . get_post( get_post_thumbnail_id() )->post_excerpt . '</div>'; ?>

    これで保存して準備が完了です。

    説明をしておくと、アイキャッチ画像をアップロードした時や画像を選択した時に画像の下「キャプション」という説明文を書く欄があります。この「キャプション」という部分に書いた内容を画像の下に表示させるというカスタマイズになります。

    それでですね、後はスタイルシートで中央寄せにして文字の大きさや余白を調整していきますので、以下のコードをスタイルシートに追加します。

    .entry-header img.wp-post-image {
        margin-bottom: 5px;
    }
    
    .post-thumbnail-caption {
        text-align: center;
        font-size: 15px;
        margin-bottom: 20px;
    }

    アイキャッチ画像の下の余白を5px。
    キャプションのテキストを中央寄せ。
    キャプションの文字サイズを15px。
    キャプションの下の余白を20px。という感じにしております。

    もし上手く行かない場合には再度コメント下さい。

  5. 乃風

    いつもお世話になっております。ありがとうございます。先日、Autoptimizeのバージョンアップをしてからなのですが、なぜか、ジャンクメールが一切来なくなったんです。今回のバージョンアップで、そういう機能も付いた・・・ということなのでしょうか。すごく助かっています。

    記事の一番上に、現在、大きな画像を一枚飾っておりますが、その直ぐ下に、記事よりも小さい黒い文字で、中央に「画像の出典:○○○」と表記させたいのですが、どのように設定したらいいのでしょうか?