カテゴリー:高速化系の記事一覧

RICK式アフィリエイト実践記

ポイントサイト・アンケートサイト・趣味を起点としたアフィリエイトの実践記です。

カテゴリー:高速化系

4クリックでWordPressのHTML・CSS・JavaScriptを最適化できる「Autoptimize」

autoptimize

記事の概要

この記事ではWordPressのHTML・CSS・JavaScriptを最適化できるプラグインである「Frank Goossens (futtta)」様の「Autoptimize」を紹介します。

「Autoptimize」とは?

4クリックでWordPressのHTML・CSS・JavaScriptを最適化ができるプラグインです。

「Autoptimize」の導入方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”プラグイン”をクリックします。
wp_plugin-001

手順3

”プラグイン”の中の”新規追加”をクリックします。
wp_plugin-002

手順4

画面右上の検索欄に”Autoptimize”と入力します。
autoptimize_001

手順5

下記画像のプラグインを探して”インストール”をクリックします。
autoptimize_002

手順6

”インストール”のボタンが”インストール中”を経て”有効化”ボタンに変わるので、”有効化”ボタンをクリックしたらインストールは完了です。

「Autoptimize」の設定方法

手順1

WordPressの管理画面の左メニューの”設定”にカーソルを持っていき、”Autoptimize”をクリックします。
autoptimize_003

手順2

”Optimize HTML Code?”・”Optimize JavaScript Code?”・”Optimize CSS Code?”にチェックを入れて”Save Change and Empty Cache”をクリックします。
autoptimize_004

まとめ

この記事では、4クリックでWordPressのHTML・CSS・JavaScriptを最適化ができる「Autoptimize」を紹介しました。

簡単にWordPressを高速化できるので導入することをおすすめします。

WordPressのCSSやJavaScriptを最適化できるプラグイン

head-cleaner

記事の概要

WordPressは様々なものを動的生成する傾向にあるのでどうしてもページの表示速度が遅くなりがちです。

対策としては最適化やキャッシュといった方法が挙げられます。

この記事では、CSSやJavaScriptを最適化した上でキャッシュもしてくれる「wokamoto」氏の「Head Cleaner」を紹介します。

「Head Cleaner」とは?

簡単なマウス操作のみでWordPressのCSSやJavascriptを最適化し、キャッシュまでできるWordPress用のプラグインです。

「Head Cleaner」の導入方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”プラグイン”をクリックします。
wp_plugin-001

手順3

”プラグイン”の中の”新規追加”をクリックします。
wp_plugin-002

手順4

画面右上の検索欄に”Head Cleaner”と入力します。
head-cleaner_001

手順5

下記画像のプラグインを探して”インストール”をクリックします。
head-cleaner_002

手順6

”インストール”のボタンが”インストール中”を経て”有効化”ボタンに変わるので、”有効化”ボタンをクリックしたらインストールは完了です。

「Head Cleaner」の設定方法

手順1

WordPressの管理画面の左メニューの”設定”にカーソルを持っていき、”Head Cleaner ”をクリックします。
head-cleaner_003

手順2

基本的には赤く囲った部分にチェックを入れるといいでしょう。緑で囲った部分は表示崩れを起こしたためあえてチェックを外した部分です。設定が終わったら”更新”をクリックします。
head-cleaner_004

まとめ

この記事ではCSSやJavaScriptを最適化した上でキャッシュもしてくれる「Head Cleaner」を紹介しました。

キャッシュを活用することで動的生成の頻度が低下するため、WordPressの高速化につながります。

ページの表示がもっさりとしていると感じた場合は試してみるといいかもしれません。

この記事が皆さんのお役に立てれば幸いです。

search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss