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

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

خلاصه‌ی از خطا Inline small CSS and Inline small JavaScript

نام: Inline small CSS

نوع: CSS
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 94%

نام: Inline small JavaScript

نوع: JS
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 95%

مقدمه درباره نحوه فراخوانی فایل‌های CSS و JS

کدهای CSS
CSS، نوعی زبان نشانه‌گذاری تحت وب است که به‌منظور توصیف ظاهر یک‎ سایت برای مرورگر همراه با HTMLمورداستفاده قرار می‌گیرد.

به شکل کلی سه شیوه برای استفاده از کدهای CSS در یک سند Html وجود دارد Inline، Internal و External که هرکدام دارای مزایا و معایب خاص خود در شرایط مختلف را داراست. باید توجه داشته باشید که تگ‌های HTML ابتدا کدهای External را لود می‌کند، پس‌ازآن به سراغ کدهای Internal و درنهایت کدهای نوع Inline را مورداستفاده قرار می‌دهد. درنتیجه کدهای Inline در اولویت قرار می‌گیرند. به‌عنوان‌مثال اگر در یک فایل External رنگ آبی برای یک تگ و در کدهای Internal رنگ زرد و بالاخره در کدهای Inline رنگ بنفش برای همان تگ انتخاب‌شده باشد، در چنین حالتی Html رنگ بنفش را مدنظر قرار خواهد داد.

کدهای JS
برای فراخوانی کدهای JS هم همانند CSS از سه روش بالا استفاده می‌شود

نکته بالا صرفا جهت اطلاع بود و مربوط به خطای GTmetrix نمی‌شود ولی توجه داشته باشید که خطایInline small CSS به معنی روش Inline در CSS که در بالا اشاره کردیم نیست. اگر به متن توضیحات سایت GTmetrix توجه کرده باشید به عبارت “Inlining small external CSS files” اشاره میکند و منظورش فایل‌های CSS با حجم بسیار کمی که با روش External در سند HTML فراخوانی می‌شوند را می‌گوید، ولی متاسفانه در اکثر سایت‌های ایرانی به اشتباه و به دلیل تشابه اسمی عبارت Inline فکر می‌کنند منظور روش Inline در CSS هست درحالی که عبارت “Inlining small external CSS files” در اینجا به معنی یک خط کردن کدهای CSS با حجم کم است. مقاله‌های سایت‌های معتبر keycdn ، گوگل و varvy گواهی این موضوع هستند.

بخوانید! ساخت وب سایت شرکتی

درباره مشکل Inline small CSS

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

راه حل Inline Small

به منظور بهینه سازی لود سایت و زمان باز شدن صفحه، در صورتی که کدهای CSS موجود در فایل External، دارای حجم کمی باشند، شما می توانید آنها را به طور مستقیم در سند HTML، وارد کنید و یا با دیگر فایل‌های CSS ادغام نمایید.

گوگل در مقاله‌ای با عنوان Inline Small Resources به اهمیت استفاده از روش Internal اشاره کرده است. در مقاله اشاره شده گوگل عنوان می‌کند که استفاده از روش Internal در فایل‌های CSS و JS با حجم کم و همینطور استفاده از تصاویر به شکل Inline (روش Base64) باعث کاهش تعداد درخواست‌ها به شکل مستقیم در سند HTML می‌شود. در ادامه بیشتر درباره این موضوعات صحبت می‌کنیم.

قسمتی از مقاله گوگل:

This rewriter reduces the number of requests made by a web page by inserting the contents of small external CSS, JavaScript and image files directly into the HTMLdocument. This can reduce the time it takes to display content to the user, especially in older browsers.
inline-small-css
Inline CSS
اگر محتوای فایل CSS که به روش External فراخوانی شده بسیار کم حجم و به اندازه چند بایت می‌باشد بهتر است یا آن را با دیگر فایل‌های external CSS ادغام نماییم یا به شکل مستقیم و Internal درون سند HTML استفاده کنیم.
برای مثال به سند HTML زیر توجه کنید:
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>
و فایل small.css با محتوای فرضی زیر:
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8i; }
  .bold { font-weight: bold; }

می‌توانید از روش نه چندان جالب بالا برای لود قسمتی از استایل خود استفاده کنید ولی برای بهینه سازی سایت باید هوشمندانه و از بهترین روش ممکن بهره ببرید. روش بهینه سازی شده در چنین شرایطی که یک فایل CSS با حجم کم دارید به شکل زیر است:

<html>
  <head>
    <style>
      .yellow {background-color: yellow;}
      .blue {color: blue;}
      .big { font-size: 8i; }
      .bold { font-weight: bold; }
    </style>
    </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

ولی اگر تعداد زیادی فایل CSS با حجم کم در صفحات شما فراخوانی می‌شوند بهتر است آنها را ادغام کنید

Inline JS

درباره فایل‌های JS هم همانند CSS باید عمل کرد، در این پست سایت GTmetrix بیان میکند:

Inlining small external JavaScript files can save the overhead of fetching these small files. A good alternative to inline JavaScript is to combine the external JavaScript files.

و اگر توجه کرده باشید به فایل‌های External JS که حجم بسیار کمی دارند اشاره کرده که اگر سایت شما دارای فایل‌های External JS است و تعداد قابل توجه‌ای دارند بهتر است آنها را ادغام نمایید ولی اگر تعداد کم باشید می‌توانید از راه حلی که گوگل اشاره کرده استفاده نمایید.

از مقاله گوگل اشاره شده که اگر محتوای فایل JS که به روش External فراخوانی شده بسیار کم حجم و به اندازه چند بایت می‌باشد به شکل مستقیم و Internal درون سند HTML استفاده کنیم تا در جهت بهینه سازی سرعت سایت تعداد درخواست‌های سمت سرور کاهش یابد.

برای مثال به سند HTML زیر توجه کنید:

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

و فایل small.js با محتوای فرضی زیر:

  /* contents of a small JavaScript file */

روش بهینه سازی شده در شرایطی که یک فایل JS با حجم کم دارید به شکل زیر است:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

اگر تعداد فایل‌های زیادی از نوع js و css در سند html شما فراخوانی می‌شود می‌توانید برای ادغام کردن فایل‌ها از پلاگین‌های وردپرس زیر استفاده نمایید.

Inline Images

Inline Images عکس هایی هستند که به صورت inline و از طریق کار با base64 آن‌ها را می‌سازیم. به این منظور که عکس‌ها را می‌توانند در بین کدهای HTML قرار دهید و بر اساس کدگذاری بر مبنای 64 عکس‌ها بخشی از HTML شوند و بدون بارگذاری شدن نمایش داده می‌شوند، در عوض مرورگر کد بر مبنای 64 را به عکس تبدیل می‌کند. یکی از محاسن مهم این کار، کاهش تعداد درخواست است که این امر نقش موثری در بهینه‌سازی سایت و سرعت آن دارد. ولی توجه داشته باشید که این روش بهتر است فقط برای عکس‌هایی استفاده شود که اندازه و حجم بسیار کمی دارند چرا که وقتی عکس‌ها حجم متوسط به بالایی داشته باشند با روش کدگذاری بر مبنای 64 حجم تصاویر بیشتر از حالت معمول بوده و اگر برای تمام عکس‌ها از این روش استفاده کنیم به جای بهینه سازی و افزایش سرعت سایت نتیجه‌ای عکس را دریافت خواهیم کرد.

گوگل هم در این پست به اهمیت تصاویر به شکل Inline اشاره کرده است و گفته:

When this rewriter is enabled, the contents of small external images are written directly into the HTML document by an inline data: URL

برای مثال به سند HTML زیر توجه کنید:

<html>
  <head>
    <title>Image test example</title>
  </head>
  <body>
    <img src="images/Cuppa.png">
  </body>
</html>

در سند بالا تصویر کوچک با حجم اندک به شکل معمولی در صفحه بارگذاری می‌شود و حاوی یک درخواست دیگر برای لود شدن در صفحات کاربران است ولی روش زیر که برمبنای base64 است درگیر درخواست اضافی بر روی سرور متحمل نمی‌شود:

<html>
  <head>
    <title>Image test example</title>
  </head>
  <body>
    <img src="data:image/png;base64,...Base64 data">
  </body>
</html>

در پست جداگانه‌ای در آینده توضیحات بیشتری درباره تصاویر base64 یا Inline Images خواهیم داد. این خطا باعث کاهش تعداد درخواست های HTTP هم نیز می‌شودو شما اگر قصد دارید تعداد درخواست های سایت خود را در جهت بهینه سازی، کاهش دهید حتما مقاله رفع خطای Make fewer HTTP requests را هم بخوانید. سعی شده در این آموزش‌ها با بالا بردن سرعت سایت که یکی از فاکتورهای مهم در افزایش رتبه سایت در گوگل می‌باشد، کمک شایانی کنیم، در انتهای این آموزش باید توانید فایل css و js خود را با هم ادغام کنید و آن‌ها را یکی کنید.

مطلب قبلی : رفع خطای Leverage browser caching و هر آنچه که باید درباره کش بدانید