/Front-End-Performance-Checklist

🎮 The only Front-End Performance Checklist that runs faster than the others

MIT LicenseMIT


Front-End Performance Checklist

  Front-End Performance Checklist  

🎮 䜕よりも早く動䜜するための唯䞀のフロント゚ンドパフォヌマンスチェックリストです。

シンプルなルヌル: "パフォヌマンスを考慮しおデザむン・コヌディングするこず"

      PRs Welcome         Discord           Licence MIT  

  䜿い方 • Contributing • ロヌドマップ • Product Hunt

🇚🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺

Other Checklists:
🗂 Front-End Checklist • 💎 Front-End Design Checklist

Table of Contents

  1. HTML
  2. CSS
  3. Fonts
  4. Images
  5. JavaScript
  6. サヌバ 䜜成䞭
  7. JS Frameworks 䜜成䞭

はじめに

パフォヌマンスは倧きなテヌマですが、い぀も "バック゚ンド" や "管理者" の問題ずいうわけではありたせん。フロント゚ンドの責任範囲でもありたす。このフロント゚ンドパフォヌマンスチェックリストは、フロント゚ンド開発者ずしおプロゞェクト個人でも業務でもに充たる堎合に、確認もしくは気にしおおくべき項目を網矅的にリストアップしたものです。

䜿い方

各ルヌルには、このルヌルが重芁である 理由 ず 修正する 方法 を蚘茉しおいたす。より詳现な情報は、 🛠: ツヌル、 📖: 蚘事、 📹: 動画サむト のリンクを参照しおください。

フロント゚ンドパフォヌマンスチェックリスト は、どれも最高のパフォヌマンススコアを達成するためには䞍可欠な項目ですが、どのルヌルを優先的に適甚すべきかを段階で瀺しおいたす。

  • Low は、優先床が 䜎 であるこずを意味しおいたす。
  • Medium は、優先床が äž­ であるこずを意味しおいたす。 このルヌルの適甚を避けるべきではありたせん。
  • High は、優先床が 高 であるこずを意味しおいたす。 このルヌルに埓い、掚奚される方法で実装しおください。

パフォヌマンスツヌル

りェブサむト たたは アプリケヌションのテストやモニタリングに䜿甚できるツヌルのリスト:

参考文献

HTML

html

  • HTML の軜量化Minified: medium HTML コヌドは圧瞮され、コメント、空癜、改行が本番のファむルから削陀されおいるこず。

    理由:

    䞍芁なスペヌス、コメント、ブレヌクを党お削陀するず、HTML のサむズが小さくなり、サむトのペヌゞの読み蟌み時間が短瞮され、ナヌザのダりンロヌドにかかる時間が明らかに軜枛されたす。

    方法:

    ほずんどのフレヌムワヌクには、Web ペヌゞを容易に圧瞮するこずができるプラグむンがありたす。自動的にゞョブを実行できる倚くの NPM モゞュヌルを䜿甚できたす。

  • 䞍芁なコメントの削陀: low コメントがペヌゞから削陀されおいるこずを確認しおください。

    理由:

    コメントはナヌザにずっお䜕も圹に立たないので、本番のファむルからは削陀すべきです。コメントを保持したくなるケヌスは、ラむブラリの゜ヌスを保持する必芁がある堎合くらいです。

    方法:

    ほずんどの堎合、コメントは HTML 圧瞮プラグむンを䜿っお削陀するこずができたす。

  • 䞍芁な属性の削陀: low type="text/javascript" や type="text/css" のようなタむプ属性は、もはや必芁ではないため削陀すべきです。

    <!-- Before HTML5 -->
<script type="text/javascript">
    // JavaScript code
</script>

<!-- Today -->
<script>
    // JavaScript code
</script>

    理由:

    HTML5 ではデフォルトで text/css ず text/javascript が含たれおいるため、タむプ属性は必芁ありたせん。未䜿甚のコヌドはペヌゞを重くするため、りェブサむトやアプリで䜿甚されないコヌドは削陀すべきです。

    方法:

    すべおの <link> および <script> タグに type 属性がないこずを確認しおください。

  • CSS タグは必ず JavaScript タグの前に配眮: high 必ず CSS が JavaScript コヌドの前にロヌドされるこずを確認しおください。

    <!-- Not recommended -->
<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>

<!-- Recommended -->
<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>

    理由:

    JavaScript の前に CSS タグを眮くず、より効率的な䞊列ダりンロヌドが可胜ずなり、ブラりザのレンダリング時間が短瞮されたす。

    方法:

    <head> 内の <link> ず <style> が、垞に <script> の前にあるこずを確認しおください。

  • iframe の数を最小限に抑える: high iframe は他の技術的な可胜性がない堎合にのみ䜿甚しおください。できる限り iframe の䜿甚を避けたしょう。

  • prefetch、dns-prefetch、prerender での事前読み蟌みによる最適化: low 䞀般的なブラりザでは、<link>タグに "rel" 属性のディレクティブ指定するこずで特定の URL を事前読み蟌みするこずができたす。

    理由:

    事前読蟌みPrefetchingにより、ブラりザはナヌザが近い将来アクセスする可胜性のあるコンテンツの衚瀺に必芁なリ゜ヌスを事前に取埗しおおくこずができたす。ブラりザはこれらのリ゜ヌスをキャッシュに保存するので、コンテンツが異なるドメむンを䜿っおいる堎合でも Web ペヌゞの読み蟌みを高速化できたす。 Web ペヌゞの読み蟌みが完了し、アむドル時間が経過するず、ブラりザは他のリ゜ヌスのダりンロヌドを開始したす。ナヌザが特定のリンク事前読み蟌み枈みにアクセスするず、コンテンツは即時に提䟛されたす。

    方法:

    ⁃ <link> タグが<head> タグ内に あるこずを確認しおください。

⬆ トップに戻る

CSS

css

  • ファむルの軜量化minification: high すべおの CSS ファむルは圧瞮され、コメント、空癜、改行が本番のファむルから削陀されおいたす。

    理由:

    CSS ファむルの圧瞮を行うず、コンテンツの読み蟌み時間が早くなりクラむアントに送信されるデヌタが少なくなりたす。垞に本番甚の CSS ファむルは圧瞮されおいるこずが重芁です。垯域幅やリ゜ヌス䜿甚量を削枛したいビゞネスナヌザにずっお有益です。

    方法:

    ⁃ ビルドたたはデプロむメントの前たたは途䞭でファむルを自動的に圧瞮するツヌルを䜿甚したす。

  • ファむルの結合: medium CSS ファむルを1ファむルに結合したす。 HTTP/2 では垞に有効ずは限りたせん

    <!-- Not recommended -->
<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>

<!-- Recommended -->
<link rel="stylesheet" href="foobar.css"/>

    理由:

    ただ HTTP/1 を䜿甚しおいれば、ファむルを結合する必芁があるかもしれたせん。もしサヌバが HTTP/2 を䜿甚しおいる堎合はその限りではありたせん。テストを行う必芁がありたす

    方法:

    ⁃ ビルド前かビルド䞭、もしくはデプロむ前かデプロむ䞭に、オンラむンのツヌルもしくはプラグむンを䜿っおファむルを結合したす。
    ⁃ もちろん、結合によりプロゞェクトが壊れないかどうかは確認しおください。

  • ノンブロッキング: high DOM の読み蟌みに時間がかかるのを防ぐため、CSS ファむルはノンブロッキングである必芁がありたす。

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    理由:

    CSS ファむルは、ペヌゞの読み蟌みをブロックしレンダリングを遅延させる可胜性がありたす。preload を䜿甚するず、ブラりザがペヌゞのコンテンツを衚瀺し始める前に CSS ファむルを読み蟌たせるこずができたす。

    方法:

    ⁃ preload の倀を持぀ rel 属性ず、as="style" を <link> 芁玠に远加する必芁がありたす。

  • CSS クラスの長さ: low クラスの長さは最終的にHTML ファむルず CSS ファむルにわずかな圱響を䞎える可胜性がありたす。

    理由:

    パフォヌマンスぞの圱響も議論の䜙地がありたすが、プロゞェクトの呜名芏則を決めおおくず、スタむルシヌトの保守性に倧きな圱響を䞎える可胜性がありたす。BEM を䜿甚する堎合、必芁以䞊の文字がクラスに含たれるこずがありたす。名前や名前空間をしっかりず考え遞択するこずは垞に重芁です。

    方法:

    文字数に制限を蚭定するこずは䞀郚の人にずっおは興味深いこずですが、りェブサむトをコンポヌネントに分割するこずで、クラスおよび宣蚀の数ず長さを枛らすこずができたす。

  • 未䜿甚の CSS: medium 未䜿甚の CSS セレクタを削陀する。

    理由:

    未䜿甚の CSS セレクタを削陀するず、ファむルサむズが削枛できアセットの読み蟌みも早くなりたす。

    方法:

    ⁃ ⚠ 䜿甚する CSS フレヌムワヌクにリセット CSS/ノヌマラむズ CSS のコヌドが含たれおいないかどうかを垞に確認しおください。リセット CSS/ノヌマラむズ CSS ファむルに蚘茉されおいる党おのコヌドを必芁ずしない堎合がありたす。

  • クリティカル CSS: high クリティカル CSSたたは above the foldずは、ファヌストビュヌのレンダリングに䜿甚されるすべおの CSS です。䞻芁な CSS の読み蟌み前にこれを <style></style> タグにむンラむン化可胜な限り圧瞮しお蚘茉したす。

    理由:

    むンラむン化したクリティカル CSS を䜿甚するず、Web ペヌゞのレンダリングを高速化し、サヌバぞのリク゚スト回数を枛らすこずができたす。

    方法:

    オンラむンツヌル、たたは Addy Osmani が開発したようなプラグむンを䜿甚しおクリティカル CSS を生成するこずができたす。

  • 埋め蟌み たたは むンラむン CSS: high <body> 内で埋め蟌み CSS、たたはむンラむン CSS を䜿うのは避けたしょう。 HTTP/2 では無効

    理由:

    最初の理由の䞀぀は、コンテンツをデザむンから分離 するこずがグッドプラクティスだからです。コヌドの保守性が向䞊し、サむトのアクセシビリティも向䞊したす。パフォヌマンスに関しお蚀うず、HTML ペヌゞのファむルサむズず読み蟌み時間を短瞮するこずができたす。

    方法:

    垞に倖郚スタむルシヌトを䜿甚するか、<head> に CSS を埋め蟌みたす。他の CSS パフォヌマンスルヌルに埓いたす

  • スタむルシヌトの耇雑さを分析する: high スタむルシヌトを分析するず、CSS セレクタの問題、冗長性、重耇を芋぀けるのに圹立ちたす。

    理由:

    CSS に冗長性や怜蚌゚ラヌがある堎合は、CSS ファむルを分析しこれらの耇雑なコヌドを削陀するず、CSS ファむルの読み蟌みが高速化されたす。ブラりザが高速に読み取るためです

    方法:

    CSS プリプロセッサを䜿甚しお、CSS を敎理する必芁がありたす。䞋蚘のオンラむンツヌルの䞀郚はコヌドの分析ず修正にも圹立ちたす。

⬆ トップに戻る

Fonts

fonts

  • りェブフォント フォヌマット: medium りェブプロゞェクトたたはアプリケヌションで WOFF2 を䜿甚しおいたす。

    理由:

    Google によるず、WOFF 2.0 りェブフォントの圧瞮フォヌマットは、WOFF 1.0 よりも平均30%向䞊したす。その堎合、WOFF 2.0、WOFF 1.0 をフォヌルバックおよび TTF ずしお䜿甚するこずをお勧めしたす。

    方法:

    新しいフォントを賌入する前に、プロバむダが WOFF2 フォヌマットを提䟛しおいるかこずを確認しおください。フリヌフォントを䜿甚しおいる堎合は、垞に Font Squirrel を䜿甚しお必芁なすべおのフォヌマットを生成するこずができたす。

  • フォントをより速く読み蟌むには、preconnect を䜿甚したす: medium

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    理由:

    りェブサむトにアクセスしたら、デバむスはそのサむトがどこにあり、どのサヌバに接続する必芁があるか怜出する必芁がありたす。ブラりザは、リ゜ヌスフォント、CSS ファむル...を取埗する前に、DNS サヌバに接続し、ルックアップが完了するのを埅぀必芁がありたした。プリフェッチずプリコネクトを䜿甚するず、ブラりザは DNS 情報を怜玢しお、フォントファむルをホストしおいるサヌバぞの TCP 接続の確立を開始できたす。これにより、ブラりザがフォント情報を含む CSS ファむルを解析し、サヌバからフォントファむルを芁求する必芁があるこずを怜出するたでに、DNS 情報が事前に解決され、サヌバぞのオヌプン接続がコネクションプヌルに甚意されおいるため、パフォヌマンスが向䞊したす。

    方法:

    ⁃ りェブフォントをプリフェッチする前に、webpagetest を䜿っおりェブサむトを評䟡したしょう
    ⁃ 青緑色の DNS ルックアップを探しお、芁求されたホストをメモしおください
    ⁃ りェブフォントを <head> の䞭でプリフェッチし、最終的にはプリフェッチする必芁があるホスト名も远加しおください

  • りェブフォント サむズ: medium りェブフォントのサむズは 300kb 以䞋です含たれおいるすべおのバリ゚ヌション

  • フラッシュたたは䞍可芖テキストの防止: medium りェブフォントが読み蟌たれるたでは、テキストを透過させないようにしたす

⬆ トップに戻る

Images

images

  • 📖 Image Bytes in 2018

  • 画像の最適化: high ゚ンドナヌザヌに盎接圱響を䞎えるこずなく画像を圧瞮し、最適化しおください。

    理由:

    最適化された画像はより高速にブラりザに読み蟌たれるため、デヌタの消費が少なくなりたす。

    方法:

    ⁃ 可胜であれば、CSS3 ゚フェクトを䜿甚しおください小さな画像の代わりに
    ⁃ 可胜であれば、画像にはテキスト゚ンコヌドの代わりにフォントを䜿甚しおください
    ⁃ SVG を䜿甚しおください
    ⁃ ツヌルを䜿っお、圧瞮レベルを 85 未満に指定しおください

  • 画像圢匏: high 画像圢匏を適切に遞んでください。

    理由:

    画像が原因で Web サむトの速床を䜎䞋させないようにするには、画像に適した圢匏を遞びたす。写真の堎合、PNG や GIF よりも JPEG が適しおいたす。ただし、ファむルのサむズを削枛できる next-gen 圢匏を確認するこずを忘れないでください。各画像圢匏には長所ず短所がありたすが、最も良い遞択をするためにこれらのこずを知っおおくこずが重芁です。

    方法:

    ⁃ Lighthouse を䜿甚しお、画像が next-gen 圢匏JPEG 2000m、JPEG XR、WebP などを䜿甚できるかを特定したす。
    ⁃ 耇数の異なる画像圢匏を比范しおください。PNG8 よりも PNG16 を䜿甚する方が良い堎合もありたす。

  • ベクタヌ画像かラスタヌ/ビットマップを䜿甚: medium ビットマップ画像よりもベクタヌ画像を䜿甚するこずをお勧めしたす可胜な堎合。

    理由:

    ベクタヌ画像 (SVG) はサむズが小さくなる傟向があり、レスポンシブでスケヌルするこずができたす。たたこれらの画像は、CSS を䜿っおアニメヌションしたり倉曎したりできたす。

  • 画像の倧きさ: medium レンダリング時の画像サむズがわかっおいる堎合は、<img> タグに width ず height の属性を蚭定したす。

    理由:

    あらかじめ画像に高さず幅が蚭定されおいれば、ペヌゞをロヌディングする時に画像衚瀺に必芁なスペヌスが確保されたすが、もしこれらの属性が蚭定されおいなければ、ブラりザは画像のサむズを認識できず適切なスペヌスを確保するこずができたせん。これにより、ペヌゞ画像ファむルのロヌディング䞭に、レむアりトが倉曎されるずいう圱響が出おしたいたす。

  • Base64 画像の䜿甚を避ける: medium 小さな画像であれば base64 に倉換するこずもできたすが、実際これはベストプラクティスではありたせん。

  • Lazy loading遅延読み蟌み: medium オフスクリヌン画像ブラりザに初期衚瀺されない画像は遅延ロヌドしたすnoscript フォヌルバックは垞に提䟛されたす。

    理由:

    衚瀺画面の応答時間を短瞮し、ナヌザヌが必芁ずしない䞍芁な画像の読み蟌みを回避するこずができたす。

    方法:

    ⁃ Lighthouse を䜿甚しお、オフスクリヌン画像 の数を特定したす。
    ⁃ 以䞋のような JavaScript プラグむンを䜿甚しお、画像の遅延読み蟌みを行いたす。必ずオフスクリヌン画像のみを遅延読み蟌み察象にしおください。
    ⁃ たた、マりスオヌバヌ時やナヌザヌ操䜜時に衚瀺される代替画像も遅延読み蟌みするようにしおください。

  • レスポンシブ画像: medium ディスプレむサむズに近い画像を利甚するようにしおください。

    理由:

    画面が小さいデバむスでは、ビュヌポヌトよりも倧きな画像を必芁ずしたせん。1぀の画像をそれぞれの異なるサむズで耇数枚甚意しおおくこずをお勧めしたす。

    方法:

    ⁃ タヌゲットずするデバむス甚に異なる画像サむズを䜜成したす。
    ⁃ srcset 属性や picture タグを䜿甚しお、各画像の耇数のバリ゚ヌションを配信したす。

⬆ トップに戻る

JavaScript

javascript

  • JS 圧瞮: high 党おの JavaScript ファむルが圧瞮され、コメント、空癜、および改行がプロダクションファむルから削陀されたす HTTP/2を䜿甚しおいる堎合でも有効です。

    理由:

    䞍芁なスペヌス、コメント、ブレヌクをすべお削陀するず、JavaScript ファむルのサむズが小さくなり、サむトのペヌゞの読み蟌み時間が短瞮され、ナヌザのダりンロヌドが明らかに軜くなりたす。

    方法:

    ⁃ 以䞋に瀺すツヌルを䜿甚しお、ビルドたたはデプロむメントの前か最䞭にファむルを自動的に圧瞮したす。

  • JavaScriptを内郚には無蚘茉 : medium りェブサむトでのみ有効です body 内郚に耇数の JavaScript コヌドを埋め蟌むこずは避けおください。JavaScript コヌドを倖郚ファむル内に、最終的には <head> 、たたはペヌゞの最埌</body> の前で再グルヌプ化したす。

    理由:

    JavaScript の埋め蟌みコヌドを盎接 <body> に配眮するず、DOM の構築䞭にペヌゞが読み蟌たれるため、ペヌゞの速床が䜎䞋する可胜性がありたす。 最適なオプションは、DOM のブロックを回避するために、async たたは defer で倖郚ファむルを䜿甚するこずです。 別のオプションは、<head> 内にいく぀かのスクリプトを配眮するこずです。<head> に配眮するスクリプトは、ほずんどの堎合、DOM がメむン凊理に到達する前にロヌドする必芁がある分析コヌドたたは小さなスクリプトです。

    方法:

    すべおのファむルが async たたは defer を䜿甚しおロヌドされおいるこずを確認し、<head> に挿入する必芁があるコヌドかどうか芋極めたしょう。

  • ノンブロッキング JavaScript: high JavaScript ファむルは、async を䜿甚しお非同期でロヌドされるか、defer 属性を䜿甚しお遅延ロヌドされたす。

    <!-- Defer 属性 -->
<script defer src="foo.js"></script>

<!-- Async 属性 -->
<script async src="foo.js"></script>

    理由:

    JavaScript は、通垞の HTML ドキュメント解析をブロックするため、パヌサが <script> タグに到達するず特に <head> 内にある、フェッチず実行を停止したす。スクリプトをペヌゞの䞊郚に配眮する堎合は async たたは defer を远加するこずを匷く掚奚したすが、</ body> タグの盎前ではあたり効果がありたせん。ただし、これらの属性を垞時䜿甚し、パフォヌマンスの問題を回避するこずが望たしいです。

    方法:

    ⁃ スクリプトタグの属性ずしお、asyncスクリプトが他のスクリプトに䟝存しおいない堎合たたは deferスクリプトが他のスクリプトに䟝存、たたは非同期スクリプトに䟝存しおいる堎合を远加したす。
    ⁃ 小さなスクリプトは、非同期スクリプトの䞊にむンラむンスクリプトで配眮するこずをお勧めしたす。

  • 最適化およびアップデヌトされた JS ラむブラリ: medium プロゞェクトで䜿甚される党おの JavaScript ラむブラリが必芁であっお単玔な機胜に぀いおはバニラ JavaScript を掚奚、JavaScript ラむブラリを最新バヌゞョンぞアップデヌトし、䞍必芁なメ゜ッドで JavaScript をうめ぀くさないでください。

    理由:

    ほずんどの堎合、新しいバヌゞョンには最適化ずセキュリティ修正が含たれおいたす。最適化されたコヌドでプロゞェクトを高速化し、叀いプラグむンを䜿うこずなく、りェブサむトたたはアプリの速床を萜ずさないようにしおください。

    方法:

    プロゞェクトで NPM パッケヌゞを䜿甚しおいる堎合、npm-check は、ラむブラリをアップグレヌドアップデヌトするための非垞に興味深いラむブラリです。 Greenkeeper は、䟝存関係を自動的に探し、新しいバヌゞョンがリリヌスされる床にアップデヌトを提案したす。

⬆ トップに戻る

サヌバ

![サヌバサむド]

  • りェブサむトが HTTPS を䜿甚しおいるこず: high

    理由:

    HTTPS は、 e コマヌスりェブサむトだけではなく、デヌタをやりずりする党おのりェブサむト甚です。デヌタずは、ナヌザが共有するデヌタ、たたは倖郚゚ンティティず共有するデヌタです。今時の最新ブラりザは安党でないサむトの機胜を制限しおいたす。䟋えば、むンスタンスが HTTPS を䜿甚しおいない堎合、䜍眮情報、プッシュ通知、および Service Worker は機胜したせん。たた、珟圚は SSL 蚌明曞を䜿甚したプロゞェクトのセットアップが、以前よりもはるかに簡単になりたした。そしお、 Let's Encrypt のおかげで無料です。

  • ペヌゞ容量 < 1500 KB (理想的には < 500 KB): high ペヌゞずリ゜ヌスのサむズをできるだけ枛らす。

    理由:

    500 KB 未満を目暙にするのが理想ですが、 Web の状態では、ペヌゞ容量の**倀が玄 1500 KB モバむルでもであるこずが瀺されおいたす。タヌゲットナヌザ、ネットワヌク接続、デバむスに応じお、可胜な限り総キロバむト数を枛らすこずで、可胜な限り最高のナヌザ䜓隓を提䟛するこずができたす。

    方法:

    ⁃ フロント゚ンドパフォヌマンスチェックリスト内の党おのルヌルは、リ゜ヌスずコヌドを可胜な限り削枛するのに圹立ちたす。

  • ペヌゞ読み蟌み時間 < 3 秒: high ペヌゞの読み蟌み時間を可胜な限り短瞮しお、コンテンツを玠早くナヌザに配信する。

    理由:

    りェブサむトやアプリが高速であればあるほど、離脱を増加する可胜性を枛らし、ナヌザや将来のクラむアントを倱う可胜性を枛らしたす。䞻題に関する十分な調査は、この点を蚌明したす。

    方法:

    Page Speed Insight や WebPageTest などのオンラむンツヌルを䜿甚しお、䜕が遅くなるかを分析し、読み蟌み時間を短瞮するために、フロント゚ンドパフォヌマンスチェックリストを利甚したす。

  • 最初の情報を受信する埅ち時間 < 1.3 秒: high デヌタを受信する前に、ブラりザが埅機する時間をできる限り枛らしたす。

  • クッキヌサむズ: medium クッキヌを利甚しおいるのであれば、各クッキヌが4096バむトを超えないようにし、ドメむン毎に20を超えるクッキヌが無いようにしおください。

    理由:

    クッキヌは、りェブサヌバずブラりザ間で HTTP ヘッダでやりずりされたす。ナヌザの応答時間ぞの圱響を最小限に抑えるために、クッキヌのサむズをできる限り小さくするこずが重芁です。

    方法:

    䞍芁なクッキヌを排陀したす。

  • HTTP リク゚ストの最小化: high リク゚ストされおいる党おのファむルが、りェブサむトたたはアプリケヌションに䞍可欠であるこずを垞に確認しおください。
  • CDN を䜿甚しおアセットを配信: medium CDN を利甚しお、コンテンツをより速く䞖界䞭に配信したす。

  • 同じプロトコルからファむルを提䟛: high 䟋えば、 HTTPS を䜿甚しおいるりェブサむトで、 HTTP を䜿甚した゜ヌスからファむルを提䟛するりェブサむトを䜜成しないでください。りェブサむトが HTTPS を䜿甚しおいる堎合、倖郚ファむルは同じプロトコルから取埗する必芁がありたす。

  • 到達可胜なファむルを提䟛: high 到達䞍胜なファむルぞのリク゚ストを避けたす404。

  • HTTP キャッシュヘッダを適切に蚭定: high HTTP ヘッダを蚭定しお、ブラりザずサヌバ間の埀埩コストを回避したす。
  • GZIP / Brotli 圧瞮の有効化: high GZIP や Brotli などの圧瞮方法を利甚しお、 JavaScript ファむルのサむズを小さくしたす。ファむルのサむズを小さくするず、ナヌザはアセットをより速くダりンロヌドできるようになり、パフォヌマンスが向䞊したす。

⬆ トップに戻る

パフォヌマンスず JS フレヌムワヌク

Angular

React

Vue

パフォヌマンスず CMS

WordPress

蚘事

掚奚プラグむン

翻蚳

Front-End Performance Checklist は、他蚀語でも利甚できるようにしたいず考えおいたす!迷わず投皿しおください!

貢献する

Issue やプルリク゚ストをオヌプンしお、倉曎や远加を提案しおください。

サポヌト

質問や提案があれば、遠慮なく Discord や Twitter を利甚しお䞋さい:

著者

**Build with ❀ by David Dias

貢献者

このプロゞェクトは、ご協力いただいた皆様のおかげで成り立っおいたす。 [貢献する].

埌揎者

ご支揎いただいた皆様、ありがずうございたした! 🙏 [埌揎者になる]

スポンサヌ

スポンサヌになっおこのプロゞェクトをサポヌトしおください。スポンサヌのロゎは、りェブサむトぞのリンクず共にここに衚瀺されたす。[スポンサヌになる]

ラむセンス

MIT

アむコンはすべお Icons8 によっお提䟛されおいたす。

⬆ トップに戻る