☆100達成!PageSpeed Insightsのスコアアップ方法 その3:Autoptimizeを導入する

Google「PageSpeed Insights」のスコア(点数)をアップさせる方法 その『3』です!
今回は『Autoptimize』を導入してスコアアップの対策を行います。

目次

  1. Google『PageSpeed Insights』でチェック
  2. 『Autoptimize』を導入する
    1. 『Autoptimize』の設定
  3. 今回の結果

「PageSpeed Insights」のスコアアップ方法一覧

Google『PageSpeed Insights』でチェック

今回もGoogleの『PageSpeed Insights』ででてきた、前回までの対策後のスコアをサンプルとして置いておきます。

対策前のスコア(GoogleAdSenseとYoutubeの読込み遅延対策後)

モバイル

PSI-Sample_モバイル4_34

パソコン

PSI-Sample_パソコン4_79

今回もここからかなりアップします!

『Autoptimize』を導入する

効果:

今回は『PageSpeed Insights』の測定後にでてきた改善できる項目の中の「レンダリングを妨げるリソースの除外」の項目に、やたらとずらずらとcssやjsファイルが並んでいたので、これの改善をするために『Autoptimize』を導入をしました。

Autoptimize-plugin

この『Autoptimize』はWordpressのプラグインなのですが、プラグインを「インストール」→「有効化」しただけでは効果は得られません。ですので設定をしていきます。

『Autoptimize』の設定

『Autoptimize』のデフォルトの設定では、JavaScript・CSS・HTML、全て以下のようにチェックが外れた状態になっているので、

Autoptimize-setting1

それぞれ、以下のように一番上のチェックボックスにチェックを入れていきます。

Autoptimize-setting2

Autoptimize-setting3

次に、「追加」のタブで

「Google Fonts」→「webfont.js で非同期にフォントを結合して読み込む。」
「絵文字を削除」→「WordPress コア絵文字のインライン CSS、インライン JavaScript、およびその他の自動化されていない JavaScript ファイルを削除します。」

とそれぞれ設定します。

Autoptimize-setting4

Google Fontsを使っている場合は、これで少しスコアアップにつながります。絵文字に関しては、どちらでもよいのかなぁ。という気はしますが、もしかしたら使ってるかな?と思ったのでチェックしておきました。
これで今回の基本の設定は以上です!

この後もう少し設定の見直し等をしたのですが、それは『PS Insightsのスコアアップ方法 その5:設定の見直し(公開前)』で詳しく書きたいと思います。

今回の結果

今回は『Autoptimize』の導入をして「レンダリングを妨げるリソースの除外」の項目の対策を行ったのですが、その結果は以下となりました。

対策前のスコア

モバイル

PSI-Sample_モバイル4_34

パソコン

PSI-Sample_パソコン4_79

対策後のスコア(『Autoptimize』の導入後)

モバイル

PSI-Sample_モバイル6_42

パソコン

PSI-Sample_パソコン6_92

モバイルは「34」「42」「8」アップ、
パソコンは「79」「92」「13」アップと、かなりアップしてくれました!

ようやくパソコンだけではありますが「速い」の域に入ることができたので、かなり嬉しかったですね。

次は『PageSpeed Insightsのスコアアップ方法 その4:キャッシュの設定をする』です。

「PageSpeed Insights」のスコアアップ方法一覧



関連記事

【2020】<head>タグの記述例=順番等もきちんと考えた雛形(テンプレート)


一度サイトを作ってしまうと、あまり見直すことのないheadタグ内の記述。新たなLPを作ったりする時でも、以前作ったものの…

記事を読む▷


URLwwwありなし

URLの正規化:wwwあり、なしのドメインを統一する記述方法(エックスサーバー(XSERVER) にて)


前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…

記事を読む▷


WordPressのデータベースのテーブル接頭辞を、phpMyAdminで変更する方法


最近サーバーを変更してWordPressの引っ越しをしたのですが、引っ越し前のサーバーの初期設定でWordPressのデ…

記事を読む▷


ping_2017

2017最新版:PING送信先リスト18(WordPress Ping Optimizerへ登録するPingのURL)


久しぶりに新たなサイトのためにPingの送信先リストをチェックしてみたら、、、このようなよろしくない状態でした。。 …

記事を読む▷


WP-OGPの設定方法:WPの投稿記事のサムネイルをFBできちんと表示させる


この記事は前回からの続きなのですが、、、実は1年経ってます。。下書きを途中まで書いてたのですが、あまりにも大変で途中で終…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP