ืขืก ืื ืคืึทืจืึทื . ืืืื ืขืจ ืคืื ืืื ืืื ืคึผืจืขืืึธืึทืืื ื ืืื ืืึทืื ืืืึธืก ืืืขื ืืืื ืืืจืฃ ืฉืคึผืขืืขืจ. CSS ืคืึทืจ-ืคึผืจืึทืกืขืกืื ื, ืคืื ืืืึทื ืคืึทืจ-ืจืขื ืืขืจืื ื ืึธืืขืจ ืคืขืื ื ืึธืืขื ืืึทืืืึธืืข. ืืืจ ืืึธื ืึทืืฅ ืืื ืฉืืืึทืื, ืืื ืืขืืึธืื ืืืืงืขืฃ ืืืืึทืื ืื ืจืขืืืืืึทื! ืกืึธืื ืืก ืงืื.
ืืืึธืก ืก ืืคืืื ืงืืืขืจ ืืื ืึทื ืขืก ืืื ืืืืขืจ ืคึผืฉืื ืืืคึผืืึทืืขื ืึทื. ืคืื ืฃ ืืึทืืก ืืขืื ืืขื ืืืขืืขืจืขืจ ืึท ืืึทืคึฟืขื ืฆื ืืืจืืคืืจื ืคึผืจืืืืืึทื ืขืจื ืึทืงืฉืึทื ื:
<link rel="prefetch" href="/yi/style.css" as="style" />
<link rel="preload" href="/yi/style.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
ืืื ืก ืืขืงืืฆืขืจ ืืขืจืงืืขืจื ืืืึธืก ืืื ืืึธื ืืื ืืืขื ืฆื ื ืืฆื ืืื.
ืฉืคืจืื ื ืฆื: ยท ยท ยท ยท
ืคึผืจืขืืึธืึทื
<link rel= "preload"> ืืขืจืฆืืืื ืืขื ืืืขืืขืจืขืจ ืฆื ืืึธืื ืืื ืงืึทืฉ ืึท ืืืื (ืึทืืึท ืืื ืึท ืฉืจืืคื ืึธืืขืจ ืกืืืืขืฉืขืขื) ืืื ืืึทืื ืืื ืืขืืืขื. ืืึธืก ืืื ื ืืฆืืง ืืืขื ืึท ืืืื ืืื ืืืจืฃ ืึท ืืืกื ืกืขืงืื ืืขืก ื ืึธื ืื ืืืึทื ืืึธืืื - ืืื ืืืจ ืืืืื ืฆื ืคืึทืจืืืืขืจื ืืขื ืคึผืจืึธืฆืขืก.
ืืขืจ ืืืขืืขืจืขืจ ืืื ืืึธืจื ืืฉื ืืื ืื ืืืื ื ืึธื ืืึธืืืื ื. ืกืงืจืืคึผืก ืืขื ืขื ื ืืฉื ืขืงืกืึทืงืืืืึทื, ืกืืื ืฉืืฅ ืืขื ืขื ื ืืฉื ืืขืืืขื ืื. ืื ืืืื ืืื ืคืฉืื ืงืึทืฉื ืืื ืืืืื ืื ืืืฆื ืืืืฃ ืืขืื.
ืกืื ืืึทืงืก
<link rel="preload" href="/yi/style.css" as="style" />
href ืืืืืื ืฆื ืื ืืืื ืืืจ ืืืืื ืฆื ืึธืคึผืืึธืืืจื.
as ืงืขื ืืืื ืขืคึผืขืก ืืืึธืก ืงืขื ืขื ืืืื ืืึทืื ืืึธืืืื ืืื ืืขื ืืืขืืขืจืขืจ:
styleืคึฟืึทืจ ืกืืื ืฉืืฅ,scriptืคึฟืึทืจ ืกืงืจืืคึผืก,fontืคึฟืึทืจ ืคืึทื ืฅ,fetchืคึฟืึทืจ ืจืขืกืืจืกื ืืึธืืืื ื ืืฆืfetch()ืึธืืขืจXMLHttpRequest,- ืืขื ืคืื ืจืฉืืื .
ืขืก ืืื ืืืืืืืง ืฆื ืกืคึผืขืฆืืคืืฆืืจื ืื ืึทืืจืืืืื as - ืืึธืก ืืขืืคึผืก ืืขื ืืืขืืขืจืขืจ ืฆื ืจืขืื ืคึผืจืืืึธืจืึทืืืื ืืื ืคึผืืึทื ืืึทืื ืืึธืืื.
ืืืขื ืฆื ื ืืฆื
ื ืืฆื ืคึผืจืขืืึธืึทืืื ื ืืืขื ืื ืืืื ืืื ืืืจืฃ ืืื ืืขืจ ื ืึธืขื ื ืฆืืงืื ืคึฟื. ืืืฉื:
- ื ืื-ื ืึธืจืืึทื ืคืึทื ืฅ ืคืื ืึท ืคืื ืืจืืืกื ืืืง ืืขืงืข:
<!-- index.html --> <link rel="stylesheet" href="index.css" /> /* index.css */ @font-face { src: url('comic-sans.woff2') format('woff2'); }ืืืจื ืคืขืืืงืืึทื
comic-sans.woff2ืืืขื ืึธื ืืืืื ืืึธืืืื ื ืืืืื ื ืึธื ืืึทืื ืืึธืืืื ื ืืื ืคึผืึทืจืกืื ืindex.css. ืฆื ืืืกืืืืื ืืืืจืื ืึทืืื ืืึทื ื, ืืืจ ืงืขื ืขื ืืจืืคืงืืคืืข ืื ืฉืจืืคึฟื ืคืจืืขืจ ื ืืฆื<link rel= "preload">:<link rel="preload" href="comic-sans.woff2" as="font" /> - ืืืื ืืืจ ืืึทืืื ืืขืจ ืืืื ืกืืืืื ืืืื ืืขื ืฆืืืึทื ื ืืื ืฆืืืื ืืืืื, ืงืจืืืืฉ (ืคึฟืึทืจ ืืึทืืืืง ืจืขื ืืขืจืื ื) ืืื ื ืื-ืงืจืืืืฉ:
<style> /* Inlined critical styles */ </style> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script>ืืื ืืขื ืฆืืืึทื ื, ื ืื-ืงืจืืืืฉ ืกืืืืื ืืืขื ื ืึธืจ ืึธื ืืืืื ืืึธืืืื ื ืืืขื ืืืฉืึทืืืึทืกืงืจืืคึผื ืืืืคื, ืืืึธืก ืงืขื ืคึผืึทืกืืจื ืึท ืืืกื ืกืขืงืื ืืขืก ื ืึธื ืจืขื ืืขืจืื ื. ืึทื ืฉืืึธื ืืืืจืื JS ื ืืฆื
<link rel= "preload">ืฆื ืึธื ืืืืื ืืึทืื ืืึธืืืื ื ืคืจืืขืจ:<style> /* Inlined critical styles */ </style> <link rel="preload" href="/yi/app/non-critical.css" as="style" /> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script>
ืื ืืืืกื ื ืืฉื ืึธืืืืขืจืืื ืคึผืจืขืืึธืึทืืื ื. ืืืื ืืืจ ืืึธืื ืึทืืฅ ืืื ืึท ืจืืืขืจื, ืื ืคึผืืึทืฅ ืืืขื ื ืืฉื ืืึทืืืฉืืงืึทืื ืคืึทืจืืืืขืจื; ืืืืฃ ืื ืคืึทืจืงืขืจื, ืขืก ืืืขื ืคืึทืจืืืึทืื ืื ืืืขืืขืจืขืจ ืฆื ืคึผืืึทื ืืจื ืืืื ืึทืจืืขื ืจืืืืืง.
ื ืื ืฆื ืืืื ืฆืขืืืฉื ืืื ืคึผืจืืคืขืืฉืื ื. ื ืืฉื ื ืืฆื <link rel= "preload">, ืืืื ืืืจ ืืึธื ื ืื ืืึทืจืคึฟื ืื ืืืื ืืื ื ืึธื ืื ืืืึทื ืืึธืืื. ืืืื ืืืจ ืืึทืจืคึฟื ืขืก ืฉืคึผืขืืขืจ, ืืืฉื ืคึฟืึทืจ ืืขืจ ืืืืึทืืขืจ ืืืึทื, ื ืืฆื <link rel= "prefetch">.
ืคืจืืื
ืืึธืก ืืื ืึท ืคืืจืืื ืื ืงืืืืื ืฆื ืืืื ืขืงืกืึทืงืืืืึทื ืืืจื ืืขื ืืืขืืขืจืขืจ (ืืืื ืขืก ืฉืืืฆื ืขืก), ื ืื ืขื ืืขื ืึทืืข ืื ืืขืจืข ืืึทืืก ืฉืืึทืืืช ืฆื ืคึผืจืขืืึธืึทืืื ื. ืืขืจ ืืืขืืขืจืขืจ ืืืื ืืจืืคืงืืคืืข ืื ืืืื ืกืคึผืขืกืืคืืขื ืืื <link rel="preload">. ืืื ืื ืืขืจืข ืงืึทืกืขืก ืขืก ืงืขื ืืืื ืึธืจืืจื ืคึผืจืขืืึธืึทืืื ื, ืคึฟืึทืจ ืืืึทืฉืคึผืื ืืืื ืขืก ืืื ืคืืืกื ืืืง ืืืืฃ ืึท ืคึผืึทืืขืืขื ืงืฉืจ.
ืคึผืจืืืึธืจืึทืืื. ืืจืึทืืืขืจื ืืืืฉืึทืืืึทืื ืืึทืฉืืืืขื ืคืึทืจืฉืืืขื ืข ืคึผืจืืืึธืจืึทืืื ืฆื ืคืึทืจืฉืืืขื ืข ืจืขืกืืจืกื (ืกืืืืื, ืกืงืจืืคึผืก, ืคืึทื ืฅ, ืืื"ื ื) ืืื ืกืืจ ืฆื ืืึทืกืข ืื ืืขืจืกื ืืืืืืืง ืจืขืกืืจืกื ืขืจืฉืืขืจ. ืืื ืืขื ืคืึทื, ืืขืจ ืืืขืืขืจืขืจ ืืืืขืจืืึทื ื ืืืืืขืจืงืืึทื ืืืจื ืึทืืจืืืืื as. ืคึฟืึทืจ ืงืจืึธืื ืืืขืืขืจืขืจ ืืืจ ืงืขื ืขื ืืขื .
ืคึผืจืืคืขืืฉ
<link rel= "prefetch"> ืคืจืขืื ืืขื ืืืขืืขืจืขืจ ืฆื ืึธืคึผืืึธืืืจื ืืื ืงืึทืฉ ืึท ืืืื (ืึทืืึท ืืื ืึท ืฉืจืืคื ืึธืืขืจ ืกืืื ืืืึทื) ืืื ืืขืจ ืืื ืืขืจืืจืื ื. ืืึธืืืื ื ืึทืงืขืจื ืืื ื ืืืขืจืืง ืืืืืขืจืงืืึทื ืึทืืื ืขืก ืงืขื ื ืืฉื ืึทืจืืึทื ืืืฉื ืืื ืืื ืืขืจ ืืืืืืืง ืจืขืกืืจืกื. ืืึธืก ืืื ื ืืฆืืง ืืืื ืื ืืืื ืืื ืืืจืฃ ืืืืฃ ืืขืจ ืืืืึทืืขืจ ืืืึทื ืืื ืืืจ ืืืืื ืฆื ืงืึทืฉ ืขืก ืืื ืฉืืืึทืื.
ืืืื ืืึธ, ืืขืจ ืืืขืืขืจืขืจ ืืื ืืึธืจื ืืฉื ืืื ืื ืืืื ื ืึธื ืืึธืืืื ื. ืกืงืจืืคึผืก ืืขื ืขื ื ืืฉื ืขืงืกืึทืงืืืืึทื, ืกืืื ืฉืืฅ ืืขื ืขื ื ืืฉื ืืขืืืขื ืื. ืื ืืืื ืืื ืคืฉืื ืงืึทืฉื ืืื ืืืืื ืื ืืืฆื ืืืืฃ ืืขืื.
ืกืื ืืึทืงืก
<link rel="prefetch" href="/yi/style.css" as="style" />
href ืืืืืื ืฆื ืื ืืืื ืืืจ ืืืืื ืฆื ืึธืคึผืืึธืืืจื.
as ืงืขื ืืืื ืขืคึผืขืก ืืืึธืก ืงืขื ืขื ืืืื ืืึทืื ืืึธืืืื ืืื ืืขื ืืืขืืขืจืขืจ:
styleืคึฟืึทืจ ืกืืื ืฉืืฅ,scriptืคึฟืึทืจ ืกืงืจืืคึผืก,fontืคึฟืึทืจ ืคืึทื ืฅ,fetchืคึฟืึทืจ ืจืขืกืืจืกื ืืึธืืืื ื ืืฆืfetch()ืึธืืขืจXMLHttpRequest,- ืืขื ืคืื ืจืฉืืื .
ืขืก ืืื ืืืืืืืง ืฆื ืกืคึผืขืฆืืคืืฆืืจื ืื ืึทืืจืืืืื as - ืืึธืก ืืขืืคึผืก ืืขื ืืืขืืขืจืขืจ ืจืืืืืง ืคึผืจืืืึธืจืึทืืืื ืืื ืคึผืืึทื ืืึทืื ืืึธืืื.
ืืืขื ืฆื ื ืืฆื
ืฆื ืืึธืื ืจืขืกืืจืกื ืคืื ืื ืืขืจืข ืืืขืืขืจ, ืืืื ืืืจ ืืึทืจืคึฟื ืึท ืืืื ืคืื ืื ืื ืืขืจ ืืืึทื, ืืื ืืืจ ืืืืื ืฆื ืคึผืจืขืืึธืึทื ืขืก ืฆื ืคืึทืจืืืืขืจื ืื ืจืขื ืืขืจืื ื ืคืื ืืขื ืืืึทื. ืืืฉื:
- ืืืจ ืืึธืื ืึทื ืึธื ืืืื ืงืจืึธื, ืืื 40% ืคืื ืืืืขืจื ืืึธืื ืื ืืืื ืืืึทื ืคึฟืึทืจ ืื ืคึผืจืึธืืืงื ืืืึทื. ื ืืฆื
<link rel= "prefetch">, ืืึธืืืื ื CSS ืืื JS ืืขืงืขืก ืฆื ืืคืคืืจื ืคึผืจืึธืืืงื ืืืขืืขืจ. - ืืืจ ืืึธืื ืึท ืืืื ืืืึทื ืึทืคึผืืึทืงืืืฉืึทื, ืืื ืคืึทืจืฉืืืขื ืข ืืืขืืขืจ ืืึธืื ืคืึทืจืฉืืืขื ืข ืคึผืึทืงืึทืืืฉืึทื. ืืืขื ืึท ืืึทื ืืฆืขืจ ืืืืืื ืึท ืืืึทื, ืคึผืึทืงืึทืืืฉืึทื ืคึฟืึทืจ ืึทืืข ืืืขืืขืจ ืฆื ืืืึธืก ืขืก ืคึฟืึทืจืืื ืื ืงืขื ืขื ืืืื ืคึผืจืขืืึธืึทืืขื.
ืขืก ืืื ืืกืชึผืื ืึทื ืืขื ืงืืืืื ืงืขื ืขื ืืืื ืืขืฉืึธืืขื ืืขื ืืฆื ืืื ืงืืื ืืึธืก.. ืืจืึทืืืขืจื ืืืืฉืึทืืืึทืื ืคึผืืึทื ืคึผืจืืคืขืืฉ ืืื ืื ืืึธืืึทืกื ืืืืืขืจืงืืึทื, ืึทืืื ืขืก ืืื ื ืืฉื ืึทืจื ืืืขืจ ืขืก ืื. ื ืึธืจ ืืึทืืื ืืื ืืืื ืื ื ืึทื ืขืก ืงืึทื ืกืืื ืืึทื ืืฆืขืจ ืคืึทืจืงืขืจ, ืืืึธืก ืงืขื ืงืึธืกืื ืืขืื.
ื ืื ืคึฟืึทืจ ืืจืื ืืืขื ืจืืงืืืขืก. ื ืืฉื ื ืืฆื <link rel= "prefetch">, ืืืขื ืื ืืืื ืืื ืืืจืฃ ืืื ืึท ืืืกื ืกืขืงืื ืืขืก. ืืื ืืขื ืคืึทื, ื ืืฆื <link rel= "preload">.
ืคืจืืื
ืึธืคึผืืืึธื ืึทื ืงืืืืื. ืืขืจ ืืืขืืขืจืขืจ ืืื ื ืืฉื ืคืืจืืื ืื ืฆื ื ืึธืืคืึธืืื ืืขื ืืืืขื; ืขืก ืงืขื ืืืื ืึธืจืืจื ืขืก, ืืืฉื, ืืืืฃ ืึท ืคึผืึทืืขืืขื ืงืฉืจ.
ืืืืืขืจืงืืึทื ืืื ืงืจืึธืื. ืืื ืงืจืึธืื <link rel= "prefetch"> ืืืืฉืึทืืืึทืื ืขืงืกืึทืงืืืืึทื ืืื ืืื ืืืื ืืืืืขืจืงืืึทื (ืืขื ), ืืึธืก ืืื, ื ืึธื ืืึธืืืื ื ืึทืืฅ ืึทื ืืขืจืฉ.
ืคึผืจืขืงืึธื ื ืขืงื
<link rel= "preconnect"> ืคืจืขืื ืืขื ืืืขืืขืจืขืจ ืฆื ืคืึทืจืืื ืื ืฆื ืื ืคืขืื ืืื ืฉืืืึทืื ืืืขื ืืืจ ืืืืื ืฆื ืคืึทืจืืืืขืจื ืื ืงืึทื ืขืงืฉืึทื ืกืขืืึทืคึผ ืืื ืืขืจ ืฆืืงืื ืคึฟื.
ืืขืจ ืืืขืืขืจืขืจ ืืืื ืคืึทืจืืืืื ืึท ืงืฉืจ ืืืื ืขืก ืจืืืจืืืื ืงืืื ืจืขืกืืจืกื ืคืื ืึท ื ืืึท ืืจืื-ืคึผืึทืจืืื ืคืขืื. ืคึฟืึทืจ ืืืึทืฉืคึผืื, ืืืื ืขืก ืืึธืืื Google ืคืึทื ืฅ, ืจืขืึทืงื ืคืึทื ืฅ ืคึฟืื ืึท CDN ืึธืืขืจ ืจืืงืืืขืก ืึท JSON ืขื ืืคืขืจ ืคืื ืึทื ืึทืคึผื ืกืขืจืืืขืจ.
ืคืึทืจืืืืื ืึท ื ืืึทืข ืงืฉืจ ืืืืฉืึทืืืึทืื ื ืขืื ืขืืืขืืข ืืื ืืขืจื ืืืืืกืขืงืึทื ืื. ืขืก ืืื ืืขืืื ืึทืืึธื, ืึธืืขืจ ื ืึธื ื ืขืื ืฆืืื. ืืืื ืืืจ ืืึธื ืืขืืจืื ืืขื ืึท ืคึฟืึทืจืืื ืืื ื ืืื ืฉืืืึทืื, ืืืจ ืืืขื ืฉืคึผืึธืจื ืฆืืื ืืื ืืจืืคืงืืคืืข ืจืขืกืืจืกื ืคืื ืืขื ืคืขืื ืคืึทืกืืขืจ.
ืกืื ืืึทืงืก
<link rel= "preconnect" href="https://api.my-app.com" />
href ืื ืืืงืืืฅ ืื ืคืขืื ื ืึธืืขื ืคึฟืึทืจ ืืืึธืก ืืืจ ืืืืื ืฆื ืืึทืฉืืืืขื ืื IP ืึทืืจืขืก. ืงืขื ืขื ืืืื ืกืคึผืขืฆืืคืืฆืืจื ืืื ืึท ืคึผืจืขืคืืงืก (https://domain.com) ืึธืืขืจ ืึธื ืขืก (//domain.com).
ืืืขื ืฆื ื ืืฆื
ื ืืฆื ืคึฟืึทืจ ืืึธืืืืื ื ืืืึธืก ืืืขื ืืืื ืืืจืฃ ืืึทืื ืฆื ืึธืคึผืืึธืืืจื ืึท ืืืืืืืง ื ืืกื, ืฉืจืืคื ืึธืืขืจ ืืืื ืคึฟืื ืืึธืจื, ืึธืืขืจ ืืืจ ืืึธื ื ืื ืืืืกื ืื ืืืื URL ื ืึธื. ืืืฉื:
- ืืืื ืึทืคึผืืึทืงืืืฉืึทื ืืื ืืึธืืกืืื ืืืืฃ
my-app.comืืื ืืืื AJAX ืจืืงืืืขืก ืฆืapi.my-app.com: ืืืจ ืืึธื ื ืื ืืืืกื ืื ืกืคึผืขืฆืืคืืฉ ืคึฟืจืืื ืืื ืฉืืืึทืื ืืืืึทื ืืื ืืขื ืขื ืืขืืืื ืืื ืึทืืืงืึทืืื ืคึฟืื JS. ืืึธ ืขืก ืืื ืืึทื ืฅ ืฆืื ืขืืขื ืฆื ื ืืฆื ืึท ืงืืืืื ืฆื ืคืึทืจ-ืคืึทืจืืื ืื ืฆื ืื ืคืขืื. - ืืืื ืึทืคึผืืึทืงืืืฉืึทื ืืื ืืึธืืกืืื ืืืืฃ
my-app.comืืื ื ืืฆื Google ืคืึทื ืฅ. ืืื ืืขื ืขื ืืึทืื ืืึธืืืื ืืื ืฆืืืื ืกืืขืคึผืก: ืขืจืฉืืขืจ, ืื CSS ืืขืงืข ืืื ืืึทืื ืืึธืืืื ืคืื ืื ืคืขืืfonts.googleapis.com, ืืขืืึธืื ืืขื ืืขืงืข ืจืืงืืืขืก ืคืึทื ืฅ ืืืfonts.gstatic.com. ืืืจ ืงืขื ืขื ื ืืฉื ืืืืกื ืืืึธืก ืกืคึผืขืฆืืคืืฉ ืฉืจืืคึฟื ืืขืงืขืก ืืขื ืขื ืคึฟืืfonts.gstatic.comืืืจ ืืืขื ืืึทืจืคึฟื ืืื ืืืจ ืืึธืื ืื CSS ืืขืงืข, ืึทืืื ืืืจ ืงืขื ืขื ืืืืื ืืึทืื ืึท ืคึผืจืืืืืึทื ืขืจื ืงืฉืจ ืคืจืืขืจ.
ื ืืฆื ืืขื ืงืืืืื ืฆื ืคืึทืจืืืืขืจื ืขืืืขืืข ืืจืื ืืืืืืืืึทื ืฉืจืืคื ืึธืืขืจ ืกืืื ืึท ืืืกื ืจืขืื ืฆื ืคืึทืจ-ืืขืืจืื ืืขื ืงืฉืจ.
ืื ืืืืกื ื ืืฉื ืึธืืืืขืจืืื. ืืจืื ืื ืืื ืืึทืืื ืึท ืงืฉืจ ืืื ืึท ืืืึทืขืจ ืึธืคึผืขืจืึทืฆืืข ืคึฟืึทืจ ืืืืืข ืื ืงืืืขื ื ืืื ืื ืกืขืจืืืขืจ. ื ืืฆื ืืขื ืงืืืืื ืคึฟืึทืจ ืึท ืืึทืงืกืืืื ืคืื 4-6 ืืึธืืืืื ื.
ืคืจืืื
ืึธืคึผืืืึธื ืึทื ืงืืืืื. ืืขืจ ืืืขืืขืจืขืจ ืืื ื ืืฉื ืคืืจืืื ืื ืฆื ื ืึธืืคืึธืืื ืืขื ืืืืขื ืืื ืงืขื ืืืื ืึธืจืืจื ืขืก, ืืืฉื, ืืืื ืคืืืข ืงืึทื ืขืงืฉืึทื ื ืืึธืื ืฉืืื ืืขืืจืื ืืขื ืึธืืขืจ ืืื ืขืืืขืืข ืื ืืขืจืข ืคืึทื.
ืืืึธืก ืืืื ืืขืจ ืงืฉืจ ืคึผืจืึธืฆืขืก?. ืฆื ืคืึทืจืืื ืื ืฆื ืืขืืขืจ ืคึผืืึทืฅ, ืืขืจ ืืืขืืขืจืขืจ ืืืื ืืึธื ืื ืคืืืืขื ืืข:
- ืื ืก ืืึทืืืึธืืข. ืืขืคึฟืื ืขื ืกืขืจืืืขืจ IP ืึทืืจืขืก (
216.58.215.78) ืคึฟืึทืจ ืื ืกืคึผืขืกืืคืืขื ืคืขืื ื ืึธืืขื (google.com). - TCP ืืึทื ืืฉืืืง. ืืืขืงืกื ืคึผืึทืงืืฅ (ืงืืืขื ื โ ืกืขืจืืืขืจ โ ืงืืืขื ื) ืฆื ืึธื ืืืืื ืึท ืืงืคึผ ืงืฉืจ ืืื ืื ืกืขืจืืืขืจ.
- TLS ืืึทื ืืฉืืืง (ืืืืื HTTPS ืืืืืืขื). ืฆืืืื ืจืึธืื ืืก ืคืื ืคึผืึทืงืึทื ืืืขืงืกื (ืงืืืขื ื โ ืกืขืจืืืขืจ โ ืงืืืขื ื โ ืกืขืจืืืขืจ โ ืงืืืขื ื) ืฆื ืึธื ืืืืื ืึท ืืืืขืจ TLS ืกืขืกืืข.
ืืึทืืขืจืงืื ื: ืืืืคึผ / 3 ืืืขื ืคึฟืึทืจืืขืกืขืจื ืืื ืคืึทืจืืืืขืจื ืื ืืึทื ืืฉืืืง ืืขืงืึทื ืืืึทื, ืึธืืขืจ ืขืก ืืื ื ืึธื ืึท ืืึทื ื ืืืขื ืึทืืืขืง.
dns-prefetch
<link rel= "dns-prefetch"> ืคืจืขืื ืืขื ืืืขืืขืจืขืจ ืฆื ืืืจืืคืืจื ืื ืก ืืึทืืืึธืืข ืคึฟืึทืจ ืื ืคืขืื ืืื ืฉืืืึทืื ืืืื ืืืจ ืืืขื ืืืื ืงืึทื ืขืงืืื ื ืฆื ืขืก ืืึทืื ืืื ืืืจ ืืืืื ืฆื ืคืึทืจืืืืขืจื ืื ืขืจืฉื ืงืฉืจ.
ืืขืจ ืืืขืืขืจืขืจ ืืืื ืืึทืฉืืืืขื ืื IP ืึทืืจืขืก ืคืื ืื ืคืขืื ืืืื ืขืก ืืืขื ืฆืืจืืงืงืจืืื ืงืืื ืจืขืกืืจืกื ืคืื ืึท ื ืืึท ืืจืื-ืคึผืึทืจืืื ืคืขืื. ืืืฉื, ืืึธืืืื ื Google ืคืึทื ืฅ, ืจืขืึทืงื ืคืึทื ืฅ ืคึฟืื ืึท CDN ืึธืืขืจ ืืขืื ืึท JSON ืขื ืืคืขืจ ืคึฟืื ืึทื ืึทืคึผื ืกืขืจืืืขืจ.
ืคึฟืึทืจ ืืขืืขืจ ื ืืึท ืคืขืื, DNS ืจืขืงืึธืจื ืืึทืืืึธืืข ืืืคึผืืงืื ื ืขืื ืืืขืื 20-120 ืืื. ืืึธืก ืืืืื ืึทืคืขืงืฅ ืื ืืึธืืืื ื ืคืื ืืขืจ ืขืจืฉืืขืจ ืืืื ืคืื ืึท ืืขืืขืื ืคืขืื, ืึธืืขืจ ื ืึธื ืื ืืจืึทืืืกืื ืึท ืคืึทืจืืึทืืื. ืืืื ืืืจ ืืืจืืคืืจื DNS ืืึทืืืึธืืข ืืื ืฉืืืึทืื, ืืืจ ืืืขืื ืฉืคึผืึธืจื ืฆืืื ืืื ืืึทืกืข ืื ืืืื ืคืึทืกืืขืจ.
ืกืื ืืึทืงืก
<link rel= "dns-prefetch" href="https://api.my-app.com" />
href ืื ืืืงืืืฅ ืื ืคืขืื ื ืึธืืขื ืคึฟืึทืจ ืืืึธืก ืืืจ ืืืืื ืฆื ืฉืืขืื ืื IP ืึทืืจืขืก. ืงืขื ืขื ืืืื ืกืคึผืขืฆืืคืืฆืืจื ืืื ืึท ืคึผืจืขืคืืงืก (https://domain.com) ืึธืืขืจ ืึธื ืขืก (//domain.com).
ืืืขื ืฆื ื ืืฆื
ื ืืฆื ืคึฟืึทืจ ืืึธืืืืื ื ืืืึธืก ืืืขื ืืืื ืืืจืฃ ืืึทืื ืฆื ืึธืคึผืืึธืืืจื ืจืขืกืืจืกื ืคึฟืื ืืึธืจื ืืืึธืก ืืขืจ ืืืขืืขืจืขืจ ืงืขื ื ืืฉื ืืืืกื ืืืขืื ืฉืืืึทืื. ืืืฉื:
- ืืืื ืึทืคึผืืึทืงืืืฉืึทื ืืื ืืึธืืกืืื ืืืืฃ
my-app.comืืื ืืืื AJAX ืจืืงืืืขืก ืฆืapi.my-app.com: ืืืจ ืืึธื ื ืื ืืืืกื ืื ืกืคึผืขืฆืืคืืฉ ืคึฟืจืืื ืืื ืฉืืืึทืื ืืืืึทื ืืื ืืขื ืขื ืืขืืืื ืืื ืึทืืืงืึทืืื ืคึฟืื JS. ืืึธ ืขืก ืืื ืืึทื ืฅ ืฆืื ืขืืขื ืฆื ื ืืฆื ืึท ืงืืืืื ืฆื ืคืึทืจ-ืคืึทืจืืื ืื ืฆื ืื ืคืขืื. - ืืืื ืึทืคึผืืึทืงืืืฉืึทื ืืื ืืึธืืกืืื ืืืืฃ
my-app.com, ืืื ื ืืฆื Google ืคืึทื ืฅ. ืืื ืืขื ืขื ืืึทืื ืืึธืืืื ืืื ืฆืืืื ืกืืขืคึผืก: ืขืจืฉืืขืจ, ืื CSS ืืขืงืข ืืื ืืึทืื ืืึธืืืื ืคืื ืื ืคืขืืfonts.googleapis.com, ืืขืืึธืื ืืขื ืืขืงืข ืจืืงืืืขืก ืคืึทื ืฅ ืืืfonts.gstatic.com. ืืืจ ืงืขื ืขื ื ืืฉื ืืืืกื ืืืึธืก ืกืคึผืขืฆืืคืืฉ ืฉืจืืคึฟื ืืขืงืขืก ืืขื ืขื ืคึฟืืfonts.gstatic.comืืืจ ืืืขื ืืึทืจืคึฟื ืขืก ืืื ืืืจ ืืึธืื ืื CSS ืืขืงืข, ืึทืืื ืืืจ ืงืขื ืขื ืืืืื ืืึทืื ืึท ืคึผืจืืืืืึทื ืขืจื ืงืฉืจ ืืื ืฉืืืึทืื.
ื ืืฆื ืืขื ืงืืืืื ืฆื ืคืึทืจืืืืขืจื ืขืืืขืืข ืืจืื ืืืืืืืืึทื ืฉืจืืคื ืึธืืขืจ ืกืืื ืึท ืืืกื ืจืขืื ืฆื ืคืึทืจ-ืืขืืจืื ืืขื ืงืฉืจ.
ืืืืข ืืึธื ืขื ืืขื ืงืขืจืึทืงืืขืจืืกืืืงืก ืฆื
<link rel= "dns-prefetch"/>ะธ<link rel= "preconnect">. ืขืก ืืืืฉืึทืืืึทืื ืืื ื ืืฉื ืืึทืื ืืื ืขื ืฆื ื ืืฆื ืืื ืฆืืืึทืืขื ืคึฟืึทืจ ืืืื ืคืขืื:<link rel= "preconnect">ืฉืืื ืืืื<link rel= "dns-prefetch"/>ืืื ืคืื ืืขืจ. ืืึธืก ืงืขื ืืืื ืืขืจืขืืืคืืจืืืงื ืืื ืฆืืืื ืงืึทืกืขืก:
- ืฆื ืืืจ ืืืืื ืฆื ืฉืืืฆื ืขืืืขืจืข ืืจืึทืืืขืจื?.
<link rel= "dns-prefetch" />ืฉืืืฆื ืืืจื .<link rel= "preconnect">ืืื ืืขืฉืืืฆื ืคึฟืึทืจ ืึท ืืฉืขืช ืืื ืงืจืึธืื ืืื ืคืืจืขืคืึธืงืก, ืึธืืขืจ ืืื ืืขืืืขื ืืืืื ืฆืืืขืืขืื ืฆื Safari ืืื 11.1 ืืื . ืืืื ืืืจ ืืึทืจืคึฟื ืฆื ืฉืืืฆื ืื ืืจืึทืืืขืจื, ื ืืฆื<link rel= "dns-prefetch" />ืืื ืึท ืืึทืงืึทืคึผ ืึธืคึผืฆืืข ืคึฟืึทืจ<link rel= "preconnect">.- ืืืจ ืืืืื ืฆื ืคืึทืจืืืืขืจื ืงืึทื ืขืงืฉืึทื ื ืฆื ืืขืจ ืืื 4-6 ืืึธืืืืื ื. Tag
<link rel= "preconnect">ืขืก ืืื ื ืืฉื ืจืขืงืึทืืขื ืืื ืฆื ื ืืฆื ืืื ืืขืจ ืืื 4-6 ืืึธืืืืื ื, ืืืืึทื ืืจืื ืื ืืื ืืืื ืืืื ืื ื ืึท ืงืฉืจ ืืื ืึท ืืืึทืขืจ ืึธืคึผืขืจืึทืฆืืข.<link rel= "dns-prefetch" />ืงืึทื ืกืืื ืืืืื ืืงืขืจ ืจืขืกืืจืกื, ืึทืืื ื ืืฆื ืขืก ืืืื ื ืืืืืง.
ืคืจืืื
ืึธืคึผืืืึธื ืึทื ืงืืืืื. ืืขืจ ืืืขืืขืจืขืจ ืืื ื ืืฉื ืคืืจืืื ืื ืฆื ื ืึธืืคืึธืืื ืืขื ืืืืขื, ืึทืืื ืขืก ืงืขื ื ืืฉื ืืืจืืคืืจื ืื ืก ืืึทืืืึธืืข, ืืืฉื, ืืืื ืขืก ืืขื ืขื ืคืืืข ืึทืืึท ืืึทืืก ืืืืฃ ืืขื ืืืึทื ืึธืืขืจ ืืื ืขืืืขืืข ืื ืืขืจืข ืคืึทื.
ืืืึธืก ืืื ืื ืก. ืืขืืขืจ ืกืขืจืืืขืจ ืืืืฃ ืืขืจ ืืื ืืขืจื ืขืฅ ืืื ืึท ืืื ืฆืืง IP ืึทืืจืขืก, ืืืึธืก ืงืืงื ืืื 216.58.215.78. ืืขืจ ื ืึธืืขื ืคืื ืืขื ืคึผืืึทืฅ ืืื ืืืืฉืึทืืืึทืื ืืจืืื ืืื ืื ืึทืืจืขืก ืืึทืจ ืคืื ืืขื ืืืขืืขืจืขืจ (ืืืฉื, google.com), ืืื DNS (Domain Name System) ืกืขืจืืืขืจืก ืืืืึทืื ืขืก ืืื ืื IP ืึทืืจืขืก ืคืื ืื ืกืขืจืืืขืจ (216.58.215.78).
ืฆื ืืึทืฉืืืืขื ืึทื IP ืึทืืจืขืก, ืืขืจ ืืืขืืขืจืขืจ ืืืื ืึธื ืคืจืขื ืื ืื ืก ืกืขืจืืืขืจ. ืขืก ื ืขืื 20-120 ืืื ืืืขื ืงืึทื ืขืงืืื ื ืฆื ืึท ื ืืึท ืืจืื-ืคึผืึทืจืืื ืคืขืื.
ืื ืก ืืื ืงืึทืฉื, ืืึธืืฉ ื ืื ืืืืขืจ ืจืืืืืึทืืื. ืขืืืขืืข ืึธืกืขืก ืืื ืืจืึทืืืขืจื ืงืึทืฉ DNS ืงืืืืจืื: ืืึธืก ืืืขื ืฉืคึผืึธืจื ืฆืืื ืืืืฃ ืจืืคึผืืืื ืงืืืืจืื, ืึธืืขืจ ืงืึทืืฉืื ื ืงืขื ืขื ื ืื ืืืื ืจืืืืื ืืืืฃ. ืืืืฃ ืืื ืืงืก ืขืก ืืืืฉืึทืืืึทืื ืืื ื ืืฉื ืึทืจืืขืื ืืืึท ืึทืืข. ืงืจืึธืื ืืื ืึท ืื ืก ืงืึทืฉ, ืึธืืขืจ ืขืก ืืึทืกืฅ ืืืืื ืึท ืืื ืื. Windows ืงืึทืฉ DNS ืจืขืกืคึผืึธื ืกืขืก ืคึฟืึทืจ ืคืื ืฃ ืืขื.
prerender
<link rel= "prerender"> ืคืจืขืื ืืขื ืืืขืืขืจืขืจ ืฆื ืึธืคึผืืึธืืืจื ืื URL ืืื ืืืืึทืื ืขืก ืืื ืึท ืืืืขืืง ืงืืืืื. ืืืขื ืืขืจ ืืึทื ืืฆืขืจ ืงืืืงื ืืืืฃ ืืขื ืืื ืง, ืืขืจ ืืืึทื ืืึธื ืืืื ืืขืืืืื ืืื. ืืึธืก ืืื ื ืืฆืืง ืืืื ืืืจ ืืขื ื ืืืืขืจ ืึทื ืืขืจ ืืึทื ืืฆืขืจ ืืืขื ืืึทืืืื ืึท ืืืืขืจ ืืืึทื ืืื ืืืืื ืฆื ืคืึทืจืืืืขืจื ืื ืึทืจืืืกืืืืึทืื.
ืืจืึธืฅ (ืึธืืขืจ ืืืืึทื ืคืื) ืื ืืงืกืขืคึผืฉืึทื ืึทื ืืคืขืงืืืืื ืึทืก ืคืื ืืขื ืงืืืืื, ืืื 2019 <link rel= "prerender"> ืฉืืืึทื ืืขืฉืืืฆื ืืื ืืืืคึผื ืืจืึทืืืขืจื. ืืขื ืืขืจ ืืขืืึทืืืก. .
ืกืื ืืึทืงืก
<link rel="prerender" href="https://my-app.com/pricing" />
href ืืืืืื ืฆื ืื URL ืืืจ ืืืืื ืฆื ืึธื ืืืืื ืจืขื ืืขืจืื ื ืืื ืืขืจ ืืื ืืขืจืืจืื ื.
ืืืขื ืฆื ื ืืฆื
ืืืขื ืืืจ ืืขื ื ืืึทืงืข ืืืืขืจ ืึทื ืืขืจ ืืึทื ืืฆืขืจ ืืืขื ืืืื ืฆื ืึท ืืืืขืจ ืืืึทื. ืืืื ืืืจ ืืึธืื ืึท "ืืื ืขื" ืืืจื ืืืึธืก 70% ืคืื ืืืืืึทืืขืจื ืฆื ืืืึทื ื ืืืื ืฆื ืืืึทื ื, ืืขืืึธืื <link rel= "prerender"> ืืืืฃ ืืืึทื ื ืืืขื ืืขืืคื ืฆื ืืืืึทืื ืืืึทื ื ืืืืขืจ ืืขืฉืืืื ื.
ืื ืืืืกื ื ืืฉื ืึธืืืืขืจืืื. ืคืึทืจ-ืจืขื ืืขืจืื ื ืืื ืืึธืจ ืืืึทืขืจ ืืื ืืขืจืืื ืขื ืคืื ืืึทื ืืืืืื ืืื ืืึผืจืื. ื ืืฉื ื ืืฆื <link rel= "prerender"> ืคึฟืึทืจ ืืขืจ ืืื ืืืื ืืืึทื.
ืคืจืืื
ืึธืคึผืืืึธื ืึทื ืงืืืืื. ืืขืจ ืืืขืืขืจืขืจ ืืื ื ืืฉื ืคืืจืืื ืื ืฆื ื ืึธืืคืึธืืื ืืขื ืืืืขื ืืื ืงืขื ืืืื ืึธืจืืจื ืขืก, ืืืฉื, ืืืืฃ ืึท ืคึผืึทืืขืืขื ืคึฟืึทืจืืื ืืื ื ืึธืืขืจ ืืืขื ืขืก ืืื ื ืื ืืขื ืืืืง ืคืจืื ืืึผืจืื.
ืฆื ืจืึทืืขืืืขื ืืึผืจืื ืงืจืึธืื ืืื ื ืืฉื ืืึทืื ืคืื ืจืขื ืืขืจืื ืืืื . ืืขื ืืืื ืึทื ืงืจืึธืื ืืึธืืื ืื ืืืึทื ืืื ืึทืืข ืืืึทื ืจืขืกืืจืกื, ืึธืืขืจ ืืื ื ืืฉื ืืึทืื ืึธืืขืจ ืืืกืคืืจื ืืืฉืึทืืืึทืกืงืจืืคึผื.
ืคืืจืขืคืึธืงืก ืืื ืกืึทืคืึทืจื ืืึธื ื ืื ืฉืืืฆื ืืขื ืงืืืืื ืืื ืึทืืข. ืืึธืก ืืื ื ืืฉื ืึธื ืจืืจื ืื ืืึทืฉืจืืึทืืื ื, ืืืืึทื ืืจืึทืืืขืจื ืืขื ืขื ื ืืฉื ืคืืจืืื ืื ืฆื ื ืึธืืคืึธืืื ืื ืืืืขื; ืึธืืขืจ ื ืึธื ืืจืืืขืจืืง. ืคืืจืขืคืึธืงืก ืืื ืึธืคื ืคึฟืึทืจ ืืืื ืืึธืจ. ืขืก ืืขื ืขื ืจืืคึผืึธืจืฅ ืึทื Safari .
ืงืืฆืขืจ
ื ืืฆื:
<link rel= "preload">- ืืืขื ืืืจ ืืึทืจืคึฟื ืึท ืืืื ืืื ืึท ืืืกื ืกืขืงืื ืืขืก<link rel= "prefetch">- ืืืขื ืืืจ ืืึทืจืคึฟื ืื ืืืื ืืืืฃ ืืขืจ ืืืืึทืืขืจ ืืืึทื<link rel= "preconnect">- ืืืขื ืืืจ ืืืืกื ืึทื ืืืจ ืืืขื ืืึทืจืคึฟื ืึท ืืืื ืืึทืื, ืึธืืขืจ ืืืจ ืืึธื ื ืื ื ืึธื ืืืืกื ืืืึทื ืคืื URL<link rel= "dns-prefetch">- ืกืืืืืึทืจืื, ืืืขื ืืืจ ืืืืกื ืึทื ืืืจ ืืืขื ืืึทืจืคึฟื ืึท ืืืื ืืึทืื, ืึธืืขืจ ืืืจ ืืึธื ื ืื ื ืึธื ืืืืกื ืืืึทื ืคืื URL (ืคึฟืึทืจ ืขืืืขืจืข ืืจืึทืืืขืจื)<link rel= "prerender">- ืืืขื ืืืจ ืืขื ื ืืืืขืจ ืึทื ื ืืฆืขืจืก ืืืขืื ืืืื ืฆื ืึท ืืืืขืจ ืืืึทื ืืื ืืืจ ืืืืื ืฆื ืคืึทืจืืืืขืจื ืื ืืืืึทื
ืืงืืจ: www.habr.com