آموزش حل خطای 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 داریم شامل موارد زیر هستند.
- External: توی این روش کدهای ما در قالب یک فایل و در آدرسی جدا قرار دارند که با استفاده از تگ meta فایلی که حاوی کدهای css و js میشه رو فراخوانی می‌کنیم.
- Internal: توی این روش کدهای ما به صورت مستقیم در لا به لای محتوای سند HTML ما قرار دارند که برای فایل‌های css داخل تگ style و برای فایل‌های JS هم داخل تگ script قرار دارند.
- Inline: توی این روش هم کدهای ما به صورت درون خطی داخل تگ‌هایی مثل p، div و… قرار دارند.
هنگامی که یک صفحه وب در مرورگر تایپ می‌شود، کدها به ترتیب اولویت بارگذاری می‌شوند. به عنوان مثال، اگر برای یک کلاس خاص از قالب استفاده کنید و با سه روش مطرح شده، رنگ یا فونت مورد نظر را انتخاب کنید، در سند HTML، اولویت با کد استایل داخلی (Inline) خواهد بود. چنانچه این حالت وجود نداشته باشد، در مرحله بعد، حالت درون سند (Internal) و در نهایت حالت خارجی (External) در اولویت قرار می‌گیرد. برای فایل‌های جاوااسکریپت نیز دقیقاً همین روند اتفاق می‌افتد.
هنگامی که یک سایت را باز می‌کنید، در لحظه اول، مرورگرها منابع CSS و جاوااسکریپت خارجی را مسدود می‌کنند. علت این امر آن است که اولویت با بارگذاری منابعی است که در داخل هاست و دامنه شما قرار دارند. پس از بارگذاری منابع داخلی، منابع خارجی از حالت مسدودیت خارج شده و شروع به بارگذاری می‌کنند، که در نهایت با تکمیل این مرحله، ظاهر کامل سایت را مشاهده خواهید کرد.
مشکل این حالت، همین مرحله مسدودسازی و رفع مسدودیت است. زیرا در این بازه زمانی کوتاه، وقفه‌ای در بارگذاری سایت ایجاد می‌شود و مرورگر همچنان در تلاش برای بارگذاری کامل سایت است. این مسئله موجب افزایش زمان بارگذاری سایت می‌شود که نتیجه آن کاهش سرعت سایت و افزایش تعداد درخواست‌های HTTP خواهد بود.
رفع ارور Make JavaScript and CSS external
بر اساس الگوریتم‌های یاهو که در ستون Yslow مطرح شده است، توصیه می‌شود از روش خارجی (External) برای کدهای CSS و جاوااسکریپت استفاده کنید. دلیل این امر، امکان استفاده از کش سایت است. کدهایی که به صورت خارجی در قالب یک فایل فراخوانی می‌شوند، در مرورگر کاربران کش می‌شوند. اما در حالتی که به صورت مستقیم (Internal) یا درون خطی (Inline) استفاده شده باشد.
این اتفاق رخ نمی‌دهد و در هر بار بارگذاری سایت، این کدها نیز اجرا خواهند شد. در این حالت، تعداد درخواست‌های HTTP تغییری نمی‌کند، اما به دلیل وجود کدها در داخل سند HTML، باعث افزایش حجم صفحه و بیشتر شدن کدها می‌شود. در صورتی که به صورت خارجی باشد و از فایل جدا فراخوانی شود، امکان کش و جداسازی فایل وجود دارد.
بنابراین، بهتر است که اگر تعداد خطوط کدنویسی شده CSS و جاوااسکریپت در حالت‌های Internal و Inline کمتر هستند، آنها را برداشته و در فایل جداگانه CSS و جاوااسکریپت قرار دهید یا در حالت استانداردتر، با سایر فایل‌ها ادغام کنید. در این حالت، به دلیل کاهش حجم صفحه و امکان استفاده از کش و فشرده‌سازی Gzip، سرعت بارگذاری بهتری خواهید داشت. بنابراین، می‌توان گفت استفاده از حالت External بهترین انتخاب است. میتوانید با استفاده از آموزش رفع خطای Minify JavaScript and CSS در YSlow GTmetrix نیز حجم این فایل‌ها را کمتر کرده و بهینه‌سازی بهتری داشته باشید.
امیدوارم این آموزش مورد توجه و پسند شما قرار گرفته باشد و با استفاده از آن، توانسته باشید اقدام به رفع خطای Make JavaScript and CSS external در Yslow GTmetrix کنید. اگر در رابطه با این آموزش سوالی داشتید یا مشکلی برای شما پیش آمده است، در بخش دیدگاه‌ها اعلام کنید تا در کوتاه‌ترین زمان ممکن پاسخگوی شما باشم.
در این مقاله یاد گرفتیم چگونه خطای Make JavaScript and CSS external را به راحتی حل کنیم
