روش شناسایی و حذف render-blocking resources در وردپرس

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

اما بعضی وقتا، فایل های CSS و JavaScript هستند که این پروسه رو مختل میکنند و نمیذارند محتوای سایت شما رندر بشه. به این فایل ها میگن: render-blocking resources.

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

تو این مقاله، در مورد render-blocking resources صحبت میکنم و فواید از بین بردنش رو برای سئو سایت بهتون میگم. در ادامه هم روش حذف این منابع رو ذکر میکنم. پس تا آخر این مقاله همراه من باشید.

برای دریافت مشاوره به صفحه سئو سایت در شیراز مراجعه کنید.

فهرست:

• render‑blocking resources چه هستند؟
• مزایای حذف render‑blocking resources
• چگونه وجود render‑blocking resources را وب سایت خود آزمایش کنیم؟
• روش حذف render-blocking resources در وردپرس
  • حذف منابع مسدودکننده رندر با افزونه Autoptimize + Async JavaScript
• جمع بندی

render‑blocking resources چه هستند؟

قبل از اینکه در مورد render‑blocking resources صحبت کنیم، باید با روند بارگذاری یه سایت آشنا بشید. وقتی کاربر وارد سایت شما میشه، مرورگرش باید تمام محتوا سایت رو رندر (یا همون دانلود) کنه. اول از همه کدهای سایت رو از بالا به پایین میخونه. کدها سایت میشن: HTML، CSS و JavaScript.

تا زمانی که مرورگر این کدها رو کامل نخونه، کاربر نمیتونه سایت شما رو ببینه. حالا اگه تو سایت render‑blocking resources داشته باشید، کاربر باید مدت زمان طولانی رو صبر کنه.

render-blocking resource معمولا یه فایل CSS و یا جاوااسکریپ هستش. این فایل تا زمانی که پردازش نشه نمیذاره مرورگر محتواهای دیگه رو بارگذاری کنه، در نتیجه باعث میشه پروسه رندر شدن استوپ بشه و صفحه‌ی خالی یا ناقص به کاربر نشون داده میشه.

وقتی که سایت شما render-blocking resources داشته باشه، اولِ کدهاش فایل‌های بلااستفاده رو لود میکنه. پس همونطور که گفتم، بازدیدکنندگان باید منتظر بمونند تا این فایل ها پردازش بشن تا بتونند صفحه رو ببینند.

معیارهای عملکرد وب سایت که تحت تأثیر منابع مسدود کننده رندر قرار میگیره این ها هستند:

⛔Largest Contentful Paint: نشون میده چقدر طول میکشه تا محتوای اصلی یه صفحه بارگذاری بشه.

⛔First Contentful Paint: مدت زمانی که مرورگر برای ارائه اولین قطعه از محتوای Document Object Model (DOM) در سایت شما نیاز داره رو نشون میده.

⛔Total Blocking Time: تاخیر بین First Contentful Paint و Time to Interactive (مدت زمانی طول میکشه که صفحه کاملا تعاملی بشه) رو اندازه میگیره.

Render-blocking resources برای بارگذاری صفحه حیاتی نیستند، اما فرآیند رندر رو به تاخیر میندازند. این میتونه تأثیر منفی بروی سئو سایت شما داشته باشد. بنابراین، برای سئو سایتتون باید حتما این موارد رو حذف کنید.

مزایای حذف render‑blocking resources

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

حذف render-blocking resources میتونه کلید بهبود سرعت صفحه باشه زیرا کد وب سایتتون رو تا حد امکان سبک میکنه.

⚡بیشتر بخوانید: نحوه اعتبار سنجی کد با استفاده از W3C Validator

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

چگونه وجود render‑blocking resources را وب سایت خود آزمایش کنیم؟

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

اگه سایتتون دیر بارگذاری میشه میتونه علت های دیگه ای هم داشته باشه، مثلا تصاویر بهینه نشده، هاست بی کیفیت یا داشتن افزونه های زیاد.

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

برای شروع، کافیه URL سایتتون رو در کادر جستجو وارد کنید و روی Analyze کلیک کنید. بعدش میتونید عمکلرد سایت خودتون رو بر اساس معیارهای Core Vital Web یا هسته حیاتی وب ببینید:

برای اینکه ببینید تو سایتتون منابع مسدود کننده دارید یا نه به قسمت «Opportunities» برید. در اینجا، به دنبال پیشنهادی با عنوان “Eliminate render-blocking resources” بگردید.

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

وقتی render-blocking resources رو شناسایی کردید، حالا باید از سایتتون حذفش کنید تا سرعت سایتتون بره بالا.

روش حذف render-blocking resources در وردپرس

حالا که میدونید چجوری render-blocking resources رو شناسایی کنید، در مرحله بعدی باید حذفشون کنید. در ادامه روش حذف render-blocking resources با افزونه های Autoptimize و Async JavaScript رو بهتون یاد میدم.

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

Autoptimize و Async JavaScript دو تا افزونه جداگانه هستند که یه نفر درستشون کرده. این دو تا افزونه با هم بهتون کمک میکنند فایل های CSS و JavaScript خودتون رو بهینه کنید.

برای حذف منابع مسدودکننده رندر پس از نصب هر دو افزونه، روی تب Set Async JavaScript در بخش تنطیمات وردپرس کلیک کنید:

• تیک Enable Async JavaScript رو بزنید
• در کادر (تنظیمات سریع، بین Apply Async و Apply Defer یکی رو انتخاب کنید.

اگر گزینه Async باعث ایجاد مشکل در سایت شد، توصیه میکنم Defer رو امتحان کنید.

هنگامی که افزونه Async JavaScript رو راه اندازی کردید، به تنظیمات → Autoptimize بروید و:

• کادر Optimize JavaScript Code رو تیک بزنید
• کادر Optimize CSS Code رو تیک بزنید

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

پس از پیکربندی Autoptimize و Async JavaScript، دوباره از سایتتون توی PageSpeed Insights تست بگیرید:

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

جمع بندی

همونطور که گفتم، اگه تعداد منابع مسدودکننده رندر رو کاهش بدید، زمان بارگذاری سایت کاهش پیدا میکنه و سایتتون سریع تر خواهد بود، درنتیجه تجربه کاربر و سئو سایت بهتر میشه.

در این مقاله در مورد روش شناسایی و حذف render-blocking resources در وردپرس صحبت کردیم. ممنون که تا انتهای مقاله همراه من بودید در صورتی که حس میکنید مطلبی هست که گفته نشده حتما در قسمت نظرات با ما به اشتراک بگذارید. در صورت داشتن هرگونه سوال با تیم پشتیبانی پارس اوستا در ارتباط باشید.