検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >収集する価値のあるフロントエンド最適化の 9 つのヒント (Web パフォーマンスの向上)

収集する価値のあるフロントエンド最適化の 9 つのヒント (Web パフォーマンスの向上)

青灯夜游
青灯夜游転載
2020-07-14 16:35:573383ブラウズ

収集する価値のあるフロントエンド最適化の 9 つのヒント (Web パフォーマンスの向上)

今日のデジタル世界では、毎日さまざまな理由でのアクセスに対処する必要がある Web サイトが無数にあります。ただし、これらのサイトの多くは使いにくく、使いにくいように見えます。 Web サイトが適切に最適化されていないと、読み込み時間、モバイル デバイスのサポートの欠如、ブラウザの互換性の問題など、さまざまな問題が発生する可能性があります。

この記事では、フロントエンドの改善と最適化に役立つテクニックについて説明します。これは非常に役立ちます。主な内容には、コードのクリーニング、画像の圧縮、外部リソースの圧縮、CDN の使用、その他の方法が含まれます。これらの方法により、Web サイトの速度が大幅に向上し、全体的なパフォーマンスが向上します。

1. HTML ドキュメントをクリーンアップする

HTML (ハイパーテキスト マークアップ言語) は、ほぼすべての Web サイトのバックボーンです。 HTML は、タイトル、サブタイトル、リスト、その他のドキュメント構造の書式設定を Web ページにもたらします。 HTML5 への最近のアップデートでは、グラフを作成することも可能になりました。

HTML は Web クローラーによって容易に認識されるため、検索エンジンは Web サイトのコンテンツに基づいてある程度リアルタイムに更新できます。 HTML を記述するときは、簡潔かつ効果的なものにするように努める必要があります。さらに、HTML ドキュメントで外部リソースを参照する場合には、従う必要があるベスト プラクティスがいくつかあります。

CSS を適切に配置する

Web デザイナーは、Web ページの主要な HTML スケルトンが確立された後にスタイル シートを作成することを好みます。その結果、Web ページのスタイル シートは、HTML の後ろ、ドキュメントの終わり近くに配置されることがよくあります。ただし、通常のレンダリングを保証するために、CSS を HTML の先頭のドキュメント ヘッダー内に配置することをお勧めします。 

<head>
</head>

この戦略では、Web サイトの読み込み速度は向上しませんが、訪問者が空白の画面や書式設定されていないテキスト (FOUT) を見て長時間待たされることはありません。 Web ページの表示要素のほとんどがすでに読み込まれている場合、訪問者はページ全体が読み込まれるまで待つ可能性が高く、それによってフロントエンドが最適化されます。これは知覚的なパフォーマンスです。

フロントエンドを学びたい場合は、このグループに来てください。最初は 291、真ん中は 851、最後は 189 です。そこで学習したりコミュニケーションしたりできます。たくさんの学習教材をダウンロードできます。

JavaScript を正しく配置する

一方、head タグ内または HTML ドキュメントの上部に JavaScript を配置すると、HTML および CSS 要素の読み込みプロセスがブロックされます。このエラーにより、ページの読み込み時間が長くなり、ユーザーの待ち時間が長くなり、人々は簡単に焦り、Web サイトへのアクセスを断念してしまいます。ただし、JavaScript 属性を HTML の下部に配置することで、この問題を回避できます。

また、JavaScript を使用する場合、通常、非同期スクリプト読み込みを使用することが好まれます。これにより、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグが HTML 内 (ドキュメントの途中など) に表示されなくなります。

HTML は Web デザイナーにとって最も価値のあるツールの 1 つですが、CSS や JavaScript と組み合わせて使用​​されることが多く、Web ブラウジングが遅くなる可能性があります。 CSS と JavaScript は Web ページの最適化に役立ちますが、使用する際には注意すべき問題がいくつかあります。 CSS と JavaScript を使用する場合は、コードの埋め込みを避けてください。コードを埋め込むときは、スタイル タグに CSS を配置し、スクリプト タグに JavaScript を使用するため、ページが更新されるたびに読み込む必要がある HTML コードの量が増加します。

ファイルをバインドしますか?心配はいりません

これまでは、HTML コードで外部ファイルを参照するために、CSS スクリプトを 1 つのファイルにバインドすることが頻繁に行われていたかもしれません。これは、HTTP1.1 プロトコルを使用する場合には合理的な方法ですが、このプロトコルは必要なくなりました。

HTTP/2 のおかげで、多重化を使用して単一の TCP 接続上で HTTP リクエストとレスポンスを非同期に送受信できるようになりました。

画像ソース: http://qnimate.com

これは、Frequently が必要なくなったことを意味します。複数のスクリプトを 1 つのファイルにバインドします。

2. CSS パフォーマンスの最適化

CSS (カスケード スタイル シート) は、 HTML で記述されたコンテンツからプロフェッショナルできちんとしたファイルを生成できます。多くの CSS は (インライン CSS を使用しない限り) HTTP リクエスト経由で取り込む必要があるため、冗長な CSS ファイルを削除するために熱心に取り組む必要がありますが、その重要な機能を保持するように注意してください。

バナー、プラグイン、レイアウト スタイルが CSS を使用して別のファイルに保存されている場合、訪問者のブラウザは訪問するたびに多くのファイルを読み込むことになります。 HTTP/2 の存在により、この問題の発生は減少しましたが、外部リソースのロードには依然として時間がかかります。 HTTP リクエストを減らして読み込み時間を大幅に改善する方法については、「WordPress のパフォーマンス」を参照してください。

さらに、多くの Web マスターは Web ページで @import ディレクティブを誤って使用し、外部スタイル シートを導入しています。これは、並列ダウンロードの参照をブロックする時代遅れの方法です。リンク タグは最良の選択であり、Web サイトのフロントエンドのパフォーマンスも向上します。補足として、リンク タグ リクエストを介してロードされた外部スタイルシートは、並列ダウンロードを妨げません。

3. 外部 HTTP リクエストの削減

多くの場合、Web サイトの読み込み時間のほとんどは外部 HTTP リクエストによるものです。外部リソースの読み込み速度は、ホスティング プロバイダーのサーバー アーキテクチャ、場所などによって異なります。外部リクエストを減らすための最初のステップは、Web サイトを簡単に検査することです。ウェブサイトのあらゆるコンポーネントを調査し、訪問者のエクスペリエンスを損なうものをすべて排除します。これらの要素は次のとおりです。

不要な画像

役に立たない JavaScript コード

過剰な css

余分なプラグイン

これらを削除した後冗長コンポーネントを削除し、圧縮ツール、CDN サービス、プリフェッチ (先読み) などの残りのコンテンツを整理します。これらは、HTTP リクエストを管理するための最良の選択です。さらに、「DNS ルート ルックアップの削減」チュートリアルでは、外部 HTTP リクエストを削減する方法を段階的に説明します。

4. CSS、JS、HTML の圧縮

圧縮テクノロジーにより、ファイル文字から冗長なコンテンツを削除できます。 。エディターでコードを記述するときは、インデントとコメントを使用します。これらの方法により、間違いなくコードが簡潔で読みやすくなりますが、ドキュメントに余分なバイトが追加されます。

たとえば、これは圧縮前のコードです。

.entry-content p {

font-size: 14px !重要;

}

.entry-content ul li {

font-size: 14px !重要;

}

.product_item p a {

color: #000;

padding: 10px 0px 0px 0;

margin-bottom: 5px;

border-bottom: none;

}

このコードを圧縮するなりました。

.entry-content p,.entry-content ul li{font-size:14px! important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border- Bottom:none}

圧縮ツールを使用すると、CSS、JS、HTML ファイルから不要なバイトを非常に簡単にトリミングできます。圧縮の詳細については、「CSS、JS、および HTML を圧縮する方法」を参照してください。

5. プリフェッチの使用

プリフェッチにより、実際に必要になる前に必要なリソースや関連データを取得できます。訪問ユーザーのブラウジング エクスペリエンスを向上させるため、プリフェッチには主に 3 つのタイプがあります:

リンク プリフェッチ

DNS プリフェッチ

プリレンダリング

現在の Web ページを離れる前に、プリフェッチ方式を使用して、各リンクに対応する URL アドレス、CSS、画像、およびスクリプトがプリフェッチされます。これにより、訪問者はリンクを使用して最短時間で画面間を切り替えることができます。

幸いなことに、プリフェッチは簡単に実装できます。使用するプリフェッチの形式に応じて、rel="prefetch"、rel="dns-prefetch"、または rel="prerender" タグを Web サイトの HTML の link 属性に追加するだけです。

フロントエンドを学びたい場合は、このグループに来てください。最初は 291、真ん中は 851、最後は 189 です。そこで学習したりコミュニケーションしたりできます。たくさんの学習教材をダウンロードできます。

6. CDN とキャッシュを使用して速度を向上させます

コンテンツ配信ネットワークを使用すると、Web サイトの速度とパフォーマンスを大幅に向上させることができます。 CDN を使用すると、Web サイトの静的コンテンツを世界中のサーバーの拡張ネットワークにリンクできます。この機能は、Web サイトに世界中のユーザーがいる場合に便利です。 CDN を使用すると、Web サイト訪問者は最寄りのサーバーからデータをロードできます。 CDN を使用すると、Web サイト内のファイルが自動的に圧縮され、世界中に迅速に配布されます。

CDN は、リソースの配布時間を大幅に短縮できるキャッシュ方法であると同時に、ブラウザ キャッシュの使用など、他のキャッシュ テクノロジも実装できます。

ブラウザのキャッシュを適切に設定すると、ブラウザが特定のファイルを自動的に保存して送信を高速化できるようになります。このメソッドの構成は、ソース サーバーの構成ファイルで直接行うことができます。

キャッシュとさまざまな種類のキャッシュ方法の詳細については、キャッシュの定義を参照してください。

7. ファイルの圧縮

多くの CDN サービスはファイルを圧縮できますが、使用しない場合は、 CDN を使用する場合は、フロントエンドの最適化を向上させるために、オリジン サーバーでファイル圧縮方法を使用することも検討できます。ファイルを圧縮すると、Web サイトのコンテンツが軽量になり、管理が容易になります。最も一般的に使用されるファイル圧縮方法の 1 つは Gzip です。これは、ドキュメント、オーディオ ファイル、PNG 画像、その他の大きなファイルを縮小するのに最適な方法です。

Brotli は比較的新しいファイル圧縮アルゴリズムであり、ますます人気が高まっています。このオープンソース アルゴリズムは、Google やその他の組織のソフトウェア エンジニアによって定期的に更新されており、他の既存の圧縮方法よりも効果的に機能することが証明されています。このアルゴリズムのサポートは現在比較的小規模ですが、新星として目前に迫っています。

詳細については、Brotli 圧縮に関する記事全文をご覧ください。

フロントエンドの最適化を理解していない人にとって、写真は「ウェブサイトキラー」になる可能性があります。大量のフォト アルバムや巨大な高解像度の写真は、Web ページのレンダリング速度を妨げます。最適化されていない HD 画像のサイズは数メガバイト (mb) になる場合があります。したがって、それらを適切に最適化すると、Web ページのフロントエンドのパフォーマンスを向上させることができます。

各画像ファイルには、純粋な写真や画像とは関係のない情報が含まれています。たとえば、JPEG 画像には、日付、場所、カメラのモデル、その他の無関係な情報が含まれています。 Optimus などの最適化ツールを使用すると、この冗長な画像データを削除し、時間のかかる画像読み込みプロセスを合理化できます。 Optimus は可逆画像圧縮ツールであるため、画像の品質には影響せず、画像の容量のみが圧縮されます。

また、画像をさらに最適化したい場合は、

スライスを使用して、一部の画像を削除する非可逆圧縮を使用できます。内部にデータがあるため、品質が低下します。

非可逆圧縮と可逆圧縮の違いについて詳しくは、完全なチュートリアルをお読みください。

9. 軽量フレームワークを使用する

既存のコーディング知識だけを使用して Web サイトを構築する場合を除き、優れたフレームワークを使用してみてください。フロントエンド フレームワークを使用して、多くの不必要なフロントエンド最適化ミスを回避します。より多くの機能とオプションを提供する、より大規模でよく知られたフレームワークがいくつかありますが、それらは必ずしも Web プロジェクトに適しているとは限りません。

したがって、プロジェクトに必要な機能を決定するだけでなく、適切なフレームワークを選択することも重要です。必要な機能を提供しながら軽量である必要があります。最近の多くのフレームワークでは、簡潔な HTML、CSS、JavaScript コードが使用されています。

次に、読み取りを高速化できるいくつかの軽量フレームワークを示します:

Pure

Skeleton

Milligram

Framework は、Web デザイン、プログラミング、メンテナンスに代わるものではありません。簡単な例として、フレームが新しい家であると仮定してみましょう。家は清潔で整理整頓されていましたが、空っぽでした。家具、電化製品、装飾品を追加するときは、家が乱雑にならないようにするのはあなたの責任です。同様に、フレームワークを使用する場合は、冗長なコード、大きな画像、多すぎる HTTP リクエストによってフレームワークが破損しないようにするのはあなたの責任です。

フロントエンドの最適化 – 概要

フロントエンドの最適化には多大な労力がかかるようですが、このアプリケーション ガイドにいくつかのヒントがあると思います。ウェブサイトの読み込み速度を大幅に向上させることができます。 Web サイトの読み込みが速くなればなるほど、ユーザー エクスペリエンスは向上します。したがって、フロントエンドを最適化すると、企業とユーザーの両方に利益がもたらされます。他に優れた最適化方法がある場合は、貴重な提案をコメント領域に残してください。

この記事は、https://blog.csdn.net/lin123_00/article/details/106652145

から転載されています。関連する知識の詳細については、次のサイトを参照してください。 PHP中文网!

以上が収集する価値のあるフロントエンド最適化の 9 つのヒント (Web パフォーマンスの向上)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：2021年の大手フロントエンドの開発トレンドはどうなるか知っていますか（詳しく解説）次の記事：2021年の大手フロントエンドの開発トレンドはどうなるか知っていますか（詳しく解説）

関連記事

続きを見る