آموزش رفع خطای 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) در اولویت قرار می‌گیرد. برای فایل‌های جاوااسکریپت نیز دقیقاً همین روند اتفاق می‌افتد.

هنگامی که یک سایت را باز می‌کنید، در لحظه اول، مرورگرها منابع 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 پرداختیم و راهکارهایی برای رفع این خطا ارائه شد. استفاده از روش External برای فایل‌های CSS و جاوااسکریپت به دلیل امکان استفاده از کش مرورگر و کاهش حجم صفحه، بهینه‌ترین انتخاب است. این روش نه‌تنها باعث کاهش زمان بارگذاری سایت می‌شود، بلکه تعداد درخواست‌های HTTP را نیز کاهش داده و تجربه کاربری بهتری فراهم می‌کند.

با انتقال کدهای Internal و Inline به فایل‌های جداگانه و استفاده از تکنیک‌هایی مانند فشرده‌سازی Gzip و بهینه‌سازی فایل‌ها، می‌توان عملکرد سایت را به‌طور چشمگیری بهبود داد. رعایت این اصول، علاوه بر افزایش سرعت سایت، تاثیر مثبتی بر رتبه‌بندی سایت در موتورهای جستجو خواهد داشت. در نهایت، توصیه می‌شود با بررسی‌های مستمر و استفاده از ابزارهای تحلیل سرعت مانند GTmetrix، سایت خود را بهینه نگه دارید.