بهینه سازی عملکرد وب سایت با Critical Rendering Path

Critical Rendering Path فرآیند ترجمه پاسخ سرور به تصویری است که مرورگر هنگام بازدید کاربر از یک وب سایت “نقاشی” می کند. عملکرد رندر بد می تواند به نرخ پرش نسبتاً بالا تبدیل شود. پاسخ‌های سرور متفاوتی وجود دارد که تعیین می‌کند یک صفحه خوانده شود یا نه. در این مقاله، ما بر روی رندر اولیه صفحه وب تمرکز می کنیم که با تجزیه HTML شروع می شود. به شرطی که مرورگر با موفقیت HTML را به عنوان پاسخ سرور دریافت کرده باشد. همچنین مواردی را که می‌توانند به زمان‌های رندر بالا منجر شوند و نحوه رفع آن‌ها را بررسی می‌کنیم. نکات این مقاله هنگام طراحی سایت باید در نظر گرفته شود.

Critical Rendering Path چیست؟

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

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

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

اگر اسکریپت باشد، مرورگر باید: تجزیه را متوقف کند. اسکریپت را دانلود کرده و اجرا کند. تنها پس از آن می‌تواند تجزیه را ادامه دهد، زیرا برنامه‌های جاوا اسکریپت می‌توانند محتویات یک صفحه وب (به ویژه HTML) را تغییر دهند. و به همین دلیل است که JS را مسدود کننده تجزیه کردن می نامند.

هنگامی که تمام تجزیه انجام شد، مرورگر مدل شیء سند (DOM) و مدل شیء برگه‌های سبک آبشاری (CSSOM) را ساخته است. ترکیب آنها با هم درخت رندر را می‌سازد. بخش‌های نمایش داده نشده صفحه به درخت رندر نمی‌رسند. زیرا Critical Rendering Path فقط حاوی داده‌ های لازم برای ترسیم صفحه است.

مرحله ماقبل آخر ترجمه Render Tree به Layout است. به این مرحله Reflow نیز می گویند. اینجاست که هر موقعیت گره درخت Critical Rendering Path و همچنین اندازه آن محاسبه می شود.

در نهایت آخرین مرحله Paint است. این شامل رنگ آمیزی واقعی پیکسل ها بر اساس داده هایی است که مرورگر در مراحل قبلی محاسبه کرده است.

نتیجه گیری های مرتبط با بهینه سازی Critical Rendering Path

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

• مقدار داده ای که باید در Critical Rendering Path منتقل شود
• تعداد منابعی که مرورگر باید دانلود کند (مخصوصاً منابع مسدودکننده)
• طول CRP

نحوه اندازه گیری عملکرد Critical Rendering Path

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

• اولین رنگ
• نخستین رنگ محتوایی
• اولین رنگ معنی دار

“Paint” به معنای رندر موفقیت آمیز یک صفحه، آخرین مرحله در Critical Rendering Path است. ممکن است چند رندر یکی پس از دیگری اتفاق بیفتد. زیرا مرورگرها سعی می‌کنند چیزی را در اسرع وقت نشان دهند و بعداً به‌ روز رسانی کنند. علاوه بر زمان رندر، موارد دیگری نیز وجود دارد که باید در نظر گرفته شوند. از همه مهمتر، تعداد منابع مسدود کننده استفاده شده و مدت زمان دانلود آنها است. این اطلاعات پس از انجام اندازه گیری ها در تب Performance یافت می شود.

استراتژی هایی برای بهینه سازی عملکرد Critical Rendering Path

با توجه به آنچه در بالا آموختیم، سه استراتژی اصلی برای بهینه سازی عملکرد وب سایت وجود دارد.

1. به حداقل رساندن مقدار داده ای که باید از طریق سیم منتقل شود.
2. کاهش تعداد کل منابعی که باید از طریق سیم منتقل شوند.
3. کوتاه کردن Critical Rendering Path.

1. مقدار داده هایی که باید منتقل شوند را به حداقل برسانید.

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

پس از انجام این کار، آنچه برای ما باقی می ماند می تواند به صورت متن باشد. این بدان معنی است که ما می توانیم با خیال راحت یک الگوریتم فشرده سازی مانند GZIP (که اکثر مرورگرها آن را درک می کنند) اعمال کنیم. در نهایت، قضیه کش وجود دارد. cache اولین باری که مرورگر صفحه را رندر می کند کمکی نمی کند، اما در بازدیدهای بعدی بسیار در زمان و حجم اینترنت شما، صرفه جویی می کند. با این حال، مهم است که دو چیز را در نظر داشته باشید.

1. اگر از CDN استفاده می کنید، مطمئن شوید که کش پشتیبانی می شود و پشتیبانی آن به درستی در آنجا تنظیم شده است.
2. به جای اینکه منتظر بمانید تا تاریخ انقضای منابع فرا برسد، ممکن است بخواهید راهی برای به روز رسانی زودتر آن از طرف خود داشته باشید. «اثر انگشت» فایل‌ها را در آدرس‌های اینترنتی آن‌ها جاسازی کنید تا بتوانید حافظه پنهان محلی را باطل کنید.

البته، سیاست های کش باید به ازای هر منبع تعریف شود. برخی ممکن است به ندرت تغییر کنند یا اصلاً تغییر نکنند. بقیه سایت ها سریعتر در حال تغییر هستند. برخی حاوی اطلاعات حساس هستند، برخی دیگر را می توان عمومی در نظر گرفت. از دستورالعمل “خصوصی” استفاده کنید تا CDN ها را با ذخیره اطلاعات خصوصی در حافظه پنهان نگه دارید.

ساخت سایت

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

2. تعداد کل منابع حیاتی را در Critical Rendering Path کاهش دهید

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

Stylesheets در Critical Rendering Path

برای اینکه به مرورگر بگوییم که فایل‌های CSS خاصی مورد نیاز نیست، باید ویژگی‌ های رسانه را برای همه لینک هایی که به شیوه نامه‌ها یا Stylesheets ارجاع می‌دهند تنظیم کنیم. با این رویکرد، مرورگر فقط منابعی را که با رسانه فعلی یعنی نوع دستگاه و اندازه صفحه نمایش مطابقت دارند، در صورت لزوم در نظر می‌گیرد. در حالی که اولویت همه شیوه‌ نامه‌ های دیگر را کاهش می‌دهد! به هر حال آنها پردازش خواهند شد، اما نه به عنوان بخشی از Critical Rendering Path. به عنوان مثال، اگر مشخصه media=print را به تگ سبک اضافه کنید که به سبک های چاپ صفحه ارجاع می دهد، این سبک ها در مسیر رندر مهم شما در زمانی که رسانه چاپ نمی شود (یعنی هنگام نمایش صفحه) تداخلی ایجاد نمی کند.

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

ساخت سایت

اسکریپت ها

همانطور که در بالا ذکر شد، اسکریپت ها مسدود کننده تجزیه کننده هستند زیرا می توانند DOM و CSSOM را تغییر دهند. بنابراین، اسکریپت هایی که آنها را تغییر نمی دهند، نباید تجزیه بلوک شوند. در نتیجه در وقت ما صرفه جویی می شود. برای پیاده‌ سازی آن، همه تگ‌های اسکریپت باید با ویژگی‌هایی علامت‌ گذاری شوند. اعم از async یا defer. اسکریپت هایی که با async علامت گذاری شده اند، ساخت DOM یا CSSOM را مسدود نمی کنند، زیرا می توانند قبل از ساخته شدن CSSOM اجرا شوند. البته به خاطر داشته باشید که اسکریپت های درون خطی به هر حال CSSOM را مسدود می کنند مگر اینکه آنها را بالای CSS قرار دهید.

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

3. طول Critical Rendering Path را کوتاه کنید

در نهایت، طول CRP باید تا جای ممکن کوتاه شود. تا حدودی، رویکرد هایی که در بالا توضیح داده شد این کار را انجام خواهند داد. پرس و جوهای رسانه ای به عنوان ویژگی برای تگ های سبک، تعداد کل منابعی را که باید دانلود شوند کاهش می دهد. ویژگی‌های تگ اسکریپت defer و async مانع از مسدود کردن اسکریپت‌های مربوطه در تجزیه می‌شوند. کوچک سازی، فشرده سازی و بایگانی منابع با GZIP اندازه داده های منتقل شده را کاهش می دهد. در نتیجه زمان انتقال داده را نیز کاهش می دهد. داخل کردن برخی از سبک ها و اسکریپت ها می تواند تعداد رفت و برگشت بین مرورگر و سرور را کاهش دهد.

چیزی که ما هنوز در مورد آن صحبت نکرده ایم گزینه تنظیم مجدد کد در بین فایل ها است. طبق آخرین ایده بهترین عملکرد Critical Rendering Path، اولین کاری که یک وب سایت باید انجام دهد تا سریع تر لود شود، نمایش محتوای ATF است. ATF مخفف عبارت above the fold است. این ناحیه ای است که بلافاصله و بدون پیمایش قابل مشاهده است. بنابراین، بهتر است هر چیزی مربوط به رندر کردن آن را به گونه‌ای تنظیم کنید که ابتدا استایل‌ها و اسکریپت‌های مورد نیاز بارگذاری شوند تا همه چیز متوقف شود. نه تجزیه و نه رندر. و همیشه به یاد داشته باشید که قبل و بعد از تغییر را اندازه بگیرید.

نتیجه گیری بهینه سازی Critical Rendering Path

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

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

علاوه بر این، سعی کنید به‌روزرسانی‌ها را به صورت دسته‌ای در HTML انجام دهید تا از رویدادهای طرح‌ بندی متعدد جلوگیری کنید، که نه تنها با تغییر در DOM یا CSSOM بلکه با تغییر جهت دستگاه و تغییر اندازه پنجره نیز ایجاد می‌شوند.

ساخت سایت