آموزش حل ارور Inline small CSS در GTmetrix

آموزش حل ارور Inline small CSS در GTmetrix

هاست وردپرس

با آموزش حل ارور Inline small CSS در GTmetrix از وبلاگ پرداز آی تی در خدمت شما هستیم و قصد داریم در ادامه آموزش های سئو سایت با GTmetrix به آموزش حل ارور Inline small CSS در GTmetrix بپردازیم.

در مطلب قبلی از دسته آموزش GTmetrix پرداز آی تی به حل ارور Enable Keep Alive در GTmetrix پرداختیم که در صورت نیاز می توانید از طریق لینک قرار گرفته به این آموزش نیز دسترسی داشته باشید.

در سایت GTmetrix نوع این خطا از دسته خاطا های CSS می باشد و دارای اولویت بالایی می باشد. همچنین میزان دشواری برای حل این ارور آسان می باشد و نمره میانگین آن نیز ۹۵% می باشد.

لازم به ذکر است که یک ارور شبیه به Inline small CSS به نام Inline small JS وجود دارد که برای حل این ارور نیز می توانید از این آموزش استفاده کنید.

آموزش حل ارور Inline small CSS در GTmetrix

Inline small CSS چیست

Inline CSS یک روش استایل دهی و استفاده از کد های CSS در فایل HTML می باشد و معمولا در تگ head از این روش استفاده می شود.

اما ارور Inline small CSS که در سایت GTmetrix نمایش داده می شود در حقیقت این موضوع را بیان می کند که اگر سایت شما دارای یک یا چند فایل External CSS خارجی با حجم بسیار کم است ( Inlining small external CSS ) بهتر است که این فایل ها و کد های CSS را با هم ترکیب کنید و فایل HTML از آن ها استفاده کنید.

External CSS نیز مانند Inline CSS یک روش استایل دهی و فراخوانی کد های CSS می باشد که Inline CSS از کد های CSS به طور مستقیم در HTML استفاده می کرد ولی External CSS به این صورت است که کد های CSS را در یک فایل خارج از فایل HTML نوشته می شوند و سپس این فایل CSS خارجی در HTML فراخوانی می شود.

همچنین بخوانید :  حل ارور Add Expires headers در GTmetrix

استفاده کمتر از فایل های External CSS و یا یکی کردن فایل های External CSS بر روی سئو سایت و همچنین سرعت سایت شما تاثیرگذار است باعث بهینه شدن سایت می شود.

استفاده از CSS درون خطی یا همان Inline CSS موجب می شود که تعداد درخواست ها و فایل هایی که مرورگر برای نمایش یک صفحه وب ارسال و دانلود کند کاهش یابد در صورت استفاده از External CSS ابتدا فایل HTML را لود می کند و سپس به سراغ فایل External CSS می رود.

آموزش حل ارور Inline small CSS در GTmetrix

حل ارور Inline small CSS در GTmetrix

همانطور که توضیح دادیم بهتر است برای استایل دهی CSS از روش Inline CSS در تگ head فایل HTML استفاده شود و اگر یک یا چند فایل با حجم کم از External CSS دارید می توانید آنها را ترکیب و از روش Inline CSS استفاده کنید.

مثل استفاده از کد های CSS در بین تگ های شروع <style> و پایان </style> که در قسمت head فایل HTML قرار می گیرند.

مثل استفاده از کد های JS در بین تگ های شروع <script> و پایان <script/> که در قسمت head فایل HTML قرار می گیرند.

اما اگر تعداد فایل های External CSS که حجم کمی دارند زیاد است به پیشنهاد GTmetrix و گوگل شما می توانید تمام فایل های External CSS با حجم کم را در یک فایل External CSS ترکیب کنید و آن را در سند HTML سایت فراخوانی کنید.

با این کار مرورگر بجای دانلود دو یا چند فایل خارجی که زمان بر خواهد بود ، یا کد های CSS را در همان فایل HTML به صورت یک جا لود می کند و یا اینکه یک فایل External CSS را لود می کند که باعث بهبود سرعت سایت شما می شود.

همچنین بخوانید :  حل ارور Enable Keep Alive در GTmetrix

در صورتی که فایل های External CSS سایت ( وردپرس ) شما زیاد است ، شما برای سادگی کار خود می توانید از پلاگین هایی مثل combine js ، combine css و … استفاده کنید.

مزایا و معایب

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

به طور مثال استفاده از روش Inline CSS می تواند مانع از افزایش ارسال درخواست یا فایل های دانلودی توسط مرورگر شود اما از دیگر فایل های CSS ذخیره نمی شوند که دفعات بعد نیازی به لود آنها نباشد.

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

اما در روش Inline CSS هر چقدر هم که کد های CSS کم و ساده باشند ، فایل ها در مرورگر ذخیره نمی شوند و با هر بار ورود کاربر به صفحه ، مرورگر باید آنها را لود کند.

به همین منظور ممکن است اگر سایت شما دارای فایل های حجیم CSS است استفاده از روش External CSS ترجیح دهید.

روشی که بسیاری از افراد استفاده می کنند این است که کد های CSS صفحات اصلی سایت یا صفحات فرود کاربران را به صورت Inline استفاده می کنند تا بهترین عملکرد را داشته باشند و در سایر صفحات سایت ، کد های CSS را از طریق فایل External CSS در سند HTML فراخوانی می کنند.

امیدواریم آموزش حل ارور Inline small CSS در GTmetrix مورد توجه شما عزیزان قرار گرفته باشد.

هاست و دامنه

اشتراک گذاری پست

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

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