رفع خطا Inline Small CSS and JavaScript در GTMetrix

12 نوامبر 2019
رفع خطا

رفع خطا Inline Small CSS and JavaScript در جی تی متریکس. در این آموزش قصد داریم به نحوه رفع خطای Inline small CSS and JavaScript در جی تی متریکس بپردازیم که با استفاده از این مقاله میتونید با انواع راه‌هایی که این امکان رو به شما میده که فایل‌های CSS و JS رو به شکل کوچکتر و بهینه‌تر در بیارید رو معرفی کنیم.

 

آموزش رفع خطای Inline Small CSS and JavaScript

 

قبل از معرفی روش‌های رفع خطا باید ببینیم که اصلا این Inline small چی هست و قرار هست با انجام این کار چیکار کنیم. اول باید با inline آشنا بشیم. اگر با روش‌های مختلف کدنویسی CSS در html کار کرده باشید در حالت کلی ما میتونیم از سه روش برای استفاده از این کدها انتخاب کنیم که شامل موارد زیر هستند.

  • Inline: در این روش کدها به صورت درون خطی هستند و دقیقا داخل فایل html که داریم قرار گرفتند.
  • Internal: تو این روش هم کدها در فایل جداگانه با فرمت css. قرار دارند که بعد از فراخوانی کردن داخل سند html لود خواهند شد.
  • External: تو این روش هم کدها در یک منبع خارجی دیگه که جدا از دامنه و هاست ما هست قرار داره و فقط ما از این منابع لودشون می‌کنیم.

 

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

 

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

 

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

 

رفع خطا Inline Small CSS and JavaScript

کاری که شما باید بکنید اینه که کدهایی که مربوط به سورس‌های خارجی هست و اکثرا هم به صورت خلاصه و حجم بسیار کمی هستند رو بردارید و داخل خود سایت قرار بدین. برای این حالت هم دو انتخاب دارید. یکیش این هست که مستقیما کد رو داخل صفحات لود کنید و راه دیگه اینه که با ترکیب کردن و قرار دادن داخل فایل CSS یا JS لودشون کنید.

 

فرض کنید داخل یکی از صفحات سایت فایلی استایل CSS به شکل زیر فراخوانی میشه که در اون کلاس خاصی برای نمایش نوعی محتوا قرار داده شده:

<html>
<head>
<link rel=”stylesheet” href=”https://yoursite.com/css/style.css”>
</head>
<body>
<div class=”boxes error”>
Hello, world!
</div>
</body>
</html>

حالا همین فایل style.css که تو خط سوم قرار داره با محتوای زیر قرار داده شده است:

.boxes {padding:8px 16px;}
.error {background-color:blue;}

فایلی با این مقدار کدنویسی باعث میشه که فقط درخواست http اضافه روی سرور یا حتی سرور خارجی ایجاد بکنه و بهتره اینجور کدهایی که خلاصه هستند و حجم زیادی هم ندارند بیایم و در فایل‌های استایل ادغام کنیم. یا اینکه داخل خود بخشی که مربوط به نمایش محتوا هست با قرار دادن بین تگ <style> ازش استفاده کنیم که برای مثال بالا میشه به شکل زیر استفاده کرد:

<html>
<head>
<style>
.boxes {padding:8px 16px;}
.error {background-color:blue;}
</style>
</head>
<body>
<div class=”boxes error”>
Hello, world!
</div>
</body>
</html>

بعد از اینکه این کار رو انجام دادید خطای Inline small CSS and JavaScript در GTmetrix برطرف شده و بخاطر کاهش تعداد درخواست http و قرار گرفتن کدها در مسیر بهتر سرعت لود سایت هم افزایش پیدا خواهد کرد. برای فایل‌های JS هم دقیقا همین اتفاق میفته که بهتره به جای لود فایل از سورس خارجی بیایم و با ترکیب کردن در فایل‌های JS خود سایت یا قرار دادن بین جایی که قصد استفاده داریم این مشکل رو برطرف کنیم.

0
برچسب ها :
نویسنده مطلب امیر سلیمانژاد

دیدگاه شما

بدون دیدگاه