چگونه مسیر (Critical Rendering Path) را در وردپرس بهینه کنیم؟

وقتی صحبت از بهینه سازی یک وب سایت است، تکنیک های گوناگونی می توانند در این مسیر کمک کننده باشند. یکی از بهترین این تکینک ها بهینه سازی مسیر Critical Rendering در وردپرس است. به همین منظور در این مطلب می خواهیم قوانین کلی این بهینه سازی را با هم مرور کرده و با 5 تا از بهترین افزونه ها برای اعمال این قوانین در وب سایت های وردپرسی آشنا شویم. همراه ما باشید.

Critical Rendering Path چیست؟

Critical Rendering Path که به آن مسیر ضروری رندرینگ نیز می گویند، مجموعه کارهایی است که مرورگر انجام می دهد تا بتواند کدهای CSS، HTML و جاوا اسکریپت را پردازش کرده و آنها را به پیکسل های رنگی تبدیل کند تا نهایتاً صفحه مورد نظر کاربر را در مرورگر نمایش دهد. بنابراین با توجه به این تعریف، Critical Rendering Path مسیری است که یک مرورگر باید دائماً طی کند تا صفحات وب را به کاربران نشان دهد.

نکته مهم اینجاست که اندازه این مسیر با سرعت بارگزاری سایت، رابطه مستقیم دارد. یعنی هر چه این مسیر طولانی تر باشد، زمان بارگزاری سایت بیشتر بوده و بالعکس. اما خبر خوب این است که این مسیر یکتا نیست و طراحان سایت می توانند برای آن تصمیم گرفته و آن را تغییر دهند. بدیهی است که هدف طراحان سایت، به حداقل رساندن این مسیر و ارتقای سرعت سایت تا جای ممکن است. به همین اقدامات لازم برای بهینه سازی این مسیر،Critical Rendering Path Optimization یا بهینه سازی مسیر ضروری رندرینگ می گویند.

چرا باید مسیر را در وردپرس بهینه کنیم؟

بیشتر فرآیند بهینه سازی مسیر در وردپرس، برای قسمتی از صفحه وب انجام می شود که کاربر بدون اسکرول کردن صفحه می بیند. این قسمت با عنوان Above the Fold (ATF) شناخته می شود. در واقع برای این که قابلیت استفاده (usability) سایت را ارتقا دهیم، ATF باید در اسرع وقت ارائه شود تا رفت و برگشت های شبکه به حداقل برسد. در تصویر زیر ATF وب سایت ژاکت را در یک صفحه نمایش کامپیوتر شخصی مشاهده می کنید:

در واقع وقتی صحبت از بهینه سازی مسیر رندرینگ در وردپرس است، منابع مورد نیاز ATF بسیار مهم تر از باقی قسمت هاست. بنابراین بهینه سازی این قسمت می تواند به تنهایی زمان لازم برای اولین ارائه سایت را به حداقل برساند.

قوانین بهینه سازی مسیر Critical Rendering Path در وردپرس

به طور کلی زمان لازم برای ارائه صفحات یک وب سایت توسط مرورگر متغیر است و به عوامل گوناگونی بستگی دارد؛ عواملی مانند: اندازه سند، تعداد درخواست ها، استایل های اعمال شده روی صفحات، دستگاه مورد استفاده کاربر و … .

یکی از توصیه های اکید گوگل این است که محتوای قابل مشاهده وب سایت را اولویت بندی کنید. با این کار Above the Fold در سریع ترین زمان ممکن ارائه می شود. برای این کار می توانید دو اقدام اساسی زیر را انجام دهید:

1. HTML را طوری ساختاربندی کنید تا محتواهای مهم تر (یعنی Above the Fold) زودتر ارائه شود.
2. مقدار داده های استفاده شده توسط منابع CSS، HTML و جاوا اسکریپت را کاهش دهید.

دقت کنید که اگر مقدار داده مورد نیاز برای ارائه ATF از یک حدی بیشتر باشد (بیشتر از 14.6 کیلوبایت)، نمایش آنها به رفت و برگشت های بیشتری بین مرورگر و سرور نیاز دارد. این امر به خصوص در شبکه های تلفن همراه، بارگیری صفحات وب سایت را به طور قابل توجهی به تأخیر می اندازد.

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

در ادامه مهم ترین اقداماتی که می توانیم برای بهینه سازی مسیر وردپرس انجام دهیم را بررسی می کنیم. در واقع این موارد قوانین کلی بهینه سازی مسیر Critical Rendering در وردپرس به شمار می روند.

1) کاهش اندازه و حجم منابع

با کوچک کردن، فشرده سازی و کش کردن منابع HTML، CSS و جاوا اسکریپت، می توانیم مقدار داده ای را که مرورگر قرار است دانلود کند را کاهش دهیم. این کار کمک زیادی به بهینه سازی مسیر Critical Rendering در وردپرس خواهد کرد. این قانون شامل موارد زیر می شود:

کوچک کردن: به معنی حذف کاراکترهای غیر ضروری (مثل نظرات یا فضای سفید) از کدهای منبع است. این عناصر در توسعه وب مفید هستند، اما برای ارائه صفحات به مرورگر بی فایده و حتی مضر هستند.

فشرده سازی: به معنی کاهش سایز فایل های ارسالی به منظور بهبود سرعت سایت و کاهش میزان استفاده از پهنای باند است. این مورد از قابلیت های سرورهای وب و کلاینت ها است.

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

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

2) بهینه سازی CSS

حالا دیگر می دانیم که مرورگر باید قبل از ارائه صفحات وب، کدهای CSS را وارسی کرده و پردازش کند. بعضی از کدهای CSS در حالت عادی غیر قابل ارائه (render-blocking) هستند؛ اما نه همه کدهای CSS!

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

<link rel="stylesheet" href="style.css" />

این موضوع به این معنی است که CSS عملاً Render-blocking می شود. اما CSSها با شرایط خاصی قابل دسترسی هستند. بنابراین می توانیم تحت شرایط خاصی، درخواستی را برای یک منبع CSS ارسال کنیم. در واقع می توانیم استایل های Print را به یک فایل مجزا منتقل کرده و از خاصیت media استفاده کنیم. با این کار به مرورگر می گوییم که این کدهای CSS فقط زمان Print صفحه اجرا می شوند و نیازی به مسدود کردن رندرینگ روی صفحه نمایش نیست. برای استفاده از این قابلیت باید کد زیر را وارد کنید:

<link rel="stylesheet" href="print.css" media="print" />

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

<link rel="stylesheet" href="style.css" media="screen" /><link rel="stylesheet" href="portrait.css" media="orientation:portrait" /><link rel="stylesheet" href="widescreen.css" media="(min-width: 42rem)" />

اقدامات بیشتر برای بهینه سازی   CSS

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

کوچک کردن فایل های CSS: حذف فضای سفید و نظرات برای کاهش تعداد بایت های مورد نیاز برای فایل های CSS.

ترکیب کردن چندین فایل CSS: این کار باعث کاهش تعداد درخواست های HTTP می شود.

استفاده از CSSهای Inline: بعضی از کدهای CSS برای اجرای Above The Fold ضروری هستند. می توانید این کدهای CSS را به صورت Inline و مستقیماً در کدهای HTML بنویسید تا اولویت آنها را افزایش دهید. اما دقت کنید که حجم فایل های CSS در حالت Inline از یک حدی نباید بیشتر شود. چرا که ممکن است باعث رفت و برگشت های بیشتری برای اجرای ATF شود و این به سرعت اجرای سایت نیز لطمه خواهد زد.

3) افزایش سرعت مراحل Layout و Paint صفحات وب

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

• تا جای ممکن از طرح بندی (Layout) خودداری کنید. چرا که هر چه عناصر DOM بیشتر باشد، محاسبه موقعیت و ابعاد آنها بیشر طول خواهد کشید.
• سعی کنید از مدل جدید Flexbox استفاده کنید. چرا که سرعت آن از طرح های قدیمی Flexbox و یا Floating بیشتر است.
• تا جای ممکن برای چیدمان از جاوا اسکریپت استفاده نکنید.

فرآیند Paint نیز کاملاً به Layout متصل است و احتمالاً وقت گیرترین مرحله در فرآیند اجرای Critical Rendering Path است. بنابراین بهتر است برای بهینه سازی مسیر Critical Rendering در وردپرس تا جای ممکن این موارد را ساده سازی کنید. به عنوان مثال اجرای کدهای مربوط به یک box-shadow (سایه ای که به یک قسمت می دهیم) به یک سری محاسبات نیاز دارد. بنابراین بهتر است به جای آن، از حاشیه هایی با رنگ ثابت استفاده کنید.

نحوه رفع خطای Reduce the number of DOM elements در وردپرس را اینجا بخوانید.

4) جاوا اسکریپت را از حالت Blocking خارج کنید

وقتی یک مرورگر در اجرای کدها، با یک تگ رو به رو می شود، باید تجزیه (پارس کردن) کدهای HTML را متوقف کند. کدهای درون خطی (Inline) دقیقاً در همان نقطه و درهمان لحظه اجرا می شوند. بنابراین ساخت و ساز DOM را تا کار موتور جاوا اسکرپیت مسدود می کنند. با این تعاریف، جاوا اسکریپت های درون خطی می توانند رندر اولیه صفحه را به طور قابل توجهی به تأخیر بیاندازند.

اما جاوا اسکریپت امکان دستکاری مشخصات کدهای CSS را هم فراهم می کند. بنابراین مرورگر ناچار است فرآیند اجرای کدها را تا دانلود و ساخت CSSOM متوقف کند. اما برای بهینه سازی کدهای جاوا اسکریپت و خرج کردن آنها از حالت Blocking می توانید اقدامات زیر را انجام دهید:

• لود کردن جاوا اسکریپت به صورت غیرهمزمان (asynchronous): خاصیت بولین مربوط async در تگ های اسکریپت ها، به مرورگر می گوید که در صورت امکان، اسکریپت ها را بدون مسدودسازی باز و به صورت نا همزمان اجرا کند. با این کار مرورگر درخواست HTTP را برای اسکریپت ارسال می کند و پارس کردن DOM را فوراً ادامه می دهد.
• عقب انداختن جاوا اسکریپت: خاصیت بولین Defer به مرورگر می گوید که کدهای جاوا اسکریپت را بعد از پارس کردن سند و قبل از DOMContentLoaded اجرا کند. دقت کنید که اگر خاصیت src وجود ندارد، نباید از این خاصیت استفاده کنید.
• به تعویق انداختن جاوا اسکریپت درون خطی: بسیاری از اسکریپت ها با DOM یا CSSOM کاری ندارند. بنابراین دلیلی وجود ندارد که بخواهند فرآیند پارسینگ را متوقف کنند. از طرفی نمی توانیم خاصیت های async و defer را به صورت درون خطی بنویسیم. بنابراین تنها راه لود کردن آنها بعد از دانلود سند، انتقال آنها به قسمت های پایین است.

بهینه سازی مسیر Critical Rendering در وردپرس با افزونه ها

در وب سایت های وردپرسی این فرصت فوق العاده وجود دارد که بهینه سازی مسیر Critical Rendering در وردپرس را به کمک افزونه ها انجام دهیم. افزونه های متعددی برای این کار در دسترس هستند. می توانید فقط از یکی از آنها استفاده کنید و یا از چند افزونه به صورت همزمان استفاده کنید. در ادامه به 3 تا از بهترین افزونه ها برای بهینه سازی مسیر وردپرس اشاره می کنیم. در واقع با استفاده از یک و یا چند تا از این افزونه ها، تمام قوانینی که در بالا برای بهینه سازی مسیرCritical Rendering  گفتیم، پوشش داده می شوند.

1) افزونه W3 Total Cache

این افزونه تقریباً تمام مراحل فرآیند بهینه سازی Critical Rendering Path را پوشش می دهد. مهمترین قابلیت های این افزونه عبارتند از:

• کش کردن HTML (نوشته ها و برگه ها)، CSS و جاوا اسکریپت در حافظه دیسک یا CDN
• کش کردن نتایج جست و جو، اشیای پایگاه داده و اشیای وردپرس
• کوچک سازی HTML (نوشته ها و برگه ها)
• کوچک سازی جاوا اسکریپت و CSS
• بهینه سازی جاوا اسکریپت با خاصیت های async و defer
• کش کردن مرورگر با استفاده از cache-control، هدرهای منقضی شده و تگ های موجودیت
• فشرده سازی HTTP (فشرده سازی GZIP)
• نمایش نتایج ابزار تست سرعت Google PageSpeed در داشبورد وردپرس
• و … .

2) افزونه WP Super Cache

یکی دیگر از افزونه های محبوب برای بهینه سازی مسیرCritical Rendering  در وردپرس، WP Super Cache است. این افزونه به اندازه W3 Total Cache جامع و کامل نیست؛ اما برای کاربران تازه کار مناسب تر است.

WP Super Cache  شامل قابلیت های کش کردن و فشرده سازی HTTP است؛ اما قابلیت های کوچک سازی منابع و بهینه سازی جاوا اسکریپت با خاصیت های defer و async در این افزونه در دسترس نیست. اما در هر حال این پلاگین دارای بیش از یک میلیون نصب فعال است و ارزش استفاده را دارد.

3) افزونه Autoptimize

این پلاگین نیز با بیش از یک میلیون نصب فعال، جزو محبوب ترین افزونه ها برای بهینه سازی مسیر Critical Rendering در وردپرس است. در این افزونه یک صفحه برای گزینه های مختلف داریم که به چند بخش تقسیم شده است. در این صفحه مدیر سایت می تواند به صورت جدا HTML، CSS و جاوا اسکریپت را پیکربندی کند. علاوه بر این می توانید منابع کوچک شده را روی یک دیسک و یا روی CDN به عنوان فایل های ثابت کش کنید.

 4) افزونه Swift Performance

این افزونه نیز یکی دیگر از افزونه هایی است که می تواند عملکرد رضایت بخشی را در بهینه سازی مسیر Critical Rendering در اختیارتان قرار دهد. این افزونه هم برای کاربران حرفه ای و برای رسیدن به بالاترین نمره در تست سرعت وب سایت است. بعضی از مهمترین ویژگی های این افزونه عبارتند از:

• کوچک سازی و ترکیب فایل های CSS و جاوا اسکریپت و ایجاد CSS ضروری برای صفحات وب
• قابلیت های کشینگ هوشمند؛ مانند درخواست های پویایی مثل AJAX
• فشرده سازی تصاویر بدون افت کیفیت
• پشتیبانی از CDN

جمع بندی

بهینه سازی مسیر Critical Rendering در وردپرس یکی از برترین اقداماتی است که می توانید در جهت بهینه سازی سایت و افزایش سرعت بارگزاری سایت انجام دهید. این بهینه سازی شامل قواعد گوناگونی است که در این مطلب با هم مرور کردیم. خوشخبتانه در وب سایت های وردپرسی می توانیم به کمک افزونه هایی که با این هدف طراحی شده اند، مانند 5 افزونه ای که بالاتر با هم دیدیم، تمامی قوانین و قواعد بهینه سازی مسیر  Rendering در وردپرس را فراهم کنیم. امیدواریم این مطلب از ژاکت برایتان مفید بوده باشد.