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

راهنمای بهینه سازی وردپرس (WordPress)

بسیاری از کاربران ما وردپرس را به‌صورت پلتفرم CMS یا وبلاگ اجرا می‌کنند. ایجاد یک وب‌سایت کامل با قابلیت ‌های شسته و رفته، با داشتن افزونه‌های بسیار عالی وردپرس، بسیار آسان است؛ اما این افزونه‌ها می‌توانند فایل‌های CSS و جاوا اسکریپت اضافی را در هدر (header) شما وارد کنند که ممکن است موجب آسیب رسیدن به عملکرد سایت شما شود (همچنین موجب آسیب به نمرات PageSpeed و YSlow گردد).

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

توجه: این افزونه‌ها فقط مربوط به مسائل بهینه فرانت‌اند (front-end) می باشند. اگر سایت شما هنوز برای بارگیری، زمان زیادی می‌برد، بهینه‌سازی سرور یا بهینه‌سازی کد بکاند (back-end) همان چیزی است که می‌تواند باعث ایجاد تغییر اساسی در آن ‌شود.

قدم اول اختیاری- GTmetrix را برای وردپرس نصب و فعال کنید.

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

گزینه دیگر: سایت خود را در GTmetrix.com وارد کنید و تجزیه‌وتحلیل نمایید. به‌وسیله نمودارهای تاریخ قادر خواهید بود تا وب‌سایت خود را بهتر دنبال کنید.

آموزش بهینه سازی دیتا بیس وردپرس
key APT GTmetrix خود را وارد کنید.

پس از نصب آن، key API را از حساب GTmetrix خود در صفحه تنظیمات وارد کنید (برای ایجاد یک key API باید ثبت‌نام کنید).

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

پس از اتمام این کار، از ” Tests ” بازدید کرده و در زیر ماژول ” Latest Front Page Score “، روی دکمه ” Test your Front Page now” کلیک کنید.

بررسی سرعت دیتابیس
تولید گزارش صفحه اول

گزارشی با نمرات PageSpeed و YSlow برای صفحه اول سایت وردپرس شما تولید می‌شود. این عملکرد گذشته شماست.

مرحله 1- UpdraftPlus را نصب و فعال کنید.

بسیار مهم است که قبل از بهینه‌سازی، از نصب وردپرس خود نسخه پشتیبان تهیه کنید (به‌طور مرتب).UpdraftPlus روشی ساده و مؤثر برای تهیه نسخه پشتیبان از کل نصب وردپرس، ازجمله بانک اطلاعاتی، افزونه‌ها، مضامین، آپلودها و موارد دیگر فراهم می‌کند.

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

در قسمت ” Settings” در نوار کناری وردپرس، به گزینه جدید منو با عنوان ” UpdraftsPlus Backups ” دسترسی خواهید داشت.

برای تهیه نسخه پشتیبان کامل از نصب وردپرس، روی ” Backup Now” کلیک کنید.

وقتی روی ” Backup Now ” کلیک کنید، یک پنجره ظاهر می‌شود. اطمینان حاصل کنید که هر دو گزینه ” Include the database in the backup ” و ” Include any files in the backup ” تیک خورده باشند.

از پشتیبان گیری از پایگاه داده (database) و فایل‌های خود اطمینان حاصل کنید.

بر روی ” Backup Now ” کلیک کنید. UpdraftPlus یک نسخه پشتیبان کامل از نصب وردپرس شما ایجاد می‌کند. اگر مشکلی در بهینه‌سازی رخ دهد یا نصب شما هک شده یا خراب شود، می‌توانید با استفاده از نسخه پشتیبان خود آن‌ها را بازیابی کنید.

مرحله 2- تصاویر خود را مقیاس بندی کنید (اختیاری)

در وردپرس، می‌توانید تصاویر با اندازه کوچکتر را بر اساس آنچه وردپرس برای شما ایجاد کرده است، وارد کنید.

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

در حقیقت، شما نمی‌خواهید تصاویری با ابعاد بزرگتر از آنچه کاربر برای نمایش نیاز دارد، به او ارائه دهید.

مرحله 3- نصب و فعال سازی WP Smush (Smush Image Compression and Optimization)

در قسمت “Media” در نوار کناری وردپرس، به گزینه جدید منو تحت عنوان “WP Smush” دسترسی خواهید داشت. در این بخش، از فعال بودن ویژگی “Auto Smush Images on upload” اطمینان حاصل کنید. این افزونه از وقتی که آن را فعال نمایید، هر تصویری را که بارگذاری می‌کنید، بهینه خواهد کرد.

آموزش بهینه سازی وردپرس
از فعال بودن ” Auto-Smush Images on upload ” مطمئن شوید و اندازه‌های تصاویری که می‌خواهید بهینه شوند را بررسی کنید. این قسمت برای بهینه سازی تصاویر وردپرس بسیار ضروریست.

در مرحله بعد، با کلیک بر روی “Bulk Smush 50 Attachments” تمام تصاویر موجود در کتابخانه رسانه خود را بهینه‌سازی کنید (نسخه رایگان این افزونه تعداد 50 پیوست را باهم بهینه‌سازی می‌کند و شما باید پیج را دوباره بررسی کرده و پیوست های باقی مانده را بهینه‌سازی کنید).

آموزش بهینه سازی وردپرس
برای فشرده سازی تصاویر کتابخانه رسانه خود، اکنون روی ”  Bulk Smush New” کلیک کنید

مرحله 4- WP Fastest Cache را نصب و فعال کنید.

با انجام این مرحله، در نوار کناری، گزینه جدیدی با عنوان “WP Fast Cache” را مشاهده خواهید کرد.

تنظیمات زیر را فعال نمایید:

  • Cache System
  • سیستم ذخیره سازی حافظه پنهان (Cache System) را برای ارسال سریع صفحات، فعال کنید.
  • Preload
  • پس از کلیک کردن روی این گزینه، یک پنجره باز شده که به شما می‌گوید، کدام صفحه را در حافظه پنهان (Cache) نگه دارید.
  • همه گزینه‌های آن را تیک زده و ” pages per minute ” را روی 4 گذاشته و بر روی “OK” کلیک کنید.
  • در صورت  بروز مشکل در سرویس هاست، ممکن است لازم باشد که این عدد را کاهش دهید.
آموزش بهینه سازی دیتابیس وردپرس | بهینه سازی تصاویر وردپرس
WP Fastest Cache Preload Options
  • Logged-in Users
  • اطمینان می‌دهد که اگر وارد سیستم شوید، می‌توانید وضعیت واقعی صفحات خود را ببینید، نه نسخه‌های ذخیره شده.
  • Minify HTML
  • HTML را فشرده می‌کند و سایز فایل را کاهش می‌دهد.
  • Minify CSS
  • CSS را فشرده می‌کند و سایز فایل را کاهش می‌دهد.
  • Combine CSS
  • پرونده‌های CSS شما را به یک منبع CSS پیوند می‌دهد و تعداد درخواست‌های HTTP را کاهش می‌دهد.
  • Combine JS
  • پرونده‌های JavaScript شما را به یک منبع JS واحد پیوند می‌دهد و تعداد درخواست‌های HTTP را کاهش می‌دهد.
  • Gzip
  • بیشتر صفحات شما را فشرده‌سازی می‌کند تا در فایل‌هایی با اندازه کوچکتر و سریع‌تر بارگیری شوند.
  • Browser Caching

با ذخیره‌سازی پنهان مرورگر به شما کمک می‌کند.

آموزش بهینه سازی دیتابیس وردپرس | بهینه سازی تصاویر وردپرس
همه تنظیمات فعال شده WP Fastest Cache

پس از اتمام کار، روی ” Submit ” کلیک کنید.

نکات مهم

  • کوچک‌سازی و ترکیب (Minification and Combining)

 

کوچک‌سازی و ترکیب HTML / CSS / JavaScript می‌تواند عملکرد وب‌سایت شما را خراب کند. کوچک‌سازی در اصل، از طریق اسکریپت‌های شما به روش حذف داده‌های غیرمستقیم مانند نظرات، قالب‌بندی، فضای سفید و سایر مواردی که کامپیوترها نیازی به خواندن آن ندارند انجام می‌شود. عمل ترکیب، محتویات موجود هر اسکریپت را می‌گیرد و همه آن‌ها را در یک اسکریپت واحد جمع می‌کند.

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

پس از فعال کردن ویژگی‌های کوچک‌سازی و ترکیب (Minification and Combining)، حتماً عملکرد سایت خود را بررسی کنید. اگر دیدید که مشکلی در عملکرد وجود دارد، تمام ویژگی‌های کوچک‌سازی و ترکیب را غیرفعال کرده و آن‌ها را یک به یک دوباره فعال کنید تا تشخیص دهید که دقیقاً کدام ویژگی باعث بروز مشکل شده است.

اگر محیط‌ هاست (host) شما از HTTP / 2 پشتیبانی می‌کند، ترکیب کردن اسکریپت‌ها لازم نیست، زیرا پروتکل HTTP / 2 از multiplexing پشتیبانی می‌کند. درواقع اجازه دانلودهای چندگانه با استفاده از یک اتصال TCP واحد را می‌دهد.

  • صفحه ذخیره پنهان (Page Caching)

هر زمان که تغییرات اساسی در سایت ایجاد کنید، مانند افزودن افزونه یا تغییر CSS یا تم، توصیه می‌شود که حافظه پنهان را پاک کرده و دوباره آن را بارگیری کنید تا مطمئن شوید که آخرین نسخه سایت را ارائه می‌دهید. می‌توانید گزینه حذف حافظه پنهان WP Fastest Cache را در تب “Delete Cache” پیدا کنید.

آموزش بهینه سازی وردپرس | بهینه سازی تصاویر وردپرس
حافظه نهان خود را بعد از تغییرات اساسی در تم یا اضافه کردن افزونه‌ها حذف کنید.

بعد از اینکه شما حافظه پنهان WP Fastest Cach حذف کردید، خودش به‌طور خودکار حافظه پنهان را بارگذاری می‌کند. دقت کنید که محتوای جدید مانند پست یا صفحات نیازی به حذف حافظه پنهان ندارند.

مرحله 5- سایت خود را تجزیه و تحلیل کنید.

دوباره سایت خود را تجزیه‌وتحلیل کنید (از طریق GTmetrix.com ) و تفاوت عملکرد را ببینید!

باید در معیارهای زیر پیشرفت‌هایی را مشاهده کنید:

  • زمان بارگذاری کامل
  • اندازه کل صفحه
  • درخواست‌ها
    • نمرات PageSpeed و YSlow
    • تصاویر مقیاس بندی شده را ارائه کنید.
    • تصاویر بهینه‌سازی کنید.
    • حافظه پنهان مرورگر را بکار ببرید.
    • CSS و HTML را به حداقل برسانید.
    • فشرده‌سازی gzip را فعال کنید.
    • درخواست ‌های HTTP را کمتر کنید.

با توجه به ماهیت متفاوت نصب‌های وردپرس، کاربرد های متفاوت افزونه‌ها و محیط‌های هاست، ممکن است نتوانید روی تمام معیارهای فوق تاثیر چشمگیری بگذارید.

چیزهایی مانند منابع شخص ثالث (ابزارک های فیس بوک، جاسازی‌های YouTube و غیره) و تبلیغات هنوز هم می‌توانند تاثیر زیادی بر نمره شما بگذارند.

خلاصه

پس از آزمایش و بازی کردن با بسیاری از افزونه‌های مشابه، دریافتیم که ترکیب WP Fastest Cache، مقیاس بندی تصویر (image scaling) و WP Smush مؤثرترین و ساده‌ترین راه برای بهبود عملکرد وب‌سایت وردپرس شماست.

به تغییرات وبلاگ آزمایشی ما نگاهی بیندازید:

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

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

به این مقاله چه امتیازی می‌دهید؟

دیدگاه خود را بیان کنید

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

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

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

سبد خرید
محصولی در سبد خرید شما وجود ندارد.
question