ウェブサイトの最適化
1937 ワード
タブ:フロントエンド
非常に薄い本で、先端ページの最適化のための14のルールを紹介しています.
ルール1:HTTP要求を減らす
問題:サイトのロード時間はほとんどHTTP要求にかかります.HTTP要求が多すぎると、ページのロード速度が遅くなり、ユーザーの体験に深刻な影響を与えます.したがって、この規則はすべての規則の中で最も重要な規則である.
解決:CSS Spritesを使用する.小さい画像に対してインライン
ルール2:CDNを使う
問題:ダウンロード速度はサーバからの物理的な距離と関係があります.
解決:CDNを使う
ルール3:キャッシュ
キャッシュがないと、何度もウェブページを見ても完全な文書を何度もダウンロードし、効率が悪いです.
解決:expireヘッド;max-ageヘッダ
ルール四:圧縮コンポーネント
問題:ファイルのサイズもダウンロード速度に影響します.
解決:要求ヘッドに
ルール5:CSSは頭を置く
問題:CSSは尾部に置いていますが、実際の負荷速度はより速くなりますが、尾部に置くと白画面の現象を招きます.つまり徐々に現れなくなり、ユーザー心理を使ってスピードがより遅く感じられます.
解決:css用
ルール六:JSを底に置く
問題:JSは前面に置くとブラウザの並行ダウンロードをブロックします.
解決:scriptタグにdeferを追加して
ルール7:CSS を ける
:あなたはいつまでもあなたのCSS が も されているのか かりません.
:CSS (express(.)));または い て (サーバ に なCSSに す)を しません.
ルール8: のJSとCSSの を する
:インラインは にロード が いですが、 かの には もダウンロードします. リンクは めて み むのが いですが、キャッシュがあります.これからの はもっと いです.
:コンポーネントの によって、インラインまたは リンクを するかどうかを します.インラインアップロードまたはダイナミックインラインを します.
ルール9:DNS を らす
:DNS も がかかります.
:DNSリストをキャッシュし、DNSのTTL を する.
ルール10:JS、CSSを する
:JSの きさも に します.
:ファイルを し、 に する.
ルール11:リダイレクトを む
:リダイレクトはURLを して、ユーザーの を することができますが、ローディング に します.
: の を える.
ルール12: したJSを する
: り しの :1. に を え、2.スクリプトを り し します.
:バージョン を します.バックエンドはカスタマイズされた を して、 りを します.
ルール13:ETAGを ける
:ETAGはBUGを っています. サーバーのウェブサイトでは、 じファイルが なるETAGを っていてキャッシュが になります.
:ETAGは です.
ルール14:AJAXをキャッシュできるようにする
:AJAXも ちますので、キャッシュするのが いいです.
この は かりませんでした.
の
ルール は、 のルールは ではなく、 の があるので、それに づいたらいいです.そして、あなたのウェブサイトを して、ユーザーにシルクのような らかさを じさせてください.
非常に薄い本で、先端ページの最適化のための14のルールを紹介しています.
ルール1:HTTP要求を減らす
問題:サイトのロード時間はほとんどHTTP要求にかかります.HTTP要求が多すぎると、ページのロード速度が遅くなり、ユーザーの体験に深刻な影響を与えます.したがって、この規則はすべての規則の中で最も重要な規則である.
解決:CSS Spritesを使用する.小さい画像に対してインライン
data:[;][base64],
を使用する.ルール2:CDNを使う
問題:ダウンロード速度はサーバからの物理的な距離と関係があります.
解決:CDNを使う
ルール3:キャッシュ
キャッシュがないと、何度もウェブページを見ても完全な文書を何度もダウンロードし、効率が悪いです.
解決:expireヘッド;max-ageヘッダ
ルール四:圧縮コンポーネント
問題:ファイルのサイズもダウンロード速度に影響します.
解決:要求ヘッドに
Accept-Encoding: gzip, deflate
を追加する.ルール5:CSSは頭を置く
問題:CSSは尾部に置いていますが、実際の負荷速度はより速くなりますが、尾部に置くと白画面の現象を招きます.つまり徐々に現れなくなり、ユーザー心理を使ってスピードがより遅く感じられます.
解決:css用
を...
に置く.ルール六:JSを底に置く
問題:JSは前面に置くとブラウザの並行ダウンロードをブロックします.
解決:scriptタグにdeferを追加して
を することができます.もっと な はjsを に くことです.ルール7:CSS を ける
:あなたはいつまでもあなたのCSS が も されているのか かりません.
:CSS (express(.)));または い て (サーバ に なCSSに す)を しません.
ルール8: のJSとCSSの を する
:インラインは にロード が いですが、 かの には もダウンロードします. リンクは めて み むのが いですが、キャッシュがあります.これからの はもっと いです.
:コンポーネントの によって、インラインまたは リンクを するかどうかを します.インラインアップロードまたはダイナミックインラインを します.
ルール9:DNS を らす
:DNS も がかかります.
:DNSリストをキャッシュし、DNSのTTL を する.
ルール10:JS、CSSを する
:JSの きさも に します.
:ファイルを し、 に する.
ルール11:リダイレクトを む
:リダイレクトはURLを して、ユーザーの を することができますが、ローディング に します.
: の を える.
ルール12: したJSを する
: り しの :1. に を え、2.スクリプトを り し します.
:バージョン を します.バックエンドはカスタマイズされた を して、 りを します.
ルール13:ETAGを ける
:ETAGはBUGを っています. サーバーのウェブサイトでは、 じファイルが なるETAGを っていてキャッシュが になります.
:ETAGは です.
ルール14:AJAXをキャッシュできるようにする
:AJAXも ちますので、キャッシュするのが いいです.
この は かりませんでした.
の
ルール は、 のルールは ではなく、 の があるので、それに づいたらいいです.そして、あなたのウェブサイトを して、ユーザーにシルクのような らかさを じさせてください.