WordPress ファイルを縮小する方法 (CSS、HTML、および JavaScript)

公開: 2022-11-12

CSS、HTML、または JavaScript などの WordPress ファイルを縮小しますか? それがどのように行われるか知りたい場合は、私たちがカバーします. この記事では、WordPress ファイルを縮小して WordPress Web サイトを高速化する方法を紹介します。

しかしその前に、ミニフィケーションとは何か、ミニフィケーションの利点について説明しましょう。 始めましょう。

ミニフィケーションとは？

縮小は、Web 開発者が HTML、CSS、JavaScript などの静的ファイルを圧縮することで Web サイト全体の読み込み時間を短縮するために使用する一般的な手法です。 このプロセスの要点は、静的ファイルのサイズを小さくすることです。

縮小とは、人間にとって読みやすさを向上させる以外の目的を持たないファイル内のすべての空白を削除することです。 サーバーは読みやすさを気にしないので、すべての空白を安全に削除できます。 その結果、ファイルのサイズがわずかに縮小されます。 ただし、すべての静的ファイルがわずかに削減されると、全体的な効果ははるかに大きくなります。

たとえば、通常の CSS コードは次のようになります。

 体 {
 余白:25px;
 パディング:25px;
 色:#000000;
 背景:#f5f5f5;
 }
 h1 {
 フォントサイズ:32px;
 color#ff6200;
 margin-bottom:15px;
 }

しかし、縮小後、次のようにすることができます。

 body{margin:25px;padding:25px;color:#000000;background:#f5f5f5;}h1{font-size:32px;color#ff6200;margin-bottom:15px;}

ご覧のとおり、縮小プロセスによって余分な改行と空白がコードから削除されました。 これにより、ファイル サイズが縮小され、サーバーがファイルをより速く読み取れるようになり、Web サイトを訪問者にすばやく提供できます。

CSS と同様に、最適化手法でも HTML と JavaScript を圧縮できます。

WordPress ウェブサイトの周りにたくさんの静的ファイルがある場合は、それらを縮小してみてください。 おそらく、ファイルサイズを縮小し、ウェブサイトを高速化するのに役立ちます.

WordPress で HTML、CSS、Javascript を縮小する必要がある理由

キャッシング、遅延読み込みなどの他の最適化手法とともに、WordPress で HTML、CSS、および JavaScript を縮小して、Web サイトをさらに高速化する必要があります。

統計によると、WordPress は世界中の Web サイトの64% 以上で使用されています。 したがって、同じ業界の他の WordPress ブログと競合していると言っても過言ではありません。

さらに、Google は、ウェブサイトの速度をランキング要因の 1 つと見なすとも述べています。

したがって、縮小やその他の最適化手法を実装することで、Web サイトやブログを高速化できます。 これにより、コンバージョン、売上 (WooCommerce ストアを使用している場合)、収益が増加します。 ただし、サイトに限られた量の静的ファイルしかない場合、縮小してもパフォーマンスが大幅に向上することはありません。

一方、Web サイトが大量の CSS、JS、および HTML ファイルを処理する場合は、縮小化が最善の方法の 1 つになる可能性があります。

これで、縮小と、ファイルを縮小する必要がある理由がわかりました。 次に、メイン トピックに移りましょう: WordPress で HTML、CSS、および JS を縮小する方法。

WordPress で HTML、CSS、Javascript を縮小する方法

WordPress で HTML、CSS、および JavaScript を縮小するには、2 つの方法があります。

  • 手動で
  • 専用プラグインを使う

以下に、両方の方法を示します。 したがって、要件に合った方法を選択できます。

WordPress ファイルを手動で縮小する

WordPress サイトでミニフィケーションのために余分なプラグインを使用したくない場合は、このオンライン ツールを使用できます。 ただし、手動の方法を使用する場合は、すべてのファイルを個別に最適化する必要があります。 これがその方法です。

ウェブサイトを確認すると、送信ボックスが表示されます。

ミニファイアー

そこに、縮小する必要があるコードを貼り付ける必要があります。

wordpressファイルを縮小する - cssを貼り付ける

CSS、JS、または HTML コードを縮小できます。 コードを貼り付けたら、 Minifyをクリックします。

CSSコードを縮小する

次のページでは、縮小版の CSS を取得します。

縮小されたCSS

スクリーンショットでわかるように、ツールはコードから余分な空白と改行をすべて削除しました。 このようにして、CSS、JavaScript、および HTML を最適化できます。

その後、この縮小版のコードをサーバーにアップロードする必要があります。

このツールは簡単に使用できます。 ただし、主な欠点は、すべての WordPress ファイルを手動で縮小する必要があることです。 これはかなり時間がかかり、退屈なプロセスになる可能性があります。 サーバー上のすべてのファイルのプロセス全体を自動化できるとしたら?

そこで、WordPress 縮小プラグインの出番です。WordPress で CSS、HTML、および JavaScript を縮小する方法を見てみましょう。

WordPress プラグインを使用して CSS、HTML、および JavaScript を縮小する

静的ファイルを縮小するために使用できる最高の WordPress プラグインは次の 2 つです。

  • WPロケット
  • 自動最適化

チュートリアルに進む前に、各プラグインが提供するものを見てみましょう。

1) WPロケット

wpロケット

最も強力な WordPress キャッシングおよび速度最適化プラグインを探している場合は、 WP Rocket を確認する必要があります。 WP Rocket は、すべてのブロガーやビジネス オーナーが簡単なマウス クリックで Web サイトの速度を上げるのに役立つ、軽量でありながら機能豊富な WordPress 用のキャッシュ プラグインです。

WP Rocket の主な利点は、使いやすいインターフェースです。 プラグインには使いやすいダッシュボードがあり、誰もが最高の機能とそれらをいつオンにするかを理解するのに役立ちます. このプラグインを使用すると、WordPress で CSS、HTML、および JavaScript ファイルを縮小する以外にも、さらに多くのことができます。

WP Rocket プラグインで人気のある機能は、CDN 統合、WooCommerce 統合、およびデータベース統合です。

CDN 統合を提供するため、プラグインを任意の CDN サービスと統合できます。 CDN (コンテンツ配信ネットワーク)サービスは、ファイルの提供を高速化するために作成されます。 BunnyCDN、Cloudflare、Stackpath、または好きなものを使用できます。

さらに、WooCommerce 最適化機能により、カート、チェックアウト、および関連する重要なページがキャッシュから確実に削除されます。 これにより、WooCommerce ストアがよりユーザーフレンドリーになります。

最後に、データベース最適化機能により、 MySQLデータベースから不要なテーブル、コメント、破棄された投稿がすべて削除されます。 おそらく、これはウェブサイトの所有者がウェブサイトの速度を上げ、サーバーの負荷を軽減するのに役立ちます.

特徴
  • 軽量
  • 使いやすい
  • CDN 統合
  • WooCommerce の統合
  • データベースの最適化
  • ファイルの最適化
価格

WP Rocket はプレミアムキャッシュ プラグインです。 必要に応じてサブスクリプションを取得できます。 参考までに、最も安いプランの年間費用は 49 ドルです。

2) 自動最適化

自動最適化

軽量の WordPress プラグインを使用して WordPress ファイルの縮小を管理する場合は、 Autoptimizeを試してください。

Autoptimize は、WordPress または WooCommerce Web サイトを高速化する人気のあるプラグインです。 このプラグインは、世界中の 100 万を超えるWordPress サイトで使用されています。 さらに、独自の機能も備えています。

たとえば、画像のパフォーマンスを最適化するには、Autoptimize の遅延読み込み機能を使用できます。 訪問者が下にスクロールしたときにのみ画像が提供されるようにします。

遅延読み込みの他に、Google フォントの最適化も優れた機能です。 ほとんどの WordPress テーマ作成者は通常、テーマ内で Google フォントを使用しているため、エンド ユーザーがそれを使用すると、Web サイトは追加の HTTP リクエストを Google フォントのサーバーに送信します。 Autooptimize でそれを減らすことができます。

これは軽量のツールであるため、プラグインによってサーバーや Web サイト全体のサイズに追加の負荷がかかることはありません。 必要なすべての機能を提供するシンプルなソリューションが必要な場合は、Autoptimize を選択する必要があります。 ただし、開発チームは、最適化を向上させるためにキャッシュ プラグインを使用することを提案しています。

特徴
  • 遅延読み込み
  • 縮小化
  • Google フォントの最適化
  • 軽量
価格

Autoptimize は、WordPress プラグイン リポジトリからダウンロードできる無料の WordPress プラグインです。

したがって、これらはWordPressファイルを縮小するための2つの最も人気のあるプラグインでした. ただし、利用可能なオプションはこれだけではありません。 探索したい場合は、最高のWordPressミニフィケーションプラグインに関するガイドをお気軽にチェックしてください.

次に、これらのプラグインを使用してファイルを縮小する方法を紹介します。

WP Rocket で WordPress ファイルを縮小する方法

WP Rocket は、Web サイトのパフォーマンスを次のレベルに引き上げる必要がある場合に適したオプションです。 縮小化とは別に、ページの読み込み時間を短縮するのに役立つ多くの機能があります.

これはプレミアム プラグインであるため、WordPress リポジトリから直接インストールすることはできません。 代わりに、公式 Web サイトから購入して、そこからダウンロードする必要があります。

プレミアム プラグインをダウンロードしたら、プラグインを手動で WordPress Web サイトにインストールする必要があります。

wpロケットをインストール

インストール後、プラグインを有効化します。

wpロケットを起動

WordPress 設定内に、 WP Rocket 設定が表示されます。

wロケット構成

使用できるすべての構成オプションが左側に表示されます。

wpロケット構成オプション

主なオプションは次のとおりです。

  • ダッシュボード
  • キャッシュ
  • ファイルの最適化
  • メディア
  • プリロード
  • 高度なルール
  • データベース
  • CDN

等

ファイルの最適化タブに移動するだけです。 そこに JS および CSS ファイルを縮小するための設定が表示されます。

ファイルの最適化 - wordpress ファイルを縮小する

そこから、必要なファイルを縮小します。

CSS 縮小

CSS 縮小セクション内のオプションを有効にすると、準備完了です。

css を縮小する - wordpress ファイルを縮小する

カスタム CSS ファイルを縮小から除外することもできます。

JavaScript の縮小

JavaScript 縮小タブまで下にスクロールし、そこから縮小を有効にします。

wpロケットでjavascriptを縮小する

これらの変更を行った後、設定を保存する必要があります。 現在のところ、 WP Rocket は HTML ファイルの縮小をサポートしていません。

このようにして、WordPress の縮小に WP Rocket を使用できます。 次に、ミニフィケーションに Autoptimize プラグインを使用する方法を見ていきます。

Autooptimize で WordPress ファイルを縮小する方法

ご存知のように、最初に WordPress サイト内に Autoptimize をインストールしてアクティブ化する必要があります。 これを行うには、[プラグイン] > [新規追加] に移動して、Autoptimize を検索します。 見つかったら、ツールをインストールして有効にします。

WordPress ファイルを縮小する - 自動最適化を有効にする

プラグインをインストールすると、WordPress の設定の下に表示されます。

wordpress ファイルの縮小 - 設定の自動最適化

開発チームは、プラグインに 4 つのカスタマイズ オプションを追加しました。

自動最適化オプション

  • JS、CSS、および HTML
  • 画像
  • 重要な CSS
  • 追加

CSS、HTML、および JavaScript ファイルを縮小するには、次の手順に従う必要があります。

JavaScript の最適化

JavaScript の最適化は、プラグインの設定ページで最初に表示されるものです。 JavaScript コードの最適化オプションを有効にして、JavaScript ファイルを縮小し、次のステップに進みます。

JavaScript オプション

CSS の最適化

JavaScript オプションのすぐ下に、CSS の最適化が表示されます。 サーバー上のすべての CSS ファイルを縮小するには、[CSS ファイルの集約] オプションと [インライン CSS も集約する] オプションを有効にします。

css オプション - WordPress ファイルの縮小

HTML の最適化

HTML ファイルを最適化するには、HTML オプションに移動します。

そこで、[ HTML コードの最適化] オプションを有効にします。

html オプション - WordPress ファイルの縮小

必要な変更をすべて行ったら、プラグインの設定を保存する必要があります。

このようにして、WordPress/WooCommerce Web サイトの静的ファイルを最適化できます。 さらに、Autoptimize にはさらに多くの最適化機能があるため、プラグインを調べて速度とパフォーマンスをさらに向上させることができます。

それでおしまい。

これが、Autoptimize で WordPress ファイルを縮小する方法です。

注:特定のテーマ ファイルを縮小すると、Web サイトが破損することがあります。 そのため、ファイルに縮小を適用した後は、毎回フロントエンドから Web サイトを確認してください。

縮小結果のテスト/比較

これで、WordPress または WooCommerce の静的ファイル (CSS、HTML、および JavaScript) の縮小に成功しました。 次に、前後の結果を見てみましょう。 Web サイトの速度をテストするには、次のような複数のツールを使用できます。

  • ピンダム
  • GTmetrix
  • PageSpeed インサイト

このテストでは、 GTmetrixを使用します。 これは、Web サイトの速度テストに使用できる一般的なツールです。 これが結果です。

注:新しい WordPress Web サイトを作成し、テスト用にいくつかのダミー コンテンツをインポートしました。 コンテンツのない新しい Web サイトの速度をテストすることはお勧めしません。

前

完全にロードされた - WordPress ファイルを縮小する

  • パフォーマンス – 88%
  • 構造 – 97%
  • 完全にロードされた時間 – 3.3 秒

後

結果の後 - WordPress ファイルを縮小する

  • パフォーマンス – 98%
  • 構造 – 98%
  • 完全にロードされた時間 – 1.4 秒

ご覧のとおり、ウェブサイトの読み込み時間が 3.3 秒から 1.4 秒に短縮されました。 これは大幅な改善です。

結論

上記のように、WordPress または WooCommerce Web サイトを高速化する必要がある場合は、最大限に最適化する必要があります。 WordPress の静的ファイルを縮小することは、サイトを高速化するための一般的で簡単な方法です。 これの主な利点は、コードを扱う必要がないこと、またはコア/テーマ テンプレートを編集する必要がないことです。

すべての静的ファイルを手動で最適化することは、困難で時間がかかる場合があります。 新しい CSS/HTML または JS ファイルを Web サイトに追加するときはいつでも、Web サイトを通じて最適化する必要があります。 これは、初心者向けでも便利な方法でもありません。

WP RocketとAutoptimizeは、静的ファイルの最適化に使用できる 2 つの最適なプラグインです。 どちらも使いやすい機能を備えており、技術に詳しくない人でも簡単に設定できます. 既存および将来のすべての静的ファイルを最適化する最善の方法を探している場合は、プラグイン メソッドが最適です。

この役立つ記事を見つけて、WordPress ファイルを縮小する方法を学んでいただければ幸いです。 ソーシャル メディアでこの投稿を友人や仲間のブロガーと共有することを検討してください。 さらに、関連記事については、ブログ アーカイブをご覧ください。

どの方法を使用しますか? コメントでお知らせください！

あなたが読みたいかもしれない同様の記事：

  • WordPress 速度最適化プラグイン: ウェブサイトの速度を向上させるトップ 5 プラグイン!
  • WordPressウェブサイトをスピードアップするための最高のWordPressキャッシングプラグイン
  • 遅い WooCommerce ストアを修正してスピードアップする方法は?