افزایش سرعت وبسایت

هنگام بارگذاری یک اسکریپت در یک صفحه HTML ، باید مراقب باشید که عملکرد بارگذاری صفحه و سرعت وبسایت را آسیب نرساند.بنا به اینکه کجا و چگونه اسکریپت های خود را به یک صفحه HTML اضافه کنید ، زمان بارگذاری را تحت تاثیر قرار می دهد و باعث افزایش سرعت وبسایت می شود .

اسکریپت به طور معمول به صورت زیر نوشته می شد.

هر زمان که تجزیه کننده HTML این خط را پیدا می کند ، یک درخواست برای واکشی اسکریپت ساخته خواهد شد و اسکریپت اجرا می شود

هنگامی که این فرایند انجام می شود ، تجزیه می تواند از سر گرفته و بقیه نسخه متنی را تجزیه و تحلیل می کند .

همانطور که می توانید تصور کنید ، این عملیات می تواند تاثیر بسیار زیادی در زمان بارگذاری صفحه داشته باشد.

اگر اسکریپت کمی طولانی تر از حد انتظار طول می کشد ، برای مثال اگر شبکه کمی کند است و یا اگر شما بر روی یک دستگاه تلفن همراه هستید و اتصال کمی درهم و برهم است.

بازدید کننده به احتمال زیاد یک صفحه خالی را ببینید تا اسکریپت لود شده و اجرا شود.

وقتی برای اولین بار HTML را یاد می گیرید ، به شما گفته می شود که برچسب های اسکریپت در <head> tag قرار دارند:

<html>

<head>

<title>Title</title>

</head>

<body>

…

</body>

</html>

همانطور که قبلا گفته شد، زمانی که تجزیه کننده این خط را پیدا می کند ، به دنبال واکشی اسکریپت می رود و آن را اجرا می کند.

سپس ، پس از انجام کامل این کار، به سراغ تجزیه body می رود.

این بد است چرا که تاخیر زیادی را سبب می شود و از افزایش سرعت وبسایت جلوگیری می کند.

یک راه حل بسیار معمول برای این موضوع این است که تگ اسکریپت را پایین صفحه قرار دهید ، درست قبل از بسته شدن برچسب </body>.

با انجام این کار ، اسکریپت بعد از اینکه تمام پیج ها لود و اجرا شد، اجرا می شود .

که به نسبت بهبود زیادی خواهد داشت.

این بهترین راهکاریست که می توانید برای مرور گر های قدیمی تر که defer و async را ساپورت نمی کنند بکار بگیرید .

Defer و Async

هر دو آن ها صفت های Boolean هستند و مثل هم استفاده می شوند.

async در مرورگرهای جدید قابل بکارگیریست ، در حالی که مرورگرهای قدیمی تر از defer پشتیبانی می کنند.

این ویژگی ها تنها در هنگام استفاده از اسکریپت در قسمت head صفحه قرار می گیرند

و اگر شما اسکریپت را در body بگذارید بی فایده هستند.

مقایسه کارایی

بدون استفاده از defer async در head

در اینجا می بینید که چگونه یک صفحه یک اسکریپت را بدون defer یا async لود می کند:

بدون استفاده از defer یا async در head

تجزیه تا زمانی که اسکریپت برداشته شده متوقف شده است ، بعد از انجام کامل تجزیه و تحلیل ادامه می یابد.

بدون استفاده از defer async در body

در اینجا چگونگی لود اسکریپت را با قرار دادن آن در انتهای body می بینید :

بدن استفاده از defer و async

تجزیه بدون هیچ گونه مکث انجام می شود ، و زمانی که تمام شد ، اسکریپت آورده شده سپس اجرا می شود .

تجزیه قبل ازاینکه اسکریپت حتی دانلود شود انجام شده است بنابراین با افزایش سرعت وبسایت به کاربر نمایش داده می شود.

Async در head

در اینجا چگونگی لود یک اسکریپت با async ، قرار داده در برچسب head را می بینید :

async در head

اسکریپت به صورت موازی برداشته شده است ، و هنگامی که آن را آماده شد تجزیه HTML متوقف می شود برای اجرا اسکریپت سپس ادامه میابد.

Defer در head

در اینجا چگونگی لود یک اسکریپت با defer، قرار داده در برچسب head را می بینید :

Defer در Head

اسکریپت به صورت موازی برداشته شده است ، پس از تجزیه HTML ، اجرا می شود .

تجزیه دقیق مثل زمانی که اسکریپت را در body می گذاریم تمام می شود با این تفات که این بار دانلود شده است از قبل و سریع اجرا می شود .

مقایسه defer و async

Async تجزیه تحلیل را بلوک می کند در حالی که defer نمی کند .

هیچ کدام بلوکه شدن رندر را گارانتی نمی کنند.

بهتربن راه کدام است

بهترین کاری که باید انجام دهید برای سرعت بخشیدن به بارگذاری صفحه خود در هنگام استفاده از اسکریپت ها این است که آنها را در head قرار دهید و صفت defer را به آن اضافه کنید.

این سناریو باعث افزایش سرعت رویداد domInteractive است.

با توجه به جوانب مثبت defer ، به نظر می رسد انتخاب بهتری از async است

مگردر مواردی که به تاخیر افتادن رندر اول از نظر شما مسئله ای نباشد.

منبع:

در زیر نسخهٔ به‌روز شدهٔ مقاله شما آمده است. ایرادهای قسمت قبلی در همان قسمت با [اصلاح] مشخص شده‌اند. مطلب جدید نیز با رعایت اصول SEO و GEO (بهینه‌سازی برای موتورهای جستجوی هوش مصنوعی) و با توجه به «نت ملی» به انتها اضافه شده است.

—

how to improve speed of website

سئو، بهینه‌سازی سرعت سایت، حل مشکل سایت

[تاریخ به‌روزرسانی: ۲۳ دی ۱۳۹۸] – [اصلاح و تکمیل: ۱۸ اردیبهشت ۱۴۰۵]

—

افزایش سرعت وبسایت

هنگام بارگذاری یک اسکریپت در یک صفحه HTML ، باید مراقب باشید که عملکرد بارگذاری صفحه و سرعت وبسایت را آسیب نرساند. بنا به اینکه کجا و چگونه اسکریپت‌های خود را به یک صفحه HTML اضافه کنید ، زمان بارگذاری را تحت تأثیر قرار می‌دهد و باعث افزایش سرعت وبسایت می‌شود.

اسکریپت به طور معمول به صورت زیر نوشته می‌شد:

“`html
<script src=”script.js”></script>
“`

هر زمان که تجزیه‌کننده HTML این خط را پیدا می‌کند ، یک درخواست برای واکشی اسکریپت ساخته خواهد شد و اسکریپت اجرا می‌شود. هنگامی که این فرایند انجام می‌شود ، تجزیه می‌تواند از سر گرفته و بقیه نسخه متنی را تجزیه و تحلیل کند.

همانطور که می‌توانید تصور کنید ، این عملیات می‌تواند تأثیر بسیار زیادی در زمان بارگذاری صفحه داشته باشد. اگر اسکریپت کمی طولانی‌تر از حد انتظار طول بکشد (مثلاً شبکه کند است یا روی دستگاه تلفن همراه با اتصال نامناسب هستید)، بازدیدکننده به احتمال زیاد یک صفحه خالی ببیند تا اسکریپت لود شده و اجرا شود.

وقتی برای اولین بار HTML را یاد می‌گیرید ، به شما گفته می‌شود که برچسب‌های اسکریپت در تگ <head> قرار دارند:

“`html
<html>
<head>
<title>Title</title>
<script src=”script.js”></script>
</head>
<body>
…
</body>
</html>
“`

همانطور که قبلاً گفته شد، زمانی که تجزیه‌کننده این خط را پیدا می‌کند، به دنبال واکشی اسکریپت می‌رود و آن را اجرا می‌کند. سپس، پس از انجام کامل این کار، به سراغ تجزیه body می‌رود. این بد است چرا که تأخیر زیادی را سبب می‌شود و از افزایش سرعت وبسایت جلوگیری می‌کند.

یک راه‌حل بسیار معمول برای این موضوع این است که تگ اسکریپت را پایین صفحه قرار دهید، درست قبل از بسته شدن برچسب </body>. با انجام این کار، اسکریپت بعد از اینکه تمام محتوای صفحه لود و اجرا شد، اجرا می‌شود که به نسبت بهبود زیادی خواهد داشت. این بهترین راهکاریست که می‌توانید برای مرورگرهای قدیمی‌تر که defer و async را پشتیبانی نمی‌کنند به کار بگیرید.

[اصلاح] پشتیبانی مرورگرها:
برخلاف متن اصلی که اشاره کرد «async در مرورگرهای جدید و defer در مرورگرهای قدیمی»، واقعیت این است که هر دو صفت async و defer از IE10 به بعد پشتیبانی می‌شوند. مرورگرهای خیلی قدیمی (مثل IE9 و پایین‌تر) هیچکدام را پشتیبانی نمی‌کنند. همچنین defer در مرورگرهای قدیمی‌تر (مثل IE9) نادیده گرفته می‌شد، اما async هم وضعیت مشابهی دارد. توصیه امروزی: برای اطمینان بیشتر، اسکریپت‌های حیاتی را با defer در <head> قرار دهید و برای اسکریپت‌های کاملاً مستقل (مثل آنالیتیکس) می‌توانید از async استفاده کنید.

—

Defer و Async

هر دو آن‌ها صفت‌های Boolean هستند و مثل هم استفاده می‌شوند:

“`html
<script async src=”script.js”></script>
<script defer src=”script.js”></script>
“`

[اصلاح] کاربرد در <body>:
در متن اصلی اشاره شده «این ویژگی‌ها تنها در هنگام استفاده از اسکریپت در قسمت head صفحه قرار می‌گیرند و اگر شما اسکریپت را در body بگذارید بی‌فایده هستند». این جمله کاملاً دقیق نیست. صفت‌های async و defer در هر جای صفحه که قرار بگیرند (چه در <head> و چه در <body>) کار می‌کنند، به شرطی که اسکریپت دارای صفت src باشد. اما توصیه استاندارد این است که اسکریپت‌های دارای defer یا async را در <head> قرار دهید تا مرورگر زودتر متوجه آن‌ها شود و دانلود موازی را شروع کند.

—

مقایسه کارایی

بدون استفاده از defer یا async در head
تجزیه تا زمانی که اسکریپت برداشته شده متوقف می‌شود، بعد از انجام کامل تجزیه و تحلیل ادامه می‌یابد.

بدون استفاده از defer یا async در body (درست قبل از </body>)
تجزیه بدون هیچ گونه مکث انجام می‌شود و زمانی که تمام شد، اسکریپت آورده شده سپس اجرا می‌شود. تجزیه قبل از اینکه اسکریپت حتی دانلود شود انجام شده است، بنابراین با افزایش سرعت وبسایت به کاربر نمایش داده می‌شود.

Async در head
اسکریپت به صورت موازی برداشته می‌شود و هنگامی که آماده شد، تجزیه HTML متوقف می‌شود برای اجرای اسکریپت، سپس ادامه می‌یابد.

Defer در head
اسکریپت به صورت موازی برداشته می‌شود، پس از اتمام تجزیه HTML اجرا می‌شود. تجزیه دقیق مثل زمانی که اسکریپت را در body می‌گذاریم تمام می‌شود با این تفاوت که این بار دانلود از قبل انجام شده و سریع اجرا می‌شود.

—

مقایسه defer و async

· Async تجزیه را بلوک می‌کند (اما نه همیشه – فقط در لحظه اجرا)
· Defer هرگز تجزیه را بلوک نمی‌کند
· هیچکدام بلوکه شدن رندر را تضمین نمی‌کنند (برای رندر اول باید از CSS حیاتی و اسکریپت‌های همگام کم استفاده کرد)

[اصلاح] نکته دقیق‌تر:
اسکریپت‌های async به محض اتمام دانلود، اجرا می‌شوند و در حین اجرا، تجزیه HTML (و در نتیجه رندر) متوقف می‌گردد. اما defer ترتیب بارگذاری را حفظ کرده و تا پایان تجزیه HTML صبر می‌کند. بنابراین defer انتخاب بهتری برای اکثر اسکریپت‌های وابسته به DOM است.

—

بهترین راه کدام است؟

بهترین کاری که باید انجام دهید برای سرعت بخشیدن به بارگذاری صفحه خود در هنگام استفاده از اسکریپت‌ها این است که آنها را در <head> قرار دهید و صفت defer را به آن اضافه کنید.

“`html
<script defer src=”script.js”></script>
“`

این سناریو باعث افزایش سرعت رویداد domInteractive می‌شود. با توجه به جوانب مثبت defer، به نظر می‌رسد انتخاب بهتری از async است، مگر در مواردی که تأخیر افتادن رندر اول از نظر شما مسئله‌ای نباشد (مثل اسکریپت‌های شخص ثالث مانند تبلیغات که استقلال کامل دارند).

منبع (اصلی): flaviocopes

—

بخش جدید: به‌روزرسانی برای سال ۲۰۲۶با توجه به «نت ملی»

با توجه به تغییرات گسترده در الگوریتم‌های جستجو (از جمله جستجوی تولیدمحتوا توسط هوش مصنوعی مانند SearchGPT، Gemini و بینگ کوپایلوت) و همچنین ملی شدن شبکه اینترنت در ایران، نکات زیر برای بهبود سرعت و دیده‌شدن سایت شما ضروری است:

۱. تکنیک‌های مدرن افزایش سرعت (فراتر از async/defer)

تکنیک توضیح وضعیت در نت ملی
Lazy Loading برای تصاویر و iframe با loading=”lazy” بارگذاری تصاویر خارج از دید را به تأخیر بیندازید. بسیار مؤثر – پهنای باند داخلی محدود است.
استفاده از فرمت‌های نوین تصویر WebP و AVIF (حجم کمتر با کیفیت مشابه) کاهش مصرف ترافیک ملی
Minification CSS/JS/HTML حذف فاصله‌ها و کامنت‌ها (ابزارهایی مثل Terser، CleanCSS) هر کیلوبایت اهمیت دارد
فشرده‌سازی Brotli یا Gzip در سطح سرور فعال کنید (بیشتر هاست‌های ایرانی Brotli پشتیبانی می‌کنند) کاهش حجم انتقال در شبکه ملی
کش سمت مرورگر هدرهای Cache-Control و Expires را تنظیم کنید بازدیدهای بعدی بسیار سریع‌تر

۲. بهینه‌سازی ویژه برای «نت ملی»

از آنجا که اینترنت ایران ملی (داخلی) شده و ترافیک بین‌الملل با محدودیت سرعت و هزینه همراه است:

· هاست خود را داخل ایران انتخاب کنید (مثل ابرآروان، ابرلیان، پارس‌پک). تأخیر (latency) به زیر ۱۰ میلی‌ثانیه می‌رسد.
· از CDN داخلی استفاده کنید (مثل ایران‌سرور، ابرآروان CDN). این کار فایل‌های ایستا را از نزدیکترین گره به کاربر می‌رساند.
· برای فایل‌های خارجی (مثل فونت گوگل، کتابخانه‌های جاوااسکریپت) حتماً میزبانی محلی یا fallback داخلی در نظر بگیرید.
مثال: به جای لود کردن jQuery از CDN گوگل، فایل را روی هاست خود قرار دهید.
· از dns-prefetch و preconnect برای دامنه‌های خارجی ضروری استفاده کنید (اگر ناچار به استفاده از سرویس خارجی هستید):
“`html
<link rel=”dns-prefetch” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
“`

۳. بهینه‌سازی برای سئوی هوش مصنوعی (GEO)

موتورهای جستجوی هوشمند (Generative Engines) محتوای شما را خلاصه می‌کنند. برای اینکه در پاسخ هوش مصنوعی دیده شوید:

· ساختار واضح با هدینگ‌های H2 و H3 – در این مقاله اضافه شد.
· استفاده از لیست‌ها و جدول‌ها (مانند جدول بالا) – هوش مصنوعی آن‌ها را به خوبی درک می‌کند.
· افزودن سؤالات متداول (FAQ) با نشانه‌گذاری Schema – مثلاً در انتهای مقاله:
“`html
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [{
“@type”: “Question”,
“name”: “آیا defer همیشه بهتر از async است؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “برای اسکریپت‌هایی که به ترتیب اجرا وابسته به DOM هستند، بله. اما برای اسکریپت‌های مستقل مثل Google Analytics، async مناسب‌تر است.”
}
}]
}
</script>
“`
· جملات کوتاه و واضح بنویسید – هوش مصنوعی جملات بلند و پیچیده را ضعیف تحلیل می‌کند.
· از کلمات کلیدی سؤال‌گونه (مثل «چگونه سرعت سایت را در نت ملی افزایش دهیم؟») در تیترها استفاده کنید.

۴. ابزارهای اندازه‌گیری سرعت برای شرایط ایران

ابزارهای بین‌المللی معمولاً از خارج کشور تست می‌کنند و نتیجه غیرواقعی برای نت ملی نشان می‌دهند. توصیه می‌شود:

· GTmetrix با انتخاب سرور «ایران» (اگر وجود دارد) یا نزدیک‌ترین سرور (مثلاً ترکیه)
· PageSpeed Insights گوگل – هرچند از خارج تست می‌کند، اما نکات فنی مفید ارائه می‌دهد.
· ابزارهای داخلی مثل اسپید تست ایران (speedtest.ir) یا تست سرعت هاست‌های داخلی.
· معیار واقعی: خودتان با اپراتورهای همراه اول، ایرانسل و مخابرات تست کنید (با استفاده از Lighthouse در حالت «شبکه 3G سریع»).

flaviocopes

مطلب در تاریخ 28 اردیبهشت 1405 به روز شده است

تعداد بازدید : 2,418

how to improve speed of website