سبد خرید
0

هیچ محصولی در سبد خرید نیست.

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

آموزش رفع 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 کلیک کنین.

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

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

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

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

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

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

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

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

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

پست پیشنهادی :  نحوه استایل دادن به پلاگین Contact Form 7 در وردپرس

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

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

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

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

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

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

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

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

ارسال دیدگاه

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

توسط
تومان