نحوه رفع خطای “حذف رندر مسدود کننده جاوا اسکریپت و CSS” در وردپرس

اگر می خواهید در صفحات نتیجه موتور جستجو (SERP) رتبه بالایی داشته باشید ، داشتن وب سایتی که سریع بارگیری می شود ، بسیار مهم است. به همین دلیل ابزارهای تست سرعت وب سایت برای کمک به بهینه سازی سایت خود در آنجا هستند. اگر در هنگام استفاده از ابزار ، “جاوا اسکریپت و CSS را در معرض خطر قرار می دهید” در هنگام استفاده از ابزار ، اخطار می کنید. در این مقاله ، ما به شما نشان می دهیم که چگونه مسئله را برطرف کنید.
👉
وب سایت خود را با Hostinger شروع کنید – میزبانی سریع و ایمن را از اینجا دریافت کنید
👈
آشنایی با هشدار “حذف جاوا اسکریپت و CSS را در معرض خطر” از بین ببرید ”
اگر به قوانین پیج Google نگاه کنید ، حذف JavaScript رندر مسدود کننده و CSS یکی از آنهاست. هرگونه خرابی در آن منجر به سرعت بارگذاری صفحه کندتر خواهد شد. اما چگونه می توان JavaScript و CSS را در صفحه HTML شما کاهش داد؟ خوب ، هر بار که یک افزونه یا یک موضوع جدید نصب می کنید ، آنها JavaScript و CSS را به قسمت جلویی اضافه می کنند. در نتیجه ، مرورگرها ممکن است برای بارگیری صفحه به زمان بیشتری نیاز داشته باشند.
بالاتر از برابر (ATF) به معنای بخشی از صفحه وب شما است که هنگام بارگیری صفحه قابل مشاهده است. هر قسمت از صفحه ای که برای رسیدن به آن باید به پایین بروید غیر ATF است.
بنابراین ، اگر JavaScript و کد CSS غیر مرتبط با بارگیری وب سایت شما ارائه می شود ، ممکن است هشدار دهید تا تعداد جاوا اسکریپت و CSS را در منابع محتوای بالاتر کاهش دهید.
پیدا کردن JavaScript و CSS مسدود کننده با استفاده از Google Pagespeed Insights
اولین قدم برای رفع مسدود کردن رندر ، آزمایش سرعت سایت شما با استفاده از Google Pagespeed Insights است. این مراحل را برای انجام این کار دنبال کنید:
- به صفحه مراجعه کرده و URL وب سایت خود را در قسمت “وارد URL صفحه وب” قرار دهید.
- برای دریافت گزارش ، روی Analyze کلیک کنید.
بیشتر سایت ها بین 50-70 نمره می گیرند. این باید به عنوان معیار برای نمره شما باشد. Google همچنین پیشنهاداتی را برای بهبود عملکرد وب سایت شما ذکر خواهد کرد.
اگر پیشنهادی را برای از بین بردن JavaScript و CSS مسدود کننده رندر در محتوای بالاتر از آن پیدا کردید ، پس باید این مسئله را برطرف کنید.
به خاطر داشته باشید که نباید وب سایت خود را مجبور به کسب 100 امتیاز کامل کنید. فقط تمام تلاش خود را بکنید تا بدون اینکه تجربه کاربر را فدا کنید ، نمره خوبی کسب کنید.
اگر اسکریپت هایی در سایت وردپرس شما وجود دارد که برای یک UX قوی ضروری است ، نباید آنها را حذف کنید تا نمره کمی بالاتر در Pagespeed Insights کسب کنید.
قوانینی که Google در مورد وب سایت های شما امتیاز می دهد صرفاً دستورالعمل ها هستند و باید به این ترتیب در نظر گرفته شوند.
رفع خطای “حذف JavaScript و CSS مسدود کننده رندر در محتوای بالاتر”
با وردپرس ، کاهش منابع جاوا اسکریپت و مسدود کننده رندر در سایت وردپرس شما آسان است. می توانید از سه افزونه ای که در زیر ذکر کرده ایم استفاده کنید:
حافظه پنهان W3
یکی از موارد مورد علاقه ما افزونه W3 Total Cache است. پس از نصب و فعال شدن ، این مراحل را در داشبورد مدیر وردپرس خود دنبال کنید:
- به عملکرد-> تنظیمات عمومی بروید.
- عنوان Minify را در صفحه پیدا کنید. سپس ، چند گزینه را در زیر این عنوان مشاهده خواهید کرد.
- جعبه فعال را برای Minify تیک بزنید. سپس ، برای گزینه Minify Mode ، Manual را انتخاب کنید.
- ذخیره همه تنظیمات را فشار دهید.
- تمام اسکریپت های JavaScript و CSS را که می توانید از طریق Google Pagespeed Insights پیدا کنید ، به دست بیاورید.
- پس از پیدا کردن مشکل ساز ، به عملکرد خود بروید -> در داشبورد وردپرس خود را Minify کنید.
- بخش JS را پیدا کنید. در بخش عملیات در مناطق ، عدم مسدود کردن را با استفاده از نوع “تعویق” تعبیه شده برای Beforetag انتخاب کنید.
- برای مدیریت فایل JS ، موضوع فعال خود را انتخاب کرده و روی دکمه Add Script کلیک کنید. URL های JavaScript را از Google Pagespeed Insights در زمینه های ارائه شده ، همانطور که در شکل زیر مشاهده می کنید ، کپی و چسباندن کنید.
- به پایین بروید و بخش CSS را پیدا کنید. برای مدیریت فایل CSS ، موضوع فعال خود را انتخاب کرده و روی Add A Syled Sheet کلیک کنید. مشابه مرحله فوق ، URL های شیوه های CSS را از بینش های Pagespeed کپی کرده و آنها را در قسمت های مورد نیاز جایگذاری کنید.
- در آخر ، روی دکمه ذخیره تنظیمات و پاکسازی ها کلیک کنید.
بهینه کردن
از طرف دیگر ، می توانید از افزونه Autoptimize برای حل خطای JavaScript و CSS رندر استفاده کنید. پس از نصب و فعال شدن افزونه ، این مراحل را روی داشبورد خود انجام دهید:
- به تنظیمات بروید -> autoptimize.
- جعبه ها را برای بهینه سازی کد JavaScript بررسی کنید؟ و کد CSS را بهینه کنید؟
- دکمه Save Changes و خالی را فشار دهید.
در بیشتر موارد ، این برای رفع هشدار کافی است. با این حال ، نتیجه ممکن است بسته به موضوع و افزونه های فعال شما متفاوت باشد.
برای اطمینان از حل مشکل شما ، سایت خود را دوباره از طریق Pagespeed Insights اجرا کنید. اگر منابع مسدود کننده JS و CSS باقی مانده است ، با دنبال کردن این مراحل ، بهینه سازی را حتی بیشتر کنید:
- بازگشت به تنظیمات -> autoptimize.
- دکمه تنظیمات Advanced Settings را بزنید.
- سپس گزینه های مربوط به js درون خطی کل و همچنین CSS درون خطی را بررسی کنید.
- تغییرات خود را ذخیره کنید.
بسته تقویت کننده سرعت
یکی دیگر از افزونه های محبوب که ممکن است در رفع خطای Render-Blocking JavaScript و CSS برای وب سایت WordPress خود مفید باشد ، سرعت تقویت کننده سرعت است. برای انجام این کار ، این مراحل را در منطقه WP-Admin خود دنبال کنید:
- به بخش Peed Booster Pack بروید و به برگه Advanced دسترسی پیدا کنید.
- در منوی بهینه سازی JavaScript ، اسکریپت های جابجایی را به پاورقی فعال کرده و تجزیه و تحلیل فایلهای JavaScript را انجام دهید.
- به منوی بهینه سازی CSS بروید تا بهینه سازی مسدود کننده CSS رندر تنظیم شود.
- شما می توانید تنظیمات اضافی را برای ورود به تمام CS ها ، کوچک کردن همه (قبلاً) CSS در خط ، و انتقال تمام CSS های درون لایه ای به سمت پاورقی پیدا کنید. برای یافتن یک راه حل مناسب با این گزینه ها آزمایش کنید.
- به سادگی فعال کردن همه آنها سریعتر سایت شما را بارگیری می کنند ، اما ممکن است فلاش ناخواسته از مصنوعات بی نظیر (FOUC) را نیز معرفی کند. این اتفاق می افتد که مرورگر صفحه وب را بدون انتظار برای بارگیری در شیوه شیوه ای بارگذاری کند و باعث ایجاد یک لحظه لحظه ای از صفحه بی نظیر شود.
- پس از تلاش روشهای بالا ، به Google Pagespeed Insights برگردید تا اطمینان حاصل شود که مسدود کردن رندر دیگر مسئله ای نیست.
پایان
سرعت وب سایت یکی از مهمترین عوامل در جذب و حفظ بازدید کنندگان است. این امر به این دلیل است که موتورهای جستجو هنگام رتبه بندی نتایج ، سرعت سایت را در نظر می گیرند ، بنابراین افزایش سرعت سایت وردپرس ضروری است.
Google's Pagespeed Insights بر اساس سرعت بارگذاری آنها نمره ای را به وب سایت ها اختصاص می دهد. اگر در هنگام تجزیه و تحلیل عملکرد سایت وردپرس خود ، از بین بردن JavaScript و CSS در حال مسدود کردن رندر در حال دریافت ، در حال دریافت ، JavaScript و CSS را در پیشنهاد محتوای بالاتر از آن قرار می دهید ، به سادگی مسئله را با افزونه ها برطرف کنید.
امیدوارم این آموزش برای شما مفید باشد. اگر سوالی دارید ، در زیر نظر دهید. موفق باشید!
Domantas با ایده های تازه و خارج از جعبه ، تیم های محتوا و سئو را به جلو هدایت می کند. او که مسلح به SEO گسترده و دانش بازاریابی است ، قصد دارد کلمه Hostinginger را در هر گوشه جهان پخش کند. در طول وقت آزاد ، Domantas دوست دارد مهارت های توسعه وب خود را سنگفرش کند و به مکانهای عجیب و غریب سفر کند.
👉
وب سایت خود را با Hostinger شروع کنید – میزبانی سریع و ایمن را از اینجا دریافت کنید
👈
🔗 از Minimadesk بیشتر بخوانید:
🎁 ابزارهای رایگان وردپرس حق بیمه رایگان را از ما بارگیری کنید
صفحه ابزار استارت
بشر
📦 بسته استارت وردپرس رایگان خود را بارگیری کنید
📌 در ابتدا در Minimadesk منتشر شده است