بارگذاری فوری را با الگوی PRPL اعمال کنید

Houssein Djirdeh

PRPL مخفف است که الگویی را توصیف می کند که برای بارگیری و تعامل سریعتر صفحات وب استفاده می شود:

• منابع دیر کشف شده را از قبل بارگذاری کنید .
• مسیر اولیه را در اسرع وقت رندر کنید .
• دارایی های باقیمانده از پیش کش
• بار تنبلی مسیرهای دیگر و دارایی های غیر بحرانی.

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

صفحه خود را با Lighthouse حسابرسی کنید

Lighthouse را اجرا کنید تا فرصت های بهبود را با تکنیک های PRPL شناسایی کنید:

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

برای اطلاعات بیشتر، به کشف فرصت‌های عملکرد با Lighthouse مراجعه کنید.

از پیش بارگیری منابع حیاتی

Lighthouse ممیزی ناموفق زیر را نشان می دهد اگر منبع خاصی تجزیه و تحلیل شود و دیر واکشی شود:

Preload یک درخواست واکشی اعلامی است که به مرورگر می‌گوید منبعی را درخواست کند که در غیر این صورت توسط اسکنر پیش‌بارگیری مرورگر قابل کشف نیست، مانند تصویری که توسط ویژگی background-image ارجاع داده می‌شود. با افزودن یک تگ <link> با rel="preload" به سر سند HTML خود، منابعی را که دیر کشف شده اند، از قبل بارگیری کنید:

<link rel="preload" as="image" href="hero-image.jpg">

افزودن یک دستورالعمل <link rel="preload"> درخواستی را برای آن منبع آغاز می کند و آن را در حافظه پنهان ذخیره می کند. سپس مرورگر می تواند در صورت نیاز آن را بازیابی کند.

برای اطلاعات بیشتر در مورد پیش بارگیری منابع حیاتی، به راهنمای دارایی های حیاتی Preload مراجعه کنید.

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

Lighthouse در صورت وجود منابعی که First Paint را به تأخیر می اندازد، هشدار می دهد، لحظه ای که سایت شما پیکسل ها را روی صفحه نمایش می دهد:

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

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

هیچ راه حل صحیح واحدی برای کاهش First Paint در برنامه شما وجود ندارد، و فقط در صورتی باید سبک های درون خطی و رندر سمت سرور را در نظر بگیرید که مزایای آن بیشتر از معاوضه برای برنامه شما باشد. با منابع زیر می توانید در مورد هر دوی این مفاهیم بیشتر بدانید.

• تحویل CSS را بهینه کنید
• رندر سمت سرور چیست؟

دارایی های پیش کش

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

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

بار تنبل

اگر داده های زیادی را از طریق شبکه ارسال کنید، Lighthouse یک ممیزی ناموفق را نشان می دهد.

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

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

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

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

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

مراحل بعدی

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

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

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