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

از سری مقالات آموزش کامل سایت gtmetrix به رفع خطاهای pagespeed سایت جی تی متریکس پرداختیم. در مقاله قبل به آموزش رفع خطای Enable Keep Alive در سایت GTmetrix پرداختیم. امروز در بخش رفع خطاهای pagespeed به آموزش رفع خطای Inline small CSS خواهیم پرداخت. آموزش رفع خطای Inline small JavaScript و حل مشکل ارور Inline small CSS . در این مقاله به نحوه ادغام و یکی کردن فایل های CSS و JS نیز خواهیم پرداخت.  رفع خطای Inline small CSS و خطای Inline small JavaScript موجب افزایش سرعت سایت و کاهش زمان بارگذاری سایت شود که بشدت روی بهبود سئوی سایت تاثیر مثبت و خوبی دارد.

 

نکته مهم :

ما در این مقاله سعی داشته‌ایم تا مطالب را کامل و با جزئیات بیان نماییم. این مقاله برای تمام سایت های وردپرسی، جوملا، سایت های اختصاصی با php  و ASP کاربردی و قابل انجام است. اکیدا توصیه می‌کنیم که این کار توسط یک شخصی که دارای دانش کافی و مطالعه دارد انجام شود. این موضوع همان اندازه که می‌تواند برای سایت شما مفید باشد اگر به اشتباه انجام شود می‌تواند به سایت شما آسیب جدی بزند.

در این مقاله به موضوعات زیر خواهیم پرداخت :

1 خلاصه‌ی از خطا Inline small CSS and Inline small JavaScript
2 مقدمه درباره نحوه فراخوانی فایل‌های CSS و JS
3 درباره مشکل Inline small CSS و Inline small JavaScript
4 راه حل برای رفع ارور Inline Small
4.1 نحوه رفع ارور Inline small CSS
4.2 نحوه رفع ارور Inline small JavaScript
4.3 رفع ارور Inline small CSS و Inline small JS در وردپرس
4.4 Inline Images

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

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

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

پیش نیاز برای درک بهتر

قبل از هرچیزی باید بدونیم که CSS و JS چیست؟
اگر پاسخ این سوال را میدانید به پاراگراف بعدی مراجعه نمایید و مقاله را ادامه دهید. اگر نمیدانید که CSS و JS چیست با ما همراه باشید تا در چند خط بصورت کوتاه و خلاصه بیان کنیم.

HTML چیست؟ کدهای HTML میتوانند موارد تشکیل دهنده یک صفحه را دربر بگیرد و بطور کلی ساختار یک صفحه از کدهای HTML تشکیل شده است. تصاویر و متن ها و … داخل کدهای HTML قرار می‌گیرند.
CSS چیست : کدهای CSS رای استایل دهی به محتوای صفحات است. در واقع با این کد ها می‌توانید رنگ و اندازه و ظاهر محتوای HTML را تغییر دهید.
JS : جاوا اسکریپت یا javascript در واقع برای پویا شدن سایت است. به کمک این کدها می‌توان برخی از فعالیت ها را بصورت اتوماتیک انجام داد.

مثال برای درک بهتر :

فرض کنیم یک ساختمان را که می‌خواهند بسازند ابتدای کار باید اسکلت ساختمان و سپس دیوار و سقف را بسازند. این موضوع در طراحی سایت همان کدهای HTML است که ساختار اصلی سایت را در بر می‌گیرد. پس از آن باید دیوار ها نقاشی و نمای ساختمان زده شود و درب ها و چراغ و … اضافه شوند که در طراحی سایت این دقیقا همان CSS است ک با آن می‌توان به کدهای HTML استایل دهی کرد. حال در مرحله آخر برای ساختمان آیفون تصویری و یا ریموت درب پارکینگ و … نصب می‌شود که در طراحی سایت این عمل را به کمک JS یا جاوا اسکریپت انجام می‌دهند که اصطلاحا سایت را پویا می‌کنند.

تا این جای کار فکر میکنیم که درک درستی از کدهای استفاده شده در سایت پیدا کرده اید. در ادامه با ما باشید.

نحوه فراخوانی فایل های CSS و JS

کدهای CSS

type of css

کدهای CSS بطور کلی به 3 بخش دسته بندی می‌شوند. از کدهای CSS به 3روش : 1- External و 2- internal و 3- inline استفاده می‌شود. هر کدام از این روش ها مزایا و معایبی دارد. تگ های HTML برای فراخوانی کدهای CSS ابتدا از کدهای External شروع می‌کنند و سپس به سراغ کدهای internal می‌روند و در آخر هم کدهای inline را فراخوانی می‌کنند. بر همین اساس اولویت در استایل دهی با کدهای inline است. بعنوان مثال اگر یک بخشی از متن در کدهای External به رنگ آبی باشد و دقیقا همون متن در کدهای internal قرمز باشد و مجددا همان بخش از متن در کدهای inline به رنگ زرد باشد، HTML در خروجی همان رنگ زرد را فراخوانی و نمایش می‌دهد.

کدهای JS

کدهای JS نیز همانند کدهای CSS به 3روش : 1- External و 2- internal و 3- inline استفاده می‌شود.

 

تا این بخش از مقاله هنوز سراغ معرفی و آموزش رفع خطای Inline small CSS و Inline small JavaScript از خطاهای pagespeed در سایت gtmetrix نرفته ایم و فقط به توضیح CSS و JS پرداختیم. اگر به توضیح این خطا که توسط سایت gtmetrix ارائه می‌شود نگاهی بیندازیم جمله “Inlining small external CSS files” را مشاهده خواهیم کرد. این جمله بدین معناست که فایل های CSS با حجم بسیار کم که با روش External فراخوانی شده اند را با حجم کم یکپارچه نمایید. البته متاسفانه این موضوع در برخی از سایت ها به اشتباه آموزش داده شده است.

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

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

هر چند وجود فایل‌های External نیاز و لازم است و حتما درج خواهد شد اما نباید به شکلی از آن استفاده کنیم که باعث ایجاد خطای Inline Small CSS و همینطور خطای Inline Small JavaScript شویم.

راه حل برای رفع ارور Inline Small

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

گوگل در مقاله‌ای با عنوان 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.

نحوه رفع ارور Inline small 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: 8em; }
.bold { font-weight: bold; }

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

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

چه کار کردیم؟

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

این روش برای سایت‌هایی که اختصاصی طراحی شده اند مناسب است، البته برای همه نوع سایت کاربرد دارد. چه سایت وردپرس باشد و چه سایت جوملا و … . برای برخی CMSها مثل وردپرس افزونه هایی هست که در ادامه به آنها خواهیم پرداخت.

نحوه رفع ارور Inline small JavaScript

درباره فایل‌های 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>

رفع ارور Inline small CSS و Inline small JS در وردپرس

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

• w3 total cache

• js- css script optimizer

• wp super minify

• wp minify fix

• combine css

• combine js

 

این ارورهای Inline small CSS JavaScript باعث کاهش تعداد درخواست های HTTP هم نیز می‌شود و شما اگر قصد دارید تعداد درخواست های سایت خود را در جهت بهینه سازی، کاهش دهید حتما مقاله رفع خطای Make fewer HTTP requests را هم بخوانید.

Inline Images

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

ولی توجه داشته باشید که این روش بهتر است فقط برای عکس‌هایی استفاده شود که اندازه و حجم بسیار کمی دارند چرا که وقتی عکس‌ها حجم متوسط به بالایی داشته باشند با روش کدگذاری بر مبنای 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 خواهیم داد.

اهمیت خطای Inline small CSS و Inline small JavaScript در گوگل:

یکی از مهمترین مواردی که گوگل به آن اهمیت می‎دهد سرعت سایت است. موضوع سرعت سایت فقط ربوط به موضوعات بالا نمیشود و گوگل در ابزار سرچ کنسول گزارشی را با عنوان speed قرار داده است که تک تک صفحات سایت شما را بررسی میکند و صفحاتی که مشکل سرعت دارند را به شما اعلام می‌کند.

پایان

سعی شده در این آموزش‌ها با بالا بردن سرعت سایت که یکی از فاکتورهای مهم در افزایش رتبه سایت در گوگل می‌باشد، کمک شایانی کنیم، در انتهای این آموزش باید توانید فایل css و js خود را inline کنید و با هم ادغام کنید و آن‌ها را یکی کنید و یا اگر تعداد کمی دارند در سند HTML بیاورید تا باعث رفع خطای Inline small CSS و همینطور رفع خطای Inline small JavaScript شوید.

با آموزش های بالا سعی برآن داشتیم تا یکی از مهمترین فاکتورهای اساسی در افزایش سرعت سایت که رفع خطای Inline small CSS و رفع خطای Inline small JavaScript می‌باشد را توضیح دهیم.

این جلسه از آموزش رفع خطاهای gtmetrix هم به پایان رسید. با ما همراه باشید