رفع فایل‌های مسدودکننده رندر در وردپرس

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

اگر این فایل‌ها در مسیر نمایش اولیه صفحه قرار گرفته باشند، ممکن است باعث شوند نمایش محتوای صفحه به تأخیر بیفتد. در گزارش ابزارهایی مانند Google PageSpeed Insights نیز ممکن است با عباراتی مانند Render-Blocking Resources یا «منابع مسدودکننده رندر» مواجه شوید.

اما فایل مسدودکننده رندر دقیقاً چیست؟ چرا در وردپرس ایجاد می‌شود؟ آیا باید همه این فایل‌ها را حذف کنیم؟ و چطور می‌توان این مشکل را بدون خراب کردن سایت برطرف کرد؟

در این مقاله قدم‌به‌قدم این موضوع را بررسی می‌کنیم.

فایل مسدودکننده رندر چیست؟

برای درک این موضوع ابتدا باید با مفهوم Render آشنا شویم.

Render به فرآیندی گفته می‌شود که مرورگر طی آن کدهای صفحه را دریافت و پردازش می‌کند و در نهایت چیزی را که کاربر می‌بیند روی صفحه نمایش می‌دهد.

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

• HTML
• CSS
• JavaScript
• تصاویر
• فونت‌ها
• سایر منابع موردنیاز صفحه

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

مشکل زمانی ایجاد می‌شود که بعضی از فایل‌های CSS یا JavaScript قبل از نمایش محتوای اصلی باید دریافت یا پردازش شوند.

در این حالت، این منابع می‌توانند در مسیر نمایش اولیه صفحه قرار بگیرند و به همین دلیل به آن‌ها Render-Blocking Resources یا منابع مسدودکننده رندر گفته می‌شود.

یک مثال ساده برای درک Render-Blocking

فرض کنید وارد یک صفحه می‌شوید و مرورگر باید ابتدا این مراحل را انجام دهد:

1. دریافت HTML
2. پیدا کردن فایل CSS
3. دانلود فایل CSS
4. پردازش CSS
5. دریافت فایل JavaScript
6. اجرای JavaScript
7. سپس نمایش کامل صفحه

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

حالا تصور کنید همین صفحه دارای ۱۵ فایل CSS و JavaScript باشد که بعضی از آن‌ها اصلاً برای بخش ابتدایی صفحه ضروری نیستند.

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

چرا CSS می‌تواند رندر صفحه را متوقف کند؟

CSS مسئول مشخص کردن ظاهر صفحه است.

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

مرورگر برای اینکه بتواند صفحه را با ظاهر صحیح نمایش دهد، باید CSSهای موردنیاز را پردازش کند.

به همین دلیل CSSهایی که برای نمایش اولیه صفحه ضروری هستند باید با دقت مدیریت شوند.

اما مشکل زمانی ایجاد می‌شود که حجم زیادی از CSS در صفحه بارگذاری شود، در حالی که فقط بخش کوچکی از آن برای نمایش اولیه لازم باشد.

برای مثال ممکن است یک قالب وردپرس یک فایل CSS بزرگ داشته باشد که شامل استایل‌های مربوط به:

• صفحه اصلی
• فروشگاه
• وبلاگ
• فرم‌ها
• اسلایدر
• پنجره‌های بازشو
• صفحات مختلف
• المان‌های متعدد

باشد.

در حالی که کاربر هنگام ورود فقط بخش کوچکی از این موارد را مشاهده می‌کند.

بنابراین یکی از اهداف بهینه‌سازی این است که CSS غیرضروری در مسیر نمایش اولیه صفحه قرار نگیرد.

JavaScript چگونه باعث تأخیر می‌شود؟

JavaScript برای ایجاد قابلیت‌های تعاملی در سایت استفاده می‌شود.

برای مثال:

• منوی موبایل
• اسلایدر
• فرم‌های تعاملی
• فیلتر محصولات
• سبد خرید
• پنجره‌های بازشو
• انیمیشن‌ها
• ابزارهای آماری
• چت آنلاین

ممکن است از JavaScript استفاده کنند.

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

البته یک نکته مهم وجود دارد:

راه‌حل این نیست که همه JavaScriptها را حذف یا به تأخیر بیندازیم.

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

Render-Blocking در وردپرس چرا زیاد دیده می‌شود؟

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

هر قالب یا افزونه ممکن است فایل‌های CSS و JavaScript خودش را به صفحه اضافه کند.

برای مثال ممکن است یک سایت دارای این موارد باشد:

• قالب وردپرس
• افزونه فرم‌ساز
• افزونه اسلایدر
• افزونه فروشگاه
• افزونه صفحه‌ساز
• افزونه آمارگیری
• افزونه امنیتی
• ابزار چت
• کدهای تبلیغاتی

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

در نتیجه، تعداد فایل‌ها و حجم منابع می‌تواند افزایش پیدا کند.

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

چطور فایل‌های مسدودکننده رندر را پیدا کنیم؟

قبل از اینکه بخواهیم فایل‌های مسدودکننده رندر را در وردپرس بهینه کنیم، ابتدا باید بدانیم کدام فایل‌ها باعث ایجاد این مشکل شده‌اند. برای این کار می‌توان از Google PageSpeed Insights کمک گرفت.

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

ابتدا صفحه موردنظر را بررسی کنید

به جای اینکه فقط صفحه اصلی سایت را آزمایش کنید، بهتر است صفحاتی را بررسی کنید که برایتان اهمیت بیشتری دارند؛ برای مثال:

• صفحه اصلی
• یک صفحه خدمات
• یک مقاله
• یک صفحه محصول

آدرس همان صفحه را وارد PageSpeed Insights کنید و گزارش را اجرا کنید.

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

در گزارش به دنبال Render-Blocking Resources بگردید

بعد از اجرای تست، در بخش پیشنهادهای مربوط به عملکرد ممکن است گزینه‌ای با عنوان:

Eliminate render-blocking resources

نمایش داده شود.

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

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

برای مثال ممکن است فایل‌هایی مانند این‌ها ببینید:

style.css
main.css
script.js
jquery.js

اما در سایت‌های وردپرسی معمولاً آدرس کامل فایل اطلاعات بیشتری در اختیار شما قرار می‌دهد.

از روی آدرس فایل، منبع آن را پیدا کنید

یکی از ساده‌ترین راه‌ها برای تشخیص منشأ یک فایل، نگاه کردن به مسیر آن است.

اگر در آدرس فایل عبارت:

/wp-content/themes/

وجود داشته باشد، فایل معمولاً مربوط به قالب وردپرس است.

برای مثال:

/wp-content/themes/example-theme/assets/css/style.css

در این مثال، فایل style.css از پوشه قالب بارگذاری شده است.

اگر مسیر فایل شامل:

/wp-content/plugins/

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

مثلاً:

/wp-content/plugins/example-plugin/assets/js/script.js

در این حالت می‌توان فهمید که فایل JavaScript مربوط به یک افزونه است.

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

چرا پیدا کردن منبع فایل اهمیت دارد؟

فرض کنید PageSpeed یک فایل JavaScript را به شما نشان می‌دهد:

/wp-content/plugins/example-plugin/assets/js/script.js

ممکن است در نگاه اول وسوسه شوید فایل را حذف کنید تا هشدار PageSpeed برطرف شود.

اما چنین کاری می‌تواند اشتباه باشد.

این فایل ممکن است برای عملکرد یک قابلیت مشخص استفاده شود؛ مثلاً:

• فرم تماس
• فیلتر محصولات
• منوی خاص
• اسلایدر
• پنجره بازشو
• قابلیت‌های فروشگاه

بنابراین دیدن یک فایل در گزارش PageSpeed به معنی حذف کردن آن نیست.

ابتدا باید مشخص شود فایل چه کاری انجام می‌دهد و آیا در همان صفحه به آن نیاز داریم یا خیر.

یک مثال کاربردی

فرض کنید در صفحه اصلی سایت، PageSpeed فایلی را به شکل زیر معرفی می‌کند:

/wp-content/plugins/contact-form/assets/js/form.js

از روی مسیر می‌توان حدس زد که فایل مربوط به یک افزونه فرم است.

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

اما اگر فرم فقط در صفحه «تماس با ما» قرار دارد و در صفحه اصلی هیچ فرمی وجود ندارد، می‌توان بررسی کرد که چرا فایل مربوط به فرم در صفحه اصلی بارگذاری شده است.

در چنین شرایطی ممکن است بتوان بارگذاری این فایل را فقط به صفحه‌ای محدود کرد که فرم در آن استفاده می‌شود.

در نتیجه، به جای حذف کورکورانه فایل، ابتدا دلیل بارگذاری آن را پیدا می‌کنیم.

CSS و JavaScript را جداگانه بررسی کنید

فایل‌های CSS و JavaScript نقش یکسانی ندارند.

CSS بیشتر مسئول ظاهر و نحوه نمایش عناصر صفحه است؛ بنابراین بعضی CSSها برای نمایش صحیح بخش ابتدایی صفحه ضروری هستند.

JavaScript نیز معمولاً قابلیت‌های تعاملی و عملکردی سایت را کنترل می‌کند.

برای همین ممکن است روش بهینه‌سازی یک فایل CSS با روش مناسب برای یک فایل JavaScript متفاوت باشد.

مثلاً برای بعضی JavaScriptها می‌توان نحوه اجرای فایل را با روش‌هایی مانند defer بررسی کرد، در حالی که برای CSS باید روش بارگذاری استایل‌ها را بررسی کرد.

یک اشتباه رایج هنگام بررسی PageSpeed

یکی از اشتباهات رایج این است که کاربر تصور کند:

هر فایلی که PageSpeed معرفی کرده، باید حذف شود.

در حالی که چنین برداشتی درست نیست.

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

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

قبل از تغییر فایل، این چهار سؤال را بپرسید

برای هر فایل CSS یا JavaScript که در گزارش مشاهده می‌کنید، ابتدا این موارد را بررسی کنید:

۱. این فایل متعلق به قالب است یا یک افزونه؟

۲. این فایل در صفحه فعلی واقعاً استفاده می‌شود؟

۳. برای نمایش اولیه صفحه ضروری است یا می‌توان بارگذاری آن را به زمان دیگری منتقل کرد؟

۴. اگر نحوه بارگذاری آن را تغییر دهیم، آیا بخشی از سایت از کار می‌افتد؟

پاسخ این سؤال‌ها مشخص می‌کند که قدم بعدی چه باشد.

ممکن است یک فایل اصلاً در صفحه موردنیاز نباشد و بتوان بارگذاری آن را حذف کرد. ممکن است فایل ضروری باشد اما بتوان نحوه بارگذاری آن را بهینه کرد. همچنین ممکن است فایل برای نمایش اولیه صفحه لازم باشد و حذف یا تأخیر در بارگذاری آن انتخاب مناسبی نباشد.

بعد از تغییر، سایت را حتماً بررسی کنید

بعد از هر تغییر در CSS یا JavaScript، فقط به امتیاز PageSpeed نگاه نکنید.

خود صفحه را نیز باز کنید و قسمت‌های مختلف آن را بررسی کنید.

برای مثال:

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

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

در واقع مسیر درست برای رفع فایل‌های مسدودکننده رندر این است:

پیدا کردن فایل → تشخیص منبع فایل → بررسی نیاز صفحه → انتخاب روش مناسب برای بهینه‌سازی → تست عملکرد سایت

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

آیا باید همه فایل‌های CSS و JavaScript را حذف کنیم؟

خیر.

این یکی از اشتباهات رایج در بهینه‌سازی سرعت سایت است.

اگر یک فایل CSS یا JavaScript در گزارش PageSpeed نمایش داده شد، نباید بلافاصله آن را حذف کنیم.

ممکن است همان فایل برای عملکرد بخشی از سایت ضروری باشد.

برای مثال اگر فایل JavaScript مربوط به منوی موبایل باشد و آن را حذف کنیم، ممکن است منوی سایت دیگر کار نکند.

یا اگر CSS مربوط به یک فرم را حذف کنیم، ظاهر فرم ممکن است به هم بریزد.

بنابراین هدف اصلی این است:

کاهش منابع غیرضروری و بهینه‌سازی نحوه بارگذاری منابع ضروری.

نه اینکه صرفاً تعداد فایل‌ها را به صفر برسانیم.

روش اول: حذف CSS و JavaScript غیرضروری

اولین قدم این است که ببینیم چه فایل‌هایی واقعاً موردنیاز هستند.

فرض کنید یک افزونه فرم تماس فقط در صفحه «تماس با ما» استفاده می‌شود، اما فایل‌های CSS و JavaScript آن در تمام صفحات سایت بارگذاری می‌شوند.

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

این کار می‌تواند تعداد درخواست‌های غیرضروری را کاهش دهد.

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

البته انجام این کار باید با دقت انجام شود.

روش دوم: استفاده از Defer برای JavaScript

یکی از روش‌های رایج برای کاهش تأثیر JavaScript روی بارگذاری اولیه صفحه، استفاده از ویژگی defer است.

وقتی یک اسکریپت با defer بارگذاری می‌شود، مرورگر می‌تواند فایل را دریافت کند اما اجرای آن را به زمان مناسب‌تری موکول کند.

در نتیجه اجرای اسکریپت می‌تواند کمتر در مسیر ساخت اولیه صفحه اختلال ایجاد کند.

وردپرس از نسخه 6.3 امکان تعیین استراتژی بارگذاری defer و async را برای اسکریپت‌ها در توابع مربوط به enqueue فراهم کرده است.

به زبان ساده:

Defer یعنی فایل را دریافت کن، اما اجرای آن را تا زمان مناسب به تعویق بینداز.

این روش برای بسیاری از اسکریپت‌هایی که برای نمایش اولیه صفحه ضروری نیستند می‌تواند مناسب باشد.

تفاوت Defer و Async چیست؟

دو اصطلاح مهم در این زمینه وجود دارد:

Defer

با defer، مرورگر فایل JavaScript را دریافت می‌کند اما اجرای آن را تا بعد از پردازش HTML به تعویق می‌اندازد.

یکی از ویژگی‌های مهم defer این است که ترتیب اجرای اسکریپت‌های deferred حفظ می‌شود.

این موضوع برای اسکریپت‌هایی که به یکدیگر وابستگی دارند اهمیت زیادی دارد.

Async

در async، مرورگر اسکریپت را به صورت غیرهمزمان دریافت می‌کند و وقتی فایل آماده شد، آن را اجرا می‌کند.

اما ترتیب اجرای اسکریپت‌های async تضمین‌شده نیست.

ممکن است اسکریپتی که دیرتر در HTML قرار گرفته، زودتر دانلود شود و قبل از اسکریپت دیگری اجرا شود.

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

پس برای JavaScript از Defer استفاده کنیم یا Async؟

جواب به نوع اسکریپت بستگی دارد.

به صورت ساده:

Defer معمولاً برای اسکریپت‌هایی که وابستگی و ترتیب اجرای آن‌ها اهمیت دارد گزینه قابل‌کنترل‌تری است.

Async بیشتر برای اسکریپت‌هایی مناسب است که مستقل هستند و ترتیب اجرای آن‌ها اهمیت زیادی ندارد.

برای مثال، بعضی اسکریپت‌های خارجی و مستقل ممکن است بتوانند به شکل async اجرا شوند.

اما نباید صرفاً به دلیل توصیه یک ابزار، همه اسکریپت‌های سایت را با یک گزینه تنظیم کرد.

وردپرس خودش هم از Defer و Async پشتیبانی می‌کند

در نسخه‌های جدید وردپرس، توسعه‌دهندگان می‌توانند هنگام enqueue کردن JavaScript، استراتژی بارگذاری آن را مشخص کنند.

برای مثال:

wp_enqueue_script(
    'example-script',
    get_template_directory_uri() . '/js/example.js',
    array(),
    '1.0',
    array(
        'strategy' => 'defer',
    )
);

در این مثال، استراتژی defer برای اسکریپت مشخص شده است.

وردپرس هنگام مدیریت این اسکریپت‌ها وابستگی‌های آن‌ها را نیز در نظر می‌گیرد تا یک اسکریپت به شکلی بارگذاری نشود که اجرای اسکریپت‌های وابسته را مختل کند.

اگر با PHP و ساختار enqueue وردپرس آشنایی ندارید، بهتر است این بخش را مستقیماً روی سایت اصلی تغییر ندهید.

آیا می‌توان JavaScript را به فوتر منتقل کرد؟

یکی دیگر از روش‌های رایج این است که بعضی اسکریپت‌ها به جای Header در Footer بارگذاری شوند.

این روش برای اسکریپت‌هایی که برای نمایش اولیه صفحه ضروری نیستند می‌تواند مفید باشد.

وردپرس نیز هنگام enqueue کردن اسکریپت امکان مشخص کردن in_footer را فراهم می‌کند.

اما باز هم نباید همه فایل‌ها را بدون بررسی به فوتر منتقل کرد.

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

روش سوم: بهینه‌سازی CSS

در مورد CSS، چند روش مختلف وجود دارد.

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

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

این موضوع معمولاً با مفاهیمی مانند:

Critical CSS

و

Unused CSS

ارتباط دارد.

Critical CSS چیست؟

Critical CSS به زبان ساده یعنی CSSهایی که برای نمایش بخش قابل مشاهده اولیه صفحه ضروری هستند.

فرض کنید کاربر وارد صفحه اصلی می‌شود.

بخش بالایی صفحه شامل:

• لوگو
• منو
• عنوان اصلی
• تصویر اصلی
• چند دکمه

است.

CSS موردنیاز برای نمایش درست همین بخش، اهمیت زیادی دارد.

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

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

Unused CSS چیست؟

Unused CSS یعنی بخشی از کدهای CSS که در یک صفحه خاص استفاده نمی‌شوند.

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

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

اما حذف Unused CSS نیز باید با دقت انجام شود.

گاهی یک کلاس CSS در HTML اولیه دیده نمی‌شود اما بعداً توسط JavaScript ایجاد می‌شود.

در چنین شرایطی حذف اشتباه CSS می‌تواند باعث خراب شدن ظاهر سایت شود.

استفاده از افزونه‌های کش و بهینه‌سازی

در وردپرس افزونه‌های مختلفی برای بهینه‌سازی وجود دارند.

بعضی از آن‌ها امکاناتی مانند:

• Minify CSS
• Minify JavaScript
• Defer JavaScript
• Delay JavaScript
• Remove Unused CSS
• Critical CSS
• ترکیب فایل‌ها
• بهینه‌سازی منابع

ارائه می‌کنند.

این امکانات می‌توانند کار بهینه‌سازی را ساده‌تر کنند.

اما یک نکته بسیار مهم وجود دارد:

فعال کردن تمام گزینه‌های بهینه‌سازی همیشه بهترین کار نیست.

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

بنابراین هر تغییر باید بعد از فعال‌سازی تست شود.

Minify چیست؟

Minify کردن به معنی حذف بخش‌های غیرضروری از کد بدون تغییر عملکرد اصلی آن است.

برای مثال در فایل CSS یا JavaScript ممکن است فاصله‌ها، خطوط خالی و بعضی کاراکترهای غیرضروری وجود داشته باشد.

Minify می‌تواند حجم فایل را کاهش دهد.

اما باید توجه داشت که:

Minify با حذف فایل‌های غیرضروری فرق دارد.

در Minify همان کد به شکل فشرده‌تر ارائه می‌شود.

در حذف منابع غیرضروری، فایل یا کدی که واقعاً موردنیاز نیست از مسیر بارگذاری حذف می‌شود.

آیا ترکیب فایل‌های CSS و JavaScript همیشه مفید است؟

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

اما امروز تصمیم‌گیری درباره ترکیب فایل‌ها باید با توجه به نحوه بارگذاری سایت و شرایط سرور انجام شود.

ترکیب تعداد زیادی فایل همیشه به معنی عملکرد بهتر نیست.

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

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

مشکل Render-Blocking را با PageSpeed چگونه بررسی کنیم؟

برای بررسی مشکل، ابتدا یک صفحه مشخص را انتخاب کنید.

مثلاً:

• صفحه اصلی
• یک مقاله
• صفحه خدمات
• یک صفحه محصول

سپس URL آن صفحه را در PageSpeed Insights بررسی کنید.

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

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

در این مرحله سه سؤال از خودتان بپرسید:

۱. این فایل متعلق به کدام افزونه یا قالب است؟

۲. آیا این فایل واقعاً در این صفحه لازم است؟

۳. اگر لازم است، آیا می‌توان نحوه بارگذاری آن را بهینه کرد؟

این سه سؤال بسیار مهم‌تر از این است که صرفاً تمام هشدارهای PageSpeed را به صفر برسانیم.

چرا نباید فقط دنبال امتیاز 100 باشیم؟

PageSpeed Insights ابزار بسیار مفیدی برای پیدا کردن مشکلات عملکردی است، اما هدف اصلی نباید گرفتن یک عدد خاص باشد.

ممکن است یک سایت امتیاز بالایی داشته باشد اما تجربه کاربری واقعی آن همچنان مناسب نباشد.

از طرف دیگر، ممکن است یک سایت امتیاز کامل نگیرد اما در عمل برای کاربران سریع و روان باشد.

بنابراین بهتر است به جای وسواس روی عدد، علت مشکلات را پیدا کنیم.

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

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

یک روش عملی برای رفع Render-Blocking در وردپرس

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

مرحله اول: صفحه را بررسی کنید

یک صفحه مهم سایت را انتخاب کنید و سرعت آن را بررسی کنید.

مرحله دوم: فایل‌های مشکل‌ساز را پیدا کنید

در گزارش PageSpeed ببینید کدام CSS یا JavaScript در بارگذاری اولیه نقش دارد.

مرحله سوم: منبع فایل را پیدا کنید

بررسی کنید فایل متعلق به:

• قالب
• افزونه
• وردپرس
• سرویس خارجی

است.

مرحله چهارم: فایل‌های غیرضروری را شناسایی کنید

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

مرحله پنجم: JavaScriptهای مناسب را Defer کنید

برای اسکریپت‌هایی که برای نمایش اولیه صفحه ضروری نیستند، امکان استفاده از defer را بررسی کنید.

مرحله ششم: CSS را بررسی کنید

CSSهای اضافی، Unused CSS و CSS موردنیاز برای نمایش اولیه را بررسی کنید.

مرحله هفتم: تغییرات را تست کنید

بعد از هر تغییر، سایت را بررسی کنید.

صفحه اصلی، منوی موبایل، فرم‌ها، دکمه‌ها، اسلایدر، سبد خرید و سایر بخش‌های مهم را تست کنید.

مرحله هشتم: سرعت را دوباره اندازه بگیرید

در نهایت دوباره صفحه را با ابزارهای سنجش سرعت بررسی کنید و ببینید تغییر چه تأثیری داشته است.

یک اشتباه مهم: فعال کردن همه گزینه‌های افزونه سرعت

گاهی کاربر وارد تنظیمات افزونه سرعت می‌شود و تمام گزینه‌هایی مانند:

• Minify
• Combine
• Defer
• Delay
• Remove CSS
• Optimize CSS
• Optimize JavaScript

را هم‌زمان فعال می‌کند.

ممکن است در ابتدا نتیجه خوبی به نظر برسد، اما بعد از آن مشکلاتی مانند این موارد ایجاد شود:

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

به همین دلیل بهتر است تنظیمات بهینه‌سازی مرحله‌به‌مرحله انجام شوند.

Defer کردن همه JavaScriptها کار درستی است؟

خیر.

این نکته را باید جدی گرفت.

برخی JavaScriptها وابستگی دارند و باید با ترتیب مشخصی اجرا شوند.

خود وردپرس نیز هنگام اعمال استراتژی‌های defer و async وابستگی‌های اسکریپت‌ها را بررسی می‌کند تا ترتیب اجرای نامناسب ایجاد نشود.

بنابراین اگر نمی‌دانید یک فایل JavaScript چه کاری انجام می‌دهد، بهتر است قبل از تغییر نحوه بارگذاری آن، منبع و وابستگی‌هایش را بررسی کنید.

آیا Render-Blocking تنها دلیل کندی سایت است؟

خیر.

Render-Blocking فقط یکی از مشکلات احتمالی عملکرد سایت است.

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

عوامل دیگری نیز می‌توانند روی سرعت تأثیر بگذارند، از جمله:

• هاست ضعیف
• پاسخ‌دهی کند سرور
• تصاویر سنگین
• افزونه‌های زیاد
• قالب سنگین
• پایگاه داده
• فونت‌های زیاد
• اسکریپت‌های خارجی
• تبلیغات
• CDN
• تنظیمات کش
• کدهای اضافی

بنابراین سرعت سایت باید به صورت کلی بررسی شود.

چه زمانی بهتر است سراغ بهینه‌سازی تخصصی برویم؟

اگر سایت ساده‌ای دارید و فقط چند فایل CSS یا JavaScript مشکل‌ساز هستند، ممکن است بتوانید با تنظیمات صحیح افزونه کش یا بهینه‌سازی، مشکل را برطرف کنید.

اما اگر سایت از مواردی مانند:

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

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

گاهی یک فایل JavaScript به ظاهر غیرضروری است اما چند بخش مهم سایت به آن وابسته هستند.

جمع‌بندی

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

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

برای رفع این مشکل نباید بدون بررسی فایل‌ها را حذف کنیم.

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

برای JavaScript می‌توان در موارد مناسب از روش‌هایی مانند Defer یا Async استفاده کرد. وردپرس نیز از نسخه 6.3 امکان تعیین این استراتژی‌ها را در زمان enqueue کردن اسکریپت‌ها فراهم کرده است.

برای CSS نیز می‌توان مواردی مانند CSSهای غیرضروری، Critical CSS و نحوه بارگذاری استایل‌ها را بررسی کرد.

در نهایت باید به یاد داشته باشیم که سرعت سایت فقط به Render-Blocking Resources مربوط نمی‌شود.

اگر بعد از بهینه‌سازی CSS و JavaScript همچنان سایت کند است، باید سایر عوامل مؤثر بر عملکرد سایت نیز بررسی شوند.

نیاز به افزایش سرعت سایت دارید؟

اگر بعد از بررسی فایل‌های CSS و JavaScript همچنان سایت شما سرعت مناسبی ندارد، بهتر است عملکرد کلی سایت بررسی شود. مشکلات مربوط به هاست، کش، قالب، افزونه‌ها، تصاویر، فونت‌ها، کدهای اضافی و منابع خارجی می‌توانند هم‌زمان روی سرعت سایت تأثیر داشته باشند.

سروش آرت؛ همراه شما در مسیر طراحی سایت، توسعه آنلاین و بهبود عملکرد وب‌سایت.