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

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を縮小する方法は2つあります & JavaScript。テーマコードを編集するか、WordPressプラグインを使用して、 自動最適化. この記事では、両方のプロセスについて説明します HTML、CSS、JavaScriptを縮小する方法.

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

あなたのサイトの結果をチェックした後、あなたはそれを得るでしょう。以下は私のサイトの下の写真です CSSの修正 そして JavaScript.

CSSの縮小、JavaScript

それはあなたのテーマの質に依存します。だから、もしあなたが両方ともミニファイに言われているのを見ても心配する必要はなく、プレミアムテーマを手に入れる方が良いです.

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

変更を加える前に、そのファイルのバックアップを取ってください.

#1 コードを縮小

コード縮小ツール

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

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

#2 ウィルピービー

ウィルピービー

ウィルピービーは別の優れたツールです HTMLを縮小 コード。このツールは、minifyコードと同じように機能します。マークアップに含まれるHTMLとCSSまたはJSを最小化します。このツールを使用するには、コードをここにコピーしてMinifyをクリックするだけです.

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

自動最適化

このようなコーディングに慣れていない場合は、プラグインを使用することをお勧めします。初心者にお勧めします。だからここに来る 自動最適化プラグイン ために ワードプレス ユーザー.

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

自動最適化推奨設定

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

の中に HTML セクションで、「HTMLコードの最適化」と「HTMLコメントを保持」をチェックして、パフォーマンスを向上させます。.

HTMLオプションを自動最適化する

の中に JavaScript セクションで、「JavaScriptコードの最適化」を有効にします。 「でJavaScriptを強制」を有効にしてJSを早期にロードし、JSエラーの可能性を減らすこともできます。 JSがスクリプトに違反した場合は、「Add try-catch wrapping」を有効にできます.
JavaScriptオプションの自動最適化

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

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

あなたの〜を入力してください CDN [CDNベースURL]フィールドのURL。たとえば、「// cdn.example.com/」.

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

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

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

結論

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

このチュートリアルがHTML、CSS、JavaScriptの縮小に役立つ場合は、この記事を共有してください フェイスブック, ツイッター, グーグル+.

関連記事,

  • WordPressでブラウザキャッシングを活用する方法
  • WP-Sweepを使用してWordPressデータベースを最適化する方法
  • WordPress 2017に最適な7つの画像オプティマイザー
  • 読み込みを高速化するためにWordPressでGzip圧縮を簡単に有効にする方法
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map