Autoptimize プラグインを使用して HTML、CSS、および JavaScript を最小化する方法

公開: 2017-02-10

Google やその他の検索エンジンは、ウェブサイトの読み込みが速ければ価値があります。視聴者の誰もあなたのコンテンツを見るのに長く待つ患者は多くなく、彼らの注意を引くのに 1.5 秒しかないからです。サイトを開くのに時間がかかると、通常、視聴者を失います。したがって、これはウェブサイトを高速化するために不可欠です。サイトを最適化する方法はいくつかあります。しかし、最も重要な部分の 1 つは、 HTML、CSS、および JavaScriptを縮小することです。

Google PageSpeed または GTmetrix で速度テストを行ったことがある場合は、おそらくそのオプションが表示されます。

すべての Web サイトには、HTML、CSS、JavaScript を含む多数のファイルが読み込まれます。また、ほとんどのファイルには大量のスペース、コメント、ブロック区切り文字などが含まれているため、適切にロードするのにかなりの時間がかかります。

これは、テーマの品質にも依存します。たとえば、プレミアムテーマの品質は常に無料テーマよりも優れています。プレミアムテーマは、高度なスキルを持つ開発者によって適切にコーディングされ、構築されています。しかし、すべてのテーマは同じではなく、異なるタイプの機能を持っています。したがって、これらのHTML、CSS、および JavaScriptファイルを縮小することで、戦略的にサイトの速度を上げ、訪問者を満足させることができます。

Minify とは何ですか? なぜ有益なのですか?

縮小化は、機能を変更せずにソースコードから不要な文字をすべて削除するプログラミング言語です。 これらの不要な文字には通常、「空白文字、改行文字、コメント、およびブロック区切り文字」が含まれます。

縮小前と縮小後

これらはコードを読みやすくするために使用されますが、コードを実行するために必須ではありません。このようにして、Web 経由で転送する必要があるコードの量を減らし、帯域幅を節約します。したがって、 HTML、CSS、および JavaScriptを縮小することで、不要な文字をサイトから簡単に削除し、サイトの速度を大幅に向上させることができます.

HTML、CSS、JavaScript を縮小する方法

HTML、CSS、JavaScript を縮小する方法は 2 つあります。テーマコードを編集するか、 Autoptimizeという WordPress プラグインを使用することができます。この記事では、 HTML、CSS、および JavaScript を縮小する方法に関する両方のプロセスを紹介します。

問題の原因となっている正確な HTML、CSS、または JavaScript ファイルを知るには、Google PageSpeed ツールや GTmetrix などのサイト速度テストツールで確認する必要があります。すべてのファイルにこれらのタイプの不要な文字が含まれているわけではないためです。

サイトの結果を確認すると、それが表示されます。これは、CSS とJavaScriptの修正を検討している私のサイトの下の写真です。

Css、JavaScript の最小化

テーマの品質に左右されます。そのため、両方とも Miniify と表示されていても心配する必要はなく、プレミアムテーマを取得することをお勧めします。

HTML、CSS、および JavaScript コードを縮小できるオンラインツールがいくつかあります。

変更を加える前に、そのファイルのバックアップを取ります。

#1 縮小コード:

コードの縮小ツール

コードの縮小は、オールインワンの縮小ツールです。 JavaScript、CSS、HTML コードを縮小できます。 HTML、CSS、または JavaScript コードをコピーして、ここに貼り付けるだけです。次に、縮小オプションをクリックします。このツールは自動的にコードを縮小します。その後、そのファイルの縮小コードをコピーします。

そのツールを使用して、 CSSおよびJavaScriptコードをHTMLコードのように縮小することもできます。

＃2ウィルピービー：

ウィルピービー

Willpeavy は、 HTMLコードを縮小するもう 1 つの優れたツールです。このツールは、縮小コードと同じように機能します。マークアップに含まれるHTMLとCSSまたはJSを縮小します。このツールを使用するには、ここにコードをコピーして [縮小] をクリックするだけです。

Autooptimize プラグインを使用して縮小する

自動最適化

このようなコーディングに慣れていない場合は、初心者に推奨されるプラグインを使用することをお勧めします。そこで、 WordPressユーザー向けのAutoptimize プラグインを紹介します。

Autoptimize は、すべてのスクリプトとスタイルコードを連結し、それらを小さくして読み込みを高速化します。すべての HTML、CSS、Javascript コード自体を縮小し、ページを非常に軽量にします。 Minification を使用すると、このプラグインは期限切れヘッダーを追加し、スタイルをページヘッドに移動し、スクリプトをフッターに移動できます。

推奨設定の自動最適化

プラグイン設定から簡単にすべてのことを行うことができます。このプラグインを有効にした後、 [設定] > [自動最適化] に移動します。「詳細設定を表示」ボタンをクリックします。

HTMLセクションで、「HTML コードを最適化する」と「HTML コメントを保持する」をオンにして、パフォーマンスを高速化します。

HTML オプションの自動最適化

JavaScriptセクションで、「JavaScript コードの最適化」を有効にします。「Force JavaScript in <head>」を有効にして、JS を早期にロードし、JS エラーの可能性を減らすこともできます。 JS がスクリプトを壊す場合は、「try-catch ラッピングを追加」を有効にすることができます。
JavaScript オプションの自動最適化

CSSセクションで、「CSS コードを最適化する」、「インライン CSS も集約する」を有効にします。 CSS を縮小した場合は、「Inline and Defer CSS」を有効にすることもできます。このツールを試して CSS を縮小し、ボックスに貼り付けます。

CSS オプションの自動最適化

「CDN ベース URL」フィールドにCDN URL を入力します。たとえば、「//cdn.example.com/」です。

最後に、「集約されたスクリプト/CSS を静的ファイルとして保存」を有効にします。ただし、Web サーバーが圧縮と有効期限を適切に処理できることを確認してください。

CDN オプションの自動最適化

コードを縮小したら、サイトの速度を再度確認することを忘れないでください。次に、その過去の結果と比較します。サイトに問題が発生したり、正しく表示されない場合は、キャッシュをクリアしてみてください。

結論

HTML、CSS 、およびJSを縮小することは、サイトにとって有益です。コードの不要な文字を削除し、ブラウザーに適したサイズに縮小します。これにより、サイトの読み込み速度を向上させることができます。

このチュートリアルが HTML、CSS、JavaScript の最小化に役立つ場合は、この記事を Facebook、Twitter、Google+ で共有してください。