بارگذاری سریع صفحات وب با الگوی PRPL

بهینه سازی بارگذاری اولیه و افزایش سرعت سایت با مدل PRPL (پیش بارگذاری منابع حیاتی ، تعویق منابع غیرضروری – کش کردن و کاهش تعداد درخواست ها)

بارگذاری سریع صفحات وب با الگوی PRPL

مقدمه‌ای بر PRPL

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

الگوی PRPL بر چهار جنبه اصلی تمرکز دارد:

  • Push :ارسال کارآمد منابع حیاتی، که میزان رفت و برگشت به سرور را به حداقل می رساند.
  • Render: رندر اولیه در اسرع وقت برای بهبود تجربه کاربری.
  • Pre-cache: کش کردن دارایی‌های پربازدید در پس‌زمینه برای به حداقل رساندن میزان درخواست‌ها به سرور و ایجاد تجربه آفلاین بهتر.
  • Lazy-load: بارگیری تنبل دارایی‌هایی که فعلا مورد نیاز نیستند و به دفعات درخواست نمی شوند.

مثالی از یک درخواست ساده برای یک صفحه وب

وقتی می‌خواهیم از یک وب‌سایت بازدید کنیم، مرورگر ابتدا درخواست ما را به سرور ارسال می‌کند. سپس فایلی که نقطه ورودی سایت است از سرور بازگردانده می شود، که معمولاً یک فایل HTML است! تجزیه کننده HTML مرورگر به محض دریافت از سرور شروع به تجزیه این داده ها می کند. اگر تجزیه کننده متوجه شود که به منابع بیشتری مانند شیوه نامه ها یا اسکریپت ها نیاز است، درخواست HTTP دیگری ارسال می شود!

فرایند درخواست یک صفحه وب از سرور و بارگذاری سایر منابع مورد نیاز از طریق درخواست مجدد

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

بازبینی صفحه با Lighthouse

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

  • در مروگر کروم «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  • روی تب Lighthouse کلیک کنید.
  • چک باکس های Performance و Progressive Web App را انتخاب کنید.
  • برای ایجاد گزارش روی Run Audits یا Generate Report کلیک کنید.

پیش بارگذاری منابع حیاتی در PRPL

اگر منابع خاصی از صفحه شما (منابع حیاتی) دیر واکشی شده و منجر به کند شدن فرایند بارگذاری شود. در گزارش Lighthouse در بخش Preload key Request منبع مورد نظر را مشخص می‌کند.

پیش بارگذاری منابع حیاتی - بارگذاری سریع صفحات وب با الگوی PRPL

در مدل PRPL برای واکشی سریعتر منابع بحرانی صفحه می‌توانید از اعلان Preload استفاده کنید. برای این کار کافی است منبع مورد نظر را به همراه rel="preload" به صورت زیر به تگ <head> خود اضافه کنید.

<link rel="preload" as="style" href="css/style.css">

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

رندر اولیه در اسرع وقت

در گزارش Lighthouse منابعی که باعث به تاخیر افتادن رندر اولیه می‌شوند در بخش eliminate render-blocking resources مشخص می‌شوند، در واقع این منابع باعث طولانی تر شدن First Paint می‌شوند.

رندر اولیه در اسرع وقت - بارگذاری سریع صفحات وب با الگوی PRPL

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

در الگوی PRPL روش دیگر برای بهبود First Paint این است که HTML اولیه صفحه خود را در سمت سرور رندر کنید و بلافاصله محتوا را به کاربر نمایش می دهد. با این حال، این کار می تواند حجم فایل HTML را به میزان قابل توجهی افزایش دهد، که می تواند به Time to Interactive(زمانی که طول می کشد تا برنامه شما تعاملی شود و بتواند به ورودی کاربر پاسخ دهد) آسیب برساند.برای درک بهتر موضوع منابع زیر می‌تواند به شما کمک کند:

کش کردن زود هنگام دارایی‌ها

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

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

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

کش کردن دارایی‌ها برای جلوگیری از درخواست‌های مکرر

بارگذاری تنبل در الگوی PRPL

اگر حجم درخواست‌های شبکه و داده منتقل شده در بارگذاری صفحه از حد خاصی بگذرد در گزارش لایت‌هاوس هشدار has enormous network payload نمایش داده خواهد شد.

<!-- wp:heading -->
<h2 id="lazy-load">بارگذاری تنبل در الگوی PRPL</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>اگر حجم درخواست‌های شبکه و داده منتقل شده در بارگذاری صفحه از حد خاصی بگذرد در گزارش لایت‌هاوس هشدار  has enormous network payload نمایش داده خواهد شد.</p>
<!-- /wp:paragraph -->

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

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

برای ارسال بسته‌های کوچکتر جاوا اسکریپت که تنها حاوی کد مورد نیاز بارگذاری اولیه صفحه برای جلوگیری از render-blocking است. بسته را به چند قسمت کوچکتر تقسیم و سایر قسمت های غیر بحرانی را با استفاده از بارگذاری تنبل لود کنید.

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

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

هشدار بارگذاری تنبل تصاویر غیر بحرانی - مدل PRPL

اگر تصاویر زیادی را در صفحه خود بارگذاری می کنید، تمام مواردی که در زیر صفحه یا خارج از viewport هستند را به صورت تنبل بارگذاری کنید (به مقاله بارگذاری تنبل تصاویر مراجعه کنید).

سخن آخر

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.