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

از

صفحه تنظیمات در افزونه w3 total cache

صفحه تنظیمات در افزونه autoptimize

فهرستی از فایل‌ها را می‌بینید که «نخستین رنگ» صفحه شما را کاهش می‌دهند – این فایل‌ها بر زمان بارگیری تمام محتوایی که در پنجره مرورگر در بارگذاری اولیه صفحه ظاهر می‌شوند تأثیر می‌گذارند. به این محتوای «بالاتر» نیز می گویند.

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

اسکریپت با به تعویق انداختن ویژگی همچنین در هنگام تجزیه صفحه بارگیری می شود، اما این اسکریپت ها از بارگیری تا پس از اولین رندر یا پس از بارگیری بخش های ضروری تر به تأخیر می افتند:

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

14. وب سایت خود را با PageSpeed ​​Insights اسکن کنید و بهبود را بررسی کنید.

چگونه به صورت دستی جاوا اسکریپت مسدود کننده رندر را حذف کنیم

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

ممکن است با عوامل رایج عملکرد ضعیف صفحه آشنا باشید – محتوای بیش از حد، فایل های تصویری فشرده نشده، میزبانی ناکافی و عدم وجود حافظه پنهان برای نام بردن از چند مورد. اما عامل دیگری که اغلب نادیده گرفته می شود در بازی وجود دارد: منابع مسدودکننده رندر.

منبع تصویر

7. در پایین صفحه کلیک کنید ذخیره تغییرات و کش خالی.



منبع

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

را ناهمگام ویژگی به مرورگر سیگنال می دهد که منبع جاوا اسکریپت را در حین تجزیه بقیه صفحه بارگیری کند و بلافاصله پس از بارگیری این اسکریپت را اجرا می کند. اجرای اسکریپت تجزیه HTML را متوقف می کند:

8. وب سایت خود را با PageSpeed ​​Insights اسکن کنید و بهبود را بررسی کنید.

پس از ایجاد تغییرات، یک اسکن نهایی وب سایت خود را از طریق PageSpeed ​​Insights انجام دهید و ببینید تغییرات شما چه تأثیری بر امتیاز شما داشته است.

برای انجام این کار، محل را پیدا کنید <اسکریپت> برچسب ها در فایل های وب سایت شما برای منابع شناسایی شده در اسکن PageSpeed ​​Insights شما. آنها چیزی شبیه به این خواهند بود:

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
<script src="https://blog.hubspot.com/marketing/resource.js" defer>

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

در حالی که آنها اثرات مشابهی بر زمان بارگذاری دارند، این ویژگی ها به مرورگر می خواهند کارهای مختلفی انجام دهد.

اگر به نقطه‌ای رسیده‌اید که مکرراً اقدامات مختلفی را با حداقل افزایش سرعت امتحان کرده‌اید، بهتر است به جای خطر شکستن سایت، راه‌های دیگری را برای افزایش سرعت صفحات خود در نظر بگیرید.

بهینه سازی سایت وردپرس برای عملکرد

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

را به تعویق انداختن و ناهمگام ویژگی ها نباید با هم در یک منبع استفاده شوند، اما ممکن است یکی برای یک منبع خاص بهتر از دیگری باشد. به طور کلی، اگر یک اسکریپت غیر ضروری برای اجرا قبل از آن به یک اسکریپت متکی است، از آن استفاده کنید به تعویق انداختن. را به تعویق انداختن ویژگی تضمین می کند که اسکریپت پس از اسکریپت ضروری قبلی اجرا می شود. در غیر این صورت استفاده کنید ناهمگام.

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

صفحه تنظیمات در افزونه w3 total cache

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

صفحه تنظیمات در افزونه w3 total cache

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

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

هنگامی که اسکن کامل شد، گوگل به وب سایت شما یک امتیاز سرعت کلی از 0 (کمترین) تا 100 (سریعترین) اختصاص می دهد. امتیاز در محدوده 50 تا 80 متوسط ​​است، بنابراین شما می خواهید در قسمت بالای این محدوده یا بالاتر از آن قرار بگیرید.

6. در JS بخش کنار تنظیمات JS minify، مطمئن شوید که فعال کردن کادر بررسی شده است. سپس، زیر عملیات در مناطق، اولی را باز کنید نوع جاسازی کشویی را انتخاب کنید عدم انسداد با استفاده از “Defer”.

2. از داشبورد وردپرس خود، را انتخاب کنید، تنظیمات > بهینه سازی خودکار.

تجسم جدول زمانی بارگذاری اسکریپت با ویژگی async

9. اگر PageSpeed ​​Insights همچنان فایل‌های جاوا اسکریپت مسدودکننده رندر را گزارش می‌دهد، به آن بازگردید تنظیمات > بهینه سازی خودکار و کادرهای کناری را علامت بزنید فایل های JS را جمع آوری کنید؟ و فایل های CSS را جمع آوری کنید؟. سپس، کلیک کنید ذخیره تغییرات و خالی کردن کش و دوباره اسکن کنید

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

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

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

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

تصویری از جدول زمانی بارگذاری پیش فرض اسکریپت

گزارش از google pagespeed insights

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

1. افزونه Autoptimize را نصب و فعال کنید.

صفحه تنظیمات در افزونه w3 total cache

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

منبع تصویر

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

اکنون که منابع مسدودکننده رندر را حذف کرده‌اید، باید با تجزیه و تحلیل سایر ویژگی‌هایی که به کاهش عملکرد شناخته شده‌اند، به بهینه‌سازی سرعت وب‌سایت خود ادامه دهید. سعی کنید تست سرعت منظم را در برنامه تعمیر و نگهداری سایت خود بگنجانید – جلوتر از هر مشکل احتمالی برای موفقیت شما بسیار مهم است.

7. زیر مدیریت فایل JS، موضوع فعال خود را از بین انتخاب کنید موضوع کشویی

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

12. برای هر مورد زیر منابع مسدودکننده رندر را حذف کنید در نتایج اسکن PageSpeed ​​Insights به .css ختم می شود، کلیک کنید یک شیوه نامه اضافه کنید. سپس، URL کامل منبع CSS را از PageSpeed ​​Insights کپی کنید و آن را در آن قرار دهید فایل های URI رشته.

منبع تصویر

صفحه تنظیمات در افزونه autoptimize

تصویری از جدول زمانی بارگذاری اسکریپت با ویژگی defer

بخش minify options در افزونه W3 Total Cache

1. افزونه W3 Total Cache را نصب و فعال کنید.

<اسکریپت> تگ ها به مرورگر می گویند که اسکریپت شناسایی شده توسط را بارگیری و اجرا کند src (منبع) صفت. مشکل این فرآیند این است که این بارگذاری و اجرا تجزیه و تحلیل صفحه وب توسط مرورگر را به تاخیر می اندازد که بر زمان بارگذاری کلی تأثیر می گذارد:

از آنجایی که در حال تغییر باطن سایت خود هستید، به یاد داشته باشید که در مورد این افزونه یا هر افزونه مشابه احتیاط کنید. برای حذف منابع مسدودکننده رندر با Autoptimize:

چندین پلاگین وردپرس می توانند اثر رندر مسدود کردن منابع را در وب سایت های وردپرس کاهش دهند. من دو راه حل محبوب، Autoptimize و W3 Total Cache را پوشش خواهم داد.

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

برای حل این مشکل، می توانید یکی از این موارد را اضافه کنید ناهمگام (ناهمزمان) یا به تعویق انداختن به تگ های اسکریپت برای منابع مسدودکننده رندر نسبت دهید. ناهمگام و به تعویق انداختن به این صورت قرار می گیرند:

5. زیر گزینه های CSS، کادر کناری را علامت بزنید کد CSS را بهینه کنید؟.

4. اگر جعبه کنار فایل های JS را جمع آوری کنید؟ تیک خورده است، تیک آن را بردارید.

11. زیر مدیریت فایل CSS، موضوع فعال خود را از بین انتخاب کنید موضوع کشویی

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

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

8. به نتایج PageSpeed ​​Insights از اسکن قبلی خود مراجعه کنید. برای هر مورد زیر منابع مسدودکننده رندر را حذف کنید که به .js ختم می شود، کلیک کنید یک اسکریپت اضافه کنید. سپس، URL کامل منبع جاوا اسکریپت را از PageSpeed ​​Insights کپی کنید و آن را در فایل های URI رشته.

6. اگر جعبه کنار فایل های CSS را جمع آوری کنید؟ تیک خورده است، تیک آن را بردارید.

اگر ترجیح می‌دهید ویدیویی را دنبال کنید، این راهنمای ایجاد شده توسط WP Casts را بررسی کنید:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

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

کسب و کار خود را با ابزار HubSpot برای وب سایت های وردپرس رشد دهید

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

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

منبع تصویر

3. زیر گزینه های جاوا اسکریپت، کادر کناری را علامت بزنید کد جاوا اسکریپت را بهینه کنید؟.

امیدواریم که بهبود قابل توجهی وجود داشته باشد، اما اگر نه، نگران نباشید. عوامل زیادی می توانند عملکرد صفحه را مهار کنند، و ممکن است مجبور باشید برای یافتن منبع عملکرد ضعیف کمی جستجو کنید.

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

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

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

5. در منوی داشبورد، را انتخاب کنید عملکرد > Minify.

3. در کوچک کردن بخش، کادر کناری را علامت بزنید کوچک کردن، سپس تنظیم کنید حالت کوچک کردن به کتابچه راهنمای.

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

4. کلیک تمام تنظیمات را ذخیره کنید در پایین کوچک کردن بخش.

10. در CSS بخش کنار تنظیمات کوچک کردن CSS، کادر کناری را علامت بزنید تنظیمات کوچک کردن CSS و مطمئن شوید که روش Minify تنظیم شده است ترکیب و کوچک کردن.

به هر فایلی که با پسوندهای .css و .js ختم می شود توجه داشته باشید، زیرا اینها مواردی هستند که می خواهید روی آنها تمرکز کنید.

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