Yahooが開発したウェブページスコアリングプラグインYSlowのスコアリングルール

YSlow は、Yahoo USA が開発したページスコアリングプラグインです。非常に優れています。これにより、ページの多くの欠点がわかり、それを改善および最適化する方法がわかります。
YSlow のスコアリングルールを注意深く学習してください。
主な項目は12個あります。
1. HTTP リクエストを減らします。。リクエストは 141 件 (JS リクエスト 15 件、CSS リクエスト 3 件、CSS 背景画像リクエスト 47 件) あり、これはひどい状況です。考えてみると、なぜこれら 3 種類のリクエストはページ読み込みの重要な悪影響要因として挙げられているのに、過剰な IMG リクエストは悪影響要因として挙げられていないのでしょうか。
これらの要求は回避できることが判明しました。
15 個の JS と 3 個の CSS を特別な方法で結合できます (技術部門がこの課題の解決に協力してくれました。本当にありがとうございます)。結合後、通常は 1 つの JS と 1 つの CSS のみがページに表示されます (JS のカプセル化には特定の要件があります)。
しかし、47 個の CSS 背景画像リクエストをどのように解決するのでしょうか?ページ上の純粋な IMG リクエストは妥当なのに、CSS 背景画像リクエストが多すぎると不利になるのはなぜですか?私はこれについて長い間考えていましたが、ついに理解できました。それは次のようになりました:
通常、画像 CSS 背景を使用して、ページ上のアイコン、列の背景、画像ボタンを実装します。通常、この画像 CSS 背景で使用される画像は比較的小さいため、これらの画像を比較的大きな画像に結合することは完全に可能です。この方法では、ページ上の CSS 背景画像リクエストは 1 つだけ、または最大で 2 ～ 3 つになります。その後、Yahoo の US ページを詳しく見てみると、同じことをしていることがわかりました。これらのアイコン、列の背景、画像ボタンを定期的にマージして CSS 呼び出しを容易にするには、ある程度の時間がかかりますが、コスト効率が良く、間違いなく必要です。YSlow も強くお勧めします。
2. CDN を使用するこのスコアは最低の F です。正直に言うと、最初は CDN が何なのか知りませんでした。後からGOODLEで確認したら知りました。 CDN の正式名称は Content Delivery Network です。その目的は、既存のインターネットにネットワークアーキテクチャの新しいレイヤーを追加し、Web サイトのコンテンツをユーザーに最も近いネットワークの「エッジ」に公開することで、ユーザーが必要なコンテンツを近くで取得できるようにし、インターネットネットワークの混雑の問題を解決し、Web サイトにアクセスするユーザーの応答速度を向上させることです。技術的な観点からは、ネットワーク帯域幅が狭い、ユーザーの訪問数が多い、ネットワークポイントの分布が不均一であるなどの理由で、ユーザーが Web サイトにアクセスするときに応答時間が遅くなるという問題を総合的に解決します。
上記の説明を読んで、CDNが何であるかを基本的に理解しました。その後、中国のサイトSAに相談したところ、私たちのウェブサイトはまだCDNに最適化されていませんが、同様の問題を解決するためのより高度な技術を持っていると言われています（具体的な技術は秘密にしておきます）。しかし、結局のところ、CDNも非常に優れた技術なので、私たちの高度な技術に基づいてCDNの最適化を行うと、今よりも間違いなく良くなります、笑。 SAは来年、数か所でCNDを行う予定だそうだ。
3. Expires ヘッダーを追加して、期限切れの HTTP ヘッダーを設定します。Expires ヘッダーを設定すると、スクリプト、スタイルシート、画像、Flash などをブラウザのキャッシュにキャッシュできます。
実際、当社のウェブサイトでもこの最適化を行っており、少なくとも画像はこの点に関して最適化されていますが、完全には完了していません。弊社の CSS と JS はまだ最適化されていませんが、外部の広告 JS が最適化されています。本当は、期限切れの HTTP ヘッダーの設定は、スクリプト、スタイルシート、Flash で行うべきです。しかし、SA はこれをしなかったと言われていますが、JS や CSS には一定のロジックがあるため、一定のリスクがあります。サーバーとクライアントの両方にキャッシュがあると、何か問題が発生した場合、将来的に問題を見つけるのが難しくなります。しかし、両者は天秤にかけて共存できると思います。
4. Gzip コンポーネントは、ページコンテンツを Gzip 形式で圧縮します。Gzip 形式は非常に一般的な圧縮技術です。ほぼすべてのブラウザーに Gzip 形式を解凍する機能があり、非常に高い比率で圧縮できます。一般的な圧縮率は 85% で、サーバー側の 100KB ページを約 25KB の Gzip 形式データに圧縮してクライアントに送信できます。クライアントは Gzip 形式のデータを受信すると、自動的に解凍してページを表示します。
当社のウェブサイトは基本的にこれを 100% 達成していますが、この項目のスコアは想定していた A レベルに達しませんでした。その理由は外部リンクにあります。たとえば、当社のホームページには外部広告 JS があります。この JS を所有するウェブサイトは GZIP 最適化されておらず、それが当社のウェブサイトに影響を与えています。そのため、当社の評価は B または C のみです。
5. CSS を上部に配置する CSS 外部リンクをページの上部に配置します。
実際、私たちは一般的にこの原則に従っています。CSS 外部リンクがロジックの一部としてページヘッダーの下に表示される場合、個人的にはそれ自体が間違いだと思います。幸いなことに、基本的にすべてのページでこれを実現していますが、LIST ページなど一部のページでは、ロジックにリンクされた CSS リンクがまだ残っています。その理由は、そもそも合理的ではない一部の製品ロジックを解決するためです。したがって、私たちフロントエンド Web エンジニアには、これらの無理な製品ロジックがページ結果やページの読み込み速度を破壊しないようにする義務があり、実装のためだけに実装することはできません。

前のページ1 2 次のページ全文を読む

<<: MySQL GTID の総合概要

>>: Dockerでmysqlのルートパスワードを変更する方法