最短で確実に稼げるブログ作成を目指しています

CSS・HTML・JavaScriptの最適化ならこれ!【Autoptimize】設定方法

WRITER
 




この記事を書いている人 - WRITER -
ふわりゆらりという楽しくも厳しいライフスタイルを送っているブロガーです!(笑)人の何十倍も楽しい人生を送るために、絶対やるべきこと。。やったらいいこと。。やっといたほうがいいこと。。などいろいろ書いてます。

ブログの表示速度を改善するためにプラグインを使っている方は多いのではないでしょうか。

このサイトでも、いくつかのプラグインを紹介しています。

そんな中で、今回は「Autoptimize」というプラグインのご紹介です。

この「Autoptimize」というプラグインは、初心者には敷居が高いプログラミングコード(CSS・HTML・JavaScript)などを自動で圧縮してくれるという優れモノなんです。

それでは、「Autoptimize」の導入から設定方法までの解説をしていきましょう。

 

その他の、速度表示を改善するプラグインの紹介です。参考にしてみてください。

キャッシュプラグインを紹介した記事です↓

 

画像を自動で最適化してくれるプラグインの紹介記事です↓

 

 

 

「Autoptimize」のインストール

 

それでは、「Autoptimize」のインストールをしていきましょう。

 

 

WordPressダッシュボードのメニュー「プラグイン」→「新規追加」をクリックしましょう。

新規追加画面の「キーワード」に「Autoptimize」と入力して検索しましょう。

「Autoptimize」の「今すぐインストール」をクリックしましょう。

 

 

インストールの完了後、「有効化」をクリックしましょう。

これで、「Autoptimize」のインストールと有効化が完了しました。

それでは、次に「Autoptimize」の設定の解説に移ります。

注意!!
 

「Autoptimize」というプラグインは、チェックを入れるだけで簡単にコードを圧縮・縮小してくれます。ところが、ブログのテーマの構造やブログパーツの種類によっては、うまく動作しないことがあります。「チェックを入れたらレイアウトが変わってしまった」などの不具合が出てしまう可能性もあります。一つ一つチェックを入れて確認しながら設定をしていく事をお勧めします。

 

Autoptimizeの設定

 

それでは、「Autoptimize」の設定に取り掛かりましょう。

 

 

ダッシュボードメニューの「設定」→「Autoptimize」をクリックしましょう。

 

 

設定画面が開いたら、右上にある「高度な設定を表示」をクリックしましょう。

基本的に、設定はデフォルトで良いのですが、ここでは各設定項目の解説をしていきます。

 

JavaScriptの設定

 

 

 

JavaScriptコードの最適化

チェックを入れることでJavaScriptコードを最適化します。

 

Aggregate JS-files?

デフォルトでチェックが入っているのでそのままでよいでしょう。

 

インラインのJSを連結

HTML内のJavaScriptも最適化の対象にするかどうかの設定です。サイト表示が崩れる可能性があるので、チェックを入れる場合には問題がないか確認をしましょう。

 

内へJavaScriptを強制

基本チェックは入れません。JavaScriptエラーがある場合にのみチェックを入れましょう。

 

Autoptimizeからスクリプトを除外

基本チェックは入れません。最適化しないJavaScriptを指定する項目です。

 

try-catchの折り返しを追加

基本チェックは入れません。JavaSctiptエラーがある場合にチェックを入れましょう。

 

 

CSSの設定

 

 

CSSコードを最適化

CSSを最適化する項目です、チェックを入れましょう。

 

Aggregate CSS-file?

デフォルトでチェックが入っているのでそのままで良いでしょう。

 

インラインのCSSを連結

HTML内のCSSも最適化するかどうかの項目。この項目はサイトによって違います。

 

データを生成:画像をURI化

CSS内の画像URLはデータスキーマURIにするかどうかの設定。

 

CSSのインライン化と遅延

AutoptimizeのCSSを遅延読み込みさせる項目です。

 

すべてのCSSをインライン化

この項目もサイトによります。

 

AutoptimizeからCSSを除外

ここもチェックなしで良いでしょう。

 

HTMLの設定

 

 

HTMLの最適化

チェックを入れましょう。

 

HTMLコメントを残す

HTML内のコメントを消すかどうかの設定なので、必要ありません。

 

 

CDNの設定、その他のオプション

 

 

 

CDNというのは、画像の読み込みを他のサーバーで読み込ませてブログにかかる負荷を分散させるという方法です。

ここは、初心者の方はそのままで良いでしょう。

その他のオプションについてもデフォルトのままで良いでしょう。

各設定項目にチェックを入れたら、「変更を保存してキャッシュを削除」をクリックしましょう。

 

設定を保存したらブログに不具合がないか必ず動作確認を行いましょう

 

Autoptimizeの効果確認

 

「Autoptimize」の設定が完了したら、ブログの表示速度が速くなったのかどうかを確認してみましょう。

表示速度の確認ができる、お勧めサイト↓

 

PageSpeed Insights

 

GTmetrix

 

上記サイトで速度測定してみましょう。

 

まとめ

 

ブログの表示が遅いと、読者さんは別のブログに移動してしまいますよね。

そういうことが無いように、ブログの表示を早くする工夫をしていきましょう。

余計なブログパーツの排除や、サーバーの強化、キャッシュの導入などが有効です。

常に、読者側に立って改善をしていきましょう。

 

速度UP改善方法についての記事です。併せて読んでみてください。

 

稼げるブログ!

開設方法からSEO対策・収益化までを徹底解説!

しかも、無料で配布しています。

あのWordPressを初心者でも、開設から収益化まで分かりやすくまとめ上げた豪華E-bookです。

是非この機会に、無料でゲットしてください。

しかも!!

今だけ、『超豪華特典』が付いています。

詳しくは、E-bookの最後で。

 

 

あのWordPressの開設から集客・収益化がオンラインで学べる!

WPマーケティングスクール

 

初心者ではハードルが高いと言われるWordPressの初期設定から運営まではもちろん、専門的知識がなくても集客・収益化を学ぶことができます。

WPマーケティングスクールでは、初心者でも自分のペースで学ぶことができ、『正しい方法』を学び実践し続けることで必ず成果が出ます。

 

 

 

今なら、1か月無料!⇩

 

fuwaruyurariおすすめWordPressテーマ

 

 

 

この記事を書いている人 - WRITER -
ふわりゆらりという楽しくも厳しいライフスタイルを送っているブロガーです!(笑)人の何十倍も楽しい人生を送るために、絶対やるべきこと。。やったらいいこと。。やっといたほうがいいこと。。などいろいろ書いてます。

SNSでもフォローお願いします!

 

Facebook

 

 カテゴリー一覧

 

初期設定

>>絶対導入するべき【WordPressプラグイン】導入方法と設定まで!

WordPressを始める場合に、これだけ入れておけば大丈夫というプラグインの紹介と設定方法を解説しています。まず、最初に導入して設定しておきましょう。

★おすすめ記事★

 

SEO対策

>>Googleアナリティクス登録・設定!【All in One SEO pack】に連動する方法!

ブログ運営していくうえでの必需品です。初心者にとっては少し難しいと言われますが、分かりやすく解説しています。是非最初に設定しておき迷う。

★おすすめ記事★

 

設定方法

>>【初心者】WordPressの始め方、”エックスサーバー契約と独自ドメイン”設定方法

WordPressを始めるには、サーバー契約が必要です。おすすめサーバー契約から設定方法まで詳しく解説しています。なぜ「エックスサーバー」がお勧めなのかも読めばわかります。

★おすすめ記事★

プラグイン

>>WordPressのバックアップ!サーバー会社だけに依存は危険?

バックアップはとても重要です。契約サーバー会社によっては有料・無料でやってくれますが、もしもの時を考えるとやはり自分で対処しておくのがお勧めです。

★おすすめ記事★

記事について

>>最後までブログ記事を読んでもらうための構成法

読者さんに記事を最後まで読んでもらうことで初めて集客ができます。そのためには、文章の構成がとても大切になってきます。この記事を読んで記事の構成について理解しましょう。

★おすすめ記事★

アフィリエイトについて

>>Amazonアソシエイトの登録方法!審査が通るのは簡単

みなさんブログを始めたらAmazonアソシエイトに登録しておきたいのではないでしょうか。登録方法とちょっとしたアドバイスを記事にしてみました。

★おすすめ記事★

便利ツール

>>商用利用ができる「Facebookページ」の作成方法【最新版】

ソーシャルメディア時代と呼ばれる現在、ブログ運営においてもFacebookは必需品ともいえますね。ここでは商用利用ができる「Facebookページ」の作成方法を解説しています。

★おすすめ記事★

趣味について

>>なぜ単独行(単独登山)をするのか?一人で山に登ること

趣味の登山について記事を書いてみました。このサイトのコンセプトには関係ないですが、暇なときに読んでみてくださいな。

★おすすめ記事★

  •  
  •  
  •  







Copyright© fuwariyurari , 2019 All Rights Reserved.