ウェブサイトのCSS、HTML、Javascriptを縮小する方法

公開: 2018-12-27

WebサイトのCSS、HTML、およびJavascriptファイルを縮小すると、サイトのページの読み込み速度から貴重な時間を節約できます。今、私たちはあなたのページの読み込み速度を半分にすることなどについて話していませんが、あなたのウェブサイトの速度に関しては、少しでも役に立ちます。サイトの読み込み速度は、初めての訪問者にとって重要であるだけでなく、検索エンジンのランキングを移動するためにも重要です。

「縮小」という用語は、ソースコード内の不要な文字を削除するプロセスを説明するプログラミング用語です。これらの文字には、空白、改行、コメント、およびブロック区切り文字が含まれます。これらは、人間には役立ちますが、マシンには不要です。 CSS、HTML、およびJavascriptコードを含むWebサイトのファイルを縮小して、Webブラウザーがそれらをより高速に読み取れるようにします。

これは、CSSの縮小化がどのように見えるかの例です。

縮小前のCSS

/* Layout helpers

----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

縮小後のCSS

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

明らかに、これはCSSコードのスニペットを使用した小さな例ですが、数千行のコードを縮小するときに節約できるスペースの量を想像することができます。したがって、これを手動で手動で実行したい場合は、技術的には可能です。しかし、あなたはエラーのリスクが高く、貴重な休暇やあなたの人生を不必要に剃ることになります！

私のアドバイスを参考にして、自由に使えるツールを使用してください。

ファイルを手動で縮小するためのオンラインツール

ありがたいことに、サイトファイルを縮小するために、開発者である必要も、プログラミング言語を知っている必要もありません。ミニファイはウェブデザインの世界では標準的な慣習になっているので、あなたのために仕事をするための素晴らしい（そして無料の）ツールがたくさんあることを知っても驚くことではありません。

これはあなたが始めるのに役立ついくつかのツールのリストです。これらの多くは複数のコードタイプを縮小できるため、括弧内にコードタイプオプションを含めました。

クロージャコンパイラ（JSのみ）–クロージャコンパイラは、GoogleDevelopersのツールスイートであるクロージャツールの一部です。それはあなたが他の有用な最適化と一緒にあなたのJavascriptを縮小することを可能にします。を使用してJavaScriptを取得するには、jsファイルの場所のURLを入力してから、コードを最適化およびフォーマットする方法を選択します。たとえば、必要な場合にのみ、ホワイトスペース用にコードを最適化することを選択します。コンパイルボタンを押すと、コードが縮小（またはコンパイル）され、エラーがないかコードがチェックされます。
cssminifier.comおよびjavascript-minifier.com（CSSおよびJS）– AndrewChiltonによるこれらの2つのミニファイアは簡単に使用できます。コードを貼り付けてから[縮小]ボタンをクリックするだけで、縮小されたコードが出力されます。便宜上、出力コードをファイルとしてダウンロードすることもできます。
csscompressor.net（CSSのみ）–このオンラインCSSコンプレッサーは、すばやく簡単に、無料で使用できます。
jscompress.com（JSのみ）-このJavaScript圧縮ツールを使用すると、コピーアンドペーストでJavaScriptコードを圧縮できますが、一度に複数のJavaScriptファイルをアップロードすることもできます。これは、JavaScriptファイルを1つのファイルに結合して、ページの読み込み速度を向上させるのに最適です。
refresh-sf.com（HTML、CSS、およびJS）–このコンプレッサーは、JavaScript、CSS、およびHTMLコードタイプを縮小します。また、必要に応じて、各コードタイプのすべてのコンプレッサーオプションも含まれています。
htmlcompressor.com（HTML、CSS、およびJS）–このオンラインコンプレッサー/ミニファイアツールは、HTML、CSS、およびJSコードタイプをサポートします。 CSS + PHPやJavaScript + PHPなどのコードタイプのさまざまな組み合わせもサポートしています。また、圧縮されたコードにエラーがないかどうかを確認することもできます。
minifycode.com（HTML、CSS、およびJS）–このサイトは、ボタンを1回クリックするだけでコードを縮小する、シンプルでクリーンなUIを備えたJavaScript、CSS、およびHTMLの縮小子を提供します。また、縮小されたコードを解凍して読みやすくするための「美化」ツールも含まれています（基本的に縮小の反対）。
Dan's Tools – Dan's Toolsは、CSSミニファイアとJavaScriptミニファイアを提供します。どちらのツールも、使いやすい非常にクリーンなUIを備えています。高度なオプションはありませんが、一般的な縮小目的には最適です。

HTML CSSまたはJavaScriptをローカルで縮小するためのオフラインツールを探している場合は、次のオプションがあります。

小さい（HTML、CSS、JS）
phpied.com/cssmin-js/（CSSのみ）
yui.github.io/yuicompressor（JSおよびCSS）

ウェブサイトのCSS、HTML、Javascriptを縮小する方法

私たちのYoutubeチャンネルを購読する

オンラインツールを使用してHTML、CSS、JavaScriptを縮小する方法

これらのオンラインツールの多くには、次の手順を含む同様のプロセスがあります。

ソースコードを貼り付けるか、ソースコードファイルをアップロードします。
特定の出力の設定を最適化します（オプションが利用可能な場合）
ボタンをクリックして、コードを縮小または圧縮します。
縮小されたコード出力をコピーするか、縮小されたコードファイルをダウンロードします。

この例では、minifycode.comのミニファイツールを使用します。

まず、サイトファイルでcssファイル（通常はstyle.cssという名前）を見つけ、ページエディターを使用してファイルを開きます。次に、cssコード全体をクリップボードにコピーします。

minfy html css javascript

minifycode.comにアクセスし、[CSSミニファイア]タブをクリックします。次に、CSSコードを入力ボックスに貼り付けて、[CSSの縮小]ボタンをクリックします。

minfy html css javascript

新しい縮小コードが生成されたら、コードをコピーします。

minfy html css javascript

次に、Webサイトのcssファイルに戻り、コードを新しい縮小バージョンに置き換えます。

それでおしまい！

同じプロセスを繰り返して、サイトのJavaScriptファイルとHTMLファイルも縮小します。

プラグインを使用してWordPressでHTML、CSS、JavaScriptを縮小する方法

WordPressでHTML、CSS、JavaScriptを縮小する最も簡単な方法は、プラグインを使用することです。これにより、ボタンを数回クリックするだけで、WordPressサイトファイルを最適化してページの読み込み時間を自動的に短縮できます。

その仕事をするプラグインはたくさんありますが、いくつかの傑出したものについて簡単に触れておきます。

最適化（無料）

minfy html css javascript
Autoptimizeは、おそらく最も人気のあるminifyプラグインです。使いやすく、強力なパフォーマンス機能が満載で人気があります。コードを集約（スクリプトの結合）、縮小、およびキャッシュできます。ボーナスとして、Google Fonts、画像などを最適化するための追加オプションがあります。

Autoptimizeを使用するには、WordPressダッシュボードの[プラグイン]> [新規追加]からプラグインをダウンロード、インストール、アクティブ化できます。

minfy html css javascript

プラグインがアクティブ化されたら、[設定]> [自動最適化]に移動します。次に、[メイン設定]タブで、最適化するコード（HTML、CSS、JavaScript）を確認し、[変更を保存]をクリックします。

minfy html css javascript

ページ上部の[詳細設定を表示]ボタンをクリックして、コードを最適化する方法をさらにカスタマイズすることもできます。

minfy html css javascript

以上です！非常にシンプルで強力です。

Fast Velocity Minify（無料）

minfy html css javascript

Fast Velocity Minifyは、単なる縮小以上の機能を備えた、人気のある無料の強力なWordPressプラグインです。 CSSとJavascriptを最小化して組み合わせて、サーバーへのHTTPリクエストを減らし、その名に恥じないようにして、ページの読み込み時間を高速化します。利用可能な追加の最適化オプションがありますが、デフォルト設定はほとんどのサイトで見事に機能します。

プラグインを使用するには、最初にWordPressダッシュボードから[プラグイン]> [新規追加]に移動して、インストールしてアクティブ化します。次に、「高速速度縮小」を検索し、検索結果にポップアップ表示されたら、クリックしてインストールしてアクティブ化します。

minfy html css javascript

プラグインがアクティブ化されると、ファイルは自動的に縮小され、最高のパフォーマンスが得られるように最適化されます。簡単でした！

プラグイン設定ページ（[設定]> [Fast Velocity Minify]）にジャンプして、使用可能なすべてのオプションを確認します。 [ステータス]タブの下に、処理されたJavaScriptファイルとCSSファイルの役立つリストが表示されます。

minfy html css javascript

[設定]タブで、ファイルの最適化方法をカスタマイズできます。 HTML、CSS、JavaScriptの縮小化はすでにアクティブになっているため、これらの設定を使用してデフォルトオプションを調整したり、特定のコードタイプの縮小化を無効にしたりできます。 GoogleFontsとFontAwesomeを最適化するためのオプションもあります。

minfy html css javascript

それでおしまい！

W3トータルキャッシュ（無料）

minfy html css javascript
W3 Total Cacheは、HTML、JS、およびCSSを縮小するオプションを含む優れたキャッシュプラグインです。

minfy html css javascript

WP最速キャッシュ（無料）

minfy html css javascript
WP Fastest Cache –これらの無料のWordPressキャッシングプラグインは、高いレビューで非常に人気があります。プラグインは、パフォーマンスを向上させるためにHTML CSSとJavaScriptを組み合わせて縮小するなど、さまざまなパフォーマンスの最適化を実行します。

プラグインがインストールされたら、WordPressダッシュボードサイドバー（素晴らしいチーターアイコンが付いているもの）の[WP FastestCache]タブをクリックするだけです。 [設定]タブには、HTMLファイルとCSSファイルを組み合わせて縮小するためのオプションがあります。 JavaScriptの縮小は、プロバージョンでのみ利用可能ですが。

minfy html css javascript

最終的な考え

ページの読み込み時間を短縮し、パフォーマンススコアを向上させたい場合は、HTML、CSS、およびJavascriptファイルを縮小する必要があります。利用可能なすべてのオンラインツールを使用すると、任意のWebサイトのコードを簡単に縮小できます。また、WordPressユーザーの場合、数回クリックするだけでこれらのファイルを自動的に縮小するために利用できる強力なプラグインがいくつかあります。上記のプラグインは、他のパフォーマンス最適化の中でも縮小化を処理する優れたプラグインのほんの一部です。実際、ミニファイがすでに利用可能なパフォーマンスタイプのプラグインをすでに持っている場合があります。たとえば、キャッシングプラグインの多くには、縮小オプションが含まれています。この投稿が、どちらが最適かを判断するのに役立つことを願っています。

以下のコメントであなたからの連絡を楽しみにしています。

乾杯！