چگونه منابع مسدود کننده رندر را از وب سایت وردپرس خود حذف کنیم؟

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

سرعت پایین بارگذاری نه تنها برای شما و بازدیدکنندگان آزاردهنده است، بلکه می‌تواند هزینه های قابل توجهی را نیز در مورد سئو برای شما به همراه داشته باشد. از سال 2010، الگوریتم‌های گوگل سرعت بارگذاری را در تصمیم‌گیری‌های رتبه‌بندی در نظر گرفته‌اند ، بنابراین صفحات کند در صفحات نتایج پایین‌تر ظاهر می‌شوند.

منابع مسدودکننده رندر چیست؟

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

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

دلیل آن این است: هنگامی که یک مرورگر وب برای اولین بار یک صفحه وب را بارگیری می‌کند، قبل از نمایش آن بر روی صفحه برای بازدیدکنندگان، تمام HTML صفحه را تجزیه می‌کند. هنگامی که مرورگر با پیوندی به یک فایل CSS، یک فایل جاوا اسکریپت، یا یک اسکریپت درون خطی مواجه می‌شود.

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

نحوه حذف منابع مسدود کننده رندر در وردپرس

1. منابع مسدودکننده رندر را شناسایی کنید.
2. منابع مسدودکننده رندر را به صورت دستی یا با افزونه حذف کنید.
3. اسکن سایت را دوباره اجرا کنید.
4. وب سایت خود را برای اشکالات بررسی کنید.

1. منابع مسدودکننده رندر را شناسایی کنید

قبل از ایجاد هر گونه تغییر، ابتدا باید منابع مسدودکننده رندر را پیدا کنید. بهترین راه برای انجام این کار، تست سرعت آنلاین رایگان مانند ابزار PageSpeed ​​Insights Google است . URL سایت خود را جایگذاری کنید و روی تجزیه و تحلیل کلیک کنید.

• هنگامی که اسکن کامل شد، گوگل به وب سایت شما یک امتیاز سرعت کلی از 0 (کمترین) تا 100 (سریعترین) اختصاص می‌دهد. امتیاز در محدوده 50 تا 80 متوسط ​​است، بنابراین شما باید در قسمت بالای این محدوده یا بالاتر از آن قرار بگیرید.
• برای شناسایی فایل‌های مسدودکننده رندر که صفحه شما را کند می‌کنند، به سمت Opportunities بروید ، سپس آکاردئون Eliminate render-blocking resources را باز کنید.
• به هر فایلی که با پسوندهای .css و .js ختم می شود توجه داشته باشید، زیرا اینها مواردی هستند که می خواهید روی آنها تمرکز کنید.

2. منابع مسدودکننده رندر را به صورت دستی یا با یک افزونه حذف کنید.

اکنون که مشکل را شناسایی کرده اید، دو راه برای رفع آن در وردپرس وجود دارد: به صورت دستی یا با یک افزونه. ابتدا راه حل پلاگین را پوشش می دهیم. چندین پلاگین وردپرس می توانند اثر رندر مسدود کردن منابع را در وب سایت های وردپرس کاهش دهند مانند: Autoptimize و W3 Total Cache

نحوه حذف منابع مسدود کننده رندر با افزونه Autoptimize

Autoptimize  یک افزونه رایگان است که فایل های وب سایت شما را برای ارائه صفحات سریعتر تغییر می‌دهد. بهینه‌سازی خودکار با جمع‌آوری فایل‌ها، کوچک کردن کد و تأخیر در بارگذاری منابع مسدودکننده رندر کار می‌کند.

چگونه می توان منابع مسدود کننده رندر را با افزونه W3 Total Cache حذف کرد

W3 Total Cache  یک پلاگین کش پرکاربرد است که به رفع کد تاخیری کمک می‌کند. برای حذف جاوا اسکریپت مسدود کننده رندر با W3 Total Cache:

1. افزونه W3 Total Cache را نصب و فعال کنید.
2. یک گزینه Performance جدید  به منوی داشبورد وردپرس شما اضافه خواهد شد. Performance > General Settings را انتخاب کنید .
3. در بخش Minify ، کادر کنار Minify را علامت بزنید ، سپس حالت Minify را روی Manual قرار دهید .
4. روی Save all settings در پایین قسمت Minify کلیک کنید  .
5. در منوی داشبورد، Performance > Minify را انتخاب کنید .
6. در بخش JS در کنار تنظیمات JS minify ، مطمئن شوید که کادر Enable علامت زده شده است. سپس، در Operations in areas، اولین منوی کشویی Embed type را باز کنید و با استفاده از Embed type گزینه Non-blocking را انتخاب کنید .
7. زیر JS file management موضوع فعال خود را از منوی کشویی Theme انتخاب کنید.
8. به نتایج PageSpeed ​​Insights مراجعه کنید. برای هر مورد در زیر Eliminate render-blocking resources که به .js ختم می‌شوند، روی Add a script کلیک کنید. سپس، URL کامل منبع جاوا اسکریپت را از PageSpeed ​​Insights کپی کنید و آن را در قسمت File URI قرار دهید  .
9. هنگامی که تمام منابع جاوا اسکریپت مسدود کننده رندر گزارش شده توسط PageSpeed ​​Insights را جایگذاری کردید، روی Save Settings & Purge Caches در پایین بخش JS کلیک کنید.
10. در قسمت CSS در کنار CSS minify settings، کادر کنار CSS minify settings را علامت بزنید  و مطمئن شوید که روش Minify روی Combine & Minify تنظیم شده است .
11. در CSS file management، موضوع فعال خود را از منوی کشویی Theme انتخاب کنید.
12. برای هر مورد زیر حذف منابع مسدودکننده رندر که به .css ختم می شود در نتایج اسکن PageSpeed ​​Insights، روی Add a style sheet کلیک کنید. سپس، URL کامل منبع CSS را از PageSpeed ​​Insights کپی کنید و آن را در قسمت File URI قرار دهید.
13. هنگامی که تمام منابع CSS مسدودکننده رندر گزارش شده توسط PageSpeed ​​Insights را جایگذاری کردید، روی Save Settings & Purge Caches در پایین بخش CSS کلیک کنید.
14. وب سایت خود را با PageSpeed ​​Insights اسکن کنید و بهبود را بررسی کنید.

3. اسکن سایت را دوباره بررسی کنید

پس از ایجاد تغییرات، یک اسکن نهایی وب سایت خود را از طریق PageSpeed ​​Insights انجام دهید و ببینید تغییرات شما چه تاثیری بر امتیاز شما داشته است. امیدواریم که بهبود قابل توجهی وجود داشته باشد، اما اگر نه، نگران نباشید. عوامل زیادی می توانند عملکرد صفحه را مهار کنند و ممکن است مجبور باشید برای یافتن منبع عملکرد ضعیف کمی جستجو کنید.

4. وب سایت خود را برای اشکالات بررسی کنید

علاوه بر اسکن مجدد، صفحات خود را بررسی کنید تا مطمئن شوید سایت شما کار می‌کند. آیا صفحه به درستی بارگذاری می‌شود؟ آیا همه عناصر نمایش داده می‌شوند؟ اگر چیزی خراب است یا به درستی بارگیری نمی‌شود، تغییرات خود را لغو کرده و مشکل را عیب یابی کنید.

سخن پایانی

عوامل زیادی به بهبود تجربه کاربران شما در وب سایت شما کمک می‌کنند، اما تعداد کمی از آنها مهمتر از زمان بارگذاری هستند. هر زمان که تغییرات بزرگی در محتوا یا ظاهر سایت وردپرس خود ایجاد می‌کنید، همیشه باید در نظر داشته باشید که چنین تغییراتی چگونه بر عملکرد تاثیر می‌گذارد. اکنون که منابع مسدودکننده رندر را حذف کرده‌اید، باید با تجزیه و تحلیل سایر ویژگی‌هایی که به کاهش عملکرد منجر شده‌اند، به بهینه‌سازی سرعت وب‌سایت خود ادامه دهید.