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

  • اولین کاری که همیشه برای برطرف کردن این مشکل انجام میدادم برش تصاویر بود. سعی می کردم و می کنم تا جای ممکن تصاویر و برش بدم و به قول معروف Scale تصویر و درست کنم. یعنی اگر فضای تصویری 800 در 600 پیکسل باشه، تصویرم یهو 1920 در 1080 نباشه.
  • دومین کاری که برای برطرف کردن این مشکل انجام میدادم کم کردن حجم تصاویر بود. اول از طریق فتوشاپ و بعد ها از طریق سایت های آنلاین کم کردن حجم.
  • کار بعدی که انجام میدم اینه که حجم فایلای css و js و کم کنم. از طریق minify کردن که اونم با ابزار های آنلاین انجام میدم.
  • کار بعدی ایجاد کش برای کاربر‌ه که هر دفعه درخواست سمت سرور فرستاده نشه.

خب همه اینا خیلی خوبن ولی کم کم مشکلات شروع میشن.

  1. تصاویر و خیلی وقت ها عجله ای اپلود می کنیم و وقت نمی کنیم حجمشون و پایین بیاریم.
  2. تغییرات هم که ماشالله اینقدر زیاد میشن که نمیشه هی فایلای css و js و unminify کنیم و دوباره کم حجم کنیم. کار اعصاب خورد کنی‌ه.

فکر بعدی که به نظرم رسید نصب افزونه هایی نظیر wp-rocket بود که از حق نگذریم توی این زمینه خیلی خوب عمل می کنن و واقعا عالی هستن. اما…

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

اینجا بود که شروع کردم به جستجو و متوجه شدم برای اینکار هایی که گفتم یک ابزار رایگان و عالی وجود داره که به صورت خودکار( خوشحال نشید! ) همه اینکارهای و به علاوه کلی کارهای باحال دیگه برامون انجام میده. ابزاری که اینکار و انجام میده gulp.js ه.

البته هنوز در حال یادگیری هستم ولی دلم میخواد هر چیزی که یاد گرفتم و اینجا هم بذارم که دوستان هم بتونن استفاده کنن.

چک لیست بالا بردن سرعت و بهینه کردن وب سایت

چک لیستی کاربردی که حتما به اون نیاز پیدا خواهید کرد

Enable Gzip

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

Minify js and css

کم کردن حجم فایلای css و js یادتون نره.

Combine js and css to 1 file

یادتون باشه که اخر سر باید 1 فایل css و 1 فایل js باید سمت سرور فرستاده بشه.

prevent js loading before all element loaded

قبل از اینکه کل سایت بارگزاری بشه نباید فایلای js خونده بشن

Lazy Load Image

حتما تصاویرتون به صورت تنبل بارگزاری بشن. یعنی تا نیاز نباشه تصویر لود نشه.

AMP for mobile

من به شخصه با این گزینه زیاد موافق نیستم. به نظرم بیشتر برای سایت های خبری خوبه.

@font-face { font-display: swap; }

اینم یه چیز باحالیه که تازه کشفش کردم. برای فونت ها بذارید. میگن جوابه!!

Browser Caching on httpaccess

حتما از گزینه های کش کردن در فایل httpaccess استفاده کنید

don’t use child in css or js

تا جای ممکن از child در css استفاده نکنید. به همه ی المان ها کلاس یا ای دی بدین.

موارد چک لیست بالا و همچنین بهینه کردن تصاویر و انجام بدین دیگه بعید میدونم مشکلی برای سرعت داشته باشین.