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

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

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

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

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

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

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

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

پس از نصب آن، 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 ” کلیک کنید، یک پنجره ظاهر می‌شود. اطمینان حاصل کنید که هر دو گزینه ” Include the database in the backup ” و ” Include any files in the backup ” تیک خورده باشند.

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

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

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

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

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

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

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

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

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

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

• Cache System
• سیستم ذخیره سازی حافظه پنهان (Cache System) را برای ارسال سریع صفحات، فعال کنید.
• Preload
• پس از کلیک کردن روی این گزینه، یک پنجره باز شده که به شما می‌گوید، کدام صفحه را در حافظه پنهان (Cache) نگه دارید.
• همه گزینه‌های آن را تیک زده و ” pages per minute ” را روی 4 گذاشته و بر روی “OK” کلیک کنید.
• در صورت  بروز مشکل در سرویس هاست، ممکن است لازم باشد که این عدد را کاهش دهید.

• Logged-in Users
• اطمینان می‌دهد که اگر وارد سیستم شوید، می‌توانید وضعیت واقعی صفحات خود را ببینید، نه نسخه‌های ذخیره شده.
• Minify HTML
• HTML را فشرده می‌کند و سایز فایل را کاهش می‌دهد.
• Minify CSS
• CSS را فشرده می‌کند و سایز فایل را کاهش می‌دهد.
• Combine CSS
• پرونده‌های CSS شما را به یک منبع CSS پیوند می‌دهد و تعداد درخواست‌های HTTP را کاهش می‌دهد.
• Combine JS
• پرونده‌های JavaScript شما را به یک منبع JS واحد پیوند می‌دهد و تعداد درخواست‌های HTTP را کاهش می‌دهد.
• Gzip
• بیشتر صفحات شما را فشرده‌سازی می‌کند تا در فایل‌هایی با اندازه کوچکتر و سریع‌تر بارگیری شوند.
• Browser Caching

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

پس از اتمام کار، روی ” 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 مؤثرترین و ساده‌ترین راه برای بهبود عملکرد وب‌سایت وردپرس شماست.

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

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

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