مرکز آموزش اولین دیتا

آموزش نحوه رفع خطای Inline small CSS and JavaScript

0

در آموزش های قبلی در بخش آموزش‌های تست سرعت سایت با استفاده از GTmetrix به آموزش نحوه رفع خطای Minify HTML در gtmetrix که هدف از رفع این خطا خلاصه نویسی و کوتاه نویسی کدهای جاوا اسکریپت سایت بود.

آکادمی اولین دیتا در این آموزش به نحوه رفع خطای 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://academy.firstdata.ir/css/style.css">
  </head>
  <body>
    <div class="academy.firstdata-box error">
      Hello, world!
    </div>
  </body>
</html>

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

.academy.firstdata-box {padding:20px 24px;}
.error {background-color:red;}

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

<html>
  <head>
    <style>
       .academy.firstdata-box {padding:20px 24px;}
       .error {background-color:red;}
    </style>
  </head>
  <body>
    <div class="academy.firstdata-box error">
      Hello, world!
    </div>
  </body>
</html>

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

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

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

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد .