رفع خطای Optimize the order of styles and scripts در gtmetrix

در این مقاله قصد داریم درباره مشکل Optimize the order of styles and scripts و حل آن در جی تی متریکس صحبت کنیم و بررسی کنیم که چطور اینخطا در جهت افزایش سرعت سایت به ما کمک میکند.

خلاصه‌ای از خطا Optimize the order of styles and scripts

نام: Optimize the order of styles and scripts
نوع: JS/CSS
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 95%

Styles-Optimizer-order

خطای Optimize the order of styles and scripts چیست؟

خطا Optimize the order of styles and scripts که به فارسی می‌توان گفت چیدمان صحیح فایل‌های CSS و JavaScript ترجمه کرد، زمانی اتفاق می‌افتد که فایل‌های CSS و JS طراحی سایت شما به ترتیب اصول لود نشده باشند. بنابراین سایت جی تی متریکس با برخورد به این ارور به شما می‌گوید که در جهتبهینه سازی سایت خود و همچنین نحوه صحیح قرارگیری المان‌ها، باید ابتدا فایل‌های CSS (فایل‌های استایل‌ دهی) را قبل از فایل‌های JS (فایل‌های جاوا اسکریپت) فراخوانی کنید.

گاهی ممکن است توسط کدهای JS بخواهید تغییراتی در کدهای CSS ایجاد کنید و به این ترتیب باید اول کدهای CSS لود شوند، و اصولا کدهای CSS سبک‌تر هستند و حتی از نظر تجربه کاربری اولیت بیشتری برای سریع لود شدن نسبت به JS دارند، چرا که ظاهر اصلی طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) و چیدمان یک صفحه برعهده کدهای CSS است. کدهای CSS از این جهت هم مهم‌تر هستند تا کاربران را سریع از دست ندهیم و بعد از درگیر شدن کاربر با سایت، می‌توان فایل‌های نسبتا سنگین‌تر JS را لود کرد.

به زبان ساده در یک صفحه از سایت تگ‌های مربوط به استایل (CSS) باید بالاتر از تگ‌های مربوط به جاوااسکریپت (JS) قرار گیرد.

توضیحات گوگل در این باره:

Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. However, more importantly for round-trip times, many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them.

رفع خطای Serve scaled images – بهینه سازی عکس

در این مقاله قصد داریم درباره مشکل Serve scaled images و حل آن در جی تی متریکس صحبت کنیم و بررسی کنیم که چگونه عکس و تصاویر سایت خود را در جهت افزایش سرعت سایت، بهینه سازی کنیم و روش‌های رایج بهینه سازی عکس چیست و چه تاثیری بر روی سئو و تجربه کاربری دارد و اگر عکس ها بهینه سازی نشوند چه اتفاقی سمت کاربر و سئو تصاویر رخ می‌دهد.

خلاصه‌ای از خطا Serve scaled images

نام: Serve scaled images
نوع: عکس
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 70%

وقتی از عبارت بهینه سازی عکس استفاده می‌کنیم دو روش کلی برای بهینه سازی تصاویر مد نظر است، روش اول بهینه سازی، سایز عکس ها (Serve scaled images) و کاهش حجم عکس ها (Optimize images) هست که باعث افزایش سرعت سایت می‌شود روش اول به شکل غیرمستقیم بر روی بهبود سئو سایت تاثیر می‌گذارد. روش دوم بهینه سازی عکس، استفاده از اتریبیوت های همانند title و alt در عکس ها هست که به شکل مستقیم بر روی سئو تاثیرگذار است. در PageSpeed و ابزار تست سرعت gtmetrix اشاره به بهینه نبودن سایز و حجم عکس‌ها دارد به عبارتی خطای Optimize images و خطای Serve scaled images روش اول را متذکر می‌شود و ما در این مقاله ابعاد عکس ها را کامل بررسی میکنیم.

علت خطای Serve scaled images در PageSpeed چیست؟

unoptimized-image

به عکس سمت راست بالا توجه کنید، مرورگر درخواستی به سمت سرور می‌دهد برای دانلود عکسی با ابعاد ۲۴۰۰ * ۱۳۵۰ با حجم ۲.۵ مگابایت درحالی که توسط CSS عکس scale شده و به یک تصویر بند انگشتی (thumbnail) تبدیل شده است. طراحی سایت  (طراحی سایت شرکتی، طراحی سایت فروشگاهی) ما در استفاده از عکس‌ها اینجا مناسب نیست و داریم کاربر را به اجبار دانلود به حجم بالایی از داده‌ها میکنیم درحالی که نیازی ندارد. مثلا در عکس بالا برای نمایش تصاویر محصولات به عکسی با ابعاد ۵۰۰ * ۲۸۱ و حجم ۱۰۰ کیلوبایت نیاز داریم ولی عکسی با ابعاد ۲۴۰۰ * ۱۳۵۰ با حجم ۲.۵ مگابایت لود می‌شود. شما اگر روزی هزار بازدید کننده باشته باشید و عدد ۱۰۰۰ را در ۲.۵ ضرب کنیم تقریبا 2.5 گیگابایت از پهنای باند روزانه مصرف صرفا این عکس غیربهینه می‌شود و در ماه ۷۳ گیگابایت باید پنهای باند خرج یک عکس کنیم، خب ما در این مثال ساده صرفا یک عکس را حساب کردیم اگر ۱۰۰ یا ۱۰۰۰ عکس غیربهینه داشته باشیم یا کلا توجه به عکس‌ها نکنیم چه مشکلاتی پیش می‌اید؟

image-optimization-dimensions

رفع ارور Serve scaled images

روش اول – بهینه سازی تصویر در فتوشاپ

بهترین روش برای رفع ارور Serve scaled images قبل از آپلود عکس در سایت می‌باشد شما می‌توانید با استفاده از ابزارهای همانند فتوشاپ سایز و حجم آنها را بدون کاهش کیفیت، خروجی بگیرید. به این منظور عکس مورد نظر را در فتوشاپ باز کرده و بعد از آن بر روی تب File کلیک کنید و گزینه Export را انتخاب کنید، در زیرمنوهای نمایش داده شده گزینه Save for Web را انتخاب کنید، در پنجره باز شده می‌توانید انواع کیفیت و سایز مد نظر برای عکس را وارد یا انتخاب کنید.

روش دوم – بهینه سازی تصویر در ابزارهای آنلاین

روش دوم برای رفع ارور Serve scaled images استفاده از ابزارهای آنلاین تغییر سایز می‌باشد. سایت‌های همانند PicResize.com، سایت imageresize.org و resizeimage.net ابزارهای آنلاین مناسبی برای تغییر سایز و ابعاد فایل‌های تصویری هستند.

روش سوم – بهینه سازی تصویر در وردپرس و جوملا

روش اول و دوم قبل از آپلود عکس در سایت کاربرد دارد بر خلاف روش سوم که بعد از اپلود تصاویر نیز مورد استفاده قرار می‌گیرد. روش سوم برای رفع مشکل Serve scaled images استفاده از پلاگین های وردپرس و جوملا است. گاهی ممکن است شما تعداد تصاویر بسیاری را در سایت خود با حجم بالا قرار داده‌اید و زمان لازم برای بهینه سازی، تغییر سایز و ابعاد عکس ها را نداشته باشید در این صورت پلاگین‌هایی که اشاره خواهیم کرد می‌توانند به شما در تغییر سایز و همچنین در کاهش حجم تصاویر کمک کنند.
از افزونه های وردپرس می‌توان به پلاگین Imsanity اشاره کرد، برای CMS جوملا هم پلاگین ImageResizer موجود است، توجه داشته باشید قبل از نصب و اعمال تنظیمات این پلاگین‌ها، بک آپ از هاست و دیتابیس خود بگیرید.

آپدیت (Feb 6 2018): یکی از مشکلاتی که خیلی از دوستان درباره این خطا دارند این هست که عکس موجود در صفحه محصولات، همان عکسی است که در صفحه اصلی سایت فراخوانی می‌شود با این تفاوت که در صفحه اصلی عکس به کمک CSS تغییر سایز داده شده و کوچیک تر شده است، درواقع عکسی که باید فقط در صفحه محصولات باکیفیت و تقریبا بزرگ باشد ولی در صفحه اصلی هم لود می‌شود که این موضوع جدا از بروز خطای Serve scaled images در GTmeteix باعث بالاتر رفتن حجم صفحه اول سایت و دیر لود شدن آن برای کاربران و ربات های نظیر گوگل بات‌ها می‌گردد. در ادامه به چند راه‌کار اشاره می‌شود، هر چند ممکن است برخی از آنها زمان‌بر و یا قابل انجام نباشد ولی ما تمام روش‌های ممکنه برای رفع این خطا را اشاره میکنیم و انتخاب یکی از آن‌ها به عهده شما می‌باشد.

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

روش پیشنهادی و کلام اخر:

پیشنهاد ما برای بهینه سازی تصاویر، تغییر سایز و ابعاد مناسب و کاهش حجم عکس ها استفاده از نرم افزار Photoshop هست و طبق تجربه‌های چند ساله هیچ یک از روش‌ها انعطاف‌پذیری و کارایی فتوشاپ در بهینه سازی تصاویر را ندارد.

رفع خطای Optimize images – بهینه سازی عکس

در این جلسه قصد داریم درباره مشکل Optimize images و حل آن در GTmetrix صحبت کنیم و بررسی کنیم که چگونه عکس و تصاویر سایت خود را در جهت افزایش سرعت سایت، بهینه سازی کنیم و روش‌های رایج بهینه سازی عکس چیست و چه تاثیری بر روی سئو و تجربه کاربری دارد و اگر عکس ها بهینه سازی نشوند چه اتفاقی سمت کاربر و سئو تصاویر رخ می‌دهد.

خلاصه‌ای از خطا Optimize images

نام: Optimize images
نوع: عکس
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 69%

بهینه سازی عکس یعنی چه؟

وقتی از عبارت بهینه سازی عکس استفاده می‌کنیم دو روش کلی برای بهینه سازی تصاویر مد نظر است، روش اول بهینه سازی، سایز عکس ها (Serve scaled images) و کاهش حجم عکس ها (Optimize images) هست که باعث افزایش سرعت سایت می‌شود روش اول به شکل غیرمستقیم بر روی بهبود سئو سایت تاثیر می‌گذارد. روش دوم بهینه سازی عکس، استفاده از اتریبیوت های همانند title و alt در عکس ها هست که به شکل مستقیم بر روی سئو تاثیرگذار است. در PageSpeed و ابزار تست سرعت gtmetrix اشاره به بهینه نبودن سایز و حجم عکس‌ها دارد به عبارتی خطای Optimize images و خطای Serve scaled images روش اول را متذکر می‌شود و ما در این مقاله حجم عکس ها را کامل بررسی میکنیم.

علت خطای Optimize images در PageSpeed چیست؟

GTmetrix_Optimize_Images

زمانی که تصاویر شما به خوبی فشرده سازی نشده باشند چنین خطایی رخ می‌دهد، ارور Optimize images باعث کاهش لود سایت شما می‌شود و هم از طرفی پهنای باند ماهانه هاست شما را زودتر تمام می‌کند، و وقتی سایتی دیر باز شود تجربه کاربری بدی را به کاربران منتقل می‌کند چرا که جدا از گرفتن زمان کاربران برای باز شدن سایت، ترافیک اینترنت کاربران را هم به شکل زیادی مصرف می‌کند.

رفع ارور Optimize images

روش اول – بهینه سازی تصویر در فتوشاپ

بهترین روش برای رفع ارور Optimize images قبل از آپلود عکس در سایت می‌باشد شما می توانید با استفاده از ابزارهای همانند فتوشاپ سایز و حجم آنها را بدون کاهش کیفیت، خروجی بگیرید. به این منظور عکس مورد نظر را در فتوشاپ باز کرده و بعد از آن بر روی تب File کلیک کنید و گزینه Export را انتخاب کنید، در زیرمنوهای نمایش داده شده گزینه Save for Web را انتخاب کنید، در پنجره باز شده می‌توانید انواع کیفیت و سایز مد نظر برای عکس را انتخاب کنید.

روش دوم – بهینه سازی تصویر در ابزارهای آنلاین

روش دوم برای رفع ارور Optimize images استفاده از ابزارهای آنلاین فشرده سازی می‌باشد. سایت‌های معروف و قوی همانند optimizilla.com، سایت tinypng.com و compressor.io ابزارهای آنلاین مناسبی برای کاهش انواع فایل‌های تصویری هستند.

روش سوم – بهینه سازی تصویر در وردپرس و جوملا

روش اول و دوم قبل از آپلود عکس در سایت کاربرد دارد بر خلاف روش سوم که بعد از اپلود تصاویر نیز مورد استفاده قرار می‌گیرد. روش سوم برای رفع مشکل Optimize images استفاده از پلاگین های وردپرس و جوملا است. گاهی ممکن است شما تعداد تصاویر بسیاری را در طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) خود با حجم بالا قرار داده‌اید و زمان لازم برای بهینه سازی حجم زیادی از عکس ها را ندارید در این صورت پلاگین هایی که اشاره خواهیم کرد می‌توانند به شما اندکی در کاهش حجم تصاویر کمک کنند.
از معروف ترین پلاگین های وردپرس می‌توان به افزونه EWWW Image Optimizer و افزونه Smush اشاره کرد و پلاگین‌های ImageRecycle image optimizer و Imgen برای مدیریت محتوای جوملا مناسب هستند، البته جوملا پلاگین دیگری به نام JCH Optimize نیز دارد که پک کامل در زمینه بهینه سازی سایت است و یکی از ویژگی‌های این پلاگین فشرده سازی تصاویر است.

روش پیشنهادی و کلام اخر:

پیشنهاد ما برای بهینه سازی تصویر و کاهش حجم عکس ها استفاده از نرم افزار Photoshop هست و طبق تجربه‌های چند ساله هیچ یک از روش‌ها انعطاف‌پذیری و کارایی فتوشاپ در بهینه سازی تصاویر را ندارد.

رفع خطای Minimize request size در gtmetrix

در این مقاله قصد داریم درباره خطای Minimize request size و حل آن در GTmetrix صحبت کنیم. رفع ارور Minimize request size برای افزایش سرعت سایت و بهینه سازی لود شما بسیار حائز اهمیت خواهد بود و از طرفی رفع این مشکل باعث رفع مشکلات دیگری هم خواهد شد که در ادامه به بررسی و تشریح آن می‌پردازیم.

خلاصه‌ی از خطا Minimize request size

نام: Minimize request size
نوع: محتواها
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 98%

خطای Minimize request size در PageSpeed چیست؟

معمولا در هر صفحه از طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی) تعدادی فایل (عکس‌ها، استایل‌ها، فایل‌های جاوا اسکریپت و …) استفاده شده است ، برای دریافت هر کدام از این فایل‌ها مرورگر مجبور است یک درخواست به سمت سرور ارسال کند ، رد و بدل این درخواست‌ها توسط مرورگر و سرور نیاز به زمان زیادی دارد و اگر تعداد فایل‌ها زیاد باشید به مراتب تعداد درخواست‌ها بیشتر می‌شود و طبیعتا درگیری سرور هم بالا می‌رود، این موضوع شاید در سایت‌های کم بازدید خیلی محسوس نباشد ولی وقتی بازدیدکننده سایت بالا باشد قطعا رفع ارور Minimize request size قدم بزرگی در بهینه سازی سایت چه در سمت سرور و چه در سمت کاربر خواهد کرد.

حال اگر با ارور Minimize request size در GTMetrix برخورد کردید نشان از این است که تعداد درخواست‌ها برای بارگذاری عکس‌ها، فایل‌های CSS یا جاوا اسکریپت و… به سرور ارسال می‌گردد، باید کاهش پیدا کند. چنین خطاهایی مخصوصا در CMS های رایگان بسیار رایج است چرا که سازنده قالب برای بالا بردن انعطاف‌پذیری قالب خود ناگزیر است استایل‌ها و فایل‌های جداگانه‌ای تعریف کند مثلا برای راست‌چین کردن قالب، کدهای آن را در rtl.css قرار می‌دهد درحالی که در اکثر سایت‌هایی که طراحی سایت آن به شکل اختصاصی صورت می‌گیرد و دارای CMS اختصاصی هستند چنین مواردی کمتر دیده می‌شود البته این موضوع به معنی ضعف CMSهای رایگان نیست و با کمی مدیریت و بهینه سازی قالب می‌توان این مشکل را به راحتی رفع نمود.

combine-external-javascript-and-css

رفع خطای Minimize request size

روش‌های مختلفی را می‌توان برای فایل‌ها اجرا کرد تا ارور Minimize request size رفع شود، ادغام فایل‌ها، ایجاد لود تنبل فایل‌ها و یا حذف فایل‌های اضافی از مهم‌ترین روش‌ها برای رفع این خطا است.

• بهینه سازی عکس برای خطای Minimize request size

  یکپارچه سازی تصاویر و ادغام آنها یکی از مهم‌ترین فاکتورها در بهبود خطای Minimize request size است. یکی از بهترین روش‌ها برای ادغام تصاویر ٰcss sprites است و ما در مقاله رفع خطای Combine images using CSS sprites به تشریح درباره این خطا صبحت کردیم و پیشنهاد می‌شود برای رفع ارور Minimize request size مقاله اشاره شده را حتما بخوانید.
  همچنین شما می‌توانید از لود تنبل برای عکس‌ها (Images Lazy Loading) نیز استفاده کنید تا تعداد درخواست‌های همزمان نیز به شدت کاهش یابد، روش Lazy Load اگر برای عکس‌ها فعال شوید به این شکل است که کاربرها صرفا عکس‌هایی را لود می‌کنند که در صفحه مانیتور آنها قابل مشاهده است و مثلا عکس‌های موجود در پایین سایت را در مرورگر خود لود نمی‌کنند مگر با اسکرول به سمت پایین صفحه بروند و آن زمان درخواست برای بارگذاری عکس به سمت سرور ارسال می‌شود، روش لود تنبل باعث کاهش چشمگیری از درخواست‌های اولیه برای لود یک صفحه می‌شود. برای فعال‌سازی این قابلیت در سایت خود کافی است بسته به نوع کدنویسی و CMS خود در گوگل جستجو کنید. مثلا lazy load Plugin WordPress یا lazy load Plugin Joomla یا اگر CMS اختصاصی دارید براساس نوع زبان نوشته شده سایت خود جستجو را انجام دهید مثلا lazy load PHP Example یا lazy load ASP.NET MVC

• بهینه سازی فایل‌های استایل و جاوااسکریپت برای خطای Minimize request size

  روش‌هایی مشابه همانند عکس برای فایل‌های CSS و JS نیز وجود دارد اگر از CMS اختصاصی استفاده می‌کنید بهترین است به طراح سایت خود این موضوع را به اشتراک بگذارید و از او بخواهید برای رفع این خطا اقدام کند ولی اگر از CMSهای رایگان استفاده می‌کنید افزونه های مختلفی برای یکپارچه سازی و ادغام فایل های سایت شما وجود دارد. افزونه وردپرس Autoptimize جدا از رفع ارور Minify CSS ، رفع ارور Minify JavaScript و همچنین رفع ارور Minify HTML، خطای Minimize request size را هم می‌تواند برطرف کند، این افزونه با ادغام کردن فایل‌های CSS با هم و همینطور ادغام کردن فایل‌های JS با هم باعث کاهش تعداد این فایل‌ها شده و در نتیجه باعث کاهش تعداد درخواست‌ها هم نیز می‌شود. البته باید توجه داشته باشید که بعد از فعال‌سازی این امکان سایت شما ظاهر خود را نگه‌داشته باشد چرا که گاهی ممکن است ادغام فایل‌ها باعث تداخل و بهم‌ریختی سایت شود.افزونه وردپرس WP Rocket نیز تمام امکانات افزونه Autoptimize را نیز دارد بعلاوه می‌تواند حالت لود تنبل را برای عکس‌ها نیز محیا کند. یکی دیگر از روش‌های کاهش درخواست و برای رفع مشکل Minimize request size استفاده از اتریبیوت‌های  defer و یا async است.

• حذف فایل های اضافه برای رفع خطای Minimize request size

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

• استفاده از روش inline برای منابع

  اگر توجه کرده باشید طبق عکس زیر می‌توانید به جای ایجاد فایل جاوااسکریپت خارجی، به روش inline از آنها استفاده نمایید که باعث کاهش تعداد درخواست یا همان Minimize request size می‌شود، البته توجه داشته باشید که باید یک سری شرایط را رعایت نمایید، برای اینکه این روش را به شکل اصولی برای فایل‌های CSS و JS و حتی عکس‌ها انجام دهید.

inline-CSS-JS

رفع خطای Minify HTML در gtmetrix

در این مقاله قصد داریم درباره خطای Minify HTML و حل آن در GTmetrix صحبت کنیم. البته رفع خطای Minify HTML تاثیر ناچیزی در سرعت سایت خواهد داشت برخلاف دو خطای Minify CSS و Minify JavaScript که تاثیر بالایی در افزایش سرعت سایت دارند، برهرحال خواندن مقاله صرف از هر نتیجه‌ای برای شما مفید خواهد بود.

خلاصه‌ی از خطا Minify HTML

نام: Minify HTML
نوع: مربوط به HTML
اولویت: کم
میزان سختی: ساده
میانگین امتیاز: 98%

خطای Minify HTML در Gtmetrix چیست؟

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

عمل اصلی که در ٰMinify انجام می‌گیرد فشرده سازی فایل‌ها سمت کاربر است و مزیت آشکار این سریع‌تر لود شدن فایل‌ها و در نتیجه افزایش سرعت سایت است. نکته مهمی که باید به آن اشاره کنیم این است که عمل Minify کردن منابع (فایل‌ها) جدا از اینکه باعث بهبود تجربه کاربری (تجربه کاربری چیست) می‌شود موتورهای جستجو هم چنین فایل‌هایی با حجم کمتر را بیشتر دوست دارند.

رفع ارور Minify HTML

روش اول Minify HTML برای سایت‌های استاتیک

اگر طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما استاتیک است یعنی دارای محتوای ثابت و بدون CMS است می‌توانید از سایت‌های زیر برای Minify فایل‌های HTML استفاده نمایید.

• willpeavy.com
• minifycode.com

مزیت وب سایت minifycode در این است که جدا از minify کردن فایل‌های HTML می‌تواند فایل‌های CSS و JavaScript را هم Minify کند.

روش دوم Minify HTML در وردپرس

برای Minify HTML در ساخت سایت‌های وردپرس کافی است یکی از پلاگین‌های زیر را نصب کنید تا عمل Minify صورت بگیرد.

• Minify HTML
• HTML Minify
• WP Super Minify
• Autoptimize

پیشنهاد ما استفاده از افزونه Autoptimize یا WP Rocket است و می‌توانید جدا از minify کردن فایل‌های HTML سایر فایل‌های مهم همانند CSS و JavaScript را فشرده سازی کنید.

روش سوم Minify HTML در جوملا

اگر از  CMS جوملا استفاده می‌نمایید می‌توانید از پلاگین‌های زیر بهره ببرید.

• JCH Optimize
• EXT HTML Compressor

روش چهارم Minify HTML در Cloudflare

برخی از CDN ها همانند Cloudflare تظیماتی مبنی بر فشرده سازی فایل‌ها زیر دارند، اگر طراحی سایت شما بر روی چنین CDNهایی هست می‌توانید از این تنظیمات در جهت بهینه سازی سایت خود استفاده نمایید.

AutoMinify

نتیجه کار Minify HTML:

نتیجه کار Minify HTML را می‌توانید بعد از Minify کردن در قالب یک عکس مشاهده کنید:

minify-html-result