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

چطور ارور Inline small CSS JS را در جی تی متریکس رفع کنیم؟

رفع خطای Inline small CSS و ارور Inline small JavaScript
رفع خطای 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%

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

 

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

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

    Inline small CSS
    Type of CSS

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

  • کدهای JS
    برای فراخوانی کدهای JS هم همانند CSS از سه روش بالا استفاده می‌شود
[box type=”info” align=”alignright” class=”” width=””]

نکته بالا صرفا جهت اطلاع بود و مربوط به خطای 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 گواه این موضوع هستند.

[/box]

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

درباره مشکل 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 و خطای Inline small JavaScript
رفع خطاهای Inline small CSS و Inline small JavaScript

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

این ارورهای 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 گوگل میپردازیم. با ما همراه باشید.

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
پوریا آریافر
اولین کسب و کار آنلاین خودم رو در فیسبوک راه‌اندازی کردم، سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال رو داشتم. بعد اینکه فیسبوک خالی از کاربر ایرانی شد وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت رو دریافت کردم، در حالی که نمره بالا گرفتم ولی کسی به دلیل به خطر افتادن موقعیت شغلی خودش به عنوان کارآموز منو قبول نمی‌کرد، بعدش با شروع دوران خدمت سربازی، مسئول بهینه سازی یک سایت خبری معتبر شدم و سئو یاد گرفتم. در ابتدای سال ۲۰۱۴ تونستم از رتبه ۱۵۰۰۰ به ۴۰۰ الکسا نزدیک کنم، اون زمان الکسا خیلی مهم بود. وارد دانشگاه شدم، به دلیل عدم علاقه به دانشگاه سعی کردم زودتر تمومش کنم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، توی دانشگاه هر کسی منو میدید یاد سئو میوفتاد، در همون سال آخر دانشگاه بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو رو داشتم، که به مجتمع فنی فروختم تا بتونم تمرکز رو فقط بر روی عشق خودم یعنی سئو بذارم، وقتی کانال تلگرام فروختم حس پرواز بهم دست داد، هرچند درآمد چندین میلیون ماهانه رو از دست دادم ولی دوباره باید مثل گذشته با پوستی نو یک فصلی نو رو میساختم. در این چندین سال فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌گرفته، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کردم. در اکثر ابزارهای کاربردی گوگل تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری رو یادگیری و یاددادن می‌دونم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شد تونست چنین بستر مناسبی رو برام فراهم کنه. همینطور در حال حاضر مدیریت یک تیم ۱۰ نفری از جوانان فعال و پرانگیزه رو در میزفا به عهده دارم. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم …
لیست آموزش GTmetrix نسخه جدید

40 نظر

40 پاسخ

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

  2. سلام و درود ، ممنونم بابت تک تک مقاله ها و آموزش های خیلی خوبتون
    در رابطه با خطا Inline small JavaScript سوال داشتم
    برای بنده 4 خطا آورده :
    https://sarma-garma com/wp-admin/js/password-strength-meter.min.js?ver=5.3.2
    https://sarma-garma com/wp-content/plugins/akismet/_inc/form.js?ver=4.1.4
    https://sarma-garma com/wp-content/themes/flatsome/inc/integrations/wp-rocket/flatsome-wp-rocket.js?ver=3
    https://sarma-garma com/wp-includes/js/zxcvbn-async.min.js?ver=1.0

    این ها را باید کجا سایت خودم قرار بدم ؟ دقیقا متوجه نمیشم ممنون میشم من را راهنمایی کنید.

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

  3. سلام؛ وقت بخیر
    من در حال یادگیری سئو هستم و خب یکی از فاکتورهای اصلی در بهینه سازی افزایش سرعت سایت هست. با سایت Gtmetrix میشه سرعت سایت را بهینه سازی کرد؛ مشغول یادگیری کار با Gtmetrix بودم ولی دیدم بعضی از مواردی که به اصلاح و افزایش سرعت سایت کمک می کنه نیاز به مهارت برنامه نویسی داره؛ نمونه اش هم همین رفع خطای Inline small CSS و خطای Inline small JavaScript.
    من متاسفانه با برنامه نویسی آشنا نیستم؛ چطور مشکلم رو حل کنم؟

    1. سلام وقت بخیر، اینکه باید چطوری رفع کنی رو ما در این مقاله نزدیک به ۲ هزار کلمه براش نوشتیم، پیشنهاد میشه دوباره مطالعه کنید.
      از طرفی نیاز به مهارت برنامه نویسی زیاد نیست، صرفا کدنویس متوسط باشید کافی هست (دانش html و css و کمی php)
      همینطور میتونید از افزونه ها استفاده کنید. اگر وردپرس باشید مقاله بهترین افزونه های سرعت میتونه به شما کمک کنه.

  4. با سلام ممنون از مطالب مفیدتون…یه سوال داشتم این روش برای فایل های اکسترنال css و js پلاگین ها هم جواب میده؟
    الآن من پنج تا از لینک های سایتم این ارورر رو داره وهمه آدرس فایل های اکسترنال css و js یکی از پلاگین ها هست… بعضی جا ها شنیدم نمیشه اینا رو آورد توی تگ استایل…به نظرتون درسته یا نه؟

    1. سلام امین. میتونید این کار رو هم بکنید و مشکلی نداره.

  5. سلام دوست عزیز با تشکر از مقاله خوبتون
    سوالی که داشتم برا من خطای inline رو تو مسیر کش سایتم میده
    من اگه پاک کنم اون دو تا فایل css که تو کش هاستم مشکلی پیش نمیاد و مشکلم حل میشه؟

    1. سلام عزیز. نباید پاک کنید. پاک کردن اون فایل ها یعنی پاک کردن صورت مسئله.
      سایتتون بررسی شد. مشکل خاصی نداره و نیازی نیست به اون خطا توجه کنید. رفع اون ارور برای سایت شما باعث افزایش سرعت سایت نمیشه و موردی رو حل نمیکنه.
      موفق باشید.

  6. سلام
    من سایتم وردپرسه اینو نصب کردم خیلی روی سرعت سایت تاثیر داشت دوستان امتحان کنند از شما هم بابت این آموزش سپاس گزارم
    js- css script optimizer

    1. سلام امیر جان. ممنونم از اینکه تجربه باارزش خودت رو در اختیار ما قرار دادی. ولی خب افزونه ای که معرفی کردی کمی قدیمی هست. از طرفی هر افزونه ممکنه با یک قالب بخونه با یک قالب نخونه. کلا باید افزونه های مختلف رو تست کرد.
      ممنونم از حضورت. پایدار باشی

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

  8. سلام خسته نباشید من کد jquery 3.2.1.js را از حالت external خارج کردم به صورت internal در یک خط در تگ body اولین خط در سایتم وارد کردم سرعتش ده برابر شد ولی بعضی کدها رو نمیشناسه مثل کد hover و click چون منو اصلی من از کد hover استفاده میکنه اصلا منو ها باز نمیشن شما نمیدونید باید چکار کنم تا درست بشه ؟؟؟

    1. ببخشید درست شد کد hover رو از انتهای کدها در تگ script انتقال دادم به ابتدا و درست شد مرسی از سایت و مقاله عالی تون با تشکر

    2. سلام محمدرضا.
      اشتباه کردید. فایل jquery یکی از مهم ترین فایل ها هست که خیلی از کدها بر این اساس کار میکنه. جای این فایل رو تغییر ندید و کاری باهاش نداشته باشید این یک فایل نمیتونه سرعت سایت شما رو چند برابر کنه و ربطی به این فایل نداره. حجم این فایل هم سبک هست. این روش زمانی به درد میخوره که داخل این فایل کمتر از یک برگه a4 کد باشه

  9. تو مطلب گفتیی :

    ” ولی متاسفانه در اکثر سایت‌های ایرانی به اشتباه و به دلیل تشابه اسمی عبارت Inline فکر می‌کنند منظور روش Inline در CSS هست درحالی که عبارت “Inlining small external CSS files” در اینجا به معنی یک خط کردن کدهای CSS با حجم کم است”

    خواستم بگم دمتون گرم – تا الان منم همین فکرو میکردم – بعضا سر استفاده نکردن از روش inline css خیلی اضیت شدم – مخصوصا زمانی که به کمک php میتونستم به راحتی css بدم به کدهام ولی مجبور شدم که 100 ها کلاس css تعریف کنم 😐

    در کل ممنون – مطالب دیگتون رو خوندم – نحوه مطلب نوشتن و زیبایی مطالبتون نسبت به سایت های دیگه بهتره که خب نشون میده برای تهیه مطالب زحمت کشیده شده و…

    1. سلام مهدی جان.
      ممنونم از بازخوردت و خیلی خوشحالم که این مقاله ها مورد پسند شما واقع شده و در عمل برات مفید بوده.
      البته نمیخوام بگم روش inline css استفاده نکن ولی استفاده از کلاس برات اولویت داشته باشه و سعی کن کمترین استفاده رو از این روش ببری. اصولا وقتی با فریم ورک کار میکنی با کلاس هاش بازی میکنی و این نظم میده به کدها و قابلیت کش هم وجود داره.
      بازم به ما سر بزن. موفق باشی 🙂

  10. سپاس فراوان از اطلاعات بسیار جامع و مفیدی که قرار دادید.
    بسیار کمک کننده بود

  11. سلام
    ممنونم بابت مقاله مفیدتون
    نظرتون درباره سرعت سایت من چیه؟ مشکل اصلی سرعت سرور هست یا بهینه نبودن سایت؟
    چون با ابزار تست گوگل وضعیت اصلا مناسب نیست
    فروشگاه اینترنتی بایروز
    تشکر

    1. سلام. خواهش.
      سرعت سایت با یک بررسی چشمی بد نبود. ولی هر جا در زمینه سرعت مشکل داشتید کافی هست اسم خطا رو سرچ کنید و در میزفا مقاله ها رو مطالعه کنید. و خطاها رو رفع کنید، حتی اگر چند میلی ثانیه تاثیرگذار بود.
      موفق باشید.

  12. سلام
    چطوری می‌تونم متوجه بشم که هر کدوم از فایلهای css و js که لینکش رو داده، تو کدوم فایل استفاده شده که بتونم کدش رو انتقال بدم داخل همون، یا اگه ادغامشون کردم، از تگ لینک تو هدر استفاده کنم؟

    ممنون

    1. سلام، پاسخ شما در سوال شما هست. وقتی به شما لینک CSS و JS داده یعنی آدرسش رو داده و کافی است به آدرس دقت کتید و در هاست همون مسیر آدرس برید مگر فایل ها کش شده باشن و یا کدنویسی شما طوری باشه که مسیر فایل ها رو در خروجی تغییر بده و یا خودش فایل های سی اس اس و جی اس ادغام کرده باشه. پیشنهاد میشه مقاله رو به شکل کامل مطالعه کنید تا یک راه مناسب پیدا کنید.

      1. بله ما آدرس css و js رو داریم
        ولی اون css تو کدوم فایل php من استفاده شده؟ سوالم این بود.

        1. دیگه بستگی به قالب و برنامه نویس اون داره. فرمول خاصی نداره که بگم این رو برید پیدا میشه. اصولا با تجربه و کنجکاوی میشه مسیر فایل ها در php پیدا کرد.

  13. سلام
    با تشکر از آموزشتون
    من درست متوجه نشدم الان اون css تو پلاگین هارو باید چه جوری حذف کنم؟ اصلا باید حذف کنم؟ باید حذفشون کنم بریزم تو css چه فایلی؟

    1. سلام،شما مقاله رو با دقت مطالعه نکردید چون من درباره حذف حرفی نزدم. پیشنهاد میکنم دوباره بخونید چرا که نمیشه من دوباره بیام کل مقاله رو به شما توضیح بدم، در مقاله با عکس و مثال توضیح داده شده. اگر خوندن مقاله براتون سخت هست میتونید از اموزش ویدیویی استفاده کنید.

      1. مهندس اون قسمت مربوطه روخوندم
        __________
        اگر محتوای فایل CSS که به روش External فراخوانی شده بسیار کم حجم و به اندازه چند بایت می‌باشد بهتر است یا آن را با دیگر فایل‌های external CSS ادغام نماییم یا به شکل مستقیم و Internal درون سند HTML استفاده کنیم.

        برای مثال به سند HTML زیر توجه کنید:

        Hello, world!

        و فایل small.css با محتوای فرضی زیر:

        .yellow {background-color: yellow;}
        .blue {color: blue;}
        .big { font-size: 8em; }
        .bold { font-weight: bold; }

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

        .yellow {background-color: yellow;}
        .blue {color: blue;}
        .big { font-size: 8em; }
        .bold { font-weight: bold; }

        Hello, world!

        ولی اگر تعداد زیادی فایل CSS با حجم کم در صفحات شما فراخوانی می‌شوند بهتر است آنها را ادغام کنید
        _________
        الان این محتوای css مدنظر من برای چندتا از پلاگین هام هست اونارو چه جوری باید ادغام کنم!؟ و دیگه پلاگینه اونهارو فراخوانی نکنه!!؟؟
        البته با کمک یه پلاگینی این مشکل inline small css رو حل کردم ولی بیشتر دوس داشتم دستی هم ببینم چه طوری میشه رفع کرد!

        1. در کل بله باید ادغام کنید چه دستی چه با افزونه. البته دستی نمیتونی اینکار رو بکنی، چرا؟ چون اگر شما بیای دستی کدهای یک پلاگین رو تغییر بدی با هر بار آپدیت پلاگین تمام تغییرات شما از بین میبره. مگر کدنویسی کنی که خب افزونه هم کدنویسی کرده و نیازی نیست شما دست به کد بشی. برای افزونه ها و یا قالب هایی دستی خوبه که اپدیت نمیشن. و البته باید بدونید که تنظیمات هر افزونه و قالب هم متفاوت هست. و البته دقت هم داشته باشید که از افزونه های بهینه شده استفاده کنید و اگرم استفاده میکنید تنظیمات بهینه شده روی افزونه اعمال کنید.

  14. با سلام
    اسکریپت سایت جوملا است و جهت افزایش سرعت از افزونه jch استفاده میکنم

    http://domain.com/media/plg_jchoptimize/cache/css/d4bc870c04ad13e39a656dab13b69211_0.css
    http://domain.com/media/plg_jchoptimize/cache/css/d4bc870c04ad13e39a656dab13b69211_1.css
    http://domain.com/media/plg_jchoptimize/cache/css/d4bc870c04ad13e39a656dab13b69211_2.css
    http://domain.com/plugins/system/yt/includes/libs/m ... jchoptimize/css/pro-jquery.lazyloadxt.fadein.css
    http://domain.com/plugins/system/yt/includes/libs/m ... /modules/mod_jux_news_ticker/assets/css/dark.css
    http://domain.com/plugins/system/yt/includes/libs/m ... modules/mod_jux_news_ticker/assets/css/style.css
    http://domain.com/plugins/system/yt/includes/libs/m ... /ytshortcodes/assets/css/bootstrap/bootstrap.css

    لطفا مرا راهنمایی نمایید چگونه با استفاده از combine.css این فایل ها را باهم ترکیب کرده و لینک آنها را چگونه از Html حذف نمایم با تشکر

    1. سلام، در گوگل نحوه استفاده از این افزونه رو جستجو کنید.

  15. با سلام و عرض خسته نباشید.
    ضمن تشکر و قدردانی از زحمات بی وقفه و مفید شما گرامی.
    سوالی داشتم خدمتتون ..
    بنده در GTMetrix و در صفحه Yslow و در کادر Minify JavaScript and CSS – چند خطا بهم میده که کاملا گیجم کرده ..
    نه آدرسی میده نه چیزی ..
    نمونه اش را برایتان ارسال می کنم تا شما یه بررسی کنید و اگر لطف کنید راهکاری به بنده ارائه نمایید.

    There are 4 components that can be minified
    inline tag #1
    inline tag #11
    inline tag #12
    inline tag #13

    منظورش از اینا چیه ؟
    باید چجوری پیداشون کنم ؟
    منظور از tag برچسب هاست ؟
    بخدا گیج شدم.
    ممنون میشم راهنمایی و کمکم کنید.
    سپاسگذارم.

    1. سلام، خواهش. خطای Minify JavaScript and CSS فرق داره. inline که شما اشاره میکنید با خطای inline small css که در این صفحه هست فرق داره و این دو inline اصلا ربطی به هم ندارن. شما درباره روش استایل دهی به صورت inline تحقیق کنید تا اطلاعات لازم به دست بیارید.

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

    1. سلام، قطعا با تلاش شما و خواندن مقالات ما به شکل دقیق میتونید مشکل خودتون رو حل کنید. سجامت و پشتکار باعث حل مشکلات میشه.

  17. واقعا دمتون گرم! خیلی این مقاله ها ارزش دارند
    چون خیلی براشون زحمت کشیدید، من تاحالا تو این چند سال وب مستریم، مقاله هایی به این تمیزی و شیکی و درست حسابی ندیده بودم!
    ماشالله
    ایشالله موفق باشید

    آرزوی بهترین ها ♥

    1. سلام علیرضا جان، بله دقیقا خیلی زمان گرفته شده برای انتشار این مقاله‌ها به شکل رایگان
      خوشحالم مورد پسند شما واقع شده.
      تشکر و همچنین برای شما موفقیت و پایداری خواستارم.

  18. با سلام ممنون از مطالب خوبتون
    می تونید سایت من رو یه بررسی کنید ببینید مشکلی از لحاظ بهینه سازی داره یا نه؟

    وبسایتی نو

    1. سلام، حجم سایت و زمان TTFB جالبی نداره. این موارد رو بهبود بدید

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=