آموزش رفع Render-Blocking JavaScript and CSS در وردپرس

اگر وبسایتتون رو روی Google PageSpeed insights آزمایش کرده باشین، متوجه بلاک شدن CSS و Javascript شدین. در آموزش امروز به شما نشون میدیم که چطور با Render-Blocking JavaScript and CSS مقابله کنین.

دو مرحله ساده برای این کار وجود داره.

Render-Blocking JavaScript and CSS چیست؟

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

اگر در حال توسعه وبسایت خودتون هستین باید ابزار Google PageSpeed Insights  رو بشناسین.

این ابزار وبسایت شما رو بررسی میکنه و پیشنهاداتی ارائه میده که میتونه به بهبود سرعت بارگذاری وبسایت شما کمک کنه.

وقتی وبسایتتون در Google PageSpeed Insights بررسی شد، صفحه‌ای با امتیاز سایت و توصیه‌هایی برای افزایش این امتیازها دریافت میکنین. معمولا اغلب وبسایت‌ها امتیازی بین 50 تا 70 میگیرن. این به شما بستگی داره که توصیه‌هایی که در اون صفحه می‌بینین رو دنبال کنین یا نه. اما یادتون باشه که سرعت وبسایت شما بر عملکردش تاثیر میذاره.

چطور Render-Blocking JavaScript and CSS رو رفع کنیم؟

Render-Blocking JavaScript and CSS رایج‌ترین چیزی هست که برای بهبود عملکرد وبسایت باید برطرف بشه. بهترین راه برای رفعش، نصب پلاگین‌های خاص هست. ما قصد داریم نحوه استفاده از پلاگین‌های Autoptimize و W3 Total Cache رو به شما نشون بدیم.

پلاگین Autoptimize

قطعا شما بلدین که چطور یک پلاگین رو نصب کنین، اما ما این روند رو یادآوری میکنیم.

وارد پنل مدیریت وردپرستون بشین. به قسمت Plugins > Add New برین.

در کادر جست‌وجویی که در اون صفحه می‌بینین، Autoptimize  رو وارد کنین.

پلاگین رو نصب و فعال کنین.

اگر پلاگین رو نصب کردین، به مرحله بعدی برین. Settings > Autoptimize page رو در قسمت مدیریتتون باز کنین. این پلاگین به شما این امکان رو میده که فایل‌های CSS و JS خودتون رو تغییر بدین. اما توجه داشته باشین که انجام این کار میتونه ظاهر وبسایت شما رو تحت تاثیر قرار بده.

بخش‌های JavaScript Options و CSS Options رو اینجا قرار بدین. تنها کاری که باید انجام بدین اینه که کادرهای کنار این عناوین رو علامت بزنین و روی دکمه Save changes and Empty cache کلیک کنین.

وبسایتتون رو در ابزار Page Speed تست کنین. اگر سوالی دارین صفحه پلاگین رو باز کنین و روی تب Advanced settings کلیک کنین تا بتونین inline JS رو اضافه کنین و اسکریپت‌هایی که به طور پیش‌فرض exclude شدن رو حذف کنین.

به قسمت CSS برین و گزینه inline CSS رو فعال کنین. تنظیمات رو ذخیره کنین و روی دکمه Clear Cache کلیک کنین.

اگر قبلا این پلاگین رو در سایتتون نصب کردین، W3 Total Cache توصیه میشه.

برای پیکربندی تنظیمات پلاگین، صفحه Performance > General Settings رو در پنل مدیریتتون باز کنین و به بخش Minify برین.

گزینه Manually رو برای تنظیم حالت minify کردن انتخاب کنین. تغییرات رو ذخیره کنین.

حالا باید CSS که می‌خواهین minify کنین رو اضافه کنین. فهرست فایل‌هایی که باید minify بشن در ابزار Google PageSpeed Insights شما قرار دارن، دقیقا زیر عنوان Eliminate render-blocking JavaScript and CSS in above-the-fold content.

URLهایی که اونجا میبینین رو کپی کنین.

حالا میتونین صفحه  Performance > Minify رو باز کنین. اسکریپت‌ها JS خودتون رو زیر بخش JS file management  اضافه کنین. برای افزودن اسکریپت روی دکمه Add a script کلیک کنین. URLهایی که قبلا کپی کردین رو وارد کنین.

همین کار رو در قسمت CSS file management هم انجام بدین.

برای ذخیره تغییرات روی دکمه Save settings and purge cache کلیک کنین.

ابزار Google PageSpeed رو باز کنین و دوباره وبسایتتون رو تست کنین.

همه‌اش همین بود! حالا میتونین render-blocking Javascript and CSS رو در وردپرس رفع کنین.