ProHoster > بلاګ > اداره > پری لوډ، پری فیچ او نور ټګونه

پری لوډ، پری فیچ او نور ټګونه

موجود دي د ویب فعالیت ښه کولو لپاره ډیری لارې. یو له دوی څخه د مینځپانګې پری لوډ کول دي چې وروسته به ورته اړتیا وي. د سی ایس ایس پری پروسس کول، د بشپړ مخ مخکی پری رینډینګ یا د ډومین نوم حل کول. موږ هرڅه دمخه کوو، او بیا سمدستي پایله ښکاره کوو! په زړه پورې غږونه.

هغه څه چې حتی کولر دی دا دی چې دا خورا ساده پلي کیږي. پنځه ټګونه براوزر ته د لومړنیو کړنو د ترسره کولو امر ورکړئ:

<link rel="prefetch" href="/ps/style.css" as="style" />
<link rel="preload" href="/ps/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" />


راځئ چې په لنډه توګه تشریح کړو چې دوی څه کوي او کله یې کاروي.

لاړ شه: پریلوډ · وړاندې کول · مخکې نښلول · dns-prefetch · وړاندې کول

پریلوډ

<link rel= "preload"> براوزر ته وايي چې څومره ژر چې امکان ولري یوه سرچینه (لکه سکریپټ یا سټایل شیټ) بار او کیش کړئ. دا ګټور دی کله چې سرچینې ته اړتیا وي څو ثانیې وروسته له دې چې پا pageه بار شي - او تاسو غواړئ پروسه ګړندۍ کړئ.

براوزر د بارولو وروسته د سرچینې سره هیڅ نه کوي. سکریپټونه نه اجرا کیږي، سټایل شیټونه نه پلي کیږي. سرچینه په ساده ډول ساتل کیږي او سمدلاسه د غوښتنې پراساس چمتو کیږي.

العروض

<link rel="preload" href="/ps/style.css" as="style" />

href هغه سرچینې ته اشاره وکړئ چې تاسو یې ډاونلوډ کول غواړئ.

as کیدای شي هر څه وي چې په براوزر کې ډاونلوډ کیدی شي:

  • style د سټایل شیټونو لپاره
  • script د سکریپټونو لپاره،
  • font د فونټونو لپاره،
  • fetch په کارولو سره بار شوي سرچینو لپاره fetch() او یا XMLHttpRequest,
  • بشپړ لیست وګورئ په MDN کې.

دا مهمه ده چې د ځانګړتیاوو مشخص کړئ 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" />
  • که تاسو د طریقې سره سم خپل سټایلونه جلا کړئ مهم CSS په دوه برخو ویشل شوي، مهم (د فوري وړاندې کولو لپاره) او غیر مهم: 
    <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="/ps/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="/ps/style.css" as="style" />

href هغه سرچینې ته اشاره وکړئ چې تاسو یې ډاونلوډ کول غواړئ.

as کیدای شي هر څه وي چې په براوزر کې ډاونلوډ کیدی شي:

  • style د سټایل شیټونو لپاره
  • script د سکریپټونو لپاره،
  • font د فونټونو لپاره،
  • fetch په کارولو سره بار شوي سرچینو لپاره fetch() او یا XMLHttpRequest,
  • بشپړ لیست وګورئ په MDN کې.

دا مهمه ده چې د ځانګړتیاوو مشخص کړئ as - دا د براوزر سره مرسته کوي په سمه توګه د ډاونلوډونو لومړیتوب او مهالویش.

کله چې کارول کیږي

د نورو پاڼو څخه سرچینې پورته کولو لپاره، که تاسو د بلې پاڼې څخه سرچینې ته اړتیا لرئ، او تاسو غواړئ چې دا پری لوډ کړئ نو بیا د دې پاڼې رینډینګ ګړندی کړئ. د مثال په ډول:

  • تاسو آنلاین پلورنځی لرئ، او 40٪ کاروونکي د محصول پاڼې لپاره کور پاڼه پریږدي. کارول <link rel= "prefetch">د محصول پاڼې وړاندې کولو لپاره د CSS او JS فایلونو پورته کول.
  • تاسو د یوې پاڼې غوښتنلیک لرئ، او مختلف پاڼې مختلف کڅوړې پورته کوي. کله چې یو کاروونکی یوې پاڼې ته مراجعه کوي، د ټولو پاڼو لپاره کڅوړې چې دا ورسره اړیکه لري مخکې له مخکې پورته کیدی شي.

دا امکان لري چې دا ټاګ په خوندي ډول تر هر حد پورې وکارول شي.. براوزر معمولا د ټیټ لومړیتوب سره پری فیچ مهالویش کوي، نو دا هیڅوک نه ځوروي. یوازې په یاد ولرئ چې دا د کاروونکي ترافیک مصرفوي، کوم چې پیسې مصرفوي.

د بیړنیو غوښتنو لپاره نه. مه کاروئ <link rel= "prefetch">، کله چې سرچینې په څو ثانیو کې اړتیا وي. په دې حالت کې، کارول <link rel= "preload">.

تفصيلات وګورئ

اختیاري ټګ. براوزر اړتیا نلري چې دا لارښوونې تعقیب کړي؛ دا ممکن دا له پامه غورځوي، د بیلګې په توګه، په ورو پیوستون کې.

په کروم کې لومړیتوب. په کروم کې <link rel= "prefetch"> معمولا د لږترلږه لومړیتوب سره اجرا کیږي (وګورئ بشپړ لومړیتوب جدول)، دا دی، د هر څه بارولو وروسته.

مخکې نښلول

<link rel= "preconnect"> له براوزر څخه غوښتنه کوي چې مخکې له دې ډومین سره وصل شي کله چې تاسو غواړئ په راتلونکي کې د پیوستون تنظیم ګړندی کړئ.

براوزر باید اړیکه رامینځته کړي که چیرې دا د نوي دریمې ډلې ډومین څخه کومې سرچینې ترلاسه کړي. د مثال په توګه، که دا د ګوګل فونټونه بار کړي، د CDN څخه فونټونه عکس العمل وکړي، یا د API سرور څخه د 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 او د ګوګل فونټونه کاروي. دوی په دوه مرحلو کې ډاونلوډ شوي: لومړی، د CSS فایل د ډومین څخه ډاونلوډ شوی fonts.googleapis.comبیا دا فایل د فونټونو غوښتنه کوي fonts.gstatic.com. تاسو نه پوهیږئ چې د کوم ځانګړي فونټ فایلونه دي fonts.gstatic.com تاسو به تر هغه وخته پورې اړتیا ولرئ چې تاسو د CSS فایل پورته نه کړئ، نو موږ کولی شو یوازې مخکې له مخکې لومړنۍ اړیکه جوړه کړو.

د دریمې ډلې سکریپټ یا سټایل یو څه ګړندي کولو لپاره دا ټاګ وکاروئ د مخکې جوړ شوي ارتباط له امله.

ډیر استعمال مه کوئ. د پیوستون رامینځته کول او ساتل د پیرودونکي او سرور دواړو لپاره ګران عملیات دي. دا ټګ د اعظمي 4-6 ډومینونو لپاره وکاروئ.

تفصيلات وګورئ

اختیاري ټګ. براوزر اړتیا نلري چې دا لارښوونې تعقیب کړي او ممکن یې له پامه غورځوي، د بیلګې په توګه، که ډیری اړیکې لا دمخه رامینځته شوي وي یا په کوم بل حالت کې.

د پیوستون په پروسه کې څه شامل دي؟. د هر سایټ سره د نښلولو لپاره، براوزر باید لاندې کار وکړي:

  • د DNS حل. د سرور IP پته ومومئ (216.58.215.78د ټاکل شوي ډومین نوم لپاره (google.com).
  • د TCP لاسونه. د سرور سره د TCP پیوستون پیل کولو لپاره پاکټونه (پیرودونکي → سرور → پیرودونکي) تبادله کړئ.
  • د TLS لاسونه (یوازې د HTTPS سایټونه). د پیکټ تبادلې دوه پړاوونه (پیرودونکي → سرور → مراجع → سرور → پیرودونکی) د خوندي TLS سیشن پیل کولو لپاره.

یادونه: HTTP/3 به د لاس اخیستنې میکانیزم ته وده ورکړي او ګړندي کړي، مګر دا لاهم اوږده لاره ده.

dns-prefetch

<link rel= "dns-prefetch"> له براوزر څخه غوښتنه کوي چې دمخه د ډومین لپاره د DNS ریزولوشن ترسره کړي که تاسو ژر تر ژره ورسره وصل شئ او غواړئ لومړني پیوستون ګړندی کړئ.

براوزر باید د ډومین IP پته وټاکي که چیرې دا د نوي دریمې ډلې ډومین څخه کومې سرچینې بیرته ترلاسه کړي. د مثال په توګه، د ګوګل فونټونو پورته کول، د CDN څخه د فونټونو عکس العمل، یا د API سرور څخه د JSON ځواب غوښتنه کول.

د هر نوي ډومین لپاره، د DNS ریکارډ ریزولوشن عموما د 20-120 ms په اړه وخت نیسي. دا یوازې د ورکړل شوي ډومین څخه د لومړۍ سرچینې بارولو اغیزه کوي، مګر بیا هم ځنډ معرفي کوي. که موږ دمخه د 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، او د ګوګل فونټونه کاروي. دوی په دوه مرحلو کې ډاونلوډ شوي: لومړی، د 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" /> لخوا ملاتړ شوی د IE10 او سفاري 5 راهیسې. <link rel= "preconnect"> په کروم او فایرفوکس کې د یو څه مودې لپاره ملاتړ شوی و ، مګر یوازې په 11.1 کې سفاري ته اضافه شوی و او لا هم په IE/Edge کې نه ملاتړ کیږي. که تاسو د دې براوزرونو ملاتړ ته اړتیا لرئ ، وکاروئ <link rel= "dns-prefetch" /> لپاره د بیک اپ اختیار په توګه <link rel= "preconnect">.
  • تاسو غواړئ د 4-6 څخه ډیرو ډومینونو ته اړیکې ګړندۍ کړئ. ټګ <link rel= "preconnect"> دا سپارښتنه نه کیږي چې له 4-6 څخه ډیر ډومینونو سره وکاروئ ، ځکه چې د پیوستون رامینځته کول او ساتل یو ګران کار دی. <link rel= "dns-prefetch" /> لږ سرچینې مصرفوي، نو د اړتیا په صورت کې یې وکاروئ.

تفصيلات وګورئ

اختیاري ټګ. براوزر د دې لارښوونې تعقیب کولو ته اړتیا نلري، نو دا ممکن د DNS ریزولوشن ترسره نکړي، د بیلګې په توګه، که چیرې په پاڼه کې ډیری داسې ټاګونه وي یا په کوم بل حالت کې.

DNS څه شی دی؟. په انټرنیټ کې هر سرور یو ځانګړی IP پته لري، کوم چې داسې ښکاري 216.58.215.78. د سایټ نوم معمولا د براوزر په پته بار کې داخلیږي (د مثال په توګه، google.com)، او د DNS (ډومین نوم سیسټم) سرورونه دا د سرور IP پتې سره سمون لري (216.58.215.78).

د IP پته ټاکلو لپاره، براوزر باید د DNS سرور پوښتنه وکړي. دا 20-120 ms اخلي کله چې د نوي دریمې ډلې ډومین سره وصل شي.

DNS زیرمه شوی، که څه هم خورا معتبر نه دی. ځینې ​​OS او براوزرونه د DNS پوښتنو زیرمه کوي: دا به په تکراري پوښتنو کې وخت خوندي کړي ، مګر کیشینګ باندې تکیه نشي کولی. په لینوکس کې دا معمولا کار نه کوي. کروم د DNS کیچ لري، مګر دا یوازې د یوې دقیقې لپاره دوام کوي. وینډوز د پنځو ورځو لپاره د DNS ځوابونه زیرمه کوي.

وړاندې کول

<link rel= "prerender"> له براوزر څخه غوښتنه کوي چې یو آر ایل ډاونلوډ کړي او په یو نه لیدونکي ټب کې یې ښکاره کړي. کله چې کاروونکي په لینک کلیک کوي، پاڼه باید سمدلاسه ښکاره شي. دا ګټور دی که تاسو ډاډه یاست چې کاروونکي به یو ځانګړي پاڼې ته مراجعه وکړي او غواړي د هغې نندارې ته چټکتیا ورکړي.

سره له دې (یا له امله) د دې ټاګ استثنایی تاثیرات ، په 2019 کې <link rel= "prerender"> په لوی براوزرونو کې کمزوری ملاتړ شوی. نور جزیات وګورئ. لاندې.

العروض

<link rel="prerender" href="https://my-app.com/pricing" />

href هغه URL ته اشاره وکړئ چې تاسو غواړئ په شالید کې رینډر کول پیل کړئ.

کله چې کارول کیږي

کله چې تاسو واقعیا ډاډه یاست چې کاروونکي به یو ځانګړي پاڼې ته لاړ شي. که تاسو یو "تونل" لرئ چې له لارې یې 70٪ لیدونکي پاڼې A ته ځي، بیا B پاڼې ته ځي <link rel= "prerender"> په پاڼه کې A به د B پاڼې د ښودلو کې مرسته وکړي.

ډیر استعمال مه کوئ. مخکې وړاندې کول د بینډ ویت او حافظې له مخې خورا ګران دي. مه کاروئ <link rel= "prerender"> له یوې څخه ډیر پاڼې لپاره.

تفصيلات وګورئ

اختیاري ټګ. براوزر اړتیا نلري چې دا لارښوونې تعقیب کړي او ممکن یې له پامه غورځوي، د بیلګې په توګه، په ورو پیوستون کې یا کله چې کافي وړیا حافظه شتون نلري.

د حافظې خوندي کولو لپاره کروم بشپړ رینډرینګ نه کوياو یوازې د NoState پریلوډ. دا پدې مانا ده چې کروم پاڼه او د هغې ټولې سرچینې باروي، مګر جاواسکریپټ نه وړاندې کوي یا اجرا کوي.

فایرفوکس او سفاري د دې ټګ ملاتړ نه کوي. دا د ځانګړتیاوو څخه سرغړونه نه کوي، ځکه چې براوزر د دې لارښوونې تعقیب ته اړتیا نلري؛ مګر بیا هم غمجن. د تطبیق بګ فایرفوکس د اوو کلونو لپاره خلاص دی. داسې راپورونه شته چې صفري د دې ټګ ملاتړ هم نه کوي.

لنډیز

کارول:

  • <link rel= "preload"> - کله چې تاسو په څو ثانیو کې سرچینې ته اړتیا لرئ
  • <link rel= "prefetch"> - کله چې تاسو په راتلونکې پاڼه کې سرچینې ته اړتیا لرئ
  • <link rel= "preconnect"> - کله چې تاسو پوهیږئ چې تاسو به ډیر ژر سرچینې ته اړتیا ولرئ، مګر تاسو لاهم د هغې بشپړ URL نه پیژنئ
  • <link rel= "dns-prefetch"> - په ورته ډول، کله چې تاسو پوهیږئ چې تاسو به ډیر ژر یوې سرچینې ته اړتیا ولرئ، مګر تاسو لاهم د هغې بشپړ URL نه پیژنئ (د زړو براوزرونو لپاره)
  • <link rel= "prerender"> - کله چې تاسو ډاډه یاست چې کاروونکي به یوې ټاکلې پاڼې ته لاړ شي، او تاسو غواړئ د هغې نندارې ګړندۍ کړئ

سرچینه: www.habr.com

Add a comment