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

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

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

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

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

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

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

منبع تصویر

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

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

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

منبع تصویر

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

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

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

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

گزارش از google pagespeed insights

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

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

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

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

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

منبع تصویر

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



منبع

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

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

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

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

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

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

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

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

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

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

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

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

منبع تصویر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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