آموزش رفع خطای Make JavaScript and CSS external در gtmetrix

یکی دیگه از خطاهایی که در هنگام تست سرعت سایت با جی تی متریکس مواجه میشیم با عنوان Make JavaScript and CSS external هست که مربوط به فایل‌های CSS و JS میشه. این خطا مربوط به تست سرعت سایت بر اساس الگوریتم‌های گوگل هست و برای همین در ستون Yslow جی تی متریکس اونو میبینیم. همونطور که میدونید برای استفاده از کدهای CSS و JS در یک سند HTML ما میتونیم از سه روش Inline، Internal و External استفاده کنیم که هر کدوم به شکل خاصی استفاده میشن و به نوعی استفاده از هر کدوم این روش‌ها هم میتونه روی سرعت لود سایت که مربوط به لود و پردازش فایل‌های css و js هست تاثیر گذار باشه.

در این آموزش از پایگاه دانش میزبان‌فا قصد دارم به نحوه برطرف کردن خطای Make JavaScript and CSS external در Yslow جی تی متریکس بپردازم که با استفاده از این آموزش میتونید ارور Make JavaScript and CSS external در ستون Yslow را برطرف کنید.

آموزش رفع خطای Make JavaScript and CSS external در gtmetrix

سه روشی که ما برای استفاده از کدهای CSS و JS داریم شامل موارد زیر هستند.

حالا وقتی ما یک صفحه از سایتی رو در مرورگر تایپ میکنیم این کدها به صورت اولویت بندی شده شروع به لود شدن می‌کنند. یعنی به عنوان نمونه اگر شما برای یک کلاس خاصی از قالب بیاین و با استفاده از سه روش گفته شده یک رنگ خاص یا فونت دلخواهی رو انتخاب کنید، داخل سند html اولویت با کد استایلی هست که به صورت Inline مشخص شده باشه. اگر این حالت وجود نداشت در مرحله بعدی حالت Internal و در نهایت حالت External در اولویت خواهد بود. برای فایل‌های JS هم دقیقا همین موضوع اتفاق خواهد افتاد.

حالا وقتی شما سایتی رو باز می‌کنید، مرورگرها در اولین لحظه ورود منابع CSS و JS که به صورت External لود میشن رو مسدود خواهند کرد. چرا که اولویت با لود سورس‌هایی هست که داخل خود هاست و دامنه شما قرار داره، بعد از اینکه سورس‌های داخلی لود شدند، سورس خارجی از حالت مسدود خارج شده و شروع به لود شدن میکنه که در نهایت با تکمیل شدن این مرحله شما ظاهر کامل یک سایت رو میبینید. اتفاق بدی که در این حالت میفته همین مرحله مسدود سازی و رفع مسدودیت هست. چرا که تو این برهه زمانی هرچند خیلی کوتاه، وقفه‌ای در لود سایت میفته و مرورگر همچنان در حال تلاش برای لود کامل سایت هست. همین مسئله باعث افزایش لود سایت میشه که نتیجش کاهش سرعت سایت و بالا رفتن تعداد درخواست HTTP خواهد بود.

رفع ارور Make JavaScript and CSS external

بر اساس الگوریتم‌های یاهو که در ستون Yslow این خطا رخ داده، به شما اجبار میکنه که از روش External از کدهای css و جاوا اسکریپت استفاده کنید. دلیلش هم اینه که توی این حالت امکان استفاده از کش سایت رو خواهید داشت و کدهایی که به صورت خارجی در قالب یک فایل فراخوانی شدند در مرورگر کاربران کش میشن، اما در حالتی که به صورت مستقیم(internal) یا درون خطی(inline) استفاده شده باشه این اتفاق رخ نداده و در هر بار لود سایت این کدها هم اجرا خواهند شد. توی این حالت درخواست HTTP شما تغییری نمیکنه، اما بخاطر وجود کدها داخل سند HTML باعث بالاتر رفتن حجم صفحه و بیشتر شدن کدها میشه. در صورتی که اگه به صورت external باشه و از فایل جدا فراخوانی بشه امکان کش رو دارید و اینکه فایل هم به صورت جدا هست.

پس بهتره که اگر تعداد خطوط کدنویسی شده CSS و JS در حالت‌های internal و inline کمتر هستند اونها رو برداشته و داخل فایل جدا css و js قرار بدین یا اینکه در حالت خیلی استانداردتر با سایر فایل‌ها ادغام کنید. در این حالت بخاطر کمتر شدن حجم صفحه و از طرف دیگه امکان استفاده از کش و فشرده سازی Gzip سرعت لود بهتری خواهید داشت. پس در نهایت میشه گفت استفاده از حالت External بهترین انتخاب هست. میتونید با استفاده از آموزش رفع خطای Minify JavaScript and CSS در YSlow GTmetrix هم حجم این فایل‌ها رو کمتر کرده و بهینه سازی بهتری داشته باشید.