افزایش سرعت سایت وردپرس با Autoptimize

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

وقتی که شما از یک پوسته وردپرس و چند افزونه وردپرس در وبسایت خود استفاده می کنید هر یک از تمپلیت های موجود شامل فایل های سی‌اس‌اس (CSS) و جاوا اسکریپت (JS) هستند.و این فایل ها بر روی هاست وردپرس و مرورگر کاربری که به وبسایت وارد می شود یک درخواست HTTPجدا فرستاده می شوند.طبیعتا این کار هم باعث افت سرعت وبسایت شما خواهد شد و بارگذاری مطالب را تا وقتی که انی فایل ها به صورت کامل لود شوند به عقب می افتد.

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

این افزونه چه کار می کند؟

افزونه Autoptimize کل فایل های CSS و JavaScript پوسته و افزونه های وبسایتتان را به حالت یک فایل جداگانه سی اس اس و جاوااسکرپت می برد و سپس آن را فشرده سازی می کند.این کار باعث می شود تنها یک درخواست برای فایل ها فرستاده شود و طبیعتا سرعت بارگذاری وبسایت شما افزایش می یابد.

تنظمیات افزونه Autoptimize

تنظمیات html

1-سئو کد HTML

بهینه سازی کد HTML که در چک باکس اول مشاهده می کنید کل کدهای HTML وبسایت شما را بهینه سازی و فشرده می کند.با انتخاب کردن این گزینه تغییری در ظاهر وبسایتتان انجام نمی شود ولی سرعت سایتتان افزایش می یابد.

1.1-نگه داری دیدگاه های HTML

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

تنطیمات JavaScript

2-سئو کد JavaScript

چک باکس بهینه سازی کد JavaScriptکه در عکس فوق هم مشاهده می کنید کل فایل های جاوااسکریپت پوسته و افزونه هایتان را در یک فایل جدا جاوااسکرپت برده و آن ها را فشرده سازی می کند و بعد این فایل فشرده شده را به آخر کدهای مورد نظر یعنی قبل از اینکه تگ body بسته شود می برد.توسط این کار سرعت سایتتان افزایش می یابد و در اول کدهای وبسایتتان بارگذاری می شوند و بعد از نمایش کامل سایت فایل های جاوا اسکریپت لود می شوند.

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

تنظیمات بخش CSS

3بهینه سازی کد CSS

کادر “بهینه سازی کد CSS”کل فایل های css پوسته سایت شما و افزونه هایتان را در یک فایل جدا css می برد و آن ها را فشرده سازی می کند.و همین کار هم باعث می شود سرعت بارگذاری وبسایت شما افزایش یابد.

1.3-تولید کردن data: URIs برای تصاویر

اگر کادر “بهینه سازی کد CSS” را تیک زده باشید کادر دیگر به اسم “تولید data: URIs برای تصاویر” فعال می شود.اگر شما در سایت خود از چند تصویر کوچک مثل تصویر بک گراند و.. در css استفاده می کنید,با انتخاب کردن این فایل به جای این که جداگانه دریافت شوند به اطلاعات خطی تبدیل می شوند و با فایل css نیز دانلود می شوند.

تنظیمات بخش CDN

4-ریشه آدرس CDN

وارد کردن آدرس CDN زمانی که از Amazon یا MaxCDN استفاده میکنید الزامی است.پس آدرس CDN را در فیلد متنی “ریشه آدرس CDN” وارد کنید.وقتی از CDN استفاده نمیکنید این فیلد متنی خالی میماند.

عکس

تنظیمات توسعه یافته

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

تنظیمات Javascript

1- لود Javascript در برچسب head

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

گزینش چک باکس ““بارگذاری Javascript در تگ head” باعث میشود فایل های جاوا اسکریپت دیگر به انتهای کدها راه پیدا نمیکنند و در قسمت (تگ)Head امکان لود ندارند.

2- آیا تنها اسکریپت هایی که در تگ <head> وجود دارند بهینه سازی میشوند؟ (deprecated)

با انتخاب کردن کادر “فقط اسکریپت‌های موجود در تگ <head> بهینه سازی شوند؟(deprecated)“، تنها فایل های جاوا اسکریپتی که در بخش تگ head هستند فشرده و بهینه سازی می شوند و بقیه فایل های جاوا اسکریپت که مانده اند بدون فشرده سازی بارگذاری می شوند.

3-فیلد محروم کردن اسکریپت‌ها از Autoptimize

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

-افزودن دسته بندی توسط try-catch؟

با استفاده از چک باکس “اضافه نمودن دسته بندی بوسیله try-catch؟” میتوانید ارور های اسکریپت هایتان را کنترل کنید و مانع نمایش دادن خطا و اجرا نشدن اسکریپتتان در سایت شوید.لطفا اگر فکر می کنید اسکریپت هایتان امکان دارد دچار مشکل شوند این چک باکس را انتخاب کنید.

تنظیمات CSS

1-آیا تنها استایل هایی که در تگ <head> وجود دارند بهینه سازی شوند؟(deprecated)

وقتی که چک باکس “فقط استایل‌های موجود در تگ <head> بهینه سازی شوند؟ (deprecated)“، انتخاب می کنید فایل هایی که در تگ <head> وجود دارند فشرده و بهینه سازی می شوند و بقیه فایل ها به طور معمول و بدون فشرده سازی بارگذاری می شوند.

2و3- تبدیل CSS به صورت خطی (inline) و تعویق بارگذاری (defer) و درون خطی (inline) نمودن تمام کدهای CSS؟

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

4-محروم کردن CSSها از Autoptimize

اگر فایل های سی اس اس خاصی دارید که نمیخواهید آن ها توسط این افزونه بهینه سازی شوند اسم آن ها را در فیلد “محروم کردن CSS ها از Autoptimize” بنویسید.

اطلاعات CDN

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

1- ذخیره نمودن script و CSS متراکم شده به صورت فایل‌های ثابت (static)؟

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

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