آموزش تصویری افزونه Autoptimize

سرعت بارگذاری سایت

امروزه تقریباََ سرعت اینترنت تمامی دستگاه‌ها برابر است و هنگام ورود به یک وب‌سایت انتظار دارید که آن سریعاََ بارگذاری شود. اما چه چیزی در سرعت سایت وردپرسی تاثیر گذار است؟ آیا فقط به سرعت اینترنت کاربر بستگی دارد؟ آیا به خدمات شرکت هاستینگ بستگی دارد؟ ما در ادامه به یکی از عوامل تاثیرگذار بر سرعت سایت وردپرسی و بهبود آن می‌پردازیم. با این حال افزونه‌ای به نام  Autoptimize وجود دارد که کمک زیادی برای بهبود و افزایش سرعت سایت می‌کند.

افزونه Autoptimize وردپرس

در اینجا ما با افزونه‌ای آشنا می‌شویم که به می‌تواند با بهینه‌سازی سیستمی، سرعت بارگذاری سایت ما را افزایش دهد. این افزونه با فشرده‌سازی کدهای وب‌سایت، تغییر در نوع بارگذاری کد های استایل، بهینه‌‌سازی کدهای Html  CSS  JavaScript, تنظیمات CDN, اطلاعات کش و … توانایی بهینه‌سازی وبسایت شما و افزایش سرعت بارگذاری آن به طور محسوس را دارد.

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

آموزش تنظیمات و کار با افزونه Autoptimize

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

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

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

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

همینطور که مشاهده می‌کنید منوی تنظیمات شامل چهار سربرگ ” JS , CSS &HTML، تصاویر، اضافی، بهینه‌سازی بیشتر!  و Critical CSS ” است که هر کدام مربوط به تنظیماتی جداگانه است که تمامی این‌ها را ما مرحله مرحله به شما توضیح می‌دهیم.

1.  JS , CSS &HTML 

این قسمت مربوط به بهینه‌سازی و فشرده‌سازی کد‌های  JS , CSS &HTML است که آن هم به چند بخش تقسیم می‌شود که آن را جداگانه آموزش می‌دهیم:

Javascript

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

2. همانطور که در توضیحات روبه‌‌رو آن نوشته شده این گزینه باعث می‌شود کدهای شما به صورت render blocking بارگذاری نشود. یعنی باعث می‌شود زمان بارگذاری اسکریپت های شما افزایش پیدا نکند.

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

4. این بخش نیز بی ربط به بخش 2 نیست. از توضیحات روبه‌رو متوجه آن می‌شوید. البته بهتر است این گزینه خاموش باشد.

5. و در نهایت این گزینه باعث می‌‎شود کش در زمان دسته‌بندی ها فعال شود و کمکی به بهبود سرعت سایت می‌کند.

CSS

1. فعالسازی این گزینه باعث بهینه‌سازی کدهای CSS می‌شود. پس در هر بخش گزینه اول مربوط به فعالسازی گزینه ها می‌شود. پس همیشه باید گزینه اول فعالسازی شود.

2. با فعالسازی این گزینه کدهای CSS به صورت جمعی فشرده می‌شود.

3.  این گزینه هم کدهای CSS را در HTML درون خطی می‌کند. اما می‌توانید این گزینه را خاموش بگذارید.

4. کار این گزینه ساختن URL برای عکس های بارگذاری شده است که یک روش خوب برای بارگذاری تصاویر است.

5. این گزینه می‌گوید که با فعالسازی آن کد های CSS را بعد از بارگذاری سایت ، بارگذاری کند. مثال آن را در برخی از وبسایت ها قابل مشاهده است که ظاهر سایت لحضاتی بعد از بارگذاری تغییر می‌کند.

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

HTML

1. مانند قسمت‌های قبلی این گزینه را فعال نمایید.

2. این گزینه یکی از مهم‌ترین بخش های مربوط به HTML است که کامنت‌های کدهای HTML نگه داشته شود و در مرورگر کاربر دیده نشود. این گزینه باعث افزایش چشمگیر و محسوس سرعت وب‌سایت شما می‌شود.

CDN

اگر می‌خواهید از CDN استفاده کنید، باید آموزش های آن را یاد بگیرید و اصلا بفهمید CDN چی هست؟ برای آموزش این بخش بر روی آموزش CDN کلیک کنید.

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

1. با مطالعه توضیحات روبه‌رو می‌توان فهمید که این گزینه فایل های CSS و JS را به صورت استاتیک(ایستا) ذخیره می‌کند که این نیز در سرعت سایت تاثیرگذار است.

2. با انتخاب این گزینه فایل‌های CSS و JS فشرده می‌شوند. اما توضیحات آن را نیز یکبار بخوانید.

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

4. ودر آخر با با کلیک بر روی این دکمه تغییرات اعمال شده ذخیره می‌شود.

2.تصاویر

پس از تمام شدن کار در سربرگ اول سراغ سربرگ دوم با نام تصاویر می‌رویم. پس از کلیک بر روی آن وارد محیط زیر می‌شویم.

1. اگر می‌خواهید بارگذاری تصاویر وب‌سایت شما به صورت CDN باشد این گزینه را فعال نمایید. توجه: همچنین برای فعال کردن این گزینه باید که در Shortpixel’s ثبت‌نام کنید تا لینک آن داخل افزونه قرار بگیرد.

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

3. و درنهایت برای اعمال تغییرات آن‌ها روی این دکمه کلیک کنید . سپس کار ما در این بخش نیز به اتمام می‌رسد.

3. اضافی

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

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

2. اگر شما در وبسایتتان از ایموجی استفاده نمی‌کنید لازم است این بخش را غیرفعال کنید؛ زیرا با غیرفعال کردن ایموجی ها سرعت وب‌سایت شما افزایش پیدا می‌کند.

3. برخی از افزونه‌‌ها از از منابع استاتیک وب‌سایت برای فراخوانی کوئری‌ها استفاده می‌کند. در واقع همان بخش‌هایی در افزونه‌ها که کتابخانه کدها در آن قرار می‌گیرد. فعال کردن این بخش باعث می‌شود که اختلالاتی در سایت ایجاد شود و برخی افزونه ها به درستی کار نکند پس بهتر است این بخش را غیر فعال نمایید.

4. اگر شما در کدنویسی حرفه‌ای نیستید و توانایی کارکردن درست با کدها را ندارد بهتر است این بخش را رها بگذارید. زیرا باید روش بارگذاری کدهای جاوا اسکریپت را تغییر دهید. از توضیحات این بخش می‌توان فهمید که این بخش مربوط به کاربران حرفه‌ای و افراد آشنا با کدنویسی است.

6,5. این بخش هم به قسمت بالا مربوط است و توضیحات آن نیز شامل این بخش نیز می‌شود.

بعد از اعمال تغییرات بر روی کلید ذخیره تغییرات کلیک کرده تا تغییرات اعمال شود.

بهینه‌سازی بیشتر !

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

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