در این مقاله درباره ارور Inline small CSS و Inline small JavaScript در سایت جی تی متریکس صحبت خواهیم کرد. خواهیم گفت چطور باید فایل های css و فایل های js را با هم ادغام کنید و چگونه فایل های سایت را یکی بکنیم. همراه باشید.

سرفصل‌ها

  • ۱ آموزش افزایش سرعت سایت با GTmetrix
  • ۲ خلاصه‌ی از خطا Inline small CSS and Inline small JavaScript
  • ۳ مقدمه درباره نحوه فراخوانی فایل‌های CSS و JS
  • ۴ درباره مشکل Inline small CSS
  • ۵ راه حل Inline Small
    • ۵٫۱ Inline CSS
    • ۵٫۲ Inline JS
    • ۵٫۳ Inline Images

آموزش افزایش سرعت سایت با GTmetrix

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

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

نام: Inline small CSS
نوعCSS
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: ۹۴%
 [gap height=”۵″]
نام: Inline small JavaScript
نوعJS
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: ۹۵%

مقدمه درباره نحوه فراخوانی فایل‌های 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 HTML document. This can reduce the time it takes to display content to the user, especially in older browsers.

منبع: میزفا

جهت کسب اطلاعات و مشاهده مقالات بیشتر به بخش مقالات آموزشی مراجعه نمایید.

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

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

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