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

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

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

[box type=”warning” align=”alignright” class=”” width=””]تذکر: فقط دوستانی می‌توانند این مشکل را در GTMetrix.com حل کنند که اهل مطالعه باشند، شما باید کل این مقاله را به خوبی بخوانید تا درک خوبی از خطا داشته باشید و سپس وقتی درک خوب از خطا پیدا کردید، نصف راه را برای پیدا کردن پاسخ و حل مشکلات خود طی کرده‌اید. این مقاله برای سایت‌های وردپرس، جوملا، سایت های اختصاصی نوشته شده با PHP و یا ASP کاربرد دارد.[/box]

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

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

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

خب حالا که به درک خوبی از پیش نیازها رسیدیم بریم سر اصل مطلب و درباره آموزش رفع خطاها صحبت کنیم.

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

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

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

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

  

  به شکل کلی سه شیوه برای استفاده از کدهای 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 و Inline small JavaScript

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

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

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

صحبت‌هایی در این قسمت انجام می‌شود هم مربوط به فایل های CSS است و هم مربوط به فایل‌های JS.
به منظور بهینه سازی لود سایت و زمان باز شدن صفحه، در صورتی که کدهای 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.

نحوه رفع ارور 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 در سند html شما فراخوانی می‌شود، روش ادغام فایل ها کاربرد خوبی دارد. می‌توانید برای ادغام کردن فایل‌ها از پلاگین‌های وردپرس زیر استفاده نمایید.

• 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 خواهیم داد.

اهمیت این خطا در گوگل: گوگل بسیار به سرعت سایت اهمیت بالایی می‌دهد. این اهمیت گوگل صرفا به همین مستندات بالا خطم نمی‌شود، بلکه گوگل در ابزار محبوب خودش یعنی سرچ کنسول گزارشی با عنوان Speed درج کرده است که به شما تک تک می‌گوید که کدام از صفحات شما مشکل کندی سرعت سایت دارند. البته ما درباره این موارد در یک دوره ۱۵ ساعت آموزش سرچ کنسول به صورت فیلم صحبت های بسیاری کردیم. اگر علاقه داشتید و تمایل داشتید بازدید طبیعی سایت خود را از طریق گوگل چندین برابر کنید آموزش مذکور کمک بسیار خوبی به شما می‌کند.

پایان

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

من پوریا آریافر در زمینه سئو چند سالی هست به صورت تخصصی و حرفه ای فعالیت میکنم و نویسنده این مقاله در سایت میزفا هستم. برای نوشتن این مقاله زحمت بسیاری کشیده شده است، بازنشر و یا استفاده از محتواهای موجود در این صفحه لطفا با ذکر منبع باشد تا مایع دلگرمی ما برای ادامه تولید محتوای باکیفیت باشد. اگر سوالی داشتید حتما در قسمت نظرات سایت میزفا مطرح کنید ما پاسخگو خواهیم بود.

این جلسه از آموزش GTmetrix هم به پایان رسید در جلسه بعد به معرفی خطای Leverage browser caching در pagespeed گوگل میپردازیم. با ما همراه باشید.