WordPress WordPressプラグイン WordPress初期設定

【WordPressプラグイン:ソースコード最適化でブログの表示速度を高速化】Autoptimizeの設定方法と使い方

【WordPressプラグインコード最適化でブログの表示速度を高速化】Autoptimizeの設定方法と使い方を解説
まう
WordPressの表示速度を上げる方法が知りたいです。ソースコードの最適化って何ですか?

 

うた
そんな疑問に答えます👍

 

こんな悩みを解決します

ブログ初心者

ブログ初心者くん

  • WordPressの表示スピードを上げたい
  • むずかしい設定なしでソースコードを最適化したい
  • ソースコードって何?

この記事の内容は?

  • WordPressプラグイン【Autoptimize】の設定方法と使い方を解説
  • ソースコードについて
  • Autoptimizeのトラブル解決方法

エモいブログへようこそ。本記事の信頼性

【ブログ歴8年,美容師歴13年】フリーで美容師をやりながら、ブログでご飯を食べています。フリーランス向けのブログ集客や副業ブログの始め方などを中心にブログを更新していきます。ブログについて疑問などがあれば気軽にTwitterからDMください。

 

WordPressブログを運営している中で気になる表示速度の問題を解決してくれるプラグインの1つ、Autoptimizeについて解説していきます。

 

Autoptimizeをインストールして設定する事で、HTMLやCSSやJavaなどのソースコードを最適化してブログの表示速度を高速化させてくれる無料プラグインなので、テーマやプラグインとの機能の重複に注意をしながら設定をしていきましょう。

 

うた
WordPressブログの高速化の対策は以下の記事も参考にしてください。

 

それでは、本題にはいります。

 

Let's Go!!!

 

Autoptimizeとは?ソースコードを最適化する。

Autoptimizeとは?

Autoptimizeとは?

うた
Autoptimizeは、WordPressのソースコードを丁度いい感じに圧縮してブログの表示速度を高速化するプラグインです。

 

ブログ記事に書いた、HTML・CSS・JavaScriptの改行、スペースなどの必要のない箇所を削除したり、非同期の読み込みにより、WordPressが重たく遅いという問題を解決して、かなり効果的にブログの表示速度を上げる事のできるプラグインです。

 

ソースコード (source code)について

ソースコード (source code)とは、専門的にちょっと何を言っているのかわからなかったので調べてみました。

 

僕の中の認識では、プログラミングとかで使う言語でWordPressは覚えなくてもブログを書けるから、とりあえず無駄な部分をなんとかして処理する事で余計な読み込みを減らして表示速度をアップさせるものだと思っています。

 

人間様が分かる言葉で書いた「プログラムの元ネタ」のこと

1.人間語でプログラムの元ネタを書く
2.元ネタを人間語から機械語に翻訳する
3.翻訳された指示に従ってコンピュータさんがお仕事する

引用元:「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

だそうです。

 

僕には難しかったので興味があれば見てみてください。

 

とりあえず、ブロガーが専門的に知識をつけないといけない事ではないので大丈夫です。

 

Autoptimizeのメリット

うた
Autoptimizeのメリットについて
  • WordPressブログの高速化の中でかなり効果的
  • ブログの表示速度がかなり改善される可能性が高い
  • 読者の利便性が上がりSEOにも強くなる

 

プラグイン1つで知識不要で高速化を実装できるのでかなりオススメです。(ブログ高速化の方法の中でソースコードの圧縮はかなり効果的)

 

Autoptimizeのデメリット

うた
Autoptimizeのデメリットについて
  • テーマの機能や他のプラグインとの2重設定をした事による不具合の可能性

 

WordPressは高速化させるためのプラグインがいくつもあるのですが、たくさん表示速度に関係するプラグイン入れたて設定すれば早くなる!という感覚でやると機能の重複を起こしてしまい、コードが機能しない、固まって動かないなどのトラブルも発生させてしまう場合があります。

 

WordPressテーマにも、圧縮して高速化させる機能などがある場合に重複させて同じような現象が発生してしまう場合があるので注意してください。

 

エラーが起きた場合には、プラグインの停止や削除をしてWordPressテーマや他のプラグインとの機能の重複を疑ってください。

 

うた
ブログのバックアップさえとっておけばミスって取り返しの使いない事になっても安心なので、必ずバックアップは定期的に行うようにしてくださいね。

 

【WordPressバックアップ系プラグイン】BackWPupの設定方法
参考【WordPress自動バックアップ系プラグイン】BackWPupの設定方法と使い方

続きを見る

 

Autoptimizeの設定方法と使い方【本題】

Autoptimizeの設定方法

Autoptimizeの設定方法

新規プラグイン追加でAutoptimizeをインストールしてください。

 

プラグインのインストールを方法がわからない方はこちらをご確認ください。

 

 

インストールしたら有効化してください。

 

JavaScript オプション

JavaScript オプション

JavaScript オプション

  1. ダッシュボード
  2. 管理
  3. Autoptimize
  • javaScriptオプションにチェック
  • 連結しないで遅延にチェック

 

JSの結合は、他のプラグインと重複させてしまいやすいので注意してください。W3 Total Cacheと設定が二重に重複してしまう設定項目があります。(WP Fastest Cacheなども同じです)

 

no image
参考スクリーンショット 2021-09-15 211133

続きを見る

 

Autoptimizeを使う場合は、他のキャッシュ系プラグインの機能で被る設定をOFFにしてください。

 

CSS オプション

CSS オプション

CSS オプション

  • CSSコード最適化
  • CSSファイルを連結
  • インラインCSSも連結

3つにチェックをいれてください。

 

こちらも、重複設定に注意です。

 

HTML オプション

HTML オプション

HTML オプション

HTMLコードを最適化にだけチェックを入れてください。

 

CDN オプション

CDN オプション

CDN オプション

こちらは設定なしで大丈夫です。

 

キャッシュ情報

キャッシュ情報

キャッシュ情報

キャッシュフォルダはキャッシュデータの保存先です。

 

その他オプション

その他オプション

その他オプション

その他オプションはすべてにチェックが入っていればデフォルトで大丈夫です。

 

これで、JS CSS&HTMLの設定は終わりです。次は画像の設定です。

 

画像最適化

画像最適化

画像最適化

画像を最適化は、WordPressにアップロードした画像(サムネイル画像など)を最適化してくれます。

 

ですが、ここでも注意が必要です。画像最適化はEWWW Image Optimizerで設定しているのでチェックを入れる必要はありません。

 

「容量を軽減」することで、ブログの表示スピードの高速化が期待できます。

 

画像の遅延読み込み (Lazy-load) を利用についてもEWWW Image Optimizerで設定している場合はチェックを入れる必要はありません。

 

【WordPress画像圧縮で高速化させるプラグイン】EWWW Image Optimizerの設定方法
参考【WordPress画像圧縮で高速化プラグイン】EWWW Image Optimizerの設定方法と使い方

続きを見る

 

画像の設定も完了です。

 

クリティカルCSS

クリティカルCSS

クリティカルCSS

クリティカルCSSの設定は有料版の設定なので、気にしなくてもいいです。

 

追加

追加

追加

Googleフォントを使用していない場合は、Googleフォントの削除にチェックを入れてください。

 

基本的にデフォルトで大丈夫です。

 

さらに最適化

さらに最適化

さらに最適化

こちらは他のサービスについての詳細なのですが、とくに気にする必要はありません

 

これですべて保存してAutoptimizeの設定は終了です。

 

ページキャッシュの生成とキャッシュの削除について【重要】

ページキャッシュが生成されている

ページキャッシュが生成されている

Autoptimizeはページキャッシュというものが生成されて保存してくれる仕組みになっています。

 

ページの一時情報を保存しておく事で、キャッシュをリサイクルして読み込み時間を大幅に短縮してくれるのですが、ただし古いキャッシュをため過ぎるとWordPressが重たくなります。

 

ページキャッシュを削除

ページキャッシュを削除

その場合には、キャッシュを削除で古いキャッシュを削除してくれます。

 

削除するタイミングは、WordPressを更新した日の最後に行うといいと思います。(記事の更新、設定の変更、プラグインの導入など何かした日など)

 

注意

1日に何回もやるとサーバーに負担をかけてしまう場合があるので注意してください。

 

ページキャッシュの削除をする事で、新しい更新情報を読み込む事ができるようになります。

 

Autoptimizeで不具合が発生した場合の対処【重要】

Autoptimizeで不具合が発生した場合の対処【重要】

Autoptimizeで不具合が発生した場合の対処【重要】

Autoptimizeは、WordPressのソースコードを変更するので、デザインやレイアウトが崩れたり他のプラグインとの機能による不具合が起きることがあります。

 

うた
原因は大体限られているので、参考にしてみてください。

 

  • 更新した内容が反映されない
  • ブログの表示にエラーが発生
  • 画像が表示されない

 

キャッシュの削除か、JavaScript最適化とCSS最適化をの設定に問題がある場合が多いと思います。

 

更新した内容が反映されない

設定などを変更して反映されない場合は、キャッシュの削除を試してみる。

 

ブログの表示がおかしくなる

JavaScript最適化とCSS最適化を無効にしてみる。

 

画像が表示されない

JavaScript最適化を無効にしてみる。

 

Autoptimizeについてのまとめ

Autoptimizeについてのまとめ

Autoptimizeについてのまとめ

うた
Autoptimizeについてのまとめます。

 

  • ソースコードを最適化するとブログの表示速度が上がる
  • Autoptimizeは余計なソースコードを圧縮してくれる
  • 他のプラグインと重複する機能があるから注意が必要
  • 不具合が起きたら、JavaScript最適化とCSS最適化を疑う
  • キャッシュの削除は定期的に(やり過ぎるとサーバーに負担をかける)

 

うた
WordPressは他にも高速化の対策があるので、他にも対策をしてしまいましょう。/st-kaiwa1]

 

-WordPress, WordPressプラグイン, WordPress初期設定
-, , ,