【WordPress】CSSファイルの結合ができるプラグイン「Autoptimize」ほか

2019年6月12日WordPress,WordPressプラグイン,WordPress高速化

他のテーマを利用しても同様だと思いますが、「Simplicity2」さんのテーマもCSSファイルが分散されていてかなり多い

※追記:現在は「Simplicity2」さんのテーマを利用していません

カスタマイズ性を考えると使いやすい部分ではありますが、基本的にどのページでも読み込むCSSはページ表示時には1ファイルないし少ないCSSファイルに統合しておきたいものですね

CSSファイルの結合ができるプラグイン

「Autoptimize」と「Head Cleaner」はCSSやHTML・jsファイルの圧縮・結合がメインで同じタイプのプラグインですね
「WP Fastest Cache」と「W3 Total Cache」はキャッシュ機能に付加されている感じです

 

僕的にはキャッシュ機能も使うにも後々縛られると困るので目的の機能だけを持った「Autoptimize」を利用しましたしていました

キャッシュには「WP Super Cache」というプラグインを現在利用していますしていました

現在は、CSSファイル統合はテーマの機能を利用しているのでプラグインは利用していません

「Autoptimize」を使ってCSSファイルの結合

・HTMLオプション
「HTMLのコードを最適化」
HTMLを圧縮して表示
HTML内のコメントも消す設定が選べます

・JavaScriptオプション
「JavaScriptコードを最適化」
JavaScriptを圧縮して表示
「head内への強制表示」
基本使わないかと
「インラインjsの連結」
用途にあわせて

・CSSオプション
「CSSコードを最適化」
CSSを圧縮して表示
「Googleフォントの削除」
Googleフォントを使ってない場合はチェック
「インラインのCSSを連結」
キャッシュがない時にアクセスすると一瞬CSSが外れた状態で表示されるけど一瞬
「すべてのCSSをインライン化」
googleのbloggerのCSSは結構インライン化され埋まってるし、悪くないと思う
「AutoptimizeからCSSを除外」
レイアウトが崩れた時のかの対応対処などに

・CDNオプション
使ってみたけどCSSファイルにもCSNコードが埋まってエラーしちゃう
ヘッダにあるし元のCDN読んでるコードもそのままあるし、よくわからず

・キャッシュ情報
キャッシュフォルダとキャッシュしているファイルのサイズが確認できる

・その他のオプション
「連結されたスクリプト/CSSを静的ファイルとして保存」
「ログイン中のユーザーも最適化」
編集作業中などはチェックを外しておけばOK

Autoptimize設定画面(CSSの部分)

Autoptimize設定画面(CSSの部分)
Autoptimize設定画面(CSSの部分)

2019年6月12日WordPress,WordPressプラグイン,WordPress高速化

Posted by Yousuke.U