روش حذف Render-Blocking JavaScript و CSS روی وردپرس

اگر می خواهید در صفحات نتایج موتورهای جستجو (SERP) رتبه بالایی داشته باشید، داشتن وب سایتی که سریع بارگذاری می شود بسیار مهم است. به همین دلیل ابزارهای تست سرعت وب سایت برای بهینه سازی سایت به شما کمک می کنند. اگر در حال دریافت “جاوا اسکریپت و CSS مسدودکننده رندر را در محتوای بالای صفحه حذف کنید” هشدار هنگام استفاده از ابزار، نگران نباشید. در این مقاله روش رفع مشکل را به شما نشان خواهیم داد.

اخطار آشنایی با “حذف رندر مسدود کردن جاوا اسکریپت و CSS در محتوای بالای صفحه”

اگر به گوگل نگاه کنید قوانین PageSpeedحذف رندر مسدود کردن جاوا اسکریپت و CSS یکی از آنهاست. هر گونه شکست در آن منجر به کندتر خواهد شد page سرعت بارگذاری اما چگونه می توان جاوا اسکریپت و CSS روی HTML شما page سایت خود را کند کنم؟

خوب، هر بار که یک پلاگین یا یک تم جدید نصب می کنید، یک کد جاوا اسکریپت و CSS را به قسمت جلو اضافه می کنند. در نتیجه، مرورگرها ممکن است به زمان بیشتری برای بارگذاری نیاز داشته باشند page.

بالای صفحه (ATF) به معنای بخشی از صفحه وب شما است که در زمانی که صفحه وب قابل مشاهده است page اولین بارها هر بخشی از page که برای رسیدن به آن باید به پایین اسکرول کنید غیر ATF است.

بنابراین، اگر کدهای جاوا اسکریپت و CSS غیر مرتبط هنگام بارگیری وب سایت شما توسط بازدیدکنندگان ارائه شود، ممکن است هشداری برای کاهش تعداد جاوا اسکریپت و CSS مسدودکننده رندر در منابع محتوای بالاتر دریافت کنید.

یافتن جاوا اسکریپت و CSS با مسدود کردن رندر با استفاده از Google PageSpeed ​​Insights

اولین گام در رفع رندر مسدود کردن، آزمایش سرعت سایت شما با استفاده از آن است Google PageSpeed ​​Insights. برای انجام این کار مراحل زیر را دنبال کنید:

1. بازدید کنید pageو آدرس وب سایت خود را در “یک وب را وارد کنید page URL” رشته.
2. کلیک تجزیه و تحلیل برای دریافت گزارش

اگر پیشنهاد حذف جاوا اسکریپت و CSS مسدودکننده رندر را نیز در محتوای بالای صفحه پیدا کردید، باید مشکل را برطرف کنید.

به خاطر داشته باشید که نباید وب سایت خود را مجبور کنید که امتیاز کامل 100 را کسب کند.

در صورت وجود اسکریپت روی سایت وردپرس خود را که برای یک UX قوی ضروری هستند، نباید آنها را حذف کنید تا امتیاز کمی بالاتر بگیرید. روی PageSpeed ​​Insights.

رفع خطای «حذف رندر مسدود کردن جاوا اسکریپت و CSS در محتوای بالای صفحه»

با وردپرس، منابع جاوا اسکریپت و CSS مسدود کننده رندر را کاهش می دهد روی سایت وردپرس شما آسان است. می توانید از سه افزونه ای که در زیر لیست کرده ایم استفاده کنید:

مجموع کش W3

یکی از موارد مورد علاقه ما است مجموع کش W3 افزونه پس از نصب و فعال سازی، این مراحل را دنبال کنید روی داشبورد مدیریت وردپرس شما:

• رفتن به کارایی -> تنظیمات عمومی.
• پیدا کن کوچک کردن عنوان روی را page. سپس، چند گزینه را در زیر این عنوان مشاهده خواهید کرد.
• تیک فعال کردن جعبه برای کوچک کردن. سپس، برای حالت کوچک کردن گزینه، انتخاب کنید کتابچه راهنمای.
• مطبوعات تمام تنظیمات را ذخیره کنید.

• همه اسکریپت‌های جاوا اسکریپت و CSS مسدودکننده رندر را واکشی کنید، که می‌توانید از طریق Google PageSpeed ​​Insights آن‌ها را پیدا کنید.
• وقتی مشکل ساز را پیدا کردید، دوباره به آن بروید عملکرد -> Minify روی داشبورد وردپرس شما
• پیدا کن JS بخش. در عملیات در مناطق بخش، را انتخاب کنید عدم انسداد با استفاده از “Defer” نوع جاسازی برای بپیش از این برچسب زدن
• برای مدیریت فایل JS، موضوع فعال خود را انتخاب کرده و کلیک کنید روی را اضافه کردن اسکریپت دکمه. URL های جاوا اسکریپت را از Google PageSpeed ​​Insights کپی و جایگذاری کنید روی فیلدهای ارائه شده، همانطور که در زیر نشان داده شده است.

• به پایین بروید و آن را پیدا کنید CSS بخش. برای مدیریت فایل CSS، موضوع فعال خود را انتخاب کرده و کلیک کنید روی یک شیوه نامه اضافه کنید. مشابه مرحله بالا، آدرس‌های صفحه سبک CSS را از PageSpeed ​​Insights کپی کرده و آن‌ها را جای‌گذاری کنید. روی فیلدهای مورد نیاز

• در نهایت بر روی تنظیمات را ذخیره کنید و کش ها را پاک کنید دکمه.

بهینه سازی خودکار

به طور متناوب، می توانید از بهینه سازی خودکار پلاگینی برای رفع خطای render-blocking javascript و css. این مراحل را انجام دهید روی داشبورد شما پس از نصب و فعال سازی افزونه:

• برو به تنظیمات -> بهینه سازی خودکار.
• کادرها را علامت بزنید کد جاوا اسکریپت را بهینه کنید؟” و کد CSS را بهینه کنید؟
• را فشار دهید ذخیره تغییرات و خالی کردن کش دکمه.

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

برای اینکه مطمئن شوید مشکل شما حل شده است، سایت خود را دوباره از طریق PageSpeed ​​Insights اجرا کنید. اگر منابع JS و CSS مسدودکننده‌ای باقی مانده است، با دنبال کردن این مراحل، بهینه‌سازی را بیشتر انجام دهید:

• سر به عقب برگرد تنظیمات -> بهینه سازی خودکار.
• بزن به نمایش تنظیمات پیشرفته دکمه.
• سپس، گزینه های برای را بررسی کنید همچنین JS درون خطی را جمع آوری کنید و همچنین CSS درون خطی را جمع آوری کنید.

• تغییرات خود را ذخیره کنید.

بسته تقویت کننده سرعت

یکی دیگر از پلاگین های محبوبی که ممکن است برای رفع خطای رندر انسداد جاوا اسکریپت و css برای وب سایت وردپرس شما مفید باشد این است. بسته تقویت کننده سرعت. برای انجام آن، این مراحل را دنبال کند روی ناحیه wp-admin شما:

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

• به پایین اسکرول کنید بهینه سازی CSS منو برای تنظیم بهینه سازی مسدود کردن رندر CSS.
• تنظیمات اضافی برای داخل کردن تمام CSS، کوچک کردن تمام CSS های خطی (قبلا) و انتقال همه CSS های خطی به پاورقی پیدا خواهید کرد. برای یافتن راه حل مناسب، این گزینه ها را آزمایش کنید.

پس از امتحان روش‌های بالا، به Google PageSpeed ​​Insights برگردید تا مطمئن شوید که رندر مسدود کردن دیگر مشکلی نیست.

نتیجه

سرعت وب سایت یکی از مهمترین عوامل جذب و حفظ بازدیدکنندگان است. زیرا موتورهای جستجو هنگام رتبه بندی نتایج، سرعت سایت را در نظر می گیرند، بنابراین افزایش سرعت سایت وردپرس ضروری است.

PageSpeed ​​Insights گوگل امتیازی را به وب‌سایت‌ها اختصاص می‌دهد روی سرعت بارگذاری آنها اگر در حین تجزیه و تحلیل عملکرد سایت وردپرس خود، از جاوا اسکریپت و CSS بدنام حذف رندر مسدود کننده استفاده می کنید، به سادگی مشکل را با افزونه ها برطرف کنید.

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