تاکنون از وب‌سایت معروف جی‌تی‌متریکس /GTmetrix بسیار صحبت کرده‌ایم و آوازه این وب‌سایت و البته کاربرد آن را حتما شنیده‌اید. اگر بار اول است و قصد آشنایی با این وب‌سایت را دارید، با یک جستجوی ساده در مطالب وبلاگ میزبان وردپرس می‌توانید مطالب زیادی را در این رابطه بیابید.

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

‌

خطای Make JavaScript and CSS external

همان‌طور که از نامش پیداست، به فایل های css و همچنین فایل های js وب‌سایت مربوط است. فایل های css و js شامل کدهایی هستند که وب سایت براساس آن‌ها طراحی و استایل دهی شده است. در صورت داشتن ضعف و عدم بهینه شدن، این خطای gtmetrix.com در قسمت YSLOW حتما دیده خواهد شد.

در طراحی وب سایت می‌توان کدهای js و css قالب وب سایت را به ۳ طریق مختلف، در فایل html وب استفاده نمود. آن سه روش عبارتند از:

• روش External
• روش Inline
• روش Internal

که در ادامه به بررسی آن‌ها خواهیم پرداخت.

‌

معرفی سه حالت External و Inline و Internal

Inline: در حالت inline کدهای js و css به صورت خطی درون کدهای html نوشته می‌شود. مانند مثال زیر که استایل رنگ آبی داخل تگ p نوشته شده است.

<p style=”color:blue”></p>

External: در حالت External تمامی کدهای css و js مربوطه سایت، در یک فایل کاملا مستقل از فایل html نوشته شده و از طریق لینک دهی و تگ meta به صفحه html متصل می‌شود.

Internal: در حالت Internal کدها مستقیما داخل فایل html قرار خواهند گرفت که در این روش کدهای css بایستی حتما در تگ style و کدهای لازم js در تگ script نوشته شوند.

در مرورگر وقتی صفحه وبسایتی قرار است نمایش داده شود، ابتدا کدها خط به خط براساس اولویت هر کدام شروع به بارگذاری خواهد کرد. در اولویت بندی کدها اولین و بالاترین اولویت با کدهایی است که به صورت Inline هستند و سپس نوبت به کدهای Internal می‌رسد و اگر کدها به این صورت نیز نبود نوبت به External خواهد رسید. این اولویت بندی نه تنها برای کدهای css بلکه برای کدهای javascript نیز صدق می‌کند.

در زمانی که شما دامنه یک وب سایت را باز نموده یا از طریق گوگل قرار است آن وب سایت نمایش داده شود، مرورگر در همان لحظه باز شدن وب سایت، تمامی کدهای css و js را که به صورت External هستند را سریعا مسدود می‌کند، زیرا اول اولویت را به کدهایی داده است که درون هاست یا دامین قرار دارد. پس از لود شدن کدهای درون هاست یا دامین، کدهای css و js که به صورت External هستند از بلاک درآمده و این کدها نیز به مرور بارگذاری خواهد شد.

شاید مراحل بالا حداکثر ده ثانیه هم طول نکشد؛ اما از معایب این نوع بارگذاری مسدود و رفع مسدودی کدهایی است که در یک فایل جدا قرار دارند و از طریق لینک فراخوانی می‌شوند. در همین موقع، ممکن است زمانی خیلی کوتاه صرف شده و سرعت بارگذاری وب سایت افزایش یابد و در آخر به افزایش تعداد درخواست HTTP منجر شود.

‌

‌

چگونگی رفع خطای Make JavaScript and CSS external

استفاده از حالت External برای رفع خطای Make JavaScript and CSS external بهترین انتخاب است. براساس الگوریتم‌های مربوطه که در ستون yslow سایت جی تی متریکس، قابل مشاهده است از شما استفاده از کدهای js و css در حالت External و یک فایل جدا را می‌خواهد. شما با انتخاب این روش می‌توانید کش وب سایت خود را فعال نمایید؛ اما در غیر این صورت اگر کدها به صورت Inline و یا Internal قرار بگیرند، دیگر امکان فعال‌سازی کش وجود ندارد، زیرا با هر باز شدن وب‌سایت یا صفحه مورد نظر کد‌ها از صفر شروع به لود شدن می‌نمایند.

برای رفع این خطا در وب سایت جی تی متریکس، پیشنهاد می‌کنیم تا حد ممکن تمامی کدهای نوشته شده css و ک های js که در حالت Inline و یا Internal قرار دارد را حذف کنید و آن‌ها را درون یک فایل جداگانه به صورت External قرار دهید. با این روش سرعت بارگذاری وب سایت شما به دلیل کم‌تر شدن حجم صفحه بهینه شده و از طرفی هم امکان فعال شدن کش شدن مرورگر وجود خواهد داشت.