محمد عرفان رنجبران 
آنچه در این مقاله خواهید آموخت
آیا تا به حال فکر کردهاید که چگونه میتوان از تکنیکهای preload، prefetch، preconnect و prerender برای بهبود سرعت و تجربه کاربری وبسایت خود استفاده کرد؟ پس از مطالعه این مقاله، درخواهید یافت که هرکدام از این روشها چگونه و در چه شرایطی میتوانند بهینهترین عملکرد را برای وبسایت شما ارائه دهند. اما کدام یک از این تکنیکها برای نیازهای خاص شما مناسبتر است و چگونه میتوانید از آنها بهدرستی استفاده کنید تا در نهایت تجربهای بهتر برای کاربران و رتبهای بالاتر در موتورهای جستجو داشته باشید؟
افزایش سرعت وبسایتها یکی از مهمترین عوامل در بهبود تجربه کاربری و رتبهبندی در موتورهای جستجو است. تکنیکهای preload، prefetch، preconnect و prerender ابزارهایی هستند که میتوانند زمان بارگذاری وبسایت شما را بهطور قابل توجهی کاهش دهند.
در این مقاله، بهصورت جامع و با استفاده از مثالها، جداول و مطالعات موردی (case studies) به بررسی این چهار تکنیک میپردازیم تا بتوانید بهترین راهکارها را برای بهینهسازی سایت خود انتخاب کنید.
Preload چیست و چه زمانی باید از آن استفاده کنیم؟
Preload تکنیکی است که به مرورگر میگوید یک منبع (asset) خاص باید بلافاصله بارگذاری شود. به بیان سادهتر، از preload برای لود منابعی که فوراً در بخشهای اولیه صفحه نیاز داریم، استفاده میکنیم. این باعث میشود تا زمان بارگذاری بخشهای حیاتی صفحه کاهش یابد و تجربه کاربر بهبود پیدا کند.
مثال استفاده از preload
فرض کنید صفحه وب شما شامل یک فونت سفارشی و یک فایل CSS است که برای نمایش صحیح بخشهای اصلی سایت ضروریاند. اگر بخواهیم این فایلها فوراً بارگذاری شوند، از preload استفاده میکنیم:
در این مثال:
hrefبه مرورگر میگوید کدام فایل را باید بارگذاری کند.asنوع فایل (مانند style، script یا font) را مشخص میکند.crossoriginبرای مدیریت منابعی که از دامنههای دیگر بارگذاری میشوند، استفاده میشود.
Preload: استفاده درست و نادرست
Preload به مرورگر این دستور را میدهد که منابع مهم را قبل از بارگذاری سایر عناصر صفحه دریافت کند. این روش برای منابعی که برای نمایش سریع محتوای اصلی صفحه ضروری هستند، بسیار مفید است، مانند فایلهای CSS، فونتها، و تصاویر بزرگ.
سناریو استفاده درست:
یک وبسایت خبری با فونت سفارشی که در بالای صفحه استفاده شده است، از preload برای بارگذاری سریعتر فونتها استفاده میکند تا کاربران بدون تأخیر متنها را مشاهده کنند.
سناریو استفاده نادرست:
یک وبسایت کوچک که فقط در قسمت پایین صفحه از فونت سفارشی استفاده میکند، از preload برای این فونت استفاده کرده است. در این حالت، استفاده از preload باعث بارگذاری زودهنگام یک فونت غیرضروری میشود که میتواند باعث کاهش سرعت لود دیگر منابع حیاتی صفحه شود.
بهترین شیوه استفاده از Preload:
- از preload فقط برای منابع حیاتی و فوری استفاده کنید تا مرورگر بیش از حد درگیر نشود.
- اطمینان حاصل کنید که نوع منابع را به درستی تعیین کردهاید (مثلاً برای فونتها از
as="font"استفاده کنید).
Prefetch چیست و چه زمانی مناسب است؟
Prefetch برای بارگذاری منابعی استفاده میشود که ممکن است در آینده نیاز شوند، اما فوریتی برای لود آنها وجود ندارد. به عبارتی، مرورگر منابعی را که کاربر در حال حاضر به آن نیاز ندارد، اما ممکن است در صفحه بعدی مورد استفاده قرار گیرد، از قبل بارگذاری میکند.
مثال استفاده از prefetch
فرض کنید شما یک وبسایت چند صفحهای دارید و انتظار دارید کاربر بعد از مشاهده صفحه فعلی به صفحه بعدی برود. شما میتوانید فایلهای مورد نیاز صفحه بعدی را prefetch کنید:
<link rel="prefetch" href="/assets/next-page.js">در این مثال:
- مرورگر فایل
next-page.jsرا بارگذاری میکند، اما کاربر هنوز به آن نیاز ندارد. زمانی که کاربر به صفحه بعدی میرود، فایل از قبل آماده و در cache مرورگر ذخیره شده است.
Prefetch: استفاده درست و نادرست
Prefetch به مرورگر این امکان را میدهد که منابعی را که احتمالاً در آینده نزدیک نیاز خواهند بود، با اولویت پایین بارگذاری کند. این روش زمانی کاربرد دارد که کاربر احتمالاً به صفحات دیگری از سایت مراجعه خواهد کرد.
سناریو استفاده درست:
یک فروشگاه آنلاین از prefetch برای بارگذاری تصاویر محصولاتی استفاده میکند که در صفحه بعدی نمایش داده خواهند شد. به این ترتیب، وقتی کاربر به صفحه محصول بعدی مراجعه میکند، تصاویر از قبل بارگذاری شدهاند.
سناریو استفاده نادرست:
یک وبسایت ساده که اکثر کاربران در صفحه اصلی آن باقی میمانند، از prefetch برای بارگذاری منابع صفحاتی استفاده میکند که کاربران بهندرت به آنها مراجعه میکنند. این کار تنها باعث افزایش مصرف منابع سرور و پهنای باند کاربران میشود.
بهترین زمان استفاده از Prefetch:
- برای منابعی که در صفحات بعدی یا تعاملات آینده کاربر استفاده خواهند شد.
- برای کاهش زمان بارگذاری صفحات در آینده و بهبود تجربه کلی کاربر.
بهترین شیوهها:
- از prefetch فقط برای منابعی که به احتمال زیاد در آینده استفاده خواهند شد، استفاده کنید. لود منابعی که استفاده نمیشوند، باعث افزایش مصرف پهنای باند و کاهش کارایی میشود.
- از prefetch برای منابع حجیم که فوراً مورد نیاز نیستند، خودداری کنید.
| Preload | Prefetch |
|---|---|
| منابع حیاتی که فوراً نیاز داریم | منابعی که ممکن است در آینده استفاده شوند |
| بهبود زمان بارگذاری فعلی صفحه | بهبود زمان بارگذاری صفحات یا تعاملات آینده |
| استفاده محدود برای جلوگیری از اشباع مرورگر | مصرف پهنای باند کمتر به دلیل بارگذاری غیرفوری |
Preconnect چیست و چه زمانی باید از آن استفاده کنیم؟
Preconnect تکنیکی است که به مرورگر اجازه میدهد پیش از نیاز به ارتباط با یک دامنه، ارتباط خود را با آن برقرار کند. به عبارت دیگر، preconnect به مرورگر این امکان را میدهد که فرآیندهای DNS resolution، TCP handshake، و TLS handshake را زودتر انجام دهد. این کار باعث میشود تا وقتی مرورگر نیاز به دریافت منابع از دامنه مشخص شده دارد، بتواند آنها را سریعتر بارگذاری کند و تجربه کاربری بهبود یابد.
مثال استفاده از preconnect:
فرض کنید وبسایت شما از یک CDN برای بارگذاری تصاویر و فایلهای جاوا اسکریپت استفاده میکند. برای اینکه این فایلها سریعتر دریافت شوند، میتوانید از preconnect استفاده کنید:
htmlCopy code<link rel="preconnect" href="https://example-cdn.com" crossorigin>
در این مثال:
- href به مرورگر میگوید که ارتباط اولیه را با CDN برقرار کند.
- crossorigin برای مدیریت منابعی که از دامنههای دیگر بارگذاری میشوند، استفاده میشود.
Preconnect: استفاده درست و نادرست
Preconnect به مرورگر این امکان را میدهد که پیش از دریافت منابع، ارتباط اولیه خود را با دامنههای خارجی برقرار کند. این روش برای منابعی که از دامنههای دیگر مانند فونتها یا فایلهای جاوا اسکریپت بارگذاری میشوند، بسیار مفید است.
سناریو استفاده درست: یک فروشگاه آنلاین که تصاویر محصولاتش از یک CDN خارجی بارگذاری میشوند، از preconnect استفاده میکند تا زمان بارگذاری تصاویر کاهش یابد. این کار باعث میشود تصاویر سریعتر به کاربر نمایش داده شوند و تجربه خرید بهتری داشته باشند.
سناریو استفاده نادرست: یک وبسایت از preconnect برای تعداد زیادی دامنه استفاده کرده است، حتی دامنههایی که بهندرت از آنها استفاده میشود. این کار میتواند باعث مصرف غیرضروری منابع سرور و بار اضافی بر روی دستگاه کاربر شود.
بهترین شیوه استفاده از Preconnect:
- از preconnect برای دامنههایی استفاده کنید که بهطور مداوم و فوری در اولین لود صفحه مورد نیاز هستند.
- تعداد دامنههای preconnect را محدود کنید تا مرورگر بیش از حد درگیر نشود.
Preconnect: استفاده درست و نادرست
Preconnect به مرورگر این امکان را میدهد که پیش از نیاز به ارتباط با یک دامنه خاص، ارتباط خود را با آن برقرار کند. این کار به کاهش زمان لازم برای DNS resolution، TCP handshake، و TLS handshake کمک میکند.
سناریو استفاده درست:
یک وبسایت که از یک CDN برای بارگذاری تصاویر و فایلهای جاوا اسکریپت استفاده میکند، از preconnect برای بهبود زمان بارگذاری فایلها بهره میبرد. به این ترتیب، مرورگر سریعتر به CDN متصل شده و فایلها را دریافت میکند.
سناریو استفاده نادرست:
یک وبسایت از preconnect برای تعداد زیادی دامنه استفاده میکند، حتی دامنههایی که احتمالاً در بارگذاری صفحه نیاز نخواهند بود. این کار میتواند باعث مصرف غیرضروری منابع و بار اضافی بر روی سرور شود.
در جدول زیر، تفاوتها و شباهتهای تکنیکهای preload، prefetch، و preconnect بهصورت خلاصه و قابلفهم مقایسه شده است:
| ویژگیها | Preload | Prefetch | Preconnect |
|---|---|---|---|
| هدف | بارگذاری فوری منابع حیاتی برای اولین نمایش صفحه | بارگذاری منابعی که در صفحات آینده ممکن است نیاز شوند | برقراری زودهنگام ارتباط با یک دامنه برای کاهش تأخیر |
| اولویت بارگذاری | بالا؛ بارگذاری منابع بهسرعت و قبل از دیگر درخواستها | پایین؛ بارگذاری منابع با اولویت کمتر برای استفادههای آینده | بدون بارگذاری منابع؛ تنها ارتباط اولیه با دامنه برقرار میشود |
| زمان استفاده | زمانی که منابع برای رندر اولیه صفحه ضروری هستند | زمانی که کاربر به احتمال زیاد به صفحات بعدی میرود | وقتی نیاز به بارگذاری سریع منابع از یک دامنه خارجی داریم |
| نوع منابع | CSS، فونتها، تصاویر، جاوا اسکریپتهای حیاتی | HTML صفحات آینده، اسکریپتها، تصاویر بزرگ برای صفحات بعدی | منابع از دامنههای خارجی مانند CDNها و APIها |
| مثال | <link rel="preload" href="style.css" as="style"> | <link rel="prefetch" href="next-page.html" as="document"> | <link rel="preconnect" href="https://cdn.example.com"> |
| مزایا | بهبود زمان بارگذاری صفحه اصلی، بهبود تجربه کاربری | کاهش زمان بارگذاری صفحات بعدی، بهبود تعامل کاربر | کاهش زمان ارتباط با دامنههای خارجی، بهبود زمان لود منابع |
| معایب | میتواند به بارگذاری غیرضروری منجر شود اگر بهدرستی استفاده نشود | تأثیر کم در رندر اولیه، ممکن است منابع غیرضروری بارگذاری شوند | نیاز به دقت در انتخاب دامنهها، محدودیت تعداد ارتباطهای فعال |
این جدول به شما کمک میکند تا انتخاب بهتری بین این تکنیکها داشته باشید و بتوانید بسته به نیازهای خاص وبسایت خود از آنها بهره ببرید.
Prerender چیست و چه زمانی باید از آن استفاده کنیم؟
Prerender تکنیکی است که به مرورگر دستور میدهد یک صفحه را پیش از اینکه کاربر به آن مراجعه کند، بهطور کامل رندر کند. به این معنی که محتوا، تصاویر و اسکریپتهای صفحه از قبل بارگذاری شدهاند و به محض کلیک کاربر، صفحه بدون هیچگونه تأخیری نمایش داده میشود. این روش برای بهبود سرعت نمایش صفحات بعدی بسیار کاربردی است.
مثال استفاده از prerender:
فرض کنید وبسایت شما شامل چندین صفحه آموزشی است که کاربران معمولاً بهترتیب از آنها بازدید میکنند. میتوانید با استفاده از prerender، صفحه بعدی را پیش از کلیک کاربر آماده کنید:
htmlCopy code<link rel="prerender" href="https://example.com/next-page.html">
در این مثال:
- href به مرورگر میگوید که صفحه بعدی را بهطور کامل بارگذاری و آماده نمایش نگه دارد.
Prerender: استفاده درست و نادرست
Prerender به مرورگر اجازه میدهد که صفحات آینده را بهطور کامل بارگذاری و رندر کند. این کار باعث میشود کاربران پس از کلیک بر روی لینک، بدون تأخیر صفحه بعدی را مشاهده کنند.
سناریو استفاده درست: یک وبسایت آموزشی که کاربران به احتمال زیاد پس از پایان یک درس به درس بعدی میروند، از prerender برای بارگذاری صفحه درس بعدی استفاده میکند. این کار باعث میشود که کاربران بلافاصله پس از کلیک، محتوای درس بعدی را ببینند.
سناریو استفاده نادرست: یک وبسایت خبری که لینکهای زیادی به مقالات مختلف دارد، از prerender برای تمام لینکها استفاده کرده است. این کار باعث میشود منابع زیادی برای رندر کردن صفحاتی که کاربر ممکن است هیچوقت به آنها مراجعه نکند، مصرف شود.
بهترین شیوه استفاده از Prerender:
- فقط برای صفحاتی که احتمال بالایی برای کلیک کاربران دارند، از prerender استفاده کنید.
- مراقب باشید که prerender میتواند مصرف پهنای باند و منابع سرور را افزایش دهد، بنابراین آن را با دقت به کار ببرید.
Prerender: استفاده درست و نادرست
Prerender به مرورگر این امکان را میدهد که یک صفحه کامل را پیش از اینکه کاربر بر روی لینک آن کلیک کند، بارگذاری و رندر کند. این تکنیک برای صفحاتی که احتمال زیادی وجود دارد کاربر به آنها مراجعه کند، بسیار مناسب است.
مثال کاربردی استفاده از prerender
<link rel="prerender" href="https://example.com/next-page.html">سناریو استفاده درست prerender:
یک وبسایت آموزشی که کاربر به احتمال زیاد پس از خواندن یک درس به درس بعدی میرود، از prerender برای آمادهسازی صفحه درس بعدی استفاده میکند. به این ترتیب، صفحه بعدی بهسرعت برای کاربر آماده نمایش میشود.
سناریو استفاده نادرست prerender:
یک وبسایت با چندین لینک به صفحات مختلف، از prerender برای همه این صفحات استفاده کرده است. این کار باعث مصرف بیش از حد پهنای باند و منابع سرور میشود، زیرا صفحاتی که کاربر شاید هیچوقت به آنها مراجعه نکند، رندر میشوند.
مقایسه کامل: Preload، Prefetch، Preconnect و Prerender
| ویژگی | Preload | Prefetch | Preconnect | Prerender |
|---|---|---|---|---|
| اولویت بارگذاری | بالا؛ مناسب برای منابع حیاتی | پایین؛ مناسب برای منابع در آینده نزدیک | پیشزمینهای برای کاهش زمان برقراری ارتباط | بسیار بالا؛ صفحه بهطور کامل از قبل رندر میشود |
| زمان استفاده | برای منابعی که در رندر اولیه نیاز هستند | برای منابع صفحات آینده | برای ارتباط سریعتر با دامنههای خارجی | برای صفحاتی که احتمالاً کاربر به آنها میرود |
| مثالهای کاربردی | بارگذاری فونتها، CSS، تصاویر | بارگذاری HTML صفحات بعدی، جاوا اسکریپتهای آینده | ارتباط با دامنههای CDN یا API | رندر کردن کامل صفحه بعدی قبل از کلیک کاربر |
| مزایا | کاهش زمان رندر اولیه و بهبود تجربه کاربری | بهبود زمان بارگذاری صفحات بعدی | کاهش تأخیر در دریافت منابع از دامنههای خارجی | تجربه کاربری بینظیر برای صفحات بعدی |
| معایب | ممکن است بار اضافی به سرور وارد کند | تأثیر کمتر در بهبود عملکرد صفحه اصلی | مناسب برای تعداد محدودی از دامنهها | مصرف بالای منابع و مناسب برای صفحاتی با احتمال کلیک زیاد |
نتیجهگیری: بهترین انتخاب برای وبسایت شما کدام است؟
انتخاب بین preload، prefetch، preconnect و prerender بستگی به نیازهای خاص وبسایت شما دارد. اگر به دنبال بهبود زمان بارگذاری محتوای اصلی صفحه هستید، preload بهترین گزینه است. برای آمادهسازی منابع صفحات بعدی، prefetch و prerender میتوانند بسیار مفید باشند. اگر بهینهسازی زمان ارتباط با دامنههای خارجی برای شما مهم است، preconnect انتخاب مناسبی خواهد بود.
با پیادهسازی صحیح این تکنیکها، میتوانید تجربه کاربری بهتری فراهم کرده و رتبه وبسایت خود در موتورهای جستجو را بهبود بخشید.
