آموزش حل مشکل Render-Blocking جاوا اسکریپت و CSS در وردپرس

آیا قصد دارید جاوا اسکریپت و CSS را در وردپرس خود حذف کنید؟ اگر سایت خود را با استفاده از ابزارهای تست سرعت سایت مانند Google PageSpeed insights آزمایش کنید، به احتمال خیلی زیاد به شما پیشنهاد می شود که اسکریپت‌های مسدودکننده رندر و CSS را حذف کنید. به همین منظور ما در این مطلب قصد داریم شما را با نحوه رفع مشکل Render-Blocking جاوا اسکریپت و CSS در وردپرس آشنا کنیم. با ما همراه باشید.

منظور از رندر بلاک جاوا اسکریپت و CSS در وردپرس چیست؟

به طور کلی؛ رندر بلاک جاوا اسکریپت (Render blocking JavaScript) و CSS فایل هایی هستند که از نمایش یک صفحه وب قبل از بارگیری این فایل ها توسط وب سایت جلوگیری می کنند. هر سایت وردپرس دارای قالب و افزونه هایی است که فایل های جاوا اسکریپت و CSS را به قسمت جلویی وب سایت شما اضافه می کند. این اسکریپت ها می توانند زمان بارگذاری صفحه سایت شما را افزایش و باعث شوند که سایت شما با سرعت بالاتری برای کاربران بارگذاری شود.

ابزار Google PageSpeed Insights چیست؟

این یکی از بهترین ابزارهای تست سرعت وب سایت است که توسط گوگل ارائه شده تا به صاحبان وب سایت ها کمک کند تا سرعت وب سایت خود را بهینه و آزمایش نمایند. این ابزار وب سایت شما را بر اساس دستورالعمل های گوگل برای سرعت آزمایش و سپس پیشنهاداتی برای بهبود زمان بارگذاری صفحه سایت شما ارائه می دهد. این امتیاز بر اساس تعداد قوانینی که سایت شما می گذرد به شما نشان می دهد. امتیاز اکثر وب سایت ها بین 50-70 می باشد.

بیشتر بخوانید: آموزش تغییر ایمیل پیشفرض در وردپرس 

نحوه رفع خطای Render-Blocking JavaScript و CSS در وردپرس

ما در این مطلب قصد داریم روش های رفع خطای Render-Blocking را با استفاده از دو روش مختلف به شما آموزش دهیم. با ما همراه باشید تا شما را با راه حل مشکل Eliminate render-blocking resources آشنا کنیم.

1- آموزش رفع مشکل Render-Blocking در سایت های وردپرسی با افزونه WP Rocket

همانطور که می دانید، افزونه WP Rocket یکی از بهترین و محبوب ترین افزونه های افزایش سرعت وب سایت می باشد که به شما کمک می کند تا یک سایت سریع داشته باشید. در واقع؛ این بهترین افزونه کش وردپرس در بازار است که به شما کمک می کند تا به سرعت عملکرد وب سایت خود را بدون هیچ مهارت فنی یا راه اندازی پیچیده بهبود ببخشید.

برای انجام اینکار؛ در ابتدا باید این افزونه را در سایت خود نصب و فعال کنید. ( برای خرید افزونه WP Rocket کلیک کنید ). پس از فعال شدن افزونه، از بخش “تنظیمات” روی گزینه “WP Rocket” کلیک کنید. سپس وارد برگه “بهینه سازی فایل” شوید. در مرحله بعد به قسمت CSS Files مراجعه کرده و تیک گزینه‌ های  Minify CSS، Combine CSS Files و Optimize CSS Delivery را علامت بزنید.

در مرحله بعد، وارد بخش JavaScript Files شوید. حال از این قسمت می توانید تمام گزینه ها را برای حداکثر بهبود عملکرد بررسی نمائید.

می توانید همانند CSS ، فایل های جاوا اسکریپت را فشرده و ترکیب کنید. همچنین می از بارگیری فایل jQuery Migrate در وردپرس خود جلوگیری نمائید. در واقع؛ این یک اسکریپت است که وردپرس بارگیری می کند تا با استفاده از نسخه های قدیمی jQuery سازگاری افزونه ها و قالب ها را فراهم کند.

در مرحله بعد، صفحه را به سمت پایین اسکرول کنید و تیک گزینه های “Load JavaScript Defered” و “Safe Mode for jQuery” را علامت بزنید.

این گزینه‌ ها باعث به تاخیر افتادن بارگیری جاوا اسکریپت‌های غیر ضروری می شود. همچنین حالت امن jQuery به شما این امکان را می دهد تا jQuery را برای مضامینی که ممکن است از آن به صورت درون خطی استفاده کنند، بارگیری نمائید. اگر شما مطمئن هستید که قالبتان در هیچ کجا از جی کوئری درون خطی استفاده نمی کند، بهتر است این گزینه را بدون علامت نگه دارید. در نهایت فراموش نکنید که با کلیک روی دکمه “ذخیره” تغییرات خود را ذخیره نمائید.

بیشتر بخوانید: نمایش ساعت در وردپرس با افزونه CoolClock 

2- آموزش حل مشکل Render-Blocking در سایت های وردپرسی با استفاده از Autoptimize

افزونه Autoptimize یکی از بهترین افزونه های کش و افزایش سرعت وب سایت است که به صورت رایگان ارائه شده و هم اکنون دارای بیش از 1 میلیون نصب فعال می باشد. این افزونه رایگان را می توانید به سادگی از طریق مخزن وردپرس در سایت خود نصب کنید. پلاگین Autoptimize به طور خاص برای بهبود تحویل فایل های CSS و JS وب سایت شما ساخته شده است.

اولین کاری که باید انجام دهید این است که افزونه Autoptimize را در سایت خود نصب و فعال کنید. پس از فعال شدن افزونه، از بخش “تنظیمات” رو گزینه “Autoptimize” کلیک کنید تا وارد بخش پیکربندی آن شوید.

در صفحه تنظیمات، در ابتدا گزینه “بهینه سازی کد جاوا اسکریپت” را که در زیر بلوک گزینه های جاوا اسکریپت است، علامت بزنید. فقط فراموش نکنید که تیک گزینه “Aggregate JS-files” را بردارید.

در مرحله بعد، صفحه را به سمت پایین اسکرول کنید تا وارد بخش “گزینه هایCSS” شوید. حال باید گزینه “بهینه سازی کدCSS” را علامت بزنید. فقط فراموش نکنید که تیک گزینه “Aggregate CSS-files” را بردارید.

اکنون باید روی دکمه «ذخیره تغییرات و خالی کردن حافظه پنهان» کلیک کنید تا تغییرات برای شما اعمال شود.

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

اگر هنوز اسکریپت‌های مسدودکننده رندر وجود دارد، باید به صفحه تنظیمات افزونه برگردید و گزینه‌ ها را در هر دو گزینه جاوا اسکریپت و CSS بررسی نمائید.

بیشتر بخوانید: آموزش درون ریزی و برون ریزی در وردپرس 

سوالات متداول

بیشتر بخوانید: آموزش اضافه کردن استایل دلخواه به ابزارک ها در وردپرس

جمع بندی: نحوه رفع ارور Render-Blocking جاوا اسکریپت و CSS در وردپرس

طریقه حل خطای Render-Blocking JavaScript و CSS در وردپرس چگونه است؟ به طور کلی؛ این خطا از نمایش یک صفحه وب قبل از بارگیری فایل های رندر بلاک جاوا اسکریپت و CSS توسط وب سایت جلوگیری می کند. ما در این مطلب نحوه رفع مشکل Render-Blocking جاوا اسکریپت و CSS در وردپرس را با استفاده از دو روش مختلف به شما آموزش دادیم. امیدوارم این آموزش مورد رضایت شما عزیزان قرار گرفته باشد.

منبع: wpbeginner