بهینهسازی صفحات با افزونه Autoptimize وردپرس
افزونه Autoptimize وردپرس یکی از افزونههای قدرتمند و محبوب برای بهینهسازی عملکرد سایتهای بر پای این پلتفرم است. این ابزار با فشردهسازی و ترکیب فایلهای CSS، JavaScript و HTML به طرز چشمگیری باعث افزایش سرعت بارگذاری صفحات میشود. همچنین قابلیتهایی برای بهینهسازی بارگذاری تصاویر، فونتها و حتی استفاده از CDN دارد که در مجموع به بهبود امتیاز SEO و افزایش رضایت کاربر کمک میکند.
شروع تنظیمات افزونه Autoptimize وردپرس
بعد از نصب و فعالسازی، وارد پیشخوان وردپرس شوید. از منوی «افزونهها» گزینه تنظیمات مربوط به Autoptimize را انتخاب کنید.
در ادامه به معرفی کامل بخشهای مختلف تنظیمات افزونه میپردازیم:
تب اول: JS, CSS & HTML
– تنظیمات JavaScript
۱. بهینهسازی کد Javascript
فعالسازی این گزینه منجر به فشردهسازی فایلهای JavaScript میشود که در افزایش سرعت سایت مؤثر است. در صورت اختلال در عملکرد، میتوان آن را غیرفعال کرد.
۲. تجمیع پروندههای JS
این گزینه همه فایلهای JS سایت را با هم ترکیب میکند. ترکیب فایلها تعداد درخواستهای مرورگر را کاهش داده و موجب سرعت بهتر بارگذاری میشود. پس از فعالسازی، بهتر است سایت را بررسی کنید تا اختلالی ایجاد نشده باشد.
✔ JS درون خطی نیز یکیسازی شود
Autoptimize در این حالت کدهای JS درون HTML را نیز ترکیب میکند. این عملکرد ممکن است حجم کش را افزایش دهد.
✔ بارگذاری Javascript در تگ <head>
اگر این گزینه فعال شود، فایلهای JS در تگ <head> بارگذاری میشوند. توجه داشته باشید که این کار ممکن است باعث Render-Blocking شود.
✔ اضافه نمودن دستهبندی بوسیله try-catch
فعالسازی این گزینه باعث قرار گرفتن کدهای JS در بلوک try-catch میشود تا در صورت خطا، عملکرد سایت از کار نیفتد. به دلیل پیچیدگی، استفاده از این گزینه در همه سایتها پیشنهاد نمیشود.
۳. Do not aggregate but defer
با فعال کردن این ویژگی، فایلهای JS به صورت جداگانه اما با تأخیر (defer) بارگذاری میشوند.
✔ Also defer inline JS
کدهای JavaScript داخلی نیز با تأخیر لود میشوند. این گزینه در افزایش سرعت لود مؤثر است، ولی نیاز به تست عملکرد سایت دارد.
۴. محروم کردن اسکریپتها از Autoptimize
در این قسمت، میتوانید فایلهایی مثل whatever.js, my_var را برای مستثنا شدن از بهینهسازی وارد کنید.
نکته: اگر “Aggregate JS-files” فعال باشد، حتی فایلهای مستثنا نیز ممکن است فشرده شوند؛ مگر اینکه تنظیمات بخش Misc را تغییر دهید.
۵. JavaScript استفادهنشده حذف شود
Autoptimize قابلیت شناسایی کدهای بلااستفاده را ندارد. برای حذف چنین کدهایی، پیشنهاد میشود از ابزارهایی مانند Plugin Organizer استفاده شود.
– تنظیمات CSS
۱. بهینهسازی کد CSS
فشردهسازی فایلهای CSS باعث افزایش سرعت لود و کاهش حجم فایلها میشود. در صورت ایجاد مشکل، میتوان آن را غیرفعال کرد.
۲. تجمیع پروندههای CSS
این گزینه تمامی فایلهای CSS را ترکیب کرده و درخواستهای مرورگر را کاهش میدهد. مانند JS، تست عملکرد پس از فعالسازی ضروری است.
✔ CSS درون خطی نیز یکیسازی شود
کدهای CSS جاسازی شده نیز ترکیب میشوند، اما ممکن است باعث افزایش حجم کش شود.
✔ تولید data: URIs برای تصاویر
تصاویر پسزمینه کوچک به جای دانلود جداگانه، مستقیماً در فایل CSS قرار میگیرند.
۳. CSS مسدودکننده رندر حذف شود
CSS موردنیاز بخش اولیه صفحه (Above the Fold) در HTML جاسازی میشود تا لود اولیه سایت سریعتر باشد.
۴. درونخطی نمودن تمام کدهای CSS
با این گزینه، همه CSS داخل HTML لود میشوند. این روش برای برخی سایتها مفید است ولی ممکن است باعث افزایش حجم HTML شود و مثلاً در واتساپ یا فیسبوک، پیشنمایش اشتباه نشان دهد.
۵. حذف موارد CSS از بهینهسازی
با استفاده از این بخش، فایلهای CSS خاص یا پوشههایی را میتوانید از بهینهسازی خارج کنید. فایلها باید با کاما جدا شوند.
– تنظیمات HTML
تنظیمات HTML
۱. بهینهسازی کد HTML
کدهای HTML فشرده شده و حجم خروجی صفحه کاهش مییابد که در امتیاز سئو و سرعت سایت مؤثر است.
۲. Also minify inline JS/CSS
فشردهسازی کدهای جاوااسکریپت و CSS داخلی HTML برای کاهش حجم نهایی صفحه انجام میشود.
۳. نگهداشتن کامنتهای HTML
در حالت عادی Autoptimize کامنتها را حذف میکند. با فعالسازی این گزینه، کامنتها در کد باقی میمانند.
تنظیمات CDN
در این بخش، آدرس CDN را (مثلاً: //cdn.yoursite.com/) وارد کنید تا فایلهای بهینهشده از طریق CDN بارگذاری شوند.
اگر از Cloudflare استفاده میکنید، نیازی به وارد کردن این آدرس نیست.
اطلاعات کش (Cache Info)
فقط برای مشاهده وضعیت کش افزونه است و به تغییر دستی نیاز ندارد.
– تنظیمات متفرقه
۱. ذخیره فایلهای ترکیبشده به صورت استاتیک
این کار باعث بارگذاری سریعتر در مرورگر کاربر میشود. اگر سرور شما قابلیت gzip یا expiry header ندارد، این گزینه را غیرفعال کنید.
۲. عدم فشردهسازی فایلهای JS و CSS
اگر در ظاهر سایت اختلال ایجاد شده، میتوانید موقتاً فشردهسازی را غیرفعال کنید.
۳. Enable 404 fallbacks
در صورت حذف فایلهای کششده، نسخه جایگزین بارگذاری میشود تا سایت دچار خرابی نشود. ممکن است به تنظیماتی در سرور نیاز باشد.
۴. بهینهسازی برای مدیران و ویرایشگران لاگینشده
اگر میخواهید هنگام کار با صفحهساز یا توسعه، بهینهسازی انجام نشود، این گزینه را غیرفعال کنید.
۵. فعالسازی پیکربندی برای هر پست یا صفحه
با این قابلیت، میتوانید تنظیمات بهینهسازی را در سطح هر صفحه یا نوشته مدیریت کنید.
۶. غیرفعال کردن سازگاریهای اضافی
افزونه Autoptimize وردپرس برای جلوگیری از تداخل با افزونههایی مثل Revolution Slider تنظیمات خاصی دارد. در صورت ایجاد مشکل، میتوانید این گزینه را فعال کنید.
✔ در پایان، دکمه “ذخیره تغییرات و تخلیه کش” را بزنید تا تنظیمات نهایی شوند.
تب دوم: تصاویر (Images)
۱. Image optimization & CDN
تصاویر با کمک ShortPixel بهینه شده و با فرمت WebP بارگذاری میشوند. برای بهینهسازی نامحدود میتوانید نسخه Pro تهیه کنید.
۲. Lazy-load تصاویر
این ویژگی باعث میشود فقط تصاویری که کاربر میبیند، در لحظه بارگذاری شوند و بقیه با تأخیر لود شوند.
✔ حذف Lazy-load برای تصاویر خاص
کلاس یا ID تصاویر موردنظر را وارد کنید تا از فرآیند Lazy-load مستثنا شوند.
✔ Lazy-load از تصویر چندم به بعد
عدد مورد نظر را وارد کنید (مثلاً: 2) تا تصاویر اول و دوم عادی بارگذاری شوند و بقیه Lazy-load شوند.
تب سوم: Critical CSS
در این بخش میتوانید CSS حیاتی بخش ابتدایی سایت را مشخص کنید تا سرعت بارگذاری اولیه بالا برود و در PageSpeed Insights گوگل امتیاز بهتری بگیرید.
نتیجهگیری
افزونه Autoptimize وردپرس با تنظیمات گسترده و قابل کنترل، یکی از بهترین گزینهها برای بهینهسازی سایتهای وردپرس است. با استفاده صحیح از قابلیتهای این افزونه و تهیه هاست وردپرس وب رمز میتوانید به طور مستقیم روی افزایش سرعت سایت، کاهش حجم فایلها و بهبود سئو تأثیر بگذارید.
