ارور eliminate render-blocking resources در وردپرس چیست و چطور آن را حل کنیم

ارور eliminate render-blocking resources در وردپرس چیست و چطور آن را حل کنیم

همه شما می دانید که میزان اهمیت بارگذاری سایت و اطلاعات آن برای هر مدیر سایت مهم است و همه سایت ها یک ممکن است که ارور های مختلفی داشته باشد و یکی از این ارور های که در مورد سرعت لود سایت برای شما ممکن است در سیستم های آنالیزر نمایش داده شود ارور یا همان خطای eliminate render-blocking resources باشد که باعث افت لود سایت شما در سیستم های کاربران می شود و در این مقاله آموزشی می خواهیم در مورد رفع این خطا به شما کمک کنیم تا این مشکل را رفع کنید

ابزار های زیادی برای آنالیز سایت هم به صورت ایرانی و هم به صورت خارجی وجود دارد ولی بهتر است که برای اینکار از سرویس های خارجی و قوی که مطمئن باشیم استفاده کنیم و این دو سرویس را همه شما دوستان می شناسید ، اولی به نام Gtmetrix و دومی به نام PageSpeed Insights می باشد که شما می توانید از این دو سرویس استفاده کنید تا از سرعت و سئو سایت خود را مشاهده و خطاء های آن را بررسی کنید

یکی از خطا های که در GTmetrix به شما نمایش داده می شود به نام eliminate render-blocking resources می باشد که در این آموزش می خواهیم به شما روند حل این مشکلات را به شما به صورت کامل توضیح دهیم و امروز قصد داریم در این مقاله به شما کامل بلاک CSS و Java Script در وردپرس رفع کنید و رتبه سایت خود را در PageSpeed Insights افزایش دهید.

نمره Google PageSpeed چیست و چه کارایی دارد :

همانطور که می دانید Google PageSpeed یک ابزار آنلاین است که توسط گوگل به کاربران اینترنت ارائه می شوند و برای کمک به صاحبان وب سایت ایجاد و خلق شده است که مایل هستند سایت وردپرس خود را بهینه سازی و یا تست کنند می توانند از این سرویس برای بررسی سئو سایت خود استفاده کنند و این ابزار سایت شما را در برابر دستور العمل های گوگل برای سرعت تست می کند و پیشنهاد هایی برای بهبود سرعت لود سایت شما ارائه می کند و یک نمره ای بر اساس این بررسی و تعداد قوانین سایت به سایت شما پاس می کند و نمایش می دهد

اکثریت سایت های وردپرسی جای بین 50 الی 70 قرار می گیرند و با این حال برخی از صاحبین وب سایت ها احساس می کنند که برای رسیدن به رتبه 100 که بالاترین نمره یک صفحه است باید ناگزیر تلاش های بسیار داشته باشند

چگونه وب سایت خود را توسط Google PageSpeed بررسی کنیم :

اولین کاری که برای انجام این کار شما باید انجام دهید این است که باید وارد سایت PageSpeed Insights شوید و در قسمت URL آدرس سایت خود را وارد کنید ، مانند تصویر بالا که مشاهده می کنید و بعد از آن شما باید بر روی دکمه Analyze کلیک کنید تا حالا کمی صبر کنید تا آدرس سایت شما را بررسی کند و کد های قالب و افزونه های نصب شما را برای شما آنالیز کند و راستی ! این سرویس در ایران فیلتر می باشد و در دسترس کاربران ایرانی نیست برای استفاده از این سیستم شما باید سرویس های فیلترشکن استفاده کنید که IP شما را تغییر دهد و وارد این سایت شوید

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

اگر که بین این پیشنهادات و توصیه ها عبارات render-blocking JavaScript and CSS را مشاهده کردید و به شما این خطا داده شد باید نسبت به این خطا اقدام کنید و برای بر طرف کردن این مشکل راه حلی که در این مقاله ذکر کرده ایم را مطالعه کنید

واقعآ باید نمره کامل 100 را در Google PageSpeed داشته باشیم :

هدف اصلی ما این است که بتوانیم نمره Google PageSpeed insights سایت خود را به بالاترین رتبه برسانیم و این دستور العمل های که برای شما کمک می کند تا سرعت سایت خود و عملکرد وب سایت را افزایش دهید در این صفحه به شما داده می شود و شما زمانی که این قوانین را به نحوه عالی انجام دهید و یا جدی دنبال کنید می توانید رتبه و سرعت سایت خود را به 100 برسانید و تنها سرعت یکی از معیار های سئو سایت است که به گوگل در نحوه رتبه بندی سایت شما کمک بسیاری می کند

این دلیل سرعت بسیار مهم است چون باعث بهبود تجربه کاربری در سایت شما می کند و یک تجربه کاربری بهتر و محتوا جذاب با متن ، تصویر و فیلم های که نیاز دارید را هدف وب سایت خود قرار دهید و با ایجاد یک سایت پر سرعت و بدون نقص با سرعت عالی داشته باشید و یک تجربه کاربری مناسب ارائه کنید.

شما فکر کنید که می خواهید یک وب سایت را بازطراحی کنید و در حال حاضر تمرکز شما بر روی سرعت و همچنین بهبود تجربه کاربری می باشد و توصیه ما به شما این است که قوانین Google PageSpeed insights را به عنوان پیشنهاد بر روی وبسایت خود استفاده کنید که تجربه کاربری سایت شما ضربه ای وارد نشود

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

خطا Remove Render Blocking JavaScript چیست :

همانطور که می دانید زمانی که شما یک سایت راه اندازی می کنید بر روی آن سایت قالب و افزونه های مختلفی نصب و فعالسازی می کنید که این افزونه ها و قالب نصب شده یک سری فایل های کد نویسی دارد که هم فایل های جاوا اسکریپت دارد و هم فایل های کد نویسی CSS که باعث کم شدن سرعت لود سایت شما می شود و سرعت لود یک وب سایت مشخص کننده حرفه ای بودن یک مدیر وب سایت می باشد

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

حل مشکل eliminate render blocking resources

حالا یکی از بهترین افزونه هایی که می تواند به شما کمک کند استفاده از افزونه Autoptimize می باشد و این افزونه تا به حال بیش از یک میلیون نصب و فعالسازی داشته است که بدون هیچ هزینه ای به صورت رایگان شما می توانید از امکانات این افزونه برای سایت خود استفاده کنید ( آموزش نصب افزونه در وردپرس )

بعد از اینکه شما این افزونه را در سایت خود نصب کردید وارد بخش پیشخوان شوید و بعد از آن وارد بخش تنظیمات شوید و بر روی دکمه Autoptimize بروید و اینجا می توانید تنظیمات این افزونه را مشاهده کنید و در این صفحه فیلدهای مختلفی مشاهده می شود که باید برای انجام این کار تیک گزینه بهینه سازی سازی کد JavaScript و بهینه سازی کد های CSS را نیز فعال کنید و سپس بعد از آن بر روی دکمه ذخیره تغییرات کلیک کنید مانند تصویر بالا

حالا بعد از اینکه شما کد های قالب و افزونه سایت خود را با استفاده از این افزونه فشرده سازی کردید باز باید وارد سایت PageSpeed شوید و از حل شدن این موضوع اطمینان خاطر کنید و باز هم اگر در صورتی این مشکل هنوز پابرجا بود باید دوباره به صفحه تنظیمات افزونه روید از از به این افزونه اجازه دهید که فایل های JS درون خطی قرار دهد و با این اسکریپت ها مانند seal.js یا jquery.js را به صورت پیشفرض حذف شده باشد

در مرحله بعد باید وارد فید های مربوط به کد های CSS شوید و تیک گزینه های تبدیل CSS را به صورت خطی و تعویق بارگذاری را فعال کنید و همچنین برای ذخیره تغییرات شما باید حافظه کش مرورگر خود و حافظه کش این افزونه را خالی یا حذف کنید و حالا باز دوباره وب سایت خود را آنالیز کرده و از دیدن حل این مشکل در سایت خود لذت ببرید

طریقه کار این افزونه چگونه است :

این افزونه تمامی فایل های کد نویسی شده سایت شما را از کوچک ترین فایل های CSS تا بزرگ ترین فایل های JS را پارتیشن بندی و کم حجم می کند و همین روند باعث می شود که بعد از آن تمامی اطلاعات سایت شما در حافظه وب سایت کش شود باعث افزایش سرعت لود برای مشتریان خود شود و به این اجازه را می دهد که فایل ها را کم حجم تر و سفارشی تر کنید.

رفع این خطا با استفاده از افزونه W3 Total Cache

افزونه W3 Total Cache هم مثل افزونه بالا به شما کمک می کند تا بتوانید سایت وردپرسی خود را به حالت کش قرار دهید و فایل های کد نویسی را کم حجم و سفارشی کنید بعد از اینکه شما این افزونه را در سایت خود نصب و فعالسازی کردید یک بخش جدید به نام Performane ایجاد شود و شما بعد از آن باید بر روی دکمه General Settings کلیک کنید

بعد از کلیک بر روی دکمه General Settings یک بخش به نام Minify در این صفحه مشاهده می کنید که باید بر روی این دکمه کلیک کنید تا برای شما فایل های HTML و CSS و JS را فشرده سازی کند و به کاربران شما این قابلیت را ارائه کند تا سرعت لود سایت شما بیشتر شود و حالا شما باید در بخش Minify option بر روی دکمه Manual را کلیک کنید و بعد از آن دکمه ذخیره تغییرات را بزنید و در مرحله بعد شما باید اجازه دهید که به صورت دستی کد های جاوااسکریپت و سی اس اسی را که می خواهید Minify کنید

شما می توانید همه URL ها و اسکریپت ها و استایل شیت های که بلاک هستند را از ابزار GooglePageSpeed در نظر بگیرید و داشته باشید و در قسمت Render Blocking کد های جاوا اسکریپت و سی اس اس خود را بر روی گزینه نمایش چگونگی رفع کلیک کنید اینجا به شما یک لیست از اسکریپت ها و استایل شیت ها نمایش داده می شود که زمانی نشانگر ماوس خود بر روی آن ها ببرید ، آدرس آن کامل نمایش داده می شود

حالا شما باید برای ادامه این بخش از پنل مدیریت وردپرس خود از بخش Performance  به صفحه Minify بروید

افزودن اسکریپت به Minify

در مرحله ابتدای شما باید فایل جاوا اسکریپتی را که می خواهید Minify یا فشرده شود را در اینجا اضافه کنید و پایین تر از آن به بخش JS بروید و در قسمت بعد از آن یعنی Operations in areas گزینه Non-Blocking async را برای این بخش در نظر بگیرید و بعد بر روی دکمه Add Script کلیک کنید و آدرس اسکریپت خود را که از ابزار Google PageSpeed کپی کرده اید را این قسمت قرار دهید و بعد آن انجام این مرحله شما باید بخش CSS بیاید و دکمه Add A StyleSheet را کلیک کنید و بعد از آن آدرس StyleSheet را که از سایت Google Page Speed کپی کرده اید را اینجا اضافه کنید

بعد از انجام این مرحله شما باید بر روی دکمه ذخیره تنظیمات و خالی کردن کش حافظه برای ذخیره تغییرات خود کلیک کرده و از باز دوباره سایت خود را در Google Page Speed مشاهده و تست کنید و مطمئن شوید که به درستی این کار را انجام دهید

حل مشکل با نصب افزونه دیگر به نام Speed Booster Pack

اینجا می خواهیم به شما آخرین افزونه برای حل این مشکل را معرفی و آموزش دهیم ، این افزونه به نام Speed Booster Pack می باشد که شما می توانید مانند افزونه های بالا برای خود فایل های سایت خود را فشرده سازی کنید و با کمک این افزونه می بوانید به راحتی این مشکل Render-Blocking را در سایت خود حل کنید

این افزونه جزء یکی از یهترین افزونه ها برای افزایش سرعت سایت می باشد که توسط خود Google Page Speed تایید شده است و درسته یک سالی میشه این افزونه آپدیت نشده است ولی باز هم با نسخه های آخر وردپرس فعال میشود و کار می کند و تا به حال بیش از 10000 بار نصب و دانلود ، فعال سازی داشته است و شما هم می توانید جزء استفاده کننده های این افزونه باشید

خب طبق روند همیشه شما باید این افزونه را در سایت وردپرسی خود نصب کنید و بعد از آن یک بخش جدید برای تنظیمات این افزونه به پنل مدیریت سایت شما اضافه می شود که شما باید برای انجام این مراحل وارد تنظیمات این افزونه شوید و از بخش عمومی مانند تصویر بالا که مشاهده می شود ، اول از همه قابلیت های این افزونه را فعال کرده و استفاده کنید و در مرحله بعد باید وارد بخش Caching شوید و قابلیت کش شدن سایت خود بر روی سیستم های کاربران را فعال کنید و بعد از آن شما باید وارد بخش Optimize CSS شوید و مراحل بهینه سازی فایل های سی اس اس خود را انجام دهید

بخش اصلی این افزونه بخش Assets می باشد که شما باید برای افزایش سرعت لود سایت خود قابلیت Move JavaScript to footer را فعال کنید که فایل های جاوا اسکریپت شما در فوتر سایت لود شود

به همین راحتی شما می توانید ارور eliminate render-blocking resources در وردپرس خود را حل کنید ، موفق و پیروز باشید 🆗