بهینه سازی و افزایش سرعت سایت

بهینه سازی و افزایش سرعت سایت

بهینه سازی و افزایش سرعت سایت


بهینه سازی و افزایش سرعت سایت

بهینه سازی و افزایش سرعت سایت

افزایش سرعت سایت ، افزایش سرعت لود سایت ، روش های افزایش سرعت سایت و بهینه سازی ، آموزش کامل کار با GTmetrix 

 بطور مثال چطور با GTmetrix خطا های سایت را برطرف کنم  سوالاتی است که تمامی

افرادی که دارای یک یا چند وبسایت هستند را درگیر خود کرده است ؛ طی سال های اخیر استفاده از وبسایت ها بالا رفته است

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

مثل GTmetrix یا Google Page Speed Insights را بشناسید ولی روش استفاده از آن را بلد نباشید و یا در روش بهینه سازی آن

مشکل داشته باشید ؛

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

بهینه سازی را به شما آموزش میدهیم. با ما همراه باشید و ویدیو آموزشی ما رو فراموش نکنید.

 

افزایش سرعت سایت


افزایش سرعت سایت

بهینه سازی و افزایش سرعت سایت

قبل از هر چیز باید به آماری که گوگل مبنی بر اهمیت سرعت وبسایت منتشر کرده است اشاره کنیم ؛ طبق آمار گوگل بیش از 53%

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

کرده است که میانگین سرعت لود وبسایت ها در 3G و 4G نشان داده است و طبق گفته گوگل میانگین سرعت لود وبسایت ها در

3G حدودا 19 ثانیه و برای 4G عدد 14 ثانیه به ثبت رسیده است.

پس با توجه به توضیحات گوگل میتونید متوجه بشید که چقدر سرعت سایت شما در پیشرفت کاری یا … شما تاثیر دارد. همینطور

این مورد در سئو نیز تاثیر بسزایی دارد چرا که الگوریتم های موتور جستجوگر بر پایه راحتی کاربر است و اگر سایت شما سرعت

پایینی در لود داشته باشد اهمیت آن برای گوگل کم میشود و در نتیجه شما جزء اولین سایت های نمایش داده شده نخواهید بود.

 

عوامل تاثیر گذار در سرعت سایت

 

عواملی که در سرعت سایت شما تاثیر دارند را میتوان به مواردی مثل : 1. کدنویسی سایت 2. هاست و سرور مورد استفاده

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

که ما در این زمینه کسب کردیم میتونیم اشاره کنیم که 50% را عامل اول و 50% دیگر را عامل دوم تشکیل میدهد اما این

به چه معناست ؟

به این معناست که اگر شما پرسرعت ترین هاست را تهیه کنید درصورتیکه کدنویسی بهینه نداشته باشید سایت شما با سرعت

بالا لود نخواهد شد و برعکس اگر سایت شما کدنویسی خوبی داشته باشد اگر هاست و سرور خوب مورد استفاده قرار نگیرد

نیز سایت شما پرسرعت لود نخواهد شد.

شما باید از یک هاست و سرور خوب بهره مند باشید و بعد از اینکه از هاست و سرور خود اطمینان پیدا کردید باید روی بهینه سازی

کدنویسی تمرکز کنید . حال ممکن است برای شما این سوال پیش بیاید که از چه طریق میتوان از بهینه سازی کدنویسی و سرعت

سایت اطلاع پیدا کرد ؟

 

ابزار های تست وبسایت


افزایش سرعت سایت

افزایش سرعت سایت

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

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

کار این دو مرجع آشنا میشیم و همینطور آموزش هایی جهت بهینه سازی وبسایت با این دو مرجع را ارائه خواهیم داد.

 

GTmetrix


آموزش کامل کار با GTmetrix

آموزش کامل کار با GTmetrix

سایت GTmetrix یکی از سایت های مطرح در زمینه تست وبسایت است که تقریبا تمامی افراد با آن آشنا هستند و معیار های

این وبسایت برای خیلی از افرادی که قصد راه اندازی سایت دارند و افرادی که دارای سایت هستند مهم است. این سایت به

شما یک خلاصه از تمام نقاط قوت و تمام نقاط ضعف وبسایت شما تهیه میکند و به شما ارائه میدهد ؛ مواردی مثل :

زمان آپلود ، پرفورمنس یا عملکرد ، ساختار وبسایت شما و خیلی از موارد دیگر را به شما ارائه میدهد. البته افرادی که در این

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

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

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

تا از عملکرد دقیق سایت خود مطلع شوید. در GTmetrix شما میتونید از بهینه بودن سایت مطلع بشید و زمان لود را بررسی کنید

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

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

وبسایت به شما کمک خواهد کرد و بهترین خدمات را به شما ارائه میدهد .

 

نحوه گرفتن تست در GTmetrix


 

بهینه سازی و افزایش سرعت سایت

مقادیر GTmetrix


آموزش کامل کار با GTmetrix

افزایش سرعت سایت

سایت GTmetrix مقادیر زیادی را به شما نمایش میدهد که در ادامه با هر یک از مقادیر و مفهوم آن آشنا میشیم.

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

از آخرین ورژن GTmetrix است که نسبت به بقیه مقاله ها متفاوت است چرا که طبق تحقیقات وبدیما اکثر وبسایت های ایرانی

از ورژن قدیمی GTmetrix استفاده میکنند ولی بهتر است بدانید که طی آخرین بروزرسانی GTmetrix یک گزینه به اسم GRADE

را اضافه کرده است ولی در نسخه های قبلی این امکان نبود .

 

آموزش کامل کار با GTmetrix

افزایش سرعت سایت

در عکس بالا میتونید فرق بین تست GTmetrix و GTmetrix Legacy را متوجه بشید که در اون هیچ Grade داده نشده ولی در تست های

جدیدتر تمامی عملکرد های سایت شما بررسی و در قالب یک گرید به شما ارائه میشود که این Grade به صورت نمره های : A-B-C-D و F

نمایش داده میشود که A بهترین نمره و F بدترین امتیاز هست . ما در این مقاله از آخرین متد های روز و آخرین ورژن GTmetrix استفاده

خواهیم کرد. همچنین بعد از مطالعه قسمت مقادیر میتوانید ویدیو آموزشی وبدیما در زمینه آموزش کار با GTmetrix را نیز مشاهده کنید.

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

 

 

مقادیری که GTmetrix به شما نمایش میدهد

 

summary :

 

آموزش کامل کار با GTmetrix

بهینه سازی و افزایش سرعت سایت

خلاصه ای از وبسایت شما را ارائه میدهد که شامل Speed Visualization ،Top Issues ، Page Details میشود :

  • Speed Visualization : یک تست بصورت تصاویر از وبسایت شما نشان میدهد و عملکرد های کلیدی وبسایت شما را نشان

میدهد.

  • Top Issues : مشکلات مهم وبسایت شما را نمایش میدهد.
  • Page Details : گزارشی از وبسایت شما ارائه میدهد که شامل جاوا اسکریپت ، CSS ، تصاویر و فرانت وبسایت شما است.

 

Performance :

 

آموزش کامل کار با GTmetrix

افزایش سرعت سایت

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

  • First Contentful Paint : اولین محتوا شما را همان First Contentful Paint میگویند که در چه زمانی وبسایت شما اولین محتوا

را به کاربر نشان میدهد. زمان پیشنهادی تا 2.5 ثانیه یا کمتر است.

  • Time to Interactive : به این معناست که در چه زمانی وبسایت شما قابل استفاده و تعامل با کاربر خواهد بود ؛ زمان پیشنهادی برای

این مورد 2.5 ثانیه است

  • Speed Index : سریع ترین زمان طی شده که تمامی محتوا سایت شما را نمایش میدهد را نمایش میدهد
  • Total Blocking Time : زمانی که توسط اسکریپت های وبسایت شما طی میشود را Total Blocking Time میگویند.
  • Largest Contentful Paint : زمانی که طی میشود تا سنگین ترین محتوا شما لود و نمایش داده شود میگویند.

تمامی این موارد تست میشوند و میانگین تمامی این موارد پرفورمنس یا عملکرد وبسایت شما را تشکیل میدهد و بصورت درصد

از 0 تا 100 نشان میدهد.

ممکن است سوالی برای شما پیش بیاید و آن هم اینکه مقادیری که با رنگ های قرمز ، نارنجی ، سبز نشان داده شده چه معنایی

دارد ؟

رنگ سبز ، قرمز و نارنجی در تست GTmetrix به چه معناست ؟

مقادیری که رعایت شده باشند یا رعایت نشده باشند و تمامی مقادیر را به شما نمایش میدهد ؛ مقادیری که با رنگ

سبز پر رنگ نمایش داده شده اند مقادیری هستند که رعایت شده اند و سبز کم رنگ نشان دهنده این است که نمره قابل قبولی

گرفته شده است و تقریبا رعایت شده است نارنجی به این معناست که مواردی که اشاره شده است بصورت کامل رعایت نشده اند و

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

شما تاثیر گذاشته اند.

 

Structure :

آموزش کامل کار با GTmetrix

بهینه سازی و افزایش سرعت سایت

Structure به معنی ساختار است و از نام مشخص است که ساختار وبسایت شما را نمایش میدهد که از اولویت کم تا مهمترین موارد

را نشان میدهد. مقادیری که رعایت شده باشند یا رعایت نشده باشند و تمامی مقادیر را به شما نمایش میدهد ؛ مقادیری که با رنگ

سبز پر رنگ نمایش داده شده اند مقادیری هستند که رعایت شده اند و سبز کم رنگ نشان دهنده این است که نمره قابل قبولی

گرفته شده است و تقریبا رعایت شده است نارنجی به این معناست که مواردی که اشاره شده است بصورت کامل رعایت نشده اند و

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

شما تاثیر گذاشته اند. یک نکته کلیدی وجود دارد و آن هم رنگ خاکستری است که مواردی که مشخص نیستند را به این رنگ نشان میدهد.

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

 

آموزش کامل کار با GTmetrix


 

افزایش سرعت سایت

از طریق ویدیو آموزشی بالا نیز میتوانید با مقادیر GTmetrix آشنا شوید آموزش کامل کار با GTmetrix را یاد بگیرید؛ همچنین ما ویدیو آموزشی

در جهت روش های افزایش سرعت سایت و همینطور افزایش سرعت لود سایت برای شما آماده کردیم که در ادامه مطلب برای

شما عزیزان قرار خواهیم داد.

 

پارامتر های GTmetrix

 

Optimize the order of styles and scripts:

به این معناست که اسکریپت ها و استایل های وبسایت نیاز به بهینه سازی دارند و

شامل جاوا اسکریپت ها ، CSS ها و تمامی کد های شما میشوند که نیاز به بهینه سازی دارند.

رفع خطای Optimize the order of Styles and Scripts

آموزش کامل کار با GTmetrix

بهینه سازی و افزایش سرعت سایت

اگر توجه کرده باشید زمانیکه وارد کد نویسی سایت خود میشوید با CSS ها و جاوا اسکریپت ها مواجه میشوید اما نکاتی وجود دارد که

باید رعایت کنید و آن هم اینکه تمامی موارد باید به ترتیب باشند تا زمان لود با مشکل مواجه نشود ؛ شاید برای شما این سوال پیش بیاید

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

 

<head>
 <title> Title </title>

 <style>
  // CSS Code
 </style>
 
 <script type="text/javascript">
  // javascript Code
 </script>

</head>

 

طبق نمونه بالا میتوانید با ساختار اصلی سایت خود آشنا بشید ؛ سعی کنید طبق ساختار نمونه کد نویسی سایت خود را قرار دهید.

اما وبسایت هایی که بک اند آن با وردپرس نوشته شده چه کاری باید انجام بدهند ؟

برای بهینه سازی این مورد پیشنهاد وبدیما به شما چند افزونه است که از هرکدام که بخواهید میتوانید استفاده کنید :

  1. افزونه autoptimize
  2.  wp-optimize
  3.  wp-rocket

دو افزونه اول رایگان هستند و از طریق بخش افزونه ها میتوانید اقدام به نصب کنید ولی افزونه سوم wp-rocket رایگان نیست و باید از

ژاکت یا راست چین خریداری کنید ولی مزایا بسیار زیادی به شما ارائه میدهد و نسبت به هزینه پرداختی کاملا ارزش دارد. با نصب هریک

میتوانید CSS ها و جاوا اسکریپت ها را بهینه سازی کنید.

 

Optimize images :

 درسته که تصویر با کیفیت خیلی خوبه ولی در وبسایت شما باید توجه کنید که تصاویر وبسایتتون بهینه شده

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

بهینه کنید از افزونه استفاده کنید یا بصورت دستی بهینه سازی کنید که در عین زمان بر بودن این مزیت را برای شما به همراه دارد

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

 

رفع خطای Optimize Images

آموزش کامل کار با GTmetrix

افزایش سرعت سایت

بهینه سازی تصاویر نقش خیلی مهمی در وبسایت شما دارد چرا که وقتی کاربر وارد سایت میشود سایت باید جاوا اسکریپت ها ، CSS ها و

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

سازی تصاویر صحبت میکنیم فقط به حجم تصاویر اشاره نمیکنیم بلکه باید به اندازه تصاویر هم دقت کنید تا بتوانید قالب ریسپانسیو و

با اندازه های درست داشته باشید ؛ برای وبسایت های CMS زمانی که قالب خریداری میکنید یک نمونه از اندازه ها قرار داده شده تا از

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

روش های بهینه سازی تصاویر

به دو روش میتوانید بهینه سازی تصاویر را انجام دهید :

  1. آنلاین
  2. استفاده از افزونه

استفاده از روش اول مناسب تمامی سایت ها میباشد و میتوانید تغییر اندازه و یا حجم تصاویر را تا حدی کاهش دهید تا

تصاویر سبک تر باشند ؛ مهم نیست با چه زبانی نوشته شده باشد روش آنلاین را میتوانید استفاده کنید ولی روش دوم مخصوص

سایت هایی است که با CMS نوشته شده باشند.

وبدیما دو وبسایت پیشنهادی به شما ارائه میدهد :

  1. IMG2GO
  2. Compress Jpeg

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

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

از افزونه های بهینه سازی تصاویر میتوان به افزونه های :

  1. wp-smush
  2. Imagify

اشاره کرد که میتوانید از این دو مورد استفاده کنید همچنین آموزشی برای استفاده از این منابع برای شما آماده کردیم که میتوانید

استفاده کنید. موردی که باید به آن توجه کنید این است که افزونه Smush به دو صورت قابل استفاده است نسخه رایگان که در

قسمت افزونه ها میتوانید نصب کنید و نسخه پرو که میتوانید از راست چین یا ژاکت تهیه کنید.

 

Specify a cache validator :

اگر وبسایت شما مشکل کش داشته باشد این ارور را به شما نشان میدهد و پیشنهاد میشود از

افزونه های کش خوب مثل Wp rocket و اگر از هاست دارای وب سرور لایت اسپید هستند استفاده میکنید پیشنهاد میشود از

افزونه لایت اسپید کش استفاده کنید. یک نکته را فراموش نکنید هیچوقت از دو افزونه بهینه سازی و کش استفاده نکنید.

 

رفع خطای Specify a Cache Validator

آموزش کامل کار با GTmetrix

بهینه سازی و افزایش سرعت سایت

این خطا مربوط به کش وبسایت شما میباشد ؛ زمانی که کاربر قصد ورود به سایت شما را داشته باشد مرورگر تصمیم میگیرد تا نسخه

کش را بارگذاری کند یا به سرور درخواست دهد ؛ اگر شما تغییراتی در سایت ایجاد کنید و کش شامل آخرین تغییرات نباشد

باعث میشود که مرورگر به سرور درخواست ارسال کند اما زمانی که درباره کش صحبت میکنیم باید با یک سری پارامتر آشنا باشیم ؛

پارامتر هایی که باید با آن آشنا بشید : Cache Length ، Cache Validate و درخواست های شرطی Etag و Last Modify هستند.

آموزش کامل کار با GTmetrix

افزایش سرعت سایت

Cache-Control ، Cache Length چیست و تفاوت آنها

اینکه تا چه حد یک فایل کش شود بستگی به گزینه Expire دارد و عبارتی به اسم Cache-Control مشخص میکند که چقدر از آخرین

زمان تغییر در سایت میگذرد. نکته قابل توجه این است که این مورد در هدر سایت مشخص میشود و در در ادامه وضعیت Cache Length

مشخص میشود.

Cache Length بر حسب میلی ثانیه است و مشخص میکند که عمر کش سایت شما چقدر است و بر اساس گزینه Expire مشخص

میکند که عمر کش چقدر است. و تقریبا میشود اشاره کرد که Cache Length را Cache-Control و Expire مشخص میکند

بعد از آن به سراغ Cache Validate میرویم که وضعیت آن توسط Etag و Last Modified مشخص میشود و مشخص میکند که وضعیت

کش به چه صورتی است و چه نسخه ای دارد. این دو را با عنوان درخواست های شرطی میشناسیم و اگر این موارد با مشکل

مواجه شوند خطای Specify Cache Validate نمایش داده میشود.

درخواست های شرطی

دو درخواست شرطی در این پارامتر داریم درخواست شرطی Last Modified و Etag ؛ Last Modified به این معنی است که آخرین

تغییرات را نشان میدهد و Etag هم مثل Last modified است با این تفاوت که Last Modify آخرین تغییرات را نشان میدهد و Etag

بصورت ورژن و کد نشان داده میشود.

زمانی که کاربر قصد ورود به سایت شما را داشته باشد مرورگر بررسی میکند و متوجه میشود که این کاربر آخرین بار چه زمانی

وارد سایت شده است و بررسی میکند اگر تغییراتی در سایت ایجاد شده باشد آخرین تغییرات را از سرور درخواست میکند و

به فایل های موجود در مرورگر اضافه میکند و کش جدیدی ایجاد میکند ولی اگر تغییراتی ایجاد نشده باشد به مرورگر Not Modify

نشان داده میشود.

 

Leverage browser caching: 

این گزینه برای کش های ثابت است که در آنها تغییری ایجاد نمیشود که در .htaccess میتوانید

از آن استفاده و تنظیم کنید.

 

رفع خطای Leverage Browser Caching 

آموزش کامل کار با GTmetrix

بهینه سازی و افزایش سرعت سایت

قبل تر توضیحاتی خدمت شما ارائه دادیم از بابت کش سایت که به چند صورت کش وجود دارد و مراحل کش کردن سایت به چه

صورت است ولی در این پارت قصد داریم توضیحاتی درباره رفع آن بدهیم ولی توجه کنید که حتما قسمت یعنی Specify Cache Validator

را مطالعه کرده باشید چرا که این دو خطا بهم متصل هستن و میتوان این دو مشکل را در این قسمت حل کرد.

به دو روش میتوانید این مشکل را حل کنید : با استفاده از دو روش Expire و Cache-Control که قبل تر بهشون پرداختیم که این موارد

چی هستند اما در این قسمت حل مشکل را خواهیم گفت.

روش اول : حل مشکل با روش Expire  

وارد فایل منیجر هاست یا سرور خود شوید ؛ .htaccess شوید و قطعه کد های زیر را در سطر اول قرار دهید و دقت کنید حتما در سطر

اول باید قرار دهید.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

روش دوم : حل مشکل با روش Cache-Control 

مثل مرحله قبل باید وارد هاست و سرور شوید و قطعه کد های زیر را در .htaccess بجای کد های بالا وارد کنید .

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

با استفاده از یکی از روش های بالا میتوانید مشکل Specify Cache Validator  و Leverage Browser Caching را برطرف کنید.

 

Defer parsing of JavaScript: وقتی کاربر شما وارد سایت میشود جاوا اسکریپت های زیادی در حال لود هستند ؛

پیشنهاد میشود جاوا اسکریپت ها را در در فوتر قرار دهید تا در مرحله آخر لود شود و با این کار وبسایت شما زودتر از

قبل لود خواهد شد.

رفع خطای Defer parsing of JavaScript

آموزش کامل کار با Gtmetrix

آموزش کامل کار با GTmetrix

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

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

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

پیشنهاد میکنیم فایل های جاوا اسکریپت را در فوتر سایت لود کنید . اما علت این کار چیست ؟

جاوا اسکریپت های مورد نظر حتما باید دانلود و پردازش شوند تا سایت نمایش داده شود تا پردازش نشود سایت نمایش داده نمیشود

به همین علت شما با قراردادن جاوا اسکریپت ها در فوتر باعث میشود که سایت بدون مشکل لود شود و سرعت شما را بطور چشمگیری

افزایش دهد.

برای وردپرس باید از افزونه autoptimize و افزونه wp-rocket استفاده کنید. و برای سایت هایی که بصورت اختصاصی کدنویسی شدند

میتوانید جاوا اسکریپت ها را در هدر کپی کنید و در فوتر پیست کنید.

Minimize redirects:


بهینه سازی و افزایش سرعت سایت

آموزش کامل کار با GTmetrix 

زمانی که کاربر وارد سایت میشود باید مقدار زیادی جاوا اسکریپت ، CSS را لود کند تا سایت شما

لود شود و درخواست های HTTP بیشتر شوند ؛ حجم سنگین باعث میشود که سایت دیر لود شود ولی با گزینه Minify میتوانید

این حجم را سبک تر کنید و این

یکی از مزیت ها است و باعث میشود سایت شما زودتر لود شود و تمام CSS ها و جاوا اسکریپت ها ترکیب میشوند.

رفع خطای Minimize Redirects

شاید برای شما این سوال تا الان پیش آمده است که ریدایرکت چیست و چه کاری انجام میدهد ؛ بهتر است بدانید عمل ریدایرکت

شما و یا کاربر را از یک صفحه به صفحه ای دیگر انتقال میدهد. بطور مثال webdima.site را در نظر بگیرید ؛ با توجه به اینکه وبدیما

از SSL استفاده میکند درصورتیکه شما وبدیما را بصورت http://webdima.site سرچ کنید دو حالت دارد یا سایت را برای شما باز نمیکند

یا آدرس سایت از http://webdima.site به https://webdima.site تغییر میکند ؛ این عمل را ریدایرکت میگویند . حال تصور کنید

یک کاربر قصد ورود به سایت شما را داشته باشد اگر از طریق http بخواهد وارد شود یک سری درخواست به سرور ارسال میشود

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

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

ما برای کاربران وردپرس نیز افزونه پیشنهادی داریم :

با استفاده از افزونه Velvet Blues Update URLs استفاده کنید تا مشکل لینک های خود را حل کنید .

Specify a character set early: 

در کدنویسی سایت یک متاتگ Character set داریم که در زبان های مختلف از آن استفاده میشود

که در زبان فارسی ما از UTF-8 استفاده میکنیم ؛ این ارور به ما پیشنهاد میکند که از این متاتگ استفاده نکنیم چون نیازی بهش نداریم.

این گزینه را میتوانید تغییر دهید ولی پیشنهاد میشود که اینکار انجام ندهید. این خطا بیشتر در ورژن های خیلی قدیمی مرورگر ها پیش

می آید و نیازی نیست نگران باشید چرا که با بروز بودن مرورگر ها این مشکل رفع شده است و تقریبا تمامی افراد از حداقل ورژن مرورگر

برخوردار هستند.

 

Avoid bad requests:


بهینه سازی و افزایش سرعت سایت

آموزش کامل کار با GTmetrix

 این پارامتر برای شما تمامی درخواست های نادرست به سرور را بررسی میکند ؛ اگر در سایت از جاوا اسکریپت

استفاده میکنید یا CSS درصورتیکه آدرس آن اشتباه ذکر شده باشد این خطا را به شما نشان میدهد.

 

رفع خطای Avoid Bad Requests

زمانی که شما در GTmetrix تست میگیرید اگر با این ارور مواجه شده باشید با کلیک شما میتوانید متوجه شوید که CSS یا

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

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

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

 

Enable gzip compression:


بهینه سازی و افزایش سرعت سایت

آموزش کامل کار با GTmetrix 

در اصل Gzip به این معناست که وبسایت شما فشرده تر شده و باعث سرعت بالا در لود میشود ؛

اگر از این پارامتر استفاده نمیکنید پیشنهاد میشود از این گزینه استفاده کنید.

 

رفع خطای Enable Gzip Compression

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

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

است که در سرعت لود سایت تاثیر بسزایی دارد و برای همین استفاده از Gzip در سایت همیشه پیشنهاد میشود.

استفاده از افزونه 

با استفاده از افزونه Check and Enable GZIP Compression میتوانید فایل های خود را به Gzip تبدیل کنید و درصورتیکه این مورد برای

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

روش دستی و کدنویسی

وارد هاست خود شوید و در Public-HTML فایل .htaccess را باز کنید و کد های زیر را وارد کنید ؛ سپس ذخیره و از فایل خارج شوید.

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

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Removing browser bugs for older browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

 

Enable Keep-Alive: 


بهینه سازی و افزایش سرعت سایت

آموزش کامل کار با GTmetrix

زمانی که کاربر وارد سایت شما میشود یک درخواست به سرور ارسال میکند و با ورود به هر بخش یک درخواست

دیگر به سرور ارسال میشود ؛ حال تصور کنید تعداد زیادی ممبر وارد سایت شما شده اند و در بخش های مختلف کلیک میکنند این تعداد

درخواست بیش از حد میشود ؛ فعالسازی این پارامتر باعث میشود تا وقتی درخواست ارسال میشود در مرورگر ذخیره شود و کاربر بعدی

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

 

رفع خطای Enable Keep-Alive

وارد هاست یا سرور خود شوید در Public-HTML فایل .htaccess را باز کنید و کد های زیر را وارد کنید و سپس ذخیره کنید.

 

<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>

Inline small CSS و Inline small JavaScript: 


بهینه سازی و افزایش سرعت سایت

بهینه سازی و افزایش سرعت سایت

زمانی که کاربر وارد سایت شما میشود ابتدا CSS ها و جاوا اسکریپت های داخل هاست یا سرور لود میشوند و CSS ها و جاوا اسکریپت های

خارجی حساب نمیشوند و بعد از لود کامل CSS ها و جاوا اسکریپت های خارجی لود میشوند ؛ این پارامتر به شما پیشنهاد میکند تا

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

 

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

در کل 3 روش برای استفاده از CSS ها داریم :

  1. inline : کد های CSS درون خطی را inline میگویند
  2. internal : کد های CSS داخلی را Internal گویند .
  3. external : کد های CSS خارجی را Extrenal گویند.

استفاده از CSS یکی از نیاز های کدنویسی است تا حجم کد ها را کم کند و در عین حال باعث مرتب شدن کدنویسی سایت شما شود

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

<html>
  <head>
    <link rel="stylesheet" href="https://webdima.site/css/style.css">
  </head>
  <body>
    <div class="webdima-box ">
    Hello, pouria!
    </div>
  </body>
</html>

حال تصور میکنیم که فایل CSS ما نیز دارای کد های :

.webdima-box {padding:44px 30px;}
.error {background-color:gold;}

است ؛ پیشنهاد میشود برای CSS هایی که کدنویسی کوتاهی دارند و لاین های زیادی ندارند CSS جدا قرار ندهید چرا که برای تمامی این موارد

درخواست http ارسال میشود پس بهتر است در کدنویسی بصورت استایل آنها را بنویسید یا تمامی CSS هایی که به این صورت هستند را در

قالب یک CSS بصورت Inline تعریف کنید.

 

Put CSS in the document head:


بهینه سازی و افزایش سرعت سایت

آموزش کامل کار با GTmetrix

 این پارامتر به شما کمک اشاره میکند تا CSS های وبسایت خود را در هدر سایت قرار دهید تا

در هنگام لود سایت قرار بگیرند.

 

رفع خطای Put CSS in the document head:

کد نویسی سایت خود باید دقت کنید که CSS ها را در جای درست قرار دهید نباید CSS ها خارج از ساختار باشند ؛ تمامی CSS ها

باید در Head قرار داده شوند. بصورت نمونه زیر :

<html>
 <head>

  <title> Hello pouria! </title>

  <link rel="stylesheet" type="text/css" href="style.css">

   <style>
   // CSS Code
  </style>

</head>


 <body>
  // Content
 </body>

</html>

 

اگر مشکلی در CSS ها مشاهده کردید باید چک کنید که بصورت نمونه بالا قرار داده شده باشند.

 

Minimize request size: 


بهینه سازی و افزایش سرعت سایت

بهینه سازی و افزایش سرعت سایت

این پارامتر نیز شبیه به پارامتر Minimize Redirects است که اشاره به کمتر کردن تعداد درخواست دارد.

 

رفع خطای Minimize request size 

با انجام 3 مرحله شما میتوانید مشکل را رفع کنید :

  1. بهینه سازی تصاویر
  2. بهینه سازی CSS ها و جاوا اسکریپت ها و فشرده سازی
  3. ادغام کردن CSS ها

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

 

Serve resources from a consistent URL:


بهینه سازی و افزایش سرعت سایت

آموزش کامل کار با GTmetrix

 زمانی که شما منابع ناسازگار قرار دهید در وبسایت خود باعث میشود که این مورد

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

آدرس متفاوت و سایت شما موظف هست هر دو را لود کند برای همین پیشنهاد میشود از یک مورد استفاده کنید.

 

رفع خطای Serve resources from a consistent URL

این خطا مربوط به درخواست های بیش از حد http است که شما باید در هاست خود این درخواست ها را به حداقل برسانید ؛

در نظر داشته باشید که از افزونه فونت استفاده میکنید حال تصور کنید زمانی که یک صفحه لود میشود دوبار این افزونه در صفحه لود

قرار بگیرد و در دو آدرس متفاوت باشد ؛ این افزونه یک کارایی دارد ولی دوبار لود میشود و همین باعث بالا رفتن درخواست http میشود

که در تست GTmetrix دقیقا آدرس های مورد نظر را به شما میگوید و لازم نیست بصورت کامل جستجو کنید فقط مواردی که GTmetrix

به شما نمایش داده است بررسی کنید و درصورتیکه مورد مشابه مشاهده کردید حذف کنید.

 

Remove query strings from static resources:


بهینه سازی و افزایش سرعت سایت

 

 این پارامتر به شما پیشنهاد میکند درخواست هایی که بصورت Query Strings

هستند را حذف کنید . منظور از Query Strings همان آدرس هایی هستند که در آخر آنها ؟ دارد. در اصل کاری که این خطا انجام میدهد

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

به شدت مشکل بر میخورید.

 

رفع خطای Remove query strings from static resources

در وردپرس شما دو روش برای حل این مشکل دارید :

  1. استفاده از افزونه
  2. کدنویسی

شما با استفاده از افزونه های راکت و Autoptimize میتوانید این خطا را با افزونه رفع کنید. اما در روش دوم شما باید وارد هاست خود شوید

سپس public_html/wp-content/themes را مراجعه کنید و سپس فایل functions.php را انتخاب و کد های زیر را در آن قرار دهید و سپس

ذخیره کنید.

function _remove_script_version( $src )} 
$parts = explode( '?', $src ); 
return $parts[0]; 
} 
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 ); 
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

در php نیز شما با وارد کردن کد های زیر میتوانید از این خطا جلوگیری کنید و فایل های خود را کش کنید .

 }function remove_querystring_var($url, $key) 
    $url = preg_replace('/(.*)(?|&)' . $key . '=[^&]+?(&)(.*)/i', '$1$2$4', $url . '&');
    $url = substr($url, 0, -1);
    return ($url);
{

Serve scaled images: 


بهینه سازی و افزایش سرعت سایت

آموزش کامل کار با GTmetrix

بهینه سازی تصاویر فقط مربوط به کم حجم بودن تصاویر نیست بلکه به اندازه آنها نیز مربوط است ؛ زمانی که

شما از یک تصویر در متن خود استفاده میکنید شاید اندازه آن در واقعیت 1920*1080 باشد ولی در متن به اندازه دیگری در می آید ؛ این

کار را CSS برای شما انجام میدهد که به آن Scaled Image میگویند. برای رفع این ارور تصاویر سایت خود را با اندازه مناسب قرار دهید.

 

رفع این خطا ساده است ؛ کافی است اندازه مناسب را پیدا کرده و تصاویر خود را بهینه سازی کنید ؛ در وبسایت های وردپرسی

شما در هر قسمت تصاویر نمونه ای مشاهده میکنید که در قالب استفاده شده است کافیست وارد بخش رسانه ها شوید و سپس

تصویر مورد نظر در بخشی که میخواید را پیدا کنید ؛ اندازه استفاده شده را به شما نشان میدهد و شما میتوانید طبق این تصویر مشکل

را حل کنید .

با استفاده از سایت IMG2GO.com میتوانید تصاویر را resize و استفاده کنید.

 

Combine images using CSS sprites: 


بهینه سازی و افزایش سرعت سایت

افزایش سرعت لود سایت

تصور کنید شما چند تصویر را در یک قسمت از سایت قرار میدهید تا کاربر مشاهده کند

ولی در عمل برای نشان دادن تصاویر برای هر یک درخواستی به سرور ارسال میشود ولی با CSS Sprites میتوانید این مشکل را حل

و تمام تصاویر را بهم بچسبانید و این در بهینه سازی سرعت وبسایت شما تاثیر بسزایی دارد.

 

برای رفع این خطا شما باید یک مورد را درک کنید ؛ زمانیکه تعدادی عکس در سایت استفاده میکنید به ازای هر بار نمایش به کاربر یک

درخواست به سرور ارسال میشود و اگر تعداد دفعات بالا برود و کاربر های بیشتری مشاهده کنند تعداد درخواست چندین برابر میشود

برای همین این خطا را در تست دریافت میکنید ؛ برای رفع آن شما باید تصاویر را کنار هم بچسبانید و استفاده کنید تا بجای چندین

درخواست ، تنها یک بار درخواست ارسال شود.

 

Avoid CSS @import: 


بهینه سازی و افزایش سرعت سایت

آموزش کامل کار با GTmetrix

این مورد به شما پیشنهاد میکند تا CSS هایی که بصورت @import استفاده شده اند را ویرایش کنید ؛

راه حل ساده است فقط CSS هایی که از @import استفاده میکنند را ویرایش و @import را حذف کنید.

بالاتر درباره Enable Keep-Alive روش حل مشکل برای همزمان بارگذار شدن فایل ها توضیحاتی ارائه دادیم و این ارور هم

با همین روش حل میشود ؛ در اصل این ارور باعث میشود تا زمانیکه یک فایل بارگذاری نشده باشد فایل دیگری را برای بارگذاری

شروع نکند و همین باعث لود دیر هنگام شما میشود و شما باید درخواست های @import را حذف کنید و کد ها را بصورت نمونه زیر

قرار دهید تا بصورت همزمان مرورگر آنها را لود کند و این خطا نیز برطرف شود.

 

<link rel="style.css" href="style.css" type="text/css">

 

Prefer asynchronous resources: 


بهینه سازی و افزایش سرعت سایت

افزایش سرعت لود سایت

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

و درصورتیکه هدر سایت شما کدنویسی بیشتری داشته باشد باعث دیر لود شدن وبسایت شما میشود ؛ پیشنهاد میشود

جاوا اسکریپت های وبسایت خود را در فوتر قرار دهید تا سایت شما سریعتر لود شود.

با استفاده از کد های نمونه زیر میتوانید این ارور را برطرف کنید ؛ کد های زیر را پس از هر فایل قرار دهید تا این ارور برطرف شود.

 

<script src="demo-defer.js" defer></script>
<script src="demo-async.js" async></script>

 

Avoid a character set in the meta tag:


بهینه سازی و افزایش سرعت سایت

آموزش کامل کار با GTmetrix

 این خطا درست شبیه به خطای Specify a character set early است و تفاوت زیادی

با آن مورد ندارد و تنها فرق آن این است که مربوط به متا تگ های صفحات است.

این خطا بیشتر در مرورگر های قدیمی دیده شده است ولی برای محکم کاری پیشنهاد میکنیم کد های نمونه را استفاده کنید

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

 

 ;header("Content-Type: text/html; charset=utf-8")

 

Specify a Vary Accept-Encoding header:


بهینه سازی و افزایش سرعت سایت

افزایش سرعت لود سایت

 این ارور زمانی به شما نشان داده میشود که Vary: accept-encoding در هاست و سرور

سایت شما فعال نباشد و وب سرور سایت شما یا CDN (Content Delivery Network) سایت شما بجای ارسال فایل های Gzip فشرده شده،

فایل های فشرده نشده ارسال میکند. در هاست و سرور های جدید این مورد به صورت پیش فرض فعال است اما اگر فعال نیست

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

 

به دو روش میتوانید این مشکل را رفع کنید :

  1. کدنویسی
  2. افزونه

برای روش کدنویسی باید کد زیر را در فایل .htaccess در هاست خود قرار دهید .

 

<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

در روش دوم نیز باید از افزونه Check and Enable GZIP Compression استفاده کنید تا با استفاده از Gzip این خطا را رفع کنید.

 

Use a Content Delivery Network (CDN):


بهینه سازی و افزایش سرعت سایت

آموزش کامل کار با GTmetrix

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

با استفاده از این گزینه میتوانید فایل های عمومی سایت خود را در نزدیک ترین سرور به کاربر نشان دهید. تنها کاربرد CDN این نیست

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

از این مورد برای اولین بار در ایران ویدیو آموزشی با زبان فارسی که برای اتصال و استفاده CDN است بهره مند شوید.

 

استفاده از CDN مزایای بسیار زیادی دارد از لحاظ امنیتی و از لحاظ سرعت تاثیر زیادی در سایت شما دارد ؛ در اصل کار CDN این است

که زمانی که کاربر وارد سایت شما میشود نیازی نباشد حتما سایت شما از سرور اصلی لود شود ؛ با استفاده از CDN سایت شما از

تمامی سرور ها قابل دسترس خواهند بود. CDN های ابرآروان و کلادفلر معروفترین ها در این زمینه هستند که ابرآروان ایرانی است و برای

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

برای شما یک ویدیو اختصاصی درباره استفاده و روش های استفاده از CDN آماده سازی شده است که پیشنهاد میکنم ویدیو پایین را تماشا

کنید چرا که اولین مرجع در ایران هستیم که این مورد را با زبان فارسی آموزش میدهیم.

 

 

 

 

Minify JavaScript and CSS :


آموزش کامل کار با GTmetrix

افزایش سرعت لود سایت

 این پارامتر به شما پیشنهاد میکند تا جاوا اسکریپت ها و CSS های وبسایت خود را minify کنید.

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

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

 

Compress components with gzip: 


آموزش کامل کار با GTmetrix

آموزش کامل کار با GTmetrix

این مورد به استفاده از فایل های Gzip اشاره دارد که پیشنهاد میکند استفاده کنید از این

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

 

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

این مشکل را رفع کنید. این مورد در Cpanel و Direct Admin متفاوت است .

برای Cpanel کد های زیر را در .htaccess وارد کنید :

 

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

 

در Direct Admin نیز کد های زیر را در فایل .htaccess قرار دهید :

 

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

 

 

اگر از روش افزونه میخواهید استفاده کنید از افزونه Check and Enable GZIP Compression استفاده کنید.

 

بهینه سازی و افزایش سرعت سایت

 

Make JavaScript and CSS external: 


آموزش کامل کار با GTmetrix

افزایش سرعت لود سایت

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

برای رفع این خطا CSS ها و جاوا اسکریپت های استفاده شده را در کد های یک صفحه را در یک فایل جدا قرار دهید و در آخر

ادغام کنید تا این خطا رفع شود تا هم ادغام شده باشند و هم این ارور برطرف شود.

Configure entity tags (ETags):


آموزش کامل کار با GTmetrix

آموزش کامل کار با GTmetrix

این پارامتر به این معناست که یک Entity Tag به مرورگر نشان میدهد که به مرورگر نشان میدهد که باید سایت را از سرور لود کند

یا از طریق کش موجود در مرورگر ؛ اگر پس از آخرین آپدیت کش تغییراتی ایجاد کنید زمانی که کاربر قصد ورود داشته باشد این تگ

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

این مورد نیز با توجه به ارور Specify a cache validator حل میشود و لازم است حتما Specify a cache validator را مطالعه فرمایید تا

بتوانید مشکل را حل کنید.

 

Reduce cookie size: 


آموزش کامل کار با GTmetrix

افزایش سرعت لود سایت

این خطا زمانی به شما نمایش داده میشود که کوکی سایت شما حجم زیادی داشته باشد این خطا را به شما

نشان میدهد.

شما با استفاده از Gzip میتوانید این خطا را برطرف کنید.

همانطور که مشاهده میکنید اکثر خطا ها برای راه حل نیاز به Gzip  دارند در نتیجه شما با استفاده از Gzip میتوانید به راحتی اکثر خطا ها

را برطرف کنید.

 

Use GET for AJAX requests: 


آموزش کامل کار با GTmetrix

آموزش کامل کار با GTmetrix

اگر در سایت خود از قابلیت AJAX استفاده میکنید باید آن را بصورت GET قرار دهید چرا که اکثر سایت

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

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

برای حل این مشکل با استفاده از سرچ در فایل های خود میتوانید Ajax های استفاده شده را پیدا کنید و post را به Get تبدیل کنید.

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

 

Reduce the number of DOM elements:


آموزش کامل کار با GTmetrix

افزایش سرعت لود سایت

 در صورتیکه از عناصر و مواردی مثل DOM در سایت خود استفاده میکنید بهتر است بدانید

که تا زمانی که از DOM استفاده میکنید باعث گرفتن نمره منفی میشود. DOM مخفف عبارت Document Object Model است که برای

دسترسی به منابع و عناصر صفحات HTML را برای شما فراهم میکند ؛ در حقیقت از یک سری ساختار درختی پیروی میکند که استفاده

از این ساختار برای تعداد دفعات بالا باعث گرفتن این خطا میشود.

برای این خطا نه افزونه ای وجود دارد و نه با کد میتوانید این مشکل را حل کنید ؛ تنها راه حل این است که با توجه به سلیقه خود میزان

استفاده از المنت های صفحه را کم کنید و صفحه از المنت های کمی برخوردار باشد تا میزان Dom کاهش یابد. اگر تمامی ارور ها را

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

کردن مشکلات دیگر بگذارید تا بتوانید تمامی مشکلات را رفع کنید ولی این مشکل مربوط به ساختار سایت است و تقریبا راه حل های زیادی

ندارد.

 

Avoid HTTP 404 (Not Found) error: 


آموزش کامل کار با GTmetrix

آموزش کامل کار با GTmetrix

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

فقط کافیست از url ها به درستی استفاده کنید تا با این مشکل مواجه نشوید.

بهینه سازی و افزایش سرعت سایت

Avoid AlphaImageLoader filter: 


آموزش کامل کار با GTmetrix

افزایش سرعت لود سایت

در اینترنت همانند هر جای دیگر خطا هایی وجود دارد اما یک خطای جالب مربوط به این است که درصورتیکه از PNG در صفحات

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

بهتر است نگران این خطا نباشید چرا که این خطا فقط در مرورگر های قدیمی وجود دارد و آخرین آپدیت های تمامی مرورگر ها

این مشکل را ندارند.

برای رفع این خطا شما باید در کدنویسی سایت خود به دنبال AlphaImage بگردید و آنها را حذف کنید ؛ این کد به این علت استفاده

میشود تا تصاویر png در مرورگر های قدیمی لود شود و بتوان از آن استفاده کرد برای همین از این کد استفاده میشود و شما باید

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

 

Remove duplicate JavaScript and CSS: 


آموزش کامل کار با GTmetrix

آموزش کامل کار با GTmetrix

در بعضی موارد پیش میاد که جاوا اسکریپت ها و CSS ها کپی میشوند و بطور مثال دو نسخه از یک CSS در سایت لود میشود با یک حجم

و یک هدف و این باعث کند شدن وبسایت شما میشود ؛ این خطا به شما میگوید که نسخه های مشابه را حذف کنید.

برای رفع این خطا GTmetrix تمامی فایل هایی که به این صورت هستند را به شما نشان میدهد و شما تنها کاری که باید انجام دهید این

است که مسیری که گفته شده را پیدا کنید و CSS ها و جاوا اسکریپت های تکراری را حذف کنید.

 

Make AJAX cacheable: 


آموزش کامل کار با GTmetrix

آموزش کامل کار با GTmetrix

در این حالت به شما میگوید تا AJAX های مورد استفاده را کش کردید اگر مواردی هستند که کش نشده

باشند به شما نمایش میدهد که شما باید آنها را کش کنید.

 

Avoid URL redirects:


آموزش کامل کار با GTmetrix

افزایش سرعت لود سایت

 این خطا زمانی به شما نشان داده میشود که شما از ریدایرکت در سایت استفاده کنید ؛ برای رفع این

خطا باید ریدایرکت های سایت خود را حذف کنید.

برای رفع این خطا لازم است تمامی url هایی که در سایت شما تغییر یافته اند را پیدا کنید و آدرس درست را وارد کنید ؛ برای وبسایت

های وردپرس یک راه حل ساده تر نیز وجود دارد ؛ با استفاده از افزونه Velvet Blues Update URLs شما میتوانید مشکل را حل کنید و

این ارور را برطرف کنید. افزونه مورد نظر تمامی لینک های سایت شما را آپدیت میکند و دیگر مشکل url نخواهید داشت.

آموزش کامل کار با GTmetrix

 

Reduce DNS lookups:


آموزش کامل کار با GTmetrix

افزایش سرعت لود سایت

 همه چیز در سرچ بر پایه آی پی است ؛ جالب است بدانید سرچ همه چیز بر پایه ip است یعنی حتی

شما زمانی که گوگل را سرچ میکنید گوگل هم یک آی پی دارد و اگر قرار بود همه چیز بر پایه ip باشد زندگی با مشکل مواجه میشد

چرا که حفظ تمامی آی پی ها سخت بود. DNS بر همین پایه است تا مشکل را حل کند شما بجای سرچ ip گوگل اسم آن را سرچ میکنید

و این اسم بر پایه ip جستجو میشود و در نتیجه گوگل نمایش داده میشود . برای سایت هم همینطور است اگر از ip های مجزا زیادی

استفاده کنید باعث میشود سایت شما دیر جستجو و لود شود.

 

شما با رعایت چند مورد میتوانید این مشکل را حل کنید :

  1. عدم استفاده از دامنه های مجزا
  2. استفاده از فایل های خارجی مثل CSS ها در داخل سایت
  3. کاهش درخواست http به سرور
  4. استفاده از keep-alive
  5. عدم استفاده زیاد از Cname

با استفاده از این موارد میتوانید این ارور را برطرف کنید.

بهینه سازی و افزایش سرعت سایت

 

بهینه سازی سایت در کمترین زمان


در این بخش ما برخی از مهمترین نکات درباره بهینه سازی وبسایت خواهیم گفت و دو کلیپ آموزشی نیز برای شما قرار خواهیم داد.

در وردپرس با چند افزونه و اتصال به CDN میتوان سایت را بهینه سازی کرد اما بحث برای بهینه سازی وبسایت هایی که با

زبان های تحت سرور یا زبان هایی مثل HTML راه اندازی شده اند فرق میکند و به راحتی وردپرس نیستند البته بهینه سازی در وردپرس

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

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

بهینه سازی وبسایت های وردپرسی برای شما قرار خواهیم داد. 

در این کلیپ شما با استفاده از چند افزونه و بهینه سازی تصاویر و در آخر استفاده از CDN یاد میگیرید که چطور در کوتاه ترین زمان نمره

بالا در GTmetrix بگیرید.

 

بهینه سازی و افزایش سرعت سایت

سخن آخر

به تمامی ارور های موجود در این مقاله اشاره شد شما به راحتی با انجام چند کار و رعایت یک سری مسائل میتوانید سایت خود

را بهینه سازی کنید و سرعت آن را بالا ببرید . یک نکته را هیچوقت فراموش نکنید یک سایت با کدنویسی عالی برای لود سریع و

یک سایت سریع کافی نیست و برعکس یک هاست و سرور پر قدرت هیچوقت نمیتواند باعث پر سرعت شدن سایت شما شود

چرا که این دو مکمل هم هستند و 50 درصد را هاست و سرور ، و 50 درصد دیگر را کدنویسی سایت شما تعیین میکند.

برای گرفتن نمره عالی در GTmetrix شما باید خطا های سایت را برطرف کنید .

اکثرا با بهینه کردن تصاویر ، استفاده از Gzip و کدنویسی سبک و استفاده درست از کد ها باعث بهینه شدن سایت شدند و

تنها با یک افزونه و استفاده از CDN موفق به گرفتن امتیاز A در GTmetrix شده اند . وبدیما نیز در این زمینه موفق بوده و توانسته

برای تمامی مشتریان خود نمره A از GTmetrix دریافت کند.

 

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

 

پیج اینستاگرام وبسایت وبدیما : @webdima.site

کانال تلگرام وبسایت وبدیما : @webdimasite

وبدیما مرجع تخصصی طراحی وبسایت ، آموزش طراحی وبسایت و اخبار فناوری و تکنولوژی

وبدیما

بهینه سازی و افزایش سرعت سایت

5/5 - (2 امتیاز)
10 دیدگاه
سارا

بی نظیر بود مهندس دم شما گرم
شما واسه وبسایت من هفته پیش تونستید نمره A بگیرید کار با وبدیما باعث افتخار بود

نظر لطف شماست
شما فرمودید A میخواید و نمره بالا با تضمین و بنده هم اطاعت امر کردم

مهندس شهراد

خیلی عالی بود مخصوصا استفاده از سایت gtmetrix

نظر لطفته دوست عزیز 🌹

Mehrshad

یکی از بهترین و کاملترین مقاله هایی بود که در رابطه با بهینه سازی و افزایش سرعت سایت خوندم عالی 🔥

خوشحالیم که لذت بردید

زارعی

سلام مهندس برنجیان
مقاله رو مطالعه کردم واقعا عالی بود و با خانوم سارا هم هم نظر هستم برای سایت من هم نمره A گرفتید
فرد قبلی که قالب بهینه سازی کرده بودن خراب کردن تازه نمره به F برگشت ولی شما A برام گرفتید مرسی

انجام وظیفه بوده قربان خوشحالم که تونستید به نتیجه موردنظرتون برسید در خدمت باشیم 🌹

Siavash

بسیار عالی و کارآمد بود مهندس

بدون شک بهترین مقاله ای بود که در زمینه افزایش سرعت و بهره وری مطالعه کردم

نظر لطف شماست دوست عزیز خوشحالیم که لذت بردید

یک پاسخ بنویسید

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