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

縮小は、webサイトの高速化に向けたステップとしてよく推奨される単純な概念です。 しかし、現実には、多くのサイト所有者がファイルを縮小してサイトを破壊しようとすると、多くのサイト所有者に終わりがありません。

だから何を与える？

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

この記事では、縮小とは何か、その利点、および利用可能なより一般的な縮小ソリューションのいくつかを探ります–手動とプラグインの両方–あなたのサイ

縮小とは何ですか？

ウェブサイトは多くの異なるファイルで構成されています。 Google PageSpeed Insightsを使用してサイトの速度をテストすると、HTML、CSS、およびJavaScriptファイルを縮小することを推奨する場合があります。

問題は？ 人間として、私たちはこれらのファイルに含まれるコードを書いて読むことができますが、コンピュータはコメント、書式設定、空白、改行などの文字を気に だから、彼らはウェブサイトのファイル内のこれらの不要な文字に遭遇したとき、彼らはそれらを無視します。

それが縮小が絵になるところです。 縮小は、基本的にコードを実行するために必要とされていない不要な文字を削除することを意味するプログラミング用語です。 縮小は、コードを分析して書き換えてファイルの全体的なサイズを小さくし、サイトの合計サイズを小さくして、ユーザーのブラウザで高速にロードするこ

たとえば、スタイルシートにあるいくつかの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ファイルを縮小する理由

高速なウェブサイトを持つことは、Googleを幸せにし、ウェブサイトの検索順位を上げるのに役立つだけでなく、サイト訪問者にとってより良いユーザーエクスペリエンスを提供します。

サイトの速度が重要である理由を明確にする多くの統計があります：人々の40％があなたのホームページがロードされるのを3秒待たず、Googleはサイトが2-3秒以内にロードすることを推奨しています。

ミニ化には多くの利点があります:

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

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

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

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

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

私がお勧めできる他の素晴らしいスピードテストツールには、Pingdom Website Speed TestとWebPageTestがあり、あなたのモバイル速度をテストします。

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

手動でファイルを縮小するには、かなりの時間と労力がかかります。 つまり、ファイルから個々の空白、行、不要なコードを削除する時間は誰ですか？ つまんない！ また、それは人為的ミスのためのより多くの部屋を可能にします。 だから私はファイルを縮小するためにこの方法をお勧めしません。

幸いにも、あなたのサイトとの間でコードをコピーして貼り付けることを可能にする多くの無料のオンラインミニフィケーションツールがあります。 ここに用具の短いリストはあり、私はあなたの場所のためによりよく働くかもしれない他の選択を研究するように励ます。

1. PeavyのHTML Minifier

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

2. CSS Minifier

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

3. JSCompress

JSCompressは、JSファイルを元のサイズの80％まで圧縮して縮小することができるオンラインJavaScriptコンプレッサーです。 これを使用するには、コードをコピーして貼り付けるか、複数のファイルをアップロードして結合し、”Javascriptを圧縮”をクリッ このツールは、UglifyJS3とbabili-standaloneに基づいています。

開発者のための手動縮小ツール

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

• HTMLMinifier-JavascriptベースのHTMLコンプレッサー/ミニファイア（ノード付き。jsサポート）。
• CSSNano–PostCSSエコシステムの上に構築されたモジュラーミニファイア。
• csso–構造最適化を備えたCSSミニファイア。
• Uglifyjs–JavaScriptパーサー、マングラー、コンプレッサー、および”beautifier”ツールキット。

Googleのクロージャコンパイラは、JavaScriptのための最適化ツールです。 ソース言語からマシンコードにコンパイルするのではなく、JavaScriptからコンパイルしてJavaScriptをより良くします。 それはあなたのコードを解析し、それを分析し、死んだコードを削除し、書き換え、残っているものを最小限に抑えます。 このツールは、構文、変数参照、および型をチェックし、一般的なJavaScriptの落とし穴について警告します。

プラグインでファイルを縮小

あなたが手動の手順を実行することなく、ファイルを縮小することができ、無料とプレミアムの両方、利用可能ない

注:このリストには、WordPressのプラグインリポジトリで利用可能な無料のプラグインのみが含まれています。 プレミアムオプションの場合は、下にスクロールします。/

1. HTML Minify

このシンプルで軽量で面倒なプラグインを使用すると、サイトのHTML出力を縮小することができます。 それを使用するには、あなたがする必要があるのは、プラグインをインストールしてアクティブにするだけで、それは自動的に任意の設定を構成する

2. Htmlを縮小する

WordPress.org このプラグインの説明：”今まであなたのウェブサイトのHTMLマークアップを見て、それがどのようにずさんで素人に気づく？”このプラグインは、クリーンアップし、ずさんなマークアップを縮小します。

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

3. Merge+Minify+Refresh—WordPressプラグイン

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

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

4. Jch Optimize

JCH Optimizeは無料のプラグインのための素晴らしい機能の束を持っています：それはCSSとJavaScriptを組み合わせて縮小し、HTMLを縮小し、結合ファイルのためのGZip圧縮、背景画像のためのスプライト生成があり、あなたは競合を解決するために結合から特定のファイルを除外することができます。

javascriptの非同期ロード、レンダーブロッキングを排除するためのCSS配信の最適化、CDN/cookieのないドメインのサポート、画像の遅延ロードと最適化など、より多くの最適化機能を備えたproバージョンが用意されている。

5. CSS Minify

このプラグインであなたのCSSを縮小することは簡単ではありませんでした–ちょうどインストール、アクティブ化、設定>CSS Minifyに移動して、Cssコードを最適化

このプラグインのコードは、人気のあるAutoptimizeプラグインからフォークされています（このプラグインの詳細は以下のとおりです）。 プラグインの作者であるPeter Pfeifferには、JavaScriptで利用可能な同様のプラグインであるMinify JavaScriptがあります。

6. 高速ベロシティーミニファイ

20,000以上のアクティブインストールと五つ星の評価で、これはファイルを縮小するために利用可能なより一般的なオプションの一つです。 これを使用するには、プラグインをインストールして有効にし、設定>高速速度縮小に移動します。 そこには、開発者のための高度なオプションを含むプラグインを設定するためのオプションのスタックを見つけることができますJavaScriptとCSSの例外、CDNのオプションだけでなく、サーバー情報。 ただし、既定の設定は、ほとんどのサイトで正常に動作します。

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

7. Autoptimize

400,000以上のアクティブインストールで、Autoptimizeは簡単にWordPressのプラグインリポジトリで最も人気のある縮小ツールです。

Autoptimizeは、スクリプトとスタイルを集約、縮小、キャッシュし、デフォルトでページヘッダーにCSSを挿入し、スクリプトをフッターに移動して延期することができます。 開発者のための高度なオプションと利用可能な広範なAPIがたくさんあるので、あなたはあなたのサイトの特定のニーズを満たすためにAutoptimizeを調整する

8. Hummingbirdページ速度の最適化

HummingbirdはWordPressプラグインリポジトリの比較的新しいプラグインであり、プレミアムプラグインとして開始されました。 無料版では、縮小を含むサイト最適化ツールの素晴らしいコレクションを備えており、最高のパフォーマンスのためにファイルを縮小、配置、結合するこ

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

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

縮小は、一般的にキャッシュプラグインにある標準機能です。 ここに私がテストしたプラグインがあり、お勧めできます:

• WP Rocket
• W3Total Cache
• WP Super Cache

結論

この記事があなたのために縮小を分かりやすくし、それが何であるか、そしてあなたのウェブサイ

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

また、すべてのwebサイトが異なるため、ファイルを縮小するときに、webサイトに最適なものを設定、テスト、再構成、再テスト、微調整、チェックしてくださ

この記事が好きなら、あなたのサイトをスピードアップする方法についてのより多くのアドバイスのために比較された6つの最高のWordPressのキャッシ