【特集】WordPress高速化への挑戦!

HTML・JavaScript・CSSを縮小するAutoptimizeの使い方と効果を検証

指をさすビジネスウーマン

GoogleのPageSpeed Insightsのスコアをあげようと悪戦苦闘しています。

JavaScriptやCSSを縮小するということへの対策として、

AutoptimizeというWordPressのプラグインを使ってみました。

 

はたしてどの程度効果があったのか、実際の測定結果を見せながら

お話していきたいと思います。

Autoptimizeとは?

AutoptimizeはHTML、JavaScript、CSSのコードを最適化してくれる

WordPressのプラグインです。

GoogleのPageSpeed Insightsで「JavaScriptを縮小する」や「CSSを縮小する」という

メッセージが出た場合に有効な対策となるものです。

 

コードを縮小するための最適化は、通常プログラムを修正しないといけません。

でも、WordPressならAutoptimizeのようなプラグインがあるので

インストールして設定するだけで、難しいプログラムの修正をしてくれるのです。

 

プラグラムがわからない人にとっては、とても強い味方になるプラグインですね。

Autoptimizeのインストール

プラグインの探し方

プラグインのインストールは、めっちゃ簡単です。

WordPressのプラグインメニューから「新規追加」を選びます。

新規追加画面で「Autoptimize」で検索してください。

すると、Autoptimizeプラグインが見つかります。

Autoptimizeプラグイン検索画面

 

念のため、インストール前にプラグイン名と作者名が間違っていないことを

確認しておきましょう。

Autoptimizeプラグインは同じような名前のプラグインはありませんが、

他のプラグインなら結構似たような名前がありますので、

確認するクセをつけておく方がいいです。

 icon-external-link 【参考】Autoptimizeプラグイン公式サイト

プラグインの設定

インストールができたら、次はプラグインの設定をしましょう。

WordPressの設定メニューにAutoptimizeという項目が追加されているはずです。

それをクリックしてください。

 

クリックするとこのようなAutoptimize設定画面が出ますので、

右上にある「高度な設定を表示」ボタンをクリックします。

Autoptimize設定画面

 

HTML、JavaScript、CSSの各オプションは、下の画像の通り設定しておいてください。

Autoptimize設定画面-HTML

Autoptimize設定画面-JavaScript

Autoptimize設定画面-CSS

 

CDNオプションとキャッシュ情報はデフォルトのままでOKです。

なお、上の画像に示した設定は最適ではないかもしれません。

 

しかし、JavaScriptやCSSの作り方や構成、

導入しているブログパーツ(例えばAdsenseなど)によっては

設定を変えることでサイトが崩れたり、動作しないという影響が出る可能性があります。

 

ここに示したのは、

概ねどのサイトでも影響を出すことなく

高速化が図れる設定だと理解してください。

 

さらに最適化をされたい場合は、ご自身のサイトに合わせて設定を変えてみてください。

ただし、1つ1つ動作確認しながら変更していくことをオススメします。

 

設定が完了したら、画面の一番下にある

「変更を保存してキャッシュを削除」をクリックしてください。

設定した内容でコードが最適化されます。

【広告】

Autoptimizeを導入した効果

Autoptimizeプラグインを導入する前後のPageSpeed Insightsの画面を見て

導入の効果を確認していきましょう。

まずは、モバイルの結果です。
Autoptimize導入前-モバイル

↓ 

Autoptimize導入後-モバイル

次にパソコンの結果です。

Autoptimize導入前-パソコン

↓ 

Autoptimize導入後-パソコン

 

モバイルで14点、パソコンで13点のスコア改善が見られました。

まとめ

GoogleのPageSpeed Insightsのスコアを上げるために

Autoptimizeプラグインを導入して得られる効果は、かなり大きいことがわかりました。

さらなるスコア向上は、他の対策で改善する必要があります。

 

ところで、

GoogleのPageSpeed Insightsのスコアを上げることが目的ではなく、

サイトのパフォーマンスを改善し、ユーザビリティの向上に結びつくことを期待して

高速化をしているということを意識しておいてください。

 

サイトの応答が充分速くてユーザビリティが確保できているのであれば

必ずしもスコアを上げることに固執しなくてもよいということです。

【広告】

関連記事

  1. 「いいね!」するビジネスウーマン

    WordPress高速化!全画像を一括圧縮するEWWW Image Optimizerの使い方!!

  2. すべてを許したくなるエンジェル笑顔

    WordPressで投稿済みの記事を一括置換できるSearch Regexの使い方!!

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

WordPressテーマ「SOURCE(TCD045)」

人気記事

  1. 目を閉じるたびに思い出す
  2. はい、正解は私でした
  3. 休日を読書で過ごす女性
  4. ごめん、待たせちゃった・・・
  5. 指をさすビジネスウーマン
  6. 「いいね!」するビジネスウーマン
  7. イケメンにフィッシュオン!
  8. 「問い合わせ先はコチラ!」と告知する地方局のアナウンサー
  9. スマホで健康管理を行う意識の高い女性
  10. SNSで流れてきた商品をポチろうか悩んでいる女子

広告




おすすめ記事

  1. はい、正解は私でした 賢威7サイトタイトルとトップページタイトルの違いを易しく説明します!!
  2. メモを取る女性 お名前.comからエックスサーバーへのドメイン移管手続き備忘録
  3. SNSで流れてきた商品をポチろうか悩んでいる女子 ブログの表示速度を遅くしないための広告の貼り方とは!?
  4. すべてを許したくなるエンジェル笑顔 WordPressで投稿済みの記事を一括置換できるSearch Regexの使い…
  5. ランタンを見つめる文学美女 WordPress最適化をした結果PageSpeed Insightsスコアはど…
  6. 目を閉じるたびに思い出す PageSpeed Insightsの点数を90点以上にした5つの改善を紹介!!…
  7. 「OK、そういうこと!」と締めくくるキラキラ女子 賢威7を使ってココが良かったと思う3つのこと(投稿画面編)

特集記事

  1. イケメンにフィッシュオン! WordPress高速化のための最適なJPEG/PNG/GIF使い分けはこれだ!…
  2. 「いいね!」するビジネスウーマン WordPress高速化!全画像を一括圧縮するEWWW Image Optimi…
  3. SNSで流れてきた商品をポチろうか悩んでいる女子 ブログの表示速度を遅くしないための広告の貼り方とは!?
  4. 指をさすビジネスウーマン HTML・JavaScript・CSSを縮小するAutoptimizeの使い方と…
  5. ごめん、待たせちゃった・・・ deflateを使用してリソースを圧縮する方法!WordPressが劇的に高速化…
  6. 休日を読書で過ごす女性 ブラウザのキャッシュを活用する-たったの5分で改善する方法!!
  7. 目を閉じるたびに思い出す PageSpeed Insightsの点数を90点以上にした5つの改善を紹介!!…
PAGE TOP