WordPress サイトの CSS、HTML、JavaScript を縮小する方法

公開: 2023-02-28

縮小化は、Web サイトを高速化するためのステップとして推奨される単純な概念です。 しかし現実には、ファイルを縮小しようとしてサイトが破損してしまうと、多くのサイト所有者が際限なくイライラしてしまいます。

それで何が与えられるのでしょうか？

縮小化には多くの実験が必要になることがよくあります。 利用可能な解決策は数​​多くありますが、その動作は使用しているテーマやプラグインに応じてサイトごとに異なります。

この投稿では、サイトに適切なソリューションを示すために、縮小とは何か、その利点、および利用可能な最も一般的な縮小ソリューション (手動とプラグインの両方) について説明します。

ミニ化とは何ですか?

Web サイトはさまざまなファイルで構成されています。 Google PageSpeed Insights でサイトの速度をテストすると、HTML、CSS、JavaScript ファイルを縮小するよう推奨される場合があります。

問題？ 人間として、これらのファイルを読めるようにこれらのファイルに含まれるコードを記述しますが、コンピュータはコメント、書式設定、空白、改行などの文字を気にしません。 そのため、Web サイトのファイル内でこれらの不要な文字を見つけた場合は無視します。

そこで登場するのが縮小化です。 縮小化とはプログラミング用語で、基本的にはコードの実行に必要のない不要な文字を削除することを意味します。 縮小化は、コードを分析して書き換えてファイル全体のサイズを削減することで機能し、それによってサイトの合計サイズが削減され、ユーザーのブラウザーでの読み込みが速くなります。

たとえば、スタイルシートに含まれる可能性のある CSS を次に示します。 

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

上記の CSS 例の縮小版は次のとおりです。 

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

コードがどれほど圧縮されているかがわかりますか?

縮小化は、応答が送信される前に Web サーバー上で実行されます。 縮小後、Web サーバーは元のファイルの代わりに、より小さく縮小された、より高速なファイルを使用するため、機能を犠牲にすることなく帯域幅が低下します。

SEO 専門家の Yoast 氏が説明するように、ファイルを縮小するとファイル サイズが最大 30 ～ 40%、場合によっては 50% も節約できます。

HTML、CSS、JavaScript ファイルを縮小する必要がある理由

高速な Web サイトを持つことは Google に満足してもらい、Web サイトが検索で上位にランクされるようになるだけでなく、サイト訪問者にとってより良いユーザー エクスペリエンスを提供します。

縮小化には多くの利点があります。

  • ファイルが小さいほど、サイトの合計ダウンロード サイズが小さくなります。
  • サイト訪問者はページをより速く読み込んでアクセスできるようになります。
  • サイト訪問者は、より大きなファイルをダウンロードすることなく、同一のユーザー エクスペリエンスを得ることができます。
  • ネットワーク上で送信されるデータが少なくなるため、サイト所有者は帯域幅コストが削減されます。

HTML、CSS、JavaScript ファイルを縮小する方法

サイトのファイルを縮小する前に、バックアップを実行することをお勧めします。 さらに良いのは、ライブ サイトに変更を加える前に、ステージング サイトでファイルを縮小して、すべてが正常に動作していることを確認できるようにすることです。

ファイルを縮小する前後でページ速度のベンチマークを実行し、結果を比較して縮小が影響したかどうかを確認することも重要です。

私のお気に入りのスピード テスト サイトは GTmetrix です。 Google PageSpeed Insights とオープンソースのパフォーマンス テスト ツールである YSlow の両方を使用して、ページ速度のパフォーマンスを分析します。 次に、スコアを生成し、サイト最適化の改善に関する推奨事項を提供します。

私がお勧めできる他の優れた速度テスト ツールには、Pingdom Website Speed Test、WebPageTest、モバイル速度のテストなどがあります。

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

ファイルを手動で縮小するには、かなりの時間と労力がかかります。 つまり、ファイルから個々の空白、行、不要なコードを削除する時間がある人がいるでしょうか? つまらない！ また、人的ミスが発生する余地も大きくなります。 したがって、ファイルを縮小するこの方法はお勧めしません。

幸いなことに、サイトとの間でコードをコピー アンド ペーストできる無料のオンライン縮小ツールが多数あります。 以下にツールの簡単なリストを示します。あなたのサイトに適した他のオプションを調査することをお勧めします。

1. Will Peavy の HTML ミニファイアー

Will Peavy の Minifier ツール。
Will Peavy の Minifier ツール。

HTML Minifier は、PHP で構築された HTML ミニファイ用の無料オンライン ツールです。 このツールを使用するには、マークアップに JavaScript の CSS を含めた HTML をテキスト領域に貼り付け、「縮小」ボタンをクリックするだけです。 縮小後にスクリプトが確実に動作するようにするには、JavaScript ステートメントをセミコロンで終了し、コメントに* *構文を使用することをお勧めします。

2.CSSミニファイアー

CSS Minifier オンライン ツール。
CSS Minifier オンライン ツール。

もう 1 つの無料ツールである CSS Minifier は、コピーして「入力 CSS」テキスト領域に貼り付けた CSS を縮小することで機能します。 縮小された出力をファイルとしてダウンロードするためのオプションがあります。 開発者向けに、このツールは API も提供します。

3.JS圧縮

JSCompress ツール。
JSCompress ツール。

JSCompress は、JS ファイルを元のサイズの最大 80% まで圧縮および縮小できるオンライン JavaScript コンプレッサーです。 これを使用するには、コードをコピーして貼り付けるか、複数のファイルをアップロードして結合し、「JavaScript を圧縮」をクリックします。 このツールは、UglifyJS 3 および babili-standalone に基づいています。

開発者向けの手動縮小ツール

より高度なオプションを探している開発者のために、Google は次の HTML、CSS、JavaScript の縮小化リソースをお勧めします。

  • HTMLMinifier – Javascript ベースの HTML 圧縮器/縮小器 (Node.js サポート付き)。
  • CSSNano – PostCSS エコシステム上に構築されたモジュール式ミニファイアー。
  • csso – 構造を最適化した CSS ミニファイアー。
  • UglifyJS – JavaScript パーサー、マングラー、コンプレッサー、および「ビューティファイアー」ツールキット。

Google の Closure Compiler は、JavaScript の最適化ツールです。 ソース言語からマシンコードにコンパイルするのではなく、JavaScript からコンパイルしてより良い JavaScript を作成します。 コードを解析して分析し、無効なコードを削除して書き直し、残ったコードを最小限に抑えます。 このツールは、構文、変数参照、型もチェックし、JavaScript の一般的な落とし穴について警告します。

プラグインを使用してファイルを縮小する

手動手順を実行せずにファイルを縮小できる、無料とプレミアムの両方の素晴らしいプラグインがいくつかあります。

注: このリストには、WordPress プラグイン リポジトリで入手可能な、最新であり、WordPress の最新バージョンとの互換性がテストされている無料のプラグインのみを含めました。 プレミアム オプションについては、下にスクロールしてください。/

1. HTML の縮小

HTML Minify プラグイン。
HTML Minify プラグイン。

このシンプルで軽量、手間のかからないプラグインを使用すると、サイトの HTML 出力を縮小できます。 これを使用するには、プラグインをインストールして有効にするだけで、設定を構成する必要がなく、自動的にマークアップが縮小されます。

2. HTML を縮小する

Minify HTML プラグイン。
Minify HTML プラグイン。

私はこのプラグインに関する WordPress.org の説明が大好きです。「ウェブサイトの HTML マークアップを見て、それがどれほどずさんで素人っぽく見えるか気づいたことはありますか?」 このプラグインは、ずさんなマークアップをクリーンアップして最小化します。

HTML Minify プラグインとは異なり、このツールはより多くのオプションを提供します。 これには JavaScript と CSS のオプションの縮小機能が含まれていますが、テキスト領域や事前にフォーマットされたテキストを混乱させることはありません。 HTML、CSS、および JavaScript のコメントを削除する (MSIE 条件付きコメントを残す)、HTML5 void 要素から不要な XHTML 終了タグを削除する、リンクから不要な相対スキームとドメインを削除するためのオプションもあります。

3. マージ + 縮小 + 更新 — WordPress プラグイン

Merge + Minify + Refresh プラグイン
Merge + Minify + Refresh プラグイン。

このプラグインはコードを縮小するだけではありません。 CSS ファイルと JavaScript ファイルを結合し、Minify (CSS の場合) と Google Closure (JavaScript の場合) を使用して、生成されたファイルを縮小します。 サイトの速度に影響を与えないように、縮小化は WP-Cron 経由で実行されます。

CSS または JS ファイルの内容が変更されると再処理されるため、キャッシュを空にする必要はありません。 マルチサイト ユーザーは、このプラグインがネットワーク上で適切に機能することを知ってうれしいでしょう。

4.JCH最適化

JCH 最適化プラグイン。
JCH 最適化プラグイン。

JCH Optimize には、無料のプラグインとしては優れた機能がたくさんあります。CSS と JavaScript を結合して縮小し、HTML を縮小し、ファイルを結合するための GZip 圧縮、背景画像のスプライト生成があり、競合を解決するために結合から特定のファイルを除外することもできます。

JavaScript の非同期ロード、レンダリング ブロックを排除する CSS 配信の最適化、CDN/Cookie レス ドメインのサポート、画像の遅延読み込みと最適化など、より多くの最適化機能を備えたプロ バージョンが利用可能です。

5. CSS の縮小

CSS Minifier プラグイン。
CSS Minifier プラグイン。

このプラグインを使用して CSS を縮小することは、これまで以上に簡単です。インストールして有効化し、 [設定] > [CSS 縮小]に移動して、CSS コードの最適化と縮小という 1 つのオプションだけを有効にするだけです。

このプラグインのコードは、人気のある Autoptimize プラグインからフォークされたものです (このプラグインについては以下で詳しく説明します)。 このプラグインの作者である Peter Pfeiffer は、JavaScript で利用できる同様のプラグイン、Minify JavaScript を持っています。

6. 高速縮小

Fast Velocity Minify プラグイン
Fast Velocity Minify プラグイン。

これは、20,000 を超えるアクティブ インストールと 5 つ星の評価を誇る、ファイルの縮小に利用できる最も人気のあるオプションの 1 つです。 これを使用するには、プラグインをインストールしてアクティブ化し、 [設定] > [Fast Velocity Minify]に移動します。 ここには、開発者向けの JavaScript および CSS 例外の詳細オプション、CDN オプション、サーバー情報など、プラグインを構成するためのオプションが多数あります。 ただし、ほとんどのサイトではデフォルト設定で問題なく機能します。

プラグインは、キャッシュされていない最初のリクエスト中にのみ、フロントエンドでリアルタイムで縮小化を実行します。 最初のリクエストが処理されると、同じ CSS と JavaScript のセットを必要とする他のページには、同じ静的キャッシュ ファイルが提供されます。

7. 自動最適化

自動最適化プラグイン
自動最適化プラグイン。

アクティブ インストール数が 400,000 を超える Autoptimize は、WordPress プラグイン リポジトリで最も人気のある縮小ツールです。

Autoptimize は、スクリプトとスタイルを集約、縮小、キャッシュしたり、デフォルトで CSS をページ ヘッダーに挿入したり、スクリプトをフッターに移動して延期したりすることができます。 開発者向けの高度なオプションが多数用意されており、広範な API が利用できるため、サイト固有のニーズに合わせて自動最適化を調整できます。

8. ハミングバードのページ速度の最適化

ハミングバード最適化プラグイン
ハミングバード最適化プラグイン。

Hummingbird は、WordPress プラグイン リポジトリの比較的新しいプラグインであり、プレミアム プラグインとしてスタートしました。 無料版には、縮小を含むサイト最適化ツールの優れたコレクションが備わっており、ファイルを縮小、配置、結合して最高のパフォーマンスを実現できます。

また、プラグイン内からサイトのパフォーマンスをテストし、サイトを改善するための実用的な推奨事項を取得できる優れたスキャン機能もあります。

WordPress キャッシュプラグインの機能としての縮小化

縮小化は通常、キャッシュ プラグインに含まれる標準機能です。 私がテストして推奨できるプラグインは次のとおりです。

  • WPロケット
  • W3 合計キャッシュ
  • WPスーパーキャッシュ

結論

この記事が縮小化の謎を解き明かし、縮小化とは何か、そしてそれを Web サイトにどのように適用できるかをしっかりと理解していただければ幸いです。

縮小は微調整のステップであることに留意することが重要です。サイトの速度に多少の改善が見られるかもしれませんが、大幅な改善ではありません。 とはいえ、これは、ファイルの結合など、他のパフォーマンスおよび最適化手法に加えて実装する価値のあるベスト プラクティスです。

また、Web サイトごとに異なるため、ファイルを縮小する際には、Web サイトに最適なものを構成、テスト、再構成、再テスト、調整、確認してください。

この投稿が気に入った場合は、サイトを高速化する方法に関する詳しいアドバイスについては、6 つのベスト WordPress キャッシュ プラグインの比較をご覧ください。

コードを縮小してみましたか? ウェブサイトを高速化するために他にどのような方法を使用しましたか? 以下のコメントセクションでお知らせください。