آموزش رفع مشکل Render-Blocking در سایت های وردپرسی به دلیل زیر مورد توجه است.

در صورتی که سایت خود را با ابزار PageSpeed insights گوگل بررسی کنید، متوجه خواهید شد که این سرویس اشاره می کند که خطای render-blocking جاوا اسکریپت و استایل را برطرف کنید.

در این آموزش از راهنمای وردپرس ما به شما نشان خواهیم داد که چگونه می توانید خطای render-blocking را در سایت وردپرسی برطرف کنید و امتیاز بیشتری دریافت کنید.

با ما همراه باشید.

 

منظور از Render-Blocking چیست؟

هر وب سایت وردپرسی که از پوسته و افزونه استفاده می کند، یکسری فایل های JS و CSS دارد.

این فایل ها مدت زمان بارگذاری صفحات را افزایش می دهند. حتی می توانند جلوی ارائه صفحه را بگیرند.

مرورگر کاربران این فایل ها را دریافت کرده و تا زمانی که آنها را تفسیر نکند، محتوای HTML را نمایش نخواهند داد.

این بدان معناست که اگر سرعت اتصال کاربران آهسته باشد، باید مدت زمان بیشتری را منتظر بمانند تا محتوای وب سایت نمایش داده شود.

این اسکریپت ها و فایل های شیوه نمایش به عنوان render-blocking جاوا اسکریپت و CSS نامیده می شوند.

در نتیجه، اگر می خواهید که امتیاز سرعت گوگل ۱۰۰ را دریافت کنید؛ باید این موضوع را در سایت خود حل کنید.

تست سرعت با Google PageSpeed Insights

 

نحوه رفع خطای Render-Blocking با افزونه Autoptimize

با اینکه روش های متفاوتی برای انجام این کار وجود دارد، اما ما استفاده از افزونه Autoptimize را پیشنهاد می کنیم.

کار با این افزونه برای بیشتر کاربران ساده می باشد و مشکلی با آن نخواهید داشت. پس قبل از هر اقدامی افزونه مورد نظر را در بر روی سایت خود نصب و فعال کنید.

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

در صفحه نمایش داده شده ۴ کادر وجود دارد:

  1. تنظیمات HTML
  2. تنظیمات Javascript
  3. تنظیمات CSS
  4. تنظیمات CDN

شما باید تیک مربوط به سه گزینه ابتدایی را بزنید تا عملیات بهینه سازی بر روی آنها انجام گیرد. پس از اینکه تنظیمات را ذخیره کردید، وب سایت خود را مجددا با ابزار PageSpeed بررسی کنید.

اگر همچنان خطای render-blocking وجود داشت، به صفحه تنظیمات افزونه بازگشته و “نمایش تنظیمات پیشرفته” را فعال کنید. (این دکمه در بالای صفحه قرار دارد)

 

پس از اینکه دکمه تنظیمات پیشرفته را بزنید، گزینه های بیشتری نمایش داده خواهند شد. شما می بایستی گزینه Also aggregate inline JS و Also aggregate inline CSS را فعال کنید.

اکنون بر روی دکمه “ذخیره تغییرات و تخیله کش” کلیک کنید تا افزونه کار خود را انجام دهد.

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

به احتمال زیاد با انجام این کار مشکل render-blocking حل خواهد شد.

توجه: با انجام این کار ممکن است که عملکرد و نمایش سایت مشکل پیدا کند؛ پس مطمئن شوید که تغییرات صورت گرفته بر روی سایت مشکلی ایجاد نکرده باشند.