رفع خطای Eliminate Render-Blocking Resources در وردپرس

خطای Eliminate Render-Blocking Resources  در هنگام بهینه سازی سرعت وردپرس در ابزارهای تست سرعت، زمانی نمایش داده می‌شود که منابعی مانند CSS یا JavaScript، رندر اولیه صفحه را به تأخیر بیندازند. برای رفع این مشکل در وردپرس، باید CSS موردنیاز برای نمایش اولیه صفحه را به‌عنوان Critical CSS  در دسترس قرار دهید.CSS غیرحیاتی را به‌صورت غیرمسدودکننده بارگذاری کنید و CSS و JavaScript بلااستفاده را حذف کنید. برای JavaScript نیز بسته به نوع و وابستگی اسکریپت‌ها می‌توان از defer یا async استفاده کرد.

این بهینه‌سازی‌ ها با کاهش منابع مسدودکننده و کار پردازشی اولیه، به بهبود معیارهایی مانند FCP، LCP و TBT در core web vitals المنتور کمک می کند.

نکات مهم آموزش:

• CSS و JavaScript می‌توانند باعث تأخیر در رندر اولیه صفحه شوند.
• Critical CSS شامل CSS ضروری برای نمایش اولیه صفحه است.
• CSS استفاده‌نشده باید شناسایی و حذف یا بهینه شود.
• برای JavaScript بسته به شرایط از defer یا async استفاده کنید.
• preload فقط باید برای منابع مهم و ضروری استفاده می شود
• بعد از هر تغییر، عملکرد و ظاهر سایت را در موبایل و دسکتاپ بررسی کنید.

Render-Blocking Resources چیست؟

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

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

از طرفی سرعت وب‌سایت برای عملکرد سئو (SEO) حیاتی است و ارتباط مستقیمی با رتبه سئوی سایت شما دارد. برای حفظ یا ارتقای رتبه سئو، باید مشکلاتی را که مانع عملکرد بهینه وب‌سایت می‌شوند، برطرف کنید. برای دستیابی به عملکرد بهینه، باید به دستورالعمل‌های ارائه‌شده توسط ابزار Page Speed ​​Insights (که اکنون از فناوری Lighthouse بهره می‌برد) توجه کنید. و به گونه ای وبسایت را توسعه دهید که تعداد درخواست‌های اضافی برای فایل‌های خارجی کاهش یابد.

Render-Blocking CSS چیست؟

CSSهای Render-Blocking فایل‌های stylesheet هستند که مرورگر برای نمایش و رندر اولیه صفحه باید ابتدا آن‌ها را دریافت و پردازش کند. اگر این فایل‌ها حجیم یا متعدد باشند، نمایش محتوای اولیه را به تأخیر میفتد.

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

Render-Blocking JavaScript چیست؟

JavaScriptهای Render-Blocking اسکریپت‌هایی هستند که اجرای آن‌ها می‌تواند پردازش HTML و نمایش اولیه صفحه را به تأخیر بیندازد. برای کاهش این مشکل، بسته به نوع اسکریپت و وابستگی‌های آن باید از defer  یا async  استفاده کنید.

• defer  : فایل را دانلود می ‌کند، ولی بعد از خواندن HTML اجرا می ‌کند.
• async  : فایل را دانلود می‌کند و هر وقت دانلودش تمام شد، همان موقع اجرا می شود.

چرا PageSpeed این هشدار را نمایش می‌دهد؟

PageSpeed زمانی این هشدار را نشان می‌دهد که برخی منابع CSS یا JavaScript در مسیر رندر اولیه قرار گرفته باشند و باعث تأخیر در نمایش محتوای صفحه شوند. شناسایی منابع مسدودکننده و بهینه‌سازی نحوه بارگذاری آن‌ها زمان رندر اولیه را کاهش می دهد.

CSS حیاتی (Critical CSS) چیست؟

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

چرا باید CSS حیاتی را به صورت درون‌خطی (Inline) قرار دهید؟

وقتی CSS حیاتی (Critical CSS) را به‌صورت درون‌خطی (Inline) قرار می‌دهید، در واقع به مرورگر نشان می دهید که برای نمایش محتوای بخش بالایی صفحه (Above the Fold)، نیازی به دانلود هیچ فایل CSS دیگری نیست. به محض صفحه لود می شود؛ مرورگر CSS حیاتی را در دسترس خواهد یافت. از آنجا که فایل‌های استایل تا زمان دانلود کامل، مانع از رندر شدن محتوا می‌شوند، با حذف CSSهای بلااستفاده و استفاده از CSS حیاتی به ‌صورت درون ‌خطی، هشدارهایی مثل رفع موارد مسدودکننده رندر (eliminate render-blocking) یا کاهش CSSهای بلااستفاده (reduce unused CSS رفع می شوند.

فایل‌های CSS به‌طور پیش‌فرض منابعی هستند که مانع رندر شدن (Render-blocking) می‌شوند. یعنی مرورگر پیش از نمایش محتوای بخش بالایی صفحه (Above the Fold)، ابتدا تمام فایل‌های CSS موجود در تگ `<head>` را دانلود و تجزیه کرده و آن‌ها را اجرا می‌کند. هرچه حجم فایل‌های CSS بیشتر باشد، تأثیر منفی آن‌ها بر سرعت بارگذاری صفحه نیز بیشتر خواهد بود.

وقتی CSS حیاتی را درون‌خطی می‌کنید، تعدادی از مراحل غیرضروری را حذف می‌کنید، به عنوان مثال، مرورگر دیگر نیازی به رندر کردن کل محتوای صفحه برای نمایش محتوای «بالای صفحه» ندارد. علاوه بر این، مرورگر به راحتی CSS حیاتی درون‌خطی را در تگ head پیدا می‌کند و دیگر در مکان‌های دیگر به دنبال CSS حیاتی نمی‌گردد. از آنجایی که CSS درون‌خطی در تگ <style></style> در بخش <head></head> بارگذاری می‌شود، درخواست‌های HTTPS لازم نیست. تا کاربر در حال مشاهده محتوای «بالای صفحه» را است، CSS غیرحیاتی می‌تواند به صورت ناهمزمان «پایین صفحه» نمایش داده شود.

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

unused CSS چیست؟

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

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

برای داشتن وب‌سایتی سریع که بخش بالایی صفحه (Above the Fold) آن بلافاصله بارگذاری می‌شود، باید کدهای CSS بلااستفاده را حذف کنید.

تفاوت Critical CSS و Unused CSS؟

• Critical CSS  ضروری برای نمایش اولیه صفحه است.
• Unused CSS هایی است که در صفحه فعلی استفاده نمی‌شوند و می‌توان آن‌ها را حذف یا بهینه کرد.

چرا باید CSSهای استفاده‌نشده را حذف کنید؟

با حذف فایل‌های CSS غیرضروری، سرعت بارگذاری وب‌سایت شما افزایش می‌یابد؛ کاربران از نمایش آنی و سرعت فوق‌العاده سایت شگفت‌زده شده و تعامل با آن برایشان لذت‌بخش خواهد بود. کاربران راضی خواهند بود و بارها و بارها به وب‌سایت شما سر می زنند. شاهد کاهش نرخ پرش (Bounce Rate) و بهبود رتبه سایت خود در موتورهای جستجو خواهید بود؛ و همه این‌ها تنها به این دلیل است که آن فایل‌های CSS مزاحم و بی‌استفاده را حذف کرده‌اید.

بنابراین، تمام افزونه‌ها، فایل‌های CSS و فایل‌های جاوااسکریپتی را که استفاده نمی‌شوند، باید حذف شوند. ما باید تنها موارد ضروری را حفظ کنیم.

چگونه CSSهای غیرضروری را در وردپرس بدون افزونه به تعویق بیندازیم؟

بارگذاری زودهنگام CSS غیر بحرانی (یعنی همان css مربوط به بخش های پایینی صفحه) عملکرد وب‌سایت را کند می کند. و  بر معیارهای سرعت سایت مثل  FCP (First Contentful Paint)، LCP (Large Contentful Paint) و TBT (Total Blocking Time) تأثیر می گذارد.

نحوه شناسایی CSS غیرحیاتی

بیایید فایل‌های CSS غیرحیاتی و بلااستفاده را پیدا کرده و آن‌ها را به‌صورت ناهمگام (asynchronously) بارگذاری کنیم.

از آنجا که async و defer ویژگی‌های (attributes) تگ `<script>` هستند، باید الگوی زیر را به کار ببریم:

< link rel= “preload” href=”styles.css” as=”style” onload=”this.onload=null;this.rel=’stylesheet'”>< /span >

< noscript ><link rel=”stylesheet” href=”styles.css”>< /noscript >

این کار با افزودن یک فایل CSS استاندارد به سند HTML متفاوت است. استفاده از تگ link با ویژگی‌های `rel=”preload”` و `as=”style”` باعث می‌شود فایل‌های CSS غیرحیاتی به‌صورت ناهمگام (asynchronously) دانلود شوند.

• در مورد حالت «async»: تمام فایل‌های CSS خارجی به‌صورت ناهمگام دانلود شده و کد آن‌ها پس از اتمام دانلود اجرا می‌شود.
• در مورد حالت «defer»: فایل CSS به‌صورت ناهمگام دانلود شده و اجرای آن به زمانی موکول می‌شود که پردازش سند به پایان رسیده باشد.
• ویژگی defer فقط برای فایل‌های جاوااسکریپت خارجی استفاده می‌شود و باعث می‌شود اسکریپت بعد از اینکه مرورگر HTML صفحه را کامل خواند اجرا شود.
• ویژگی async هم فقط برای اسکریپت‌های خارجی است، اما اسکریپت را هم‌زمان با بارگذاری صفحه اجرا می‌کند و منتظر تمام شدن تجزیه صفحه نمی‌ماند.
• اگر از async یا defer استفاده نکنید، مرورگر بارگذاری و نمایش صفحه را متوقف می‌کند، اسکریپت را اجرا می‌کند و بعد ادامه می‌دهد. این کار باعث کندتر شدن نمایش صفحه (Render Blocking) می‌شود.
• این دو ویژگی روی کدهای جاوااسکریپت درون‌خطی (Inline) تاثیری نمی گذارند.
• ویژگی onload در تگ <link> باعث می‌شود بعد از اینکه فایل CSS کاملاً بارگذاری شد، یک کد جاوااسکریپت اجرا شود.
• عبارت onload=null باعث می‌شود این کد فقط یک بار اجرا شود و از اجرای دوباره آن جلوگیری می‌کند.
• تگ <noscript> برای زمانی است که جاوااسکریپت غیرفعال باشد یا مرورگر از آن پشتیبانی نکند. در این حالت، محتوای داخل این تگ نمایش داده یا اجرا می‌شود.

بهترین روش :

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

CSS غیرحیاتی باید به نحوی که بارگذاری صفحه را معطل نکند یا اصلاحا  غیر مسدودکننده بارگذاری کنید؛ برای این کار می‌توان از الگوی preload + onload یا قابلیت‌های بهینه‌ سازی  CSS افزونه‌های کش استفاده کرد.

چگونه CSSهای استفاده‌نشده را شناسایی کنیم؟

Chrome DevTools Coverage

برای پیدا کردن css های استفاده نشده در مرورگر با راست کلیک و زدن گزینه inspect یا کلید F12 پنجره inspectorرا باز کنید. روی سه نقطه بالای پنجره بزنید و از منوی more tools گزینه coverage را انتخاب کنید. طبق تصویر در تب unused bytes فایل های css و js صفحه باز شده براساس میزان بایت های استفاده نشده فیلتر می شود.

استفاده از ابزار page speed insights

به غیر از inspector ابزارهایی هم وجود دارند که برای پیدا کردن و شناسایی unused css و unused js قابل استفاده هستند. یکی از مفیدترین ابزارها برای این منظور page speed insight است. وارد سایت این ابزار شوید و لینک URL مورد نظر را وارد کرده و دکمه Analyze را بزنید. این ابزار گزارشی کاملی از عملکرد بارگذاری وب‌سایت و راهنمای جامعی درباره فرصت‌های بهبود سرعت صفحه ارائه می کند. در بخش opportunities یا فرصت ها به Reduce Unused CSS یا Reduce Unused Js طبق تصویر زیر دقت کنید. افزونه یا قالب یا هر فایلی که css یا js استفاده نشده داره را نیز میتوانید در این بخش مشاهده کنید.

Preload چیست و چه زمانی برای CSS استفاده می‌شود؟

فایل‌های CSS، اسناد، تصاویر، فونت‌ها، اسکریپت‌ها و فایل‌های صوتی و ویدیویی قابلیت پیش‌بارگذاری دارند. قابلیت Preload  در رفع مشکلات مربوط به معیار LCP (بزرگ‌ترین محتوای قابل مشاهده) برای تصاویر و فونت‌ها نقش مؤثری ایفا می ‌کند.

درواقع Preload به مرورگر می گوید که یک منبع مهم را زودتر دریافت کند. بااین‌حال، نباید همه فایل‌های CSS را Preload کرد؛ این قابلیت باید فقط برای منابعی استفاده شود که واقعاً در مسیر بارگذاری اولیه اهمیت دارند. افزونه های بهینه سازی وردپرس قابلیت preload را دارند.

روش پیشرفته بدون افزونه:

برای این کار، باید لینک‌هایی که توسط PageSpeed ​​Insights پیشنهاد شده‌اند، پیش‌بارگذاری شوند. جهت افزودن یک استایل‌شیت در وردپرس، باید تابع `wp_enqueue_style` فراخوانی شده و به ‌صورت `rel=”preload”` تنظیم گردد.

برای مثال :

wp_enqueue_style(‘preload-style’, ‘styles/main-style.css’, false, null);

add_filter( ‘style_loader_tag’, ‘preload_filter’, 10, 2 ); function preload_filter( $html, $handle ){

if (strcmp($handle, ‘preload-style’) == 0) {

$html = str_replace(“rel=’stylesheet'”, “rel=’preload’ as=’style’ “, $html); }

return $html; }

چگونه از CSS حیاتی (Critical CSS) در وب‌سایت وردپرسی خود استفاده کنید

درون خطی کردن CSS حیاتی

در سایت های وردپرسی افزونه های زیر  Critical CSS را خودکار تولید می ‌کنند:

• WP Rocket  تولید Critical CSS و بهینه‌سازی Delivery فایل‌های CSS
•  FlyingPress  تولید Critical CSS و بهینه‌سازی CSS
• LiteSpeed Cache  مخصوصاً اگر سرور LiteSpeed باشد

رفع CSS و JS اضافی Elementor

CSS و JS غیرضروری در المنتور را پیدا کنید

با افزونه هایی مثل Asset CleanUp  یا Perfmatters چک کنید هر صفحه دقیقاً چه فایل‌های CSS/JS را بارگذاری می‌کند و فایل‌های غیرضروری را فقط برای همان صفحات غیرفعال کنید.

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

در صورت بهم ریختگی سایت بعد از ایجاد تغییرات می توانید از Elementor > Tools > Clear Files & Data تا المنتور کش را پاکسازی و فایل ها را مجدد تولید کند.

سوالات متداول

چرا بعد از حذف CSS استفاده‌نشده، ظاهر سایت به‌هم می‌ریزد؟

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

کدام افزونه برای رفع Render-Blocking در وردپرس بهتر است؟

برای بیشتر سایت‌های وردپرسی، WP Rocket گزینه‌ای ساده و کاربردی است.