Autoptimize で CSS を軽量化してモバイル表示速度を高速化

ブログ運営と改善

Autoptimize で CSS を軽量化してモバイル表示速度を高速化

この記事は約 4 分で読めます。

ユウキです。

今回は、Autoptimize を使ってコードの最適化を行い、Web サイトの表示速度を高速化していきます。

設定項目については他のサイトでも詳細に解説された記事がありますので、ここでは必要な部分だけに絞って解説します。

この記事が役に立つ読者
  • JavaScript や CSS コードを最適化してサイト表示速度を改善したい方
  • ワードプレステーマ「Be」(TCD076)を利用されている方
  • ワードプレステーマ「MAG」(TCD036)を利用されている方
  • Ensure text remains visible during webfont load の解決法を探している方

プラグインのインストール

はじめに WordPress のプラグインから新規追加で Autoptimize を検索してインストール、有効化します。

Autoptimize をインストール

Autoptimize の設定

有効化したら設定を進めますが、プラグインで必要な設定項目は3つのチェックだけ。

  • CSS コードを最適化:チェックする
  • インラインの CSS を連結:チェックを外す
  • Also optimize for logged in editors/ administrators?:チェックを外す

画像を参考に該当箇所にチェック、もしくはチェックを外して変更を保存しましょう。

Autoptimize 設定の該当箇所を変更する

これで設定完了です。

設定後は自動で必要な CSS をまとめて専用ファイルをつくり、サーバー内に保管されて、必要に応じて出力してくれます。

CSS 以外の最適化について

Autoptimize の設定には、JavaScript や HTML や画像の最適化などがあります。

当サイトの環境はエックスサーバーと TCD「MAG」で、他のプラグインと比較しながら確認しましたが、不具合を起こしたり改悪される結果となったため、上記設定のみとなります。

JavaScript の最適化と head 内のコードを整理する

デフォルトの head 内には不要なコードがいくつかあるので、こちらの記事を参考に整理してみてください。

画像を最適化する

画像を最適化してサイト表示速度を改善したい場合は、Autoptimize よりも EWWW Image Optimizer が適しているので、こちらの記事を参考に設定してみてください。

ウェブフォントの表示を最適化する

Lighthouse の項目で表示されるこちら。

Ensure text remains visible during webfont load

(ウェブフォントの読み込み中にテキストが表示されたままになるようにします)

以下のコードを functions.php に追加することで、Autoptimize で出力する CSS の font-face に、font-display:swap; を追加して解決してくれます。


add_filter('autoptimize_css_after_minify', 'optm_css');
function optm_css($code){
        return $code = str_replace('@font-face{','@font-face{font-display:swap;', $code);
}

キャッシュ系プラグインの注意点

Autoptimize は必要なコードだけをまとめた専用ファイルをサーバーに保存しておく役割ですが、まとめることやサーバー内の書き換えが影響して不具合を起こす場合があります。

キャッシュ系のプラグインに限りませんが、同じような動作をするプラグインなどは問題の原因だったりするので、

変更を加える際は必ずバックアップを取ったうえで、変数はひとつずつ確認しながら進めていきましょう。

TCD「MAG」での不具合

ちなみに TCD「MAG」で Autoptimize を使うと、管理画面の方で不具合がありました。

AddQuicktag で追加したビジュアルエディタのクイックタグが時々、非表示される現象です。

ブラウザのキャッシュを削除してから投稿編集画面を更新すると表示がもとに戻るのですが、具体的な原因はよく分かっていません。

まぁ、対処法は分かるし、とくに不便さは感じないのでそのまま使っていますが、同様の現象で悩んだら試してみてください。

まとめ

Autoptimize は簡単に設定できて、大きな不具合を出さずにサイト表示速度の改善に貢献してくれるプラグインです。

ウェブフォントの最適化も、このプラグインのおかげで簡単な修正をして解決できました。

WordPress テーマによっては必要ないプラグインだったりしますので、Web サイトの環境を考慮しながら必要に応じて取り入れてみてください。

WordPress のデザイン面をカスタマイズしたい方は、こちらの記事も参考にしてみてください。

見出しデザインのサンプルはこちら。

囲み枠デザインのサンプルはこちら。

では今回はこの辺で。

ありがとうございました!

この記事のタイトルとURLをコピーする

関連記事

  1. WordPress の目次デザインをおしゃれにカスタマイズ

    ブログ運営と改善

    WordPress の目次デザインをおしゃれにカスタマイズ

    ユウキです。ブログのユーザビリティ(使いやすさ、見やすさ)を改善し…

  2. TCD は SEO に弱いのか? H タグの使い方と修正方法

    ブログ運営と改善

    TCD は SEO に弱いのか? H タグの使い方と修正方法

    ユウキです。「 TCD のテーマって SEO 対策で不利って聞いた…

  3. Contact Form 7 の設定とカスタマイズを解説

    ブログ運営と改善

    Contact Form 7 の設定とカスタマイズを解説

    ユウキです。ブログのお問い合わせページはカスタマイズされてますか?…

  4. Lighthouse で JavaScript のセキュリティ脆弱性が検出された際の対処法

    ブログ運営と改善

    Includes front-end JavaScript libraries with known…

    ユウキです。モバイル表示速度を改善するために Lighthouse…

  5. robots.txt is not valid 4 errors found の解決方法

    ブログ運営と改善

    robots.txt is not valid 4 errors found の解決方法

    ユウキです。TCD「Be」を使ったウェブサイトで Lighthou…

  6. AddQuicktag の設定と表示されない場合の解決方法

    ブログ運営と改善

    AddQuicktag の設定と表示されない場合の解決方法

    ユウキです。今回は AddQuicktag の使い方について解説し…

管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。(しょぼ笑)

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
  3. Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin
惹きつけるブログはデザインから生まれる
WordPress テーマ Be(TCD076)のレビュー
PAGE TOP