بهینه کردن کدهای جاوا اسکریپت برای سرعت لود سایت بسیار حائز اهمیت است . در نظر بگیرید طبق گزارش های گذشته گوگل اگر هر یک کیلوباید فایل JS زمان یک میلی ثانیه رو نیاز داشته باشه با حجم های زیاد کدهای جاوا اسکریپت چه میزانی به لود سایت اضافه میشه. برای همین بهینه کردن کدهای جاوا اسکریپت را در این قسمت از دو اتربیوت defer و async استفاده کردیم. دو اتربیوت defer و async برای استفاده کردن خیلی راحت هستش که فقط کافیه بعد از آدرس فایل قرار بدیم. ما در چند مقاله دیگه از نحوه استفاده از کدهای جاوا اسکریپت صحبت کردیم که چطوری بتونیم این فایل هارو بهینه کنیم.
کیلو بایت ، کیلو بایت جمع شود وانگهی ثانیه ها شود.
بهینه کردن کدهای جاوا اسکریپت
ما در مقاله بهینه سازی سایت توضیحات زیادی در خصوص ویژگی های بهینه بودن یک سایت توضیح دادیم که یکی از مهمترین آنها موضوع سرعت لود سایت بود. در خصوص افزایش و بهینه کردن سرعت لود سایت که اومدیم و سایت GTmetrix رو بهتون پیشنهاد دادیم و در خصوص استفاده از این سایت مقاله وویدئو هایی منتظر کردیم.
برای همین در خصوص رسیدن به این هدف باید کدهای جاوا اسکرپیت خودمون رو بهینه کنیم. در خصوص این موضوع ما قبلا یک مقاله انتشار داده بودیم که کلیت به این صورت بود که گفتیم کدهای جاوا اسکریپت خودتون داخل فوتر سایت لود کنید . اسمش مقالش بود : قرار دادن کدهای جاوا درون سایت
در این قسمت دو اتربیوت میشه به خط کدهای سایت طراحی شده خود اضافه کنید که بتونید در زمان خواندن کدها عملکرد بهتری داشته باشید.
استفاده از defer و async
یه توضیح در موردشون بخوام بدم به این صورت هستش که شما کدهای سایتتون رو در نظر بگیرید، وقتی بخواد سایتتون رو به یه بازدید کننده نشون بدید ، مرورگر ها از بالا تا پایین شروع به خوندن فایل هاتون می کنن. وقتی به یه خط کد که آدرس یه فایل جاوا اسکریپت دیگه رو داده استوپ می کنن و میرن اون فایل رو می خونن و بر میگردن.
حالا تصور کن اول یا وسط کدهات که هنوز سایتت کامل لود نشده و کاربر ظاهر سایت خوبی رو نمی بینه ، کد جاوایی که در حال لود هستش با ارور مواجه بشه ، اینجوری بازدید کننده ناراحت میشه و سایتت رو میبنده.
طراحی سایت یسری قوانین داره که باید رعایت بشه
کاری که defer و async می کنن اینه که از این اتفاق جلوگیری می کنن. کمی با هم تفاوت دارن که اینجا گفتیم.
وقتی از این دو اتربیوت استفاده کنید به مرورگر میگید که منتظر لود شدن کامل فایل‌های جاوا اسکریپت نمونه و همزمان با اینکه داره فایل JS رو لود میکنه سایر فایل‌ها و صفحه HTML رو هم لود بکنه که در این حالت مشکلی از نظر لود صفحه وجود نخواهد داشت. این دو نوع اتربیوت تفاوتی که با هم دارند در این هست که اگر از حالت defer استفاده کنید، مرورگر منتظر میمونه تا صفحه HTML هم لود بشه و بعد شروع به اجرای فایل JS بکنه اما در صورتی که از حالت async استفاده کنید، به محض لود کامل فایل شروع به اجرا شدن میکنه و دیگه منتظر نمیمونه که بعد از لود کامل صفحه HTML اجرا بشه. در نتیجه بهتره که از گزینه async استفاده کنید.
استفاده از دو اتربیوت defer و async در کدهای JS باعث برطرف کردن خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس خواهد شد.
اینم روش استفاده
<script src="demo-defer.js" defer></script>
<script src="demo-async.js" async></script>
