خانه / افزونه وردپرس / آموزش افزونه Autoptimize برای بهینه سازی وردپرس و افزایش سرعت سایت

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

آموزش افزونه Autoptimize

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

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

بهینه سازی وب سایت های وردپرسی با افزونه Autoptimize کار بسیار راحتی است. افزونه Autoptimize یکی از جالب ترین و بهترین افزونه های وردپرس است که اجازه می دهد تمام فایل های CSS و JS را فشرده و ترکیب کرده و آنها را با ترتیب مناسبی لود کنید. به این صورت که استایل ها به هدر و اسکریپت ها به فوتر بروند. همچنین این افزونه به فشرده کردن کدهای HTML و کش کردن فایل ها کمک می کند.

مزایای استفاده از افزونه Autoptimize به صورت خلاصه به شرح زیر است:

  • کاهش تعداد درخواست هایی که به سمت سرور ارسال می شود. زیرا فایل ها به یکدیگر متصل شده (concatenation) و تعداد آنها کمتر می شود.
  • کاهش اندازه صفحه و اندازه فایل های وب سایت زیرا این افزونه فایل ها را فشرده (minify) می کند.
  • کاهش زمان بارگذاری اولیه وب سایت زیرا پردازش فایل های JS به تعویق می افتد (فایل های JS به فوتر منتقل شده اند).

در این آموزش افزونه Autoptimize را مورد بررسی قرار داده و نحوه کار با این افزونه و تنظیمات آن را توضیح می دهیم.

آموزش افزونه Autoptimize و نحوه بهینه سازی وردپرس

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

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

صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

آموزش افزونه Autoptimize

دسترسی به این صفحه در پیشخوان وردپرس از مسیر تنظیمات » Autoptimize امکان پذیر است.

در بالای صفحه تنظیمات افزونه دکمه ای با عنوان “مخفی نمودن تنظیمات پیشرفته” مشاهده می کنید. با کلیک بر روی این دکمه تنظیمات پایه افزونه Autoptimize نشان داده شده و بخش های پیشرفته پنهان می گردند.

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

JS, CSS & HTML

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

بهینه سازی جاوااسکریپت

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

آموزش افزونه Autoptimize

بهینه سازی کد Javascript: برای بهینه کردن کدهای جاوااسکریپت سایت گزینه “بهینه سازی کد Javascript” را فعال کنید. با فعال کردن این باکس، گزینه “تجمیع پرونده های JS” به صورت پیش فرض فعال می شود. آن را به صورت فعال باقی بگذارید.

JS درون خطی نیز یکی سازی شود: بعضی قالب های وردپرس دارای جاوا اسکریپت درون خطی هستند که در میان فایل های HTML واقع شده اند. شما می توانید این جاوا اسکریپت را بیرون کشیده و آن را در یک فایل ترکیب کنید. به این ترتیب سرعت بارگذاری صفحه بهبود می یابد. این گزینه را با احتیاط فعال کنید زیرا می تواند به سرعت باعث افزایش حجم کش Autoptimize شود.

بارگذاری Javascript در تگ <head>: اگر با اجزاء جاوااسکریپت در سایت خود مشکل دارید و آنها به خوبی کار نمی کنند، این گزینه را امتحان کنید. با فعال کردن این گزینه جاوااسکریپت در ابتدا لود شده و مشکلات رایج با رندر کردن صفحه حل می شود.

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

اضافه نمودن دسته بندی بوسیله try-catch: اگر یک خطای JS مانع از عملکرد درست صفحات شما شود، این گزینه را فعال کنید. فعال کردن این گزینه باعث می شود هر خطایی قبل از اینکه بتواند رندر کردن صفحه را متوقف کند، گرفته شود.

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

تنظیمات CSS

آموزش افزونه Autoptimize

بهینه سازی کد CSS:  برای اینکه کدهای CSS توسط افزونه Autoptimize بهینه سازی شوند باید این گزینه را فعال کنید. با فعال کردن این باکس گزینه های “تجمیع پرونده‌های CSS“و “CSS درون خطی نیز یکی‌سازی شود” نیز به صورت پیش فرش فعال می شوند. آنها را به حالت فعال باقی بگذارید.                                                         

تولید data: URIs برای تصاویر: این گزینه به شما اجازه می دهد تصاویر کوچک را در فایل های CSS کد گذاری کرده و در آنها قرار دهید. در این صورت مانع از درخواست های زیاد سرور برای دانلود تک تک آنها می شوید.                                                            

تبدیل CSS به صورت خطی (inline) و تعویق بارگذاری (defer) : این گزینه به شما اجازه می دهد که اگر نیاز به بارگذاری صفحه دارید، تعدادی CSS در فایل HTML قرار دهید. بارگذاری CSS های دیگر به تعویق افتاده و بعد از آنها بارگذاری می شوند.                                                         

درون خطی (inline) نمودن تمام کدهای CSS: این گزینه برای وب سایت هایی که ترافیک کمی دارند مناسب است. درون خطی نمودن تمام CSS ها باعث افزایش سرعت سایت هایی با بازدید کم می شود، اما برای سایت هایی با ترافیک بالا به صورت عکس عمل خواهد کرد.

محروم کردن CSS ها از Autoptimize: در این قسمت می توانید لیستی از CSS ها که افزونه Autoptimize اجازه دسترسی به آنها ندارد را وارد کنید.

بهینه سازی کد HTML

آموزش افزونه Autoptimize

برای فشرده و مینیفای کردن تمام کدهای HTML درون سایت خود گزینه “بهینه سازی کد HTML” را فعال کنید. فعال کردن این گزینه تمام فضاهای سفید بین کدهای HTML را پاک می کند که می تواند باعث کاهش اندازه فایل های وب سایت شما و افزایش سرعت بارگذاری وب سایت شود.

تنظیمات CDN

آموزش افزونه Autoptimize

اگر از یک CDN (شبکه تحویل محتوا) برای فایل های سایت خود استفاده می کنید می توانید جزئیات آن را در این قسمت وارد کنید.

اطلاعات کش

آموزش افزونه Autoptimize

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

تنظیمات متفرقه

آموزش افزونه Autoptimize

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

در نهایت پس از اعمال تغییرات لازم روی دکمه “ذخیره تغییرات و تخلیه کش” کلیک کنید.

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

تصاویر

افزونه Autoptimize دارای قابلیت بهینه سازی تصاویر در CDN از طریق افزونه ShortPixel است.

آموزش افزونه Autoptimize

هنگامی که افزونه Autoptimize را بر روی سایت خود نصب کرده و در تب تصاویر گزینه “بهینه سازی تصاویر” را فعال کردید، به URL تصاویر وب سایت شما ShortPixel CDN اضافه خواهد شد.

در این صورت به جای اینکه تصاویر از هاست شما بارگذاری شوند روی fly بهینه سازی و تغییر سایز داده خواهند شد و سپس به سرعت از طریق CDN بارگذاری می شوند.

به این ترتیب سرعت بارگذاری وب سایت شما افزایش پیدا می کند. با فعال کردن گزینه “تصاویر Lazy Load” می توانید این قابلیت را نیز در سایت خود فعال کنید.

اضافی

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

آموزش پاک کردن کش در افزونه Autoptimize

کش Autoptimize یک فایل کش بسیار ساده است. به صورت پیش فرض فایل هایی که ترکیب و مینیفای می شوند در فولدر /wp-content/cache/autoptimize نگه داری و ذخیره می شوند. شما می توانید این کش را با کلیک کردن بر روی حذف کش در مکانی که در تصویر زیر نشان داده شده است، هر زمان که بخواهید پاک کنید.

آموزش افزونه Autoptimize

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

دانلود افزونه

دانلود افزونه
صفحه افزونه
امتیاز دادن به این نوشته:
  • میزان رضایت کاربران
  • میزان خوانایی متن
  • تصاویر مرتبط

درباره ی مینا قدسی

مطلب پیشنهادی

آموزش افزونه a3 Lazy Load

آموزش افزونه a3 Lazy Load برای افزایش سرعت وردپرس

در این مقاله به آموزش افزونه a3 Lazy Load می پردازیم. این افزونه ویژگی های …

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

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