آموزش های وردپرس

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

در مقاله قبلی از سری آموزش‌های تست سرعت سایت با استفاده از GTmetrix به آموزش رفع خطای Minify 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

حالا با این توضیحات که در بالا نسبت به اولویت بندی روش‌های لود فایل و مسدود شدن سورس‌های خارجی گفته شد، به نظرتون نمیشه این نتیجه رو گرفت که اگه ما بیایم و این کدهای خارجی رو از داخل خود سایت لود کنیم سایت بهینه شده و این خطا هم برطرف خواهد شد؟

رفع خطای Inline small CSS and JavaScript در GTmetrix

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

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

<html>
  <head>
    <link rel="stylesheet" href="https://mizbanfa.net/css/style.css">
  </head>
  <body>
    <div class="mizbanfa-box error">
      Hello, world!
    </div>
  </body>
</html>

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

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

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

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

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

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

امیدوارم که این آموزش هم مورد توجه و پسند شما قرار گرفته باشه و با استفاده از این آموزش تونسته باشید خطای Inline small CSS and JavaScript رو در GTmetrix برطرف کرده باشید. در صورتی که سوال یا مشکلی درباره این آموزش داشتید میتونید در بخش دیدگاه‌ها اعلام کنید تا در کوتاه‌ترین زمان ممکن پاسخگوی شما باشم.
4.3/5 - (11 امتیاز)

علی یزدان پرست

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

‫۸ دیدگاه ها

  1. سلام. مطلب بسیار مفیدی بود. ممنونم ازتون.
    یه سوال دارم.
    فایل مربوط به صفحه ای که درش خطا رخ داده رو از کجا پیدا کنم؟
    فایل js رو پیدا کردم.
    ولی فایل خود صفحه رو پیدا نمی کنم تا js رو داخلش اینلاین کنم.

  2. با سلام خدمت شما
    در ورد پرس چگونه میتوان فهمید که کدهای CSS و JavaScript را در چه مکانی باید قرار داد.

    با تشکر

  3. سلام میشه این مطلبو واضح تر بیان کنید قابل فهم اصلا نیست برای یک مبتدی .

  4. کدها را دقیقا در بین <> , <> و داخل استایل <> <> قرار داده شده است.
    عبارات >> و << برای این است که مشکلی در ارسال پیام پیش نیاید. در اصل و می باشند.

  5. سلام جناب یزدان پرست
    فکر می‌کنم یک اشتباهی در محتوا وجود داشته باشه
    کدهای external کدهایی هستند که در یک فایل جداگانه اضافه شده باشند (نه صرفا در هاست دیگر)
    و کدهای internal کدهایی هستند که در بخش head از html‌قرار دارند ولی خطی نیستند.

  6. با سلام
    شما در این مطلب فقط فایل style.css را بررسی کردید. میخواستم ببینم با فایل های css و js پلاگین ها هم میشه این کار رو کرد؟
    مشکلی برای پلاگین ها پیش نمیاد؟
    با تشکر از سایت خوبتون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *