プラグイン

ソースコードHTML、CSS、JavaScriptを最適化し表示速度を上げるプラグイン『Autoptimize』

更新日:

WPプラグイン,ソースコードHTML、CSS、JavaScriptを縮小して表示速度を上げる,Autoptimize

こんにちは。SHINです♪

 

「サイトの表示速度が遅いわ・・・イラっとする!」ってことありませんか?

それが自分のサイトだとしたら・・恐ろしい限りですよね。ページをクルクル読み込んでいる間に閉じられたら、高品質なコンテンツも台無しになりかねませんし。

 

そこで、この便利なプラグイン「Autoptimize」が問題を解決してくれます。

 

ちなみにサイトはソースコードで構成されています。トップページも個別ページも固定ページも。文字装飾などでカスタムするタグもソースコードです。

このソースコードを、自動で最適に縮小してくれて転送量(データ)を減らして表示速度を上げるという役目を担ってくれるのが「Autoptimize」。まさにヒーローです(笑)

I'll be your hero~♪♪♪
あきら
SHIN
奈美恵ちゃんのHIROね。てかココで広げんでええから。

 

WordPressサイトを立ち上げたら、まず導入しておきたいプラグインですね♪

ではインストールしていきましょう。

 

ページ表示速度の仕組み

ここで簡単にページが表示されるまでの仕組みを、簡単に説明しておきますね。

ページ表示工程

STEP1・・サイト訪問者が見たいページへアクセス

STEP2【転送】・・サイトが訪問者へそのページを表示させるべく情報をサーバーへ要求

STEP3【転送】・・要求された情報ページを訪問者へ表示

この3工程を経て、訪問者へページが表示されるんですね。

 

そこで、STEP1を経てからのSTEP2~STEP3までの「転送時間」を0.01秒でも早くしたいわけです。

この転送時間を、自動でソースコード短縮化することで表示速度を上げてくれるプラグインが「Autoptimize」です。

 

 

Autoptimizeインストール方法

では早速インストールしていきましょう♪

step
1
WPダッシュボード「プラグイン」>「新規追加」より検索枠へ「Autoptimize」と入力してプラグインを「今すぐインストール」します

Autoptimize

プラグインを「有効化」して設定に進みましょう。

 

Autoptimize設定方法

設定方法は「えっ?」っていうほど超簡単です(笑)たったの5クリックで完結できます♪

 

SHIN
まずは設定画面右上にある「高度な設定を非表示」をクリックして簡易設定画面に切り替えます

Autoptimize3

 

SHIN
HTMLオプション、JavaScriptオプション、CSSオプションそれぞれ最適化へチェックを入れて「変更を保存してキャッシュを削除」をクリック

Autoptimize4

これで設定完了!

 

Autoptimizeインストール後に注意したいこと

「よし!これでソースコードが最適化できたし、表示速度バッチリ!」となりますよね?

ただ、いくつか注意したいことがあります。

 

1.WordPressテーマによって「型崩れ」が生じる可能性あり!

AutoptimizeはHTMLコード、CSSコードも最適化するので、相性の悪いWordPressテーマだと「型崩れする」といった情報もあります。

 

型崩れとは、ボックスデザイン(管理人紹介やCTA、記事中のタグ装飾、テキストへ記述したソースコードなど)がおかしくなることが・・・。

Autoptimizeをインストール~設定作業まで完了したら、一旦不安と思われる個所はすべて確認することをおすすめします。

 

2.一部プルダウンリンクが開かなくなる!?

たいていのウェブサイトには「グローバルメニュー」という下層ページを表示するプルダウン式メニューを設置していると思います。

またサイドバーにもカテゴリ一覧を表示して、その下層ページを表示しているサイトもありますよね。

 

その「下層ページが開かない!」というトラブルがあるという問題・・・。ですが!安心してください♪

解決策は、単純に「設定」にあります。

 

Autoptimize5

JavaScriptオプションの<head> 内へ JavaScript を強制という項目のチェックを外す。これだけです。

デフォルトでは外れているので、イジっていなければ問題ありません。万が一すべてチェックを入れてしまった場合は要チェックです!

 

Autoptimizeインストール後の表示速度測定

では気になる「表示速度がどれだけ向上したか」という測定結果です。

とその前に!僕のサイト、まだ画像圧縮処理をしていないためにモバイルは「激遅」です・・スコア値は気にしないでください(苦笑)

Autoptimize導入前

SHIN
モバイルフレンドリーではないですね・・・失礼しました!
はよ対策せなあかんやんか・・・
あきら
SHIN
ごめん!やります!すぐやりますよ!!

 

Autoptimize導入後

SHIN
モバイルが「5」、パソコンが「2」スコア値が向上という具合ですね。
PageSpeed Insights

 

追記!

ひょっとしたらと思い、別のGoogleが運営するモバイル測定サイトで速度を計測・・・

モバイル速度測定

問題なく「良好」でした(冷汗)

表示速度測定サイトによって違いはあるようですね・・・。でも同じGoogle運営サイトなのになぁ・・・。

Googleモバイル速度テスト

 

まとめ

単純に表示速度はモバイル&パソコンともに改善できたという結果です。

 

僕のサイト結果では多少の向上しか見られませんでしたけど、ソースコードレベルであればサイトによって大きな違いがあるはずです。大きく表示速度アップする相性の良いサイトであれば、活用すべきプラグインですよね。

 

WordPressでソースコードの短縮化をするプラグインは極めて少ないので、インストールしておいて損のないプラグインです。

ではまた!

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-プラグイン
-,

Copyright© WordPress theme NAVI , 2019 All Rights Reserved.