فیلم آموزشی خطای Inline small CSS and JavaScript رو اشتباه نگیرید!

هیچکس از سایتی که کند لود میشه خوشش نمیاد، گوگل که اصلاً خوشش نمیاد. از ابزار GTmetrix بارها تو کلاسامون و دورههای میزفا گفتیم. با این ابزار دوستداشتنی خطاهایی که در سرعت سایتمون تأثیرگذاره پیدا میکنیم و بعد رفعشون میکنیم. خطایی که در این مطلب بهش میپردازیم، خطای Inline Small Css and JavaScript هست. در این سری از مقالاتمون میخوایم ببینیم این خطاها چقدر اهمیت دارند و اصلاً منظور و هدف جی تی متریکس از این خطاها چیه؟
خطای Inline Small Css and JavaScript در جی تی متریکس
خطایی که در این مطلب بهش میپردازیم، خطای Inline Small Css and JavaScript هست. جالبه بدونید که در اکثر سایتهای ایرانی این خطا اشتباه توضیح دادهشده. کلمه Inline اینجا غلط اندازه و اکثراً تو سایتهاشون گفتن از روش Inline در Css استفاده نکنین، بقیه هم لطف کردن کپی کردن و اینطوری شد که اکثر سایتها این خطا رو به اشتباه تعبیر کردن. اینجوری بهتون بگم که اصلاً بحث اینجا روش Inline در Css نیست 😐
بهتره برای اینکه خوب موضوع رو درک کنیم:
انواع روشهای درج کدهای CSS در یک سند Html
- روش اول : روش Inline Css در لابهلای کدهای HTML از کدهای CSS استفاده میکنیم. و دوستان در بعضی از سایتها این کلمه Inline رو با این خطای مورد بحثمون اشتباهگرفتن که کاملاً متفاوته و در ادامه بیشتر توضیح میدم براتون.
- روش دوم: Internal CSS کدهای CSS رو داخل سند HTML و با استفاده از تگ Style قرار میدیم.
- روش سوم: در این روش که بهش روش خارجی یا اکسترنال هم میگیم تمام کدهای CSS رو در یک فایل قرار داده آپلود میکنیم و بعد آدرسش رو اینجا میذاریم. در تصویر فایل به نام Style.css هست.
این سه روش هر کدوم مزایا و معایب خودشون رو دارن، اما این نکته رو حتماً بهش توجه کنین که تگهای HTML اول کدهای External رو لود میکنه بعد از اون سراغ کدهای Internal و در نهایت کدهای Inline رو مورداستفاده قرارمیده. بنابراین کدهای Inline در اولویت هستن.
همین روشها در JS یا جاوا اسکریپت هم هست.
حالا ببینیم جی تی متریکس دوست داشتنی چی میگه؟ اگه به متن توضیحات سایت GTmetrix توجه کنیم، میگه Css هایی که External هستند و سایز کوچکی هم دارند در یک خط قرار بده منظورش همون در یک فایل هست. یعنی این خطا مربوط به روش External میشه و ربطی به روش Inline نداره. برای جاوا اسکریپت هم همین موضوع صادق هست.
مقالههای سایتهای معتبر keycdn ، گوگل و varvy گواهی این موضوع هستند. این مقالهها هم میگن برای فایلهای کوچیک CSS که روش External هستند، بهتره ادغامشون کنین و از روش Internal استفاده کنین.
اهمیت خطای Inline small CSS and JavaScript
حالا چرا باید اینکار رو انجام بدیم و چرا این خطا اهمیت داره؟ به دلیل اینکه باعث کاهش میزان درخواستها میشه. تمام هدف ما در بررسی سرعت سایتها با GTmetrix همینه. ما میخوایم حجم ساعت رو کم کنیم در نتیجه سرعت لود سایت بالا بره. هر فایل به روش External یک درخواست هست به سمت سرور ما باید با رفع این خطا تعداد درخواستهای External رو کم کنیم و از روش ادغام یا Internal استفاده کنیم.
برای ادغام یا استفاده از روش Internal راهکارهایی هست که در دوره ۸ ساعت افزایش سرعت سایت با استفاده از GTmetrix بطور کامل براتون توضیح دادیم. اگه سؤالی داشتین یا راهنمایی از ما نیاز داشتین حتما در قسمت نظرات برامون بنویسین.
روش کامل رفع این خطا را در دوره ۸ ساعت افزایش سرعت سایت با استفاده از GTmetrix براتون توضیح دادیم ادامه این محتوا و فیلم آموزشی آن برای دانشجویان دوره GTmetrix هست.
ورود به حساب کاربری دانشجو دوره نیستید؟ اینجا کلیک کنیداولویت این خطا برای بالا بردن سرعت سایت بالا است و میزان سختی رفع این خطا راحت است.
جهت مشاهده ۸ فیلم دوره آموزشی رفع خطاهای gtmetrix میتوانید دوره gtmetrix را تهیه کنید.