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

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

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

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

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

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

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

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

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

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

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

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

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

منبع تصویر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

منبع تصویر

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

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

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

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

منبع تصویر

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

منبع تصویر

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

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

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

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

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

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

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

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

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

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