より高速なサイトのためにCSSとJSを最適化する方法

ウェブサイトの読み込み速度は、ユーザーエクスペリエンスにとって非常に重要であり、多くの場合、ウェブサイトの所有者が見落としています。ウェブサイトの読み込み速度を8秒から2秒に上げると、変換率が74％増加する可能性があります。つまり、遅いWebサイトは潜在的な顧客のほぼ半数を失う可能性があります。

コード圧縮、つまり、読みやすさを改善するためにのみ使用される文字を削除すると、帯域幅の使用量を削減し、ページの読み込み速度を向上させることができます。 CSS MiniifierやJSCompressなどのツールは、このプロセスを支援できます。さらに、JavaScriptを圧縮する前にパフォーマンスをさらに最適化するために非同期コードの読み込みを実装することを検討することも価値があります。

冗長または複製コードもウェブサイトを遅くすることができます。 Google Chromeの組み込み開発者ツールを使用して、これらの不要なコードリソースを識別および削除するのに役立ちます。未使用のコードを定期的にチェックおよび削除して、最適なWeb​​サイトのパフォーマンスを維持することが重要です。

この記事は、オーストラリアのホスティングが後援しています。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。

ユーザーエクスペリエンスは、オンラインビジネスの成功における最も重要な要素です。

ニッチなブログ、SaaSのWebサイト、またはオンラインストアを実行している場合でも、視聴者のエクスペリエンスを何らかの形で台無しにした場合は、有料の顧客に変換することを期待しないでください。

良いニュースは、特定のページ内の要因を絞り込むことで、ブランドがユーザーエクスペリエンスを体系的に改善できることです。

たとえば、

速度の読み込みは、ほとんどのウェブサイトの所有者が見落としがちな問題です。

コンバージョン率データに基づいてウェブサイトの速度を8秒から2秒に上げると、変換率が74％増加する可能性があります。

これは、遅いウェブサイトが潜在的な顧客のほぼ半分に費用がかかる可能性があることを意味します。 PageSpeed Insightsを使用して、状況について詳しく知ります

Webサイトの読み込み速度に影響する問題を決定するには、Google PagesSpeed Insightsを使用できます。これは、ウェブサイトのデスクトップバージョンとモバイルバージョンの両方を自動的にスキャンする無料のツールです。

検出された問題に加えて、PageSpeed Insightsにはいくつかの実用的な提案も表示されます。

ページの読み込み速度を考慮したことがないウェブサイトの所有者の場合、次の問題に遭遇する可能性があります。

これらは、CSSとJavaScriptコードがウェブサイトを遅くしていることを示しています。これは完全なWeb開発者の仕事のように聞こえるかもしれませんが、ツールの助けを借りて最適化するのはかなり簡単です。

これ以上苦労せずに、CSSとJavaScriptリソースを圧縮するために必要な手順を以下に示します。

圧縮するコードを決定

コード圧縮とは、読みやすさを改善する以外の機能を持たない文字を削除する練習を指します。 たとえば、

インラインコメント

は、開発者が特定のコードセグメントの役割を理解するのに役立ちます。これはレビューやデバッグに役立ちますが、コードのサイズを増やす可能性もあります。

圧縮によりこれらの余分な文字が削除されるため、帯域幅の使用が削減され、ページの読み込み速度が向上します。

PageSpeed Insightsを使用して、圧縮する必要があるコードを簡単に識別できます。クリックする方法をクリックするだけで、CMS（コンテンツ管理システム）またはFTP（ファイル転送プロトコル）クライアントのパスを追跡します。

たとえば、

ウェブサイトがWordPressで実行されている場合、すべてのコードを「エディター」セクションに統合する必要があります。これは、メインダッシュボードの[外観]タブから見つけることができます。

コードを最適化します

関連するコードが見つかったので、それらを圧縮する方法を学ぶ時が来ました。

コードを圧縮する最も簡単な方法は、おそらく自動化ツールを使用することです。 CSSとJavaScriptの場合、最良のツールのいくつかはCSSミニファイヤーとJSCompressです。

CSSミニファイヤーを使用して

CSSミニファイアは、CSSリソースを自動的に圧縮する無料のシンプルなツールです。コードを入力フィールドに貼り付け、圧縮レベルを設定し、[圧縮]をクリックします。

コードのサイズに応じて、コードを圧縮するのに数秒から1分かかることがあります。新しいコードは、CMSまたはFTPクライアントインターフェイスにコピーしてコピーできます。

重要なヒント：予防策として、Webサイトコードを変更する前にバックアップを作成することを忘れないでください。オフラインまたはクラウドベースのレプリカを作成することは、簡単に行う方法です。

圧縮が有効かどうかをテストするには、PageSpeed Insightsの別の分析を実行します。最近圧縮されたCSSファイルは、「圧縮されたCSS」の詳細に表示されなくなります。

JavaScriptで非同期負荷を使用して、

####

JavaScriptの正しい圧縮は、CSSと比較してわずかに難しいです。 JSCompressでコードを実行する前に、非同期コードの読み込みを実装することを検討してください。

は「遅延荷重」とも呼ばれますが、JavaScriptのコンテキストでは、動的荷重関数による非同期負荷は機能します。

非同期ロードを使用するには、.jsファイルを呼び出すときに「非同期」タグを追加するだけです。これは、WebサイトのHTMLソースコードで実行できます。

以下は、これを行う方法の例です。

<code> src=”yourscript.js” async> >
</code>

この記事を参照して、その仕組みと使用方法の詳細については、参照できます。 HTMLに完全に慣れていない場合は、基本に満足するまでこの初心者のガイドを読んでください。

JavaScriptファイルの組み合わせ

JavaScriptを最適化する場合に言及する価値のある別のポイントは、ファイルを単一ページに結合することです。そうすることで、ブラウザによって行われたHTTP要求の数が減り、必然的にロード時間が高速化されます。

たとえば、

ソースコードで複数の.jsファイルを呼び出さないでください：

<code> src=”yourscript.js” async> >
</code>

エディターを使用して、それらを単一のJavaScriptファイルに組み合わせて、すぐに呼び出すことができます。

<code> src=”http://www.yoursite.com/menu.js”> >
 src=”http://www.yoursite.com/tools.js”> >
 src=”http://www.yoursite.com/footer.js”> > 
</code>

スクリプトの処理時間をさらに改善するために、「HTTP」と「タイプ」タグを省略することも練習することもできます。たとえば、使用しないでください：

<code> src=”http://www.yoursite.com/all.js”> >
</code>

単に使用できます：

JSCOMPRESS

<code> src=" http: //www.yoursite.com/all.js" type="text/javascript" > ></code>

を使用して

最後に、JSCompressを使用することは、CSSミニファイヤーを使用するのと同じくらい簡単です。コードを入力フィールドに貼り付け、[JavaScriptを圧縮]ボタンをクリックするだけです。

次に、[出力]タブに移動して、圧縮されたJavaScriptを表示します。

冗長コードを削除します

あなたのウェブサイトが持つ可能性のある別のパフォーマンスの問題は、冗長または重複コードの存在です。これらは通常、削除されたページ要素によって引き起こされ、コードが未使用のままになります。

冗長コードを見つける良い方法は、Google Chromeに組み込みの開発者ツールを使用することです。これは、メインメニューを開き、「その他のツール」を選択し、「開発者ツール」をクリックすることで有効にできます。

これを行うときは、最適化したいページにいることを確認してください。

開発者ツールがアクティブになったら、[より多くのツール]サブセクションで[その他のツール]サブセクションで「カバレッジ」を探します。

これにより、開発者コンソールの「カバレッジ」タブが開きます。そこで、[検出カバレッジ]ボタンをクリックしてテストを開始します。

テストが完了したら、コードリソースとその未使用のバイトのリストを表示する必要があります。これは、右側の赤と緑のバーで示されています。

すべての不要なコードリソースを1つずつ削除することは面倒です。しかし、完璧なユーザーエクスペリエンスを提供したい場合は、これが必要です。 また、未使用のコードが時間の経過とともに蓄積される可能性があることを忘れないでください。そのため、リポジトリを再訪して清掃するために別の時間をスケジュールしてください。

結論

開発者以外の場合、WebサイトCSSとJavaScriptコードの最適化は、表面的に技術的すぎるように聞こえます。ただし、適切なツールとWebホスティングを使用すると、これを達成するために経験豊富なWeb開発者である必要はありません。

CSSとJSを最適化してWebサイトをスピードアップする FAQ

WebサイトにCSSとJSを最適化することの利点は何ですか？

WebサイトのCSSとJSを最適化すると、パフォーマンスが大幅に向上する可能性があります。ウェブサイトの読み込み時間を短縮するため、ユーザーエクスペリエンスが向上します。より速いサイトは訪問者を保持する可能性が高く、それによりエンゲージメントとコンバージョン率が向上します。さらに、Webサイトの速度はGoogleなどの検索エンジンのランキング要因であるため、CSSとJSを最適化することもSEOを改善できます。

CSSファイルとJSファイルを圧縮する方法は？

CSSおよびJSファイルの圧縮には、機能を変更せずにスペース、ラインブレーク、コメントなどの不要な文字を削除することが含まれます。 HTMLコンプレッサーやCSSミニファイヤーなどのオンラインツールを使用できます。コードをツールに貼り付けるだけで、Webサイトファイルに置き換えることができる圧縮バージョンを返します。

非同期負荷とJSの怠zyな負荷の違いは何ですか？

非同期ロードとレイジーロードは、JSファイルがWebサイトにロードされる方法を制御する手法です。非同期ロードにより、JSファイルをロードするときにブラウザがページのレンダリングを続けることができます。一方、HTMLドキュメントが完全に解析されるまで、JSファイルの読み込みの読み込みの読み込みの遅延を遅らせます。どちらのテクノロジもウェブサイトのパフォーマンスを向上させることができますが、最良の選択はウェブサイトの特定のニーズに依存します。

CSS配信を最適化する方法は？

CSS配信の最適化には、ページがレンダリングされる前にロードする必要があるCSSの数を減らすことが含まれます。これは、重要なCSSを挿入し、非批判的なCSSの遅延、未使用のCSSを排除することで実現できます。 PurifyCSSなどのツールは、ファイル内の未使用のCSSを識別および削除するのに役立ちます。

ブラウザキャッシュはどのようにウェブサイトのパフォーマンスを改善しますか？

ブラウザキャッシュは、訪問者のブラウザにWebサイトの静的ファイルを保存します。これは、その後の訪問中に、ブラウザがこれらのファイルを再ダウンロードする必要がないため、読み込み時間を高速化する必要がないことを意味します。 .htaccessファイルに特定のディレクティブを追加するか、WebサイトがWordPressなどのCMSを使用している場合はキャッシュプラグインを使用することにより、ブラウザキャッシュを有効にできます。

画像の最適化は、ウェブサイトの速度にどのような影響を与えますか？

画像は通常、Webページのサイズの最大部分を占めています。画像を最適化することにより、ロードする必要があるデータの量を大幅に削減できるため、ページの読み込み時間をスピードアップできます。画像最適化手法には、画像の圧縮、適切な画像形式の使用、怠zyなロードの実装が含まれます。

私のウェブサイトのパフォーマンスを測定する方法は？

GoogleのPageSpeed Insights、Gtmetrix、Pingdomなど、Webサイトのパフォーマンスを測定するためのツールがいくつかあります。これらのツールは、パフォーマンススコアと、速度に対して最適化できるサイト領域に関する詳細情報を提供します。

コンテンツ配信ネットワーク（CDN）は、ウェブサイトの速度でどのような役割を果たしますか？

CDNは、Webサイト上に静的ファイルのコピーを保存する世界中にあるサーバーのネットワークです。ユーザーがウェブサイトにアクセスすると、CDNはユーザーに最も近いサーバーからこれらのファイルを配信し、データ転送に必要な時間を短縮し、ウェブサイトの速度を改善します。

サーバーの応答時間は、ウェブサイトの速度にどのように影響しますか？

サーバーの応答時間は、サーバーがブラウザリクエストに応答するのにかかる時間です。サーバーの応答時間が遅い場合は、Webページの読み込みを遅らせ、ユーザーエクスペリエンスとSEOに悪影響を及ぼします。サーバー構成の最適化、ホスティング計画のアップグレード、またはCDNの使用により、サーバーの応答時間を改善できます。

HTTP/2とは何ですか？また、Webサイトの速度をどのように高めますか？

HTTP/2は、多重化、ヘッダー圧縮、サーバープッシュなどのパフォーマンスの改善を含むHTTPプロトコルの最新バージョンです。これらの機能により、ブラウザとサーバー間のより速く効率的な通信が可能になり、ウェブサイトの速度が向上します。 HTTP/2を利用するには、サーバーとユーザーのブラウザの両方がそれをサポートする必要があります。

以上がより高速なサイトのためにCSSとJSを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。